feat(ui5-segmented-button): add api which controls items width behavior #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
packages/main/src/SegmentedButton.ts
Outdated
| return SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIPTION); | ||
| } | ||
|
|
||
| get contentModeClass() { |
There was a problem hiding this comment.
Move this to the template. Use object in the class.
| <ul | ||
| role="listbox" | ||
| class="ui5-segmented-button-root" | ||
| class={`ui5-segmented-button-root ${this.contentModeClass}`} |
There was a problem hiding this comment.
do object with the getter
There was a problem hiding this comment.
Eventually provide additional detail for the commit header. In either case, at least change "behaviour" (British ENG) to "behavior" (US ENG).
feat(ui5-segmented-button): add contentMode property to control the item width behavior
In either case, at least change "behaviour" to "behavior" (US Spelling).
packages/main/src/SegmentedButton.ts
Outdated
| * Defines the content mode of the segmented button items. | ||
| * | ||
| * - "EqualSized": All items are sized equally to fill the available space. | ||
| * - "ContentFit": Each item fits its content and extra space is after the last item. |
There was a problem hiding this comment.
Please consider:
-
- "ContentFit": Each item is sized to fit its content, with any extra space placed after the last item.
| */ | ||
| enum SegmentedButtonContentMode { | ||
| /** | ||
| * Each item fits its content and extra space is placed after the last item. |
There was a problem hiding this comment.
Please consider:
- Each item is sized to fit its content, with any extra space placed after the last item.
GDamyanov
changed the title
5 participants
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.