feat(overflow-items): added wrap mode & upd examples (#DS-3381)#1385
Open
feat(overflow-items): added wrap mode & upd examples (#DS-3381)#1385
Conversation
|
Visit the preview URL for this PR (updated for commit d2f99b0): https://koobiq-next--prs-1385-w35uhi1u.web.app (expires Mon, 09 Mar 2026 14:07:48 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
artembelik
reviewed
Mar 3, 2026
packages/components/overflow-items/overflow-items.karma-spec.ts
Outdated
Show resolved
Hide resolved
artembelik
reviewed
Mar 3, 2026
packages/components/overflow-items/overflow-items.karma-spec.ts
Outdated
Show resolved
Hide resolved
artembelik
reviewed
Mar 3, 2026
packages/components/overflow-items/overflow-items.karma-spec.ts
Outdated
Show resolved
Hide resolved
artembelik
reviewed
Mar 3, 2026
artembelik
reviewed
Mar 3, 2026
packages/components/overflow-items/overflow-items.karma-spec.ts
Outdated
Show resolved
Hide resolved
artembelik
reviewed
Mar 3, 2026
...ents/overflow-items/overflow-items-as-clamped-list/overflow-items-as-clamped-list-example.ts
Show resolved
Hide resolved
- Extract KbqFlexDirection and KbqFlexWrap shared types to core/common-behaviors/flex.ts - Use KbqFlexWrap/KbqFlexDirection in overflow-items instead of inline string unions - Rework clamped-list example: replace expand/collapse logic with a tooltip showing hidden items - Enable overflow-items examples in docs structure - Simplify karma specs with hardcoded container sizes and clarifying comments - Update public API golden files
artembelik
approved these changes
Mar 4, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Adds flex-wrap (“wrap”/“nowrap”) support to KbqOverflowItems, and updates docs/examples so the component’s examples are now enabled in the docs app.
Changes:
- Added
wrapinput toKbqOverflowItemsand introduced shared core typesKbqFlexWrap/KbqFlexDirection. - Extended Karma specs to cover wrap behavior in both horizontal and vertical orientations.
- Added a new “Overflow items as clamped list” docs example and enabled examples for the Overflow Items docs page.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| tools/public_api_guard/components/overflow-items.api.md | Public API snapshot updated for new wrap input. |
| tools/public_api_guard/components/core.api.md | Public API snapshot updated for new flex types. |
| packages/components/core/common-behaviors/index.ts | Re-export flex types from common behaviors. |
| packages/components/core/common-behaviors/flex.ts | New shared flex union types (KbqFlexWrap, KbqFlexDirection). |
| packages/components/overflow-items/overflow-items.ts | Implements wrap input and wrap-aware overflow calculation. |
| packages/components/overflow-items/overflow-items.karma-spec.ts | Adds wrap-related test coverage. |
| packages/docs-examples/components/overflow-items/overflow-items-as-clamped-list/overflow-items-as-clamped-list-example.ts | New docs example demonstrating wrapping/clamped list behavior. |
| packages/docs-examples/components/overflow-items/index.ts | Registers the new example in the examples module. |
| packages/docs-examples/example-module.ts | Registers example metadata and lazy-load routing entry. |
| packages/components/overflow-items/examples.overflow-items.en.md | Switches examples page to render the new example. |
| packages/components/overflow-items/examples.overflow-items.ru.md | Switches examples page to render the new example. |
| packages/components-dev/overflow-items/module.ts | Adds the new example to the dev showcase page. |
| apps/docs/src/app/structure.ts | Enables examples for the Overflow Items docs section. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...ents/overflow-items/overflow-items-as-clamped-list/overflow-items-as-clamped-list-example.ts
Outdated
Show resolved
Hide resolved
...ents/overflow-items/overflow-items-as-clamped-list/overflow-items-as-clamped-list-example.ts
Outdated
Show resolved
Hide resolved
...ents/overflow-items/overflow-items-as-clamped-list/overflow-items-as-clamped-list-example.ts
Show resolved
Hide resolved
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.