Skip to content

feat(ui5-toolbar-item): introduce overflowed CSS custom state#13157

Merged
nnaydenow merged 3 commits intomainfrom
feat/toolbar-item-is-overflowed-state
Feb 26, 2026
Merged

feat(ui5-toolbar-item): introduce overflowed CSS custom state#13157
nnaydenow merged 3 commits intomainfrom
feat/toolbar-item-is-overflowed-state

Conversation

@dobrinyonkov
Copy link
Contributor

Add CSS custom state that allows styling toolbar items differently when they are in the overflow popover. The state is managed via the existing isOverflowed property using ElementInternals.states.

  • Add getter/setter for isOverflowed to manage the custom state
  • Document the CSS custom state in class JSDoc
  • Add test sample and Cypress test

@ui5-webcomponents-bot
Copy link
Collaborator

ui5-webcomponents-bot commented Feb 26, 2026

🧹 Preview deployment cleaned up: https://pr-13157--ui5-webcomponents.netlify.app

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 26, 2026 10:41 Inactive
@dobrinyonkov dobrinyonkov force-pushed the feat/toolbar-item-is-overflowed-state branch from a542b49 to b3f7ea5 Compare February 26, 2026 11:59
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 26, 2026 12:06 Inactive
@dobrinyonkov dobrinyonkov force-pushed the feat/toolbar-item-is-overflowed-state branch from b3f7ea5 to 3414ea8 Compare February 26, 2026 12:33
Add CSS custom state that allows styling toolbar items differently
when they are in the overflow popover. The state is managed via
the existing isOverflowed property using ElementInternals.states.

- Add getter/setter for isOverflowed to manage the custom state
- Document the CSS custom state in class JSDoc
- Add test sample and Cypress test
@dobrinyonkov dobrinyonkov force-pushed the feat/toolbar-item-is-overflowed-state branch from 3414ea8 to d44a34b Compare February 26, 2026 12:35
Copy link
Contributor

@nnaydenow nnaydenow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you also extend the sample in:
packages/website/docs/_samples/main/Toolbar/ToolbarItem

Also could you change the table from horizontal to vertical because it looks broken or to switch it to text:
Image

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 26, 2026 12:42 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 26, 2026 13:21 Inactive
@nnaydenow nnaydenow changed the title feat(ui5-toolbar-item): expose :state(overflowed) CSS custom state feat(ui5-toolbar-item): introduce overflowed CSS custom state Feb 26, 2026
@nnaydenow nnaydenow merged commit 33dda9e into main Feb 26, 2026
14 checks passed
@nnaydenow nnaydenow deleted the feat/toolbar-item-is-overflowed-state branch February 26, 2026 14:25
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 26, 2026 14:25 Inactive
@ilhan007
Copy link
Contributor

ilhan007 commented Mar 7, 2026

🎉 This issue has been resolved in version v2.20.0-rc.3 🎉

The release is available on v2.20.0-rc.3

Your semantic-release bot 📦🚀

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.

4 participants