feat(ui5-segmented-button): add api which controls items width behaviour #12415
Conversation
|
🚀 Deployed on https://pr-12415--ui5-webcomponents-preview.netlify.app |
GDamyanov
changed the title
GDamyanov
changed the title
GDamyanov
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new contentMode property for the ui5-segmented-button component that controls how button items are sized. The feature allows developers to choose between equal-sized items (default) or content-fitting items where each button sizes to its content.
- Adds
SegmentedButtonContentModeenum withEqualSizedandContentFitoptions - Implements CSS classes and styling for both sizing modes
- Enhances tooltip behavior to show text content when no explicit tooltip is provided
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
SegmentedButtonContentMode.ts |
Defines the new enum for content mode values |
SegmentedButton.ts |
Adds contentMode property and implements the sizing logic |
SegmentedButton.css |
Adds CSS classes for different content modes |
SegmentedButtonTemplate.tsx |
Updates template to use dynamic CSS class |
SegmentedButtonItem.ts |
Adds slotTextContent getter for tooltip fallback |
SegmentedButtonItemTemplate.tsx |
Updates tooltip to fallback to text content |
SegmentedButton.html |
Adds test page examples for the new feature |
SegmentedButton.cy.tsx |
Adds Cypress tests for content mode behavior |
| if (this.contentMode === SegmentedButtonContentMode.EqualSized) { | ||
| this.style.setProperty(getScopedVarName("--_ui5_segmented_btn_items_count"), `${visibleItems.length}`); | ||
| } | ||
| } |
There was a problem hiding this comment.
Missing closing brace for the if statement. The code block should be properly closed.
Copilot uses AI. Check for mistakes.
Co-authored-by: Copilot <[email protected]>
Sample added in 81f7845 |
…ebcomponents into segmented-button-width-poc
This PR introduces the new
contentModeproperty for the ui5-segmented-button component, allowing developers to control how segmented button items are sized:The change improves flexibility for use cases where item content varies in length and equal sizing is not desirable.