feat(ui5-toolbar): add overflow-group property for atomic group overflow - #13949
Open
dobrinyonkov wants to merge 7 commits into
Open
feat(ui5-toolbar): add overflow-group property for atomic group overflow#13949dobrinyonkov wants to merge 7 commits into
dobrinyonkov wants to merge 7 commits into
Conversation
Introduce a free-form 'overflowGroup' string property on ToolbarItemBase. Items sharing the same non-empty group overflow as one atomic unit: either all visible in the bar, or all in the overflow popover, never split. The visible bar always preserves slot order; group members become adjacent only inside the popover. - ToolbarItemBase: new @Property() 'overflowGroup' (default ''). - Toolbar.distributeItems: bucket movable items into 'distribution units' before iterating right-to-left. Each unit is either a single ungrouped item or a group of items sharing a non-empty overflowGroup, ordered by the rightmost member's slot index. Atomic group push is allowed to over-shoot the recovered-width target (per ADR-0001). - Toolbar.onInvalidation: re-distribute when the per-child grouping signature changes, not only when itemsWidth changes. - Six new Cypress tests in Toolbar.cy.tsx covering contiguous overflow, non-contiguous overflow, resize round-trip, reverseOverflow popover order, runtime overflowGroup change, and slot-order preservation. - New dev sample at packages/main/test/pages/ToolbarOverflowGroup.html demonstrating all four scenarios. Default behavior for overflowGroup='' is unchanged; minContentWidth calculation is unchanged. Refs: docs/adr/0001-toolbar-overflow-group.md
Surface developer mistakes in `overflowGroup` configuration with one-shot `console.warn` messages and keep the toolbar's overflow algorithm tolerant of the violations: - A grouped item with `overflowPriority` set to `AlwaysOverflow` or `NeverOverflow` violates ADR-0001. The new `ToolbarItemBase.effectiveOverflowPriority` getter emits a one-shot warning naming the element and downgrades the priority to `Default` for the layout pass; the group continues to overflow atomically. - A `ui5-toolbar-spacer` with a non-empty `overflowGroup` cannot participate in grouping. The new `effectiveOverflowGroup` getter emits a one-shot warning and returns `""` so the spacer is not yoked to the group; its existing overflow behavior is unchanged. `Toolbar` now consults these effective getters in `alwaysOverflowItems`, `movableItems`, the `minContentWidth` calculation, and `buildDistributionUnits`. Warnings are suppressed across re-renders via per-instance flags, consistent with `ToolbarItem.checkForWrapper`. JSDoc on `overflowGroup` now lists both restrictions explicitly.
Address code-review feedback on the validation-warnings change: - Add a test for the canonical case — a default `ui5-toolbar-spacer` (no width, default priority) with a non-empty `overflow-group` — and assert the spacer-rule warning still fires. The previous coverage only exercised a fixed-width spacer, leaving the more common flex case implicit. - Drop redundant double parentheses around `($tb[0] as Toolbar)` casts before `.onResize()` calls.
Add a documentation-website sample under `_samples/main/Toolbar/GroupedOverflow/` demonstrating the `overflow-group` property on `ui5-toolbar`. A "Filter:" label-button and its sibling `ui5-toolbar-select` share `overflow-group="filters"` so they overflow into the popover together. The toolbar is constrained to 320px so the group cannot fit alongside the ungrouped Add/Reject buttons — both group members move into the overflow popover atomically, while the ungrouped items stay in the bar. The teaching comment describes this static end-state honestly (no responsive narration). Wires the sample into the Toolbar docs page under "More Samples".
Saving scratch notes, docs, and validation test page from toolbar-overflow-group work in progress.
dobrinyonkov
changed the title
dobrinyonkov
changed the title
|
🚀 Deployed on https://pr-13949--ui5-webcomponents-preview.netlify.app |
👋 Heads-up: dev close is in effectThanks for the contribution! This repository is currently in dev close ahead of release This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):
Could you please hold off on merging into If this change must ship in the current release, please request a review from one or two members of @UI5/ui5-team-webc so the team can sign off explicitly.
Posted automatically by the Dev Close Notice workflow. |
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
1 participant
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.
What this does
Adds an
overflowGroupproperty toToolbarItemBase. Items sharing the same non-empty string value overflow as one atomic unit — either all visible in the bar or all in the popover, never split.Items without a group keep the existing independent overflow behavior. Default is
""(no group).New API
ToolbarItemBase.overflowGroup: string(default"", attributeoverflow-group)Algorithm
Before iterating items right-to-left, the distribution algorithm buckets movable items into units. A unit is either a single ungrouped item or all members of a named group (keyed by the rightmost member's slot index, width = sum of member widths). The loop walks units atomically — pushing a group is allowed to over-shoot the reclaim target.
The visible bar always preserves source (slot) order. Group members become adjacent only inside the popover.
Validation warnings
Two invalid configurations emit a one-shot
console.warnper item and degrade gracefully:overflowPriorityset toAlwaysOverfloworNeverOverflow. Priority is treated asDefaultfor the layout pass; the group still overflows atomically.ui5-toolbar-spacerwith a non-emptyoverflowGroup. The spacer is excluded from the group and keeps its existing overflow behavior.Tests
13 new Cypress tests in
Toolbar.cy.tsxcover: contiguous overflow, non-contiguous overflow, resize round-trip, reverse-overflow popover order, runtimeoverflowGroupchange, slot-order preservation, atomic over-shoot, and all three validation-warning cases.Docs
New website sample under
_samples/main/Toolbar/GroupedOverflow/showing a label-button and select paired withoverflow-group="filters". Wired into the Toolbar docs page under "More Samples".