Skip to content

feat(ui5-toolbar-item): add shrink-content property - #13883

Open
NakataCode wants to merge 1 commit into
mainfrom
ui5-toolbar-item-shrink-content
Open

feat(ui5-toolbar-item): add shrink-content property#13883
NakataCode wants to merge 1 commit into
mainfrom
ui5-toolbar-item-shrink-content

Conversation

@NakataCode

Copy link
Copy Markdown
Contributor

Problem

When a ui5-toolbar-item with overflow-priority="NeverOverflow" contains wide content (e.g. a ui5-title with long text), it pushes other items — including the overflow button — completely out of view. This is because all toolbar item wrappers have flex-shrink: 0, so nothing yields space.

The spec clarifies that the toolbar has no built-in mechanism for long content in small viewports, and NeverOverflow only guarantees the item won't go to the popover — it makes no promise about layout when the item exceeds the container width. Titles are also intended to be short control-group labels per the Fiori spec, so automatic shrinking behavior would be surprising and could break existing layouts.

Solution

Add an opt-in shrink-content boolean property to ui5-toolbar-item. When set, the item's wrapper receives the existing .ui5-tb-self-overflow CSS class (flex-shrink: 1; flex-grow: 1; min-width: 2.5rem), allowing it to yield space to other items instead of pushing them out.

Implementation details

  • shrinkContent property on ToolbarItem — opt-in, default false
  • hasOverflow getter returns true when shrinkContent is set, hooking into the existing self-overflow CSS path with no new CSS required
  • clampMaxWidth getter added to ToolbarItemBase (returns true by default, following the existing behavioral flag pattern of hasOverflow, isSeparator, ignoreSpace etc.). Overridden in ToolbarItem to return !this.shrinkContent, preventing the max-width capping logic in addItemsAdditionalProperties from permanently freezing the item at its first-render width
  • shrinkContent items excluded from minWidth accumulation in storeItemsWidth — their rendered width is flex-distributed, not a stable natural width

Usage

<ui5-toolbar align-content="Start">
    <ui5-toolbar-item overflow-priority="NeverOverflow" shrink-content>
        <ui5-title wrapping-type="None">Long title that should yield space...</ui5-title>
    </ui5-toolbar-item>
    <ui5-toolbar-button text="Edit"></ui5-toolbar-button>
</ui5-toolbar>

Fixes #13768

@NakataCode
NakataCode temporarily deployed to netlify-preview July 31, 2026 12:52 — with GitHub Actions Inactive
@NakataCode
NakataCode requested review from PetyaMarkovaBogdanova and dobrinyonkov and removed request for dobrinyonkov July 31, 2026 12:56
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[SF][Toolbar]: Long text in the toolbar stretches to its full width and pushes the buttons out of view

1 participant