Skip to content

Commit d9f5ce3

Browse files
terezamchilhan007
terezamch
authored and
ilhan007
committed
feat(ui5-segmented-button-item): introduce new component to serve as child of SegmentedButton (#3258)
Introduce new component SegmentedButtonItem (ui5-segmentedbutton-item), meant to be used within the SegmentedButton (ui5-segmented-button) as a child, in order to implement a11y compliant DOM structure and attributes. The SegmentedButtonItem replaces the ToggleButton, previously used in the SegmentedButton. Fixes: #3191 Closes: #3191 BREAKING_CHANGE: `selectedButton` event detail of "selection-change" has been renamed to `selectedItem` BREAKING_CHANGE: SegmentedButton no longer accepts ToggleButton, you have to use the newly created component, called SegmentedButtonItem as follows: <ui5-segmentedbutton> <ui5-segmentedbutton-item pressed>One</ui5-segmentedbutton-item> <ui5-segmentedbutton-item>Two</ui5-segmentedbutton-item> <ui5-segmentedbutton-item>Three</ui5-segmentedbutton-item> </ui5-segmentedbutton>
1 parent 43991c2 commit d9f5ce3

11 files changed

+456
-223
lines changed

‎docs/Public Module Imports.md

+58-51
Original file line numberDiff line numberDiff line change
@@ -21,57 +21,64 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
2121

2222
### 1. Web Components
2323

24-
| Web Component | Tag name | Module import |
25-
| ------------------------ | -------------------- | ---------------------------------------------------------- |
26-
| Avatar | `ui5-avatar` | `import "@ui5/webcomponents/dist/Avatar.js";` |
27-
| Badge | `ui5-badge` | `import "@ui5/webcomponents/dist/Badge.js";` |
28-
| Busy Indicator | `ui5-busyindicator` | `import "@ui5/webcomponents/dist/BusyIndicator.js";` |
29-
| Button | `ui5-button` | `import "@ui5/webcomponents/dist/Button.js";` |
30-
| Card | `ui5-card` | `import "@ui5/webcomponents/dist/Card.js";` |
31-
| Carousel | `ui5-carousel` | `import "@ui5/webcomponents/dist/Carousel.js";` |
32-
| Checkbox | `ui5-checkbox` | `import "@ui5/webcomponents/dist/CheckBox.js";` |
33-
| Color Picker | `ui5-color-picker` | `import "@ui5/webcomponents/dist/ColorPicker.js";` |
34-
| Color Palette | `ui5-color-palette` | `import "@ui5/webcomponents/dist/ColorPalette.js";` |
35-
| Color Palette Item | `ui5-color-palette-item` | comes with `ui5-color-palette` |
36-
| ComboBox | `ui5-combobox` | `import "@ui5/webcomponents/dist/ComboBox.js";` |
37-
| ComboBox Item | `ui5-cb-item` | comes with `ui5-combobox` |
38-
| Date Picker | `ui5-date-picker` | `import "@ui5/webcomponents/dist/DatePicker.js";` |
39-
| Dialog | `ui5-dialog` | `import "@ui5/webcomponents/dist/Dialog.js";` |
40-
| File Uploader | `ui5-file-uploader` | `import "@ui5/webcomponents/dist/FileUploader.js";` |
41-
| Icon | `ui5-icon` | `import "@ui5/webcomponents/dist/Icon.js";` |
42-
| Input | `ui5-input` | `import "@ui5/webcomponents/dist/Input.js";` |
43-
| Label | `ui5-label` | `import "@ui5/webcomponents/dist/Label.js";` |
44-
| Link | `ui5-link` | `import "@ui5/webcomponents/dist/Link.js";` |
45-
| List | `ui5-list` | `import "@ui5/webcomponents/dist/List.js";` |
46-
| List - Standard Item | `ui5-li` | `import "@ui5/webcomponents/dist/StandardListItem.js";` |
47-
| List - Custom Item | `ui5-li-custom` | `import "@ui5/webcomponents/dist/CustomListItem.js";` |
48-
| List - Group Header Item | `ui5-li-groupheader` | `import "@ui5/webcomponents/dist/GroupHeaderListItem.js";` |
49-
| Message Strip | `ui5-messagestrip` | `import "@ui5/webcomponents/dist/MessageStrip.js";` |
50-
| Multi ComboBox | `ui5-multi-combobox` | `import "@ui5/webcomponents/dist/MultiComboBox.js";` |
51-
| Multi ComboBox Item | `ui5-mcb-item` | comes with `ui5-multi-combobox` |
52-
| Panel | `ui5-panel` | `import "@ui5/webcomponents/dist/Panel.js";` |
53-
| Popover | `ui5-popover` | `import "@ui5/webcomponents/dist/Popover.js";` |
54-
| Radio Button | `ui5-radiobutton` | `import "@ui5/webcomponents/dist/RadioButton.js";` |
55-
| Responsive Popover | `ui5-responsive-popover`| `import "@ui5/webcomponents/dist/ResponsivePopover.js";`|
56-
| Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` |
57-
| Select Option | `ui5-option` | comes with `ui5-select ` |
58-
| Segmented Button | `ui5-segmentedbutton`|`import "@ui5/webcomponents/dist/SegmentedButton.js";` |
59-
| Suggestion Item | `ui5-suggestion-item`|`import "@ui5/webcomponents/dist/SuggestionItem.js";` |
60-
| Switch | `ui5-switch` | `import "@ui5/webcomponents/dist/Switch.js";` |
61-
| Tab Container | `ui5-tabcontainer` | `import "@ui5/webcomponents/dist/TabContainer.js";` |
62-
| Tab | `ui5-tab` | `import "@ui5/webcomponents/dist/Tab.js";` |
63-
| Tab Separator | `ui5-tab-separator` | `import "@ui5/webcomponents/dist/TabSeparator.js";` |
64-
| Table | `ui5-table` | `import "@ui5/webcomponents/dist/Table.js";` |
65-
| Table Column | `ui5-table-column` | `import "@ui5/webcomponents/dist/TableColumn.js";` |
66-
| Table Row | `ui5-table-row` | `import "@ui5/webcomponents/dist/TableRow.js";` |
67-
| Table Cell | `ui5-table-cell` | `import "@ui5/webcomponents/dist/TableCell.js";` |
68-
| Textarea | `ui5-textarea` | `import "@ui5/webcomponents/dist/TextArea.js";` |
69-
| TimePicker | `ui5-time-picker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
70-
| Title | `ui5-title` | `import "@ui5/webcomponents/dist/Title.js";` |
71-
| Toast | `ui5-toast` | `import "@ui5/webcomponents/dist/Toast.js";` |
72-
| Toggle Button | `ui5-togglebutton` | `import "@ui5/webcomponents/dist/ToggleButton.js";` |
73-
| Tree | `ui5-tree` | `import "@ui5/webcomponents/dist/Tree.js";` |
74-
| Tree Item | `ui5-tree-item` | comes with `ui5-tree` |
24+
| Web Component | Tag name | Module import |
25+
| ------------------------ | ------------------------ | ---------------------------------------------------------- |
26+
| Avatar | `ui5-avatar` | `import "@ui5/webcomponents/dist/Avatar.js";` |
27+
| Avatar Group | `ui5-avatar-group` | `import "@ui5/webcomponents/dist/AvatarGroup.js";` |
28+
| Badge | `ui5-badge` | `import "@ui5/webcomponents/dist/Badge.js";` |
29+
| Busy Indicator | `ui5-busy-indicator` | `import "@ui5/webcomponents/dist/BusyIndicator.js";` |
30+
| Button | `ui5-button` | `import "@ui5/webcomponents/dist/Button.js";` |
31+
| Card | `ui5-card` | `import "@ui5/webcomponents/dist/Card.js";` |
32+
| Carousel | `ui5-carousel` | `import "@ui5/webcomponents/dist/Carousel.js";` |
33+
| Checkbox | `ui5-checkbox` | `import "@ui5/webcomponents/dist/CheckBox.js";` |
34+
| Color Palette | `ui5-color-palette` | `import "@ui5/webcomponents/dist/ColorPalette.js";` |
35+
| Color Palette Item | `ui5-color-palette-item` | comes with `ui5-color-palette` |
36+
| ComboBox | `ui5-combobox` | `import "@ui5/webcomponents/dist/ComboBox.js";` |
37+
| ComboBox Item | `ui5-cb-item` | comes with `ui5-combobox` |
38+
| Date Picker | `ui5-date-picker` | `import "@ui5/webcomponents/dist/DatePicker.js";` |
39+
| Date Range Picker | `ui5-daterange-picker` | `import "@ui5/webcomponents/dist/DateRangePicker.js";` |
40+
| Date Time Picker | `ui5-datetime-picker` | `import "@ui5/webcomponents/dist/DateTimePicker.js";` |
41+
| Dialog | `ui5-dialog` | `import "@ui5/webcomponents/dist/Dialog.js";` |
42+
| Duration Picker | `ui5-duration-picker` | `import "@ui5/webcomponents/dist/DurationPicker.js";` |
43+
| File Uploader | `ui5-file-uploader` | `import "@ui5/webcomponents/dist/FileUploader.js";` |
44+
| Icon | `ui5-icon` | `import "@ui5/webcomponents/dist/Icon.js";` |
45+
| Input | `ui5-input` | `import "@ui5/webcomponents/dist/Input.js";` |
46+
| Label | `ui5-label` | `import "@ui5/webcomponents/dist/Label.js";` |
47+
| Link | `ui5-link` | `import "@ui5/webcomponents/dist/Link.js";` |
48+
| List | `ui5-list` | `import "@ui5/webcomponents/dist/List.js";` |
49+
| List - Standard Item | `ui5-li` | `import "@ui5/webcomponents/dist/StandardListItem.js";` |
50+
| List - Custom Item | `ui5-li-custom` | `import "@ui5/webcomponents/dist/CustomListItem.js";` |
51+
| List - Group Header Item | `ui5-li-groupheader` | `import "@ui5/webcomponents/dist/GroupHeaderListItem.js";` |
52+
| Message Strip | `ui5-messagestrip` | `import "@ui5/webcomponents/dist/MessageStrip.js";` |
53+
| Multi ComboBox | `ui5-multi-combobox` | `import "@ui5/webcomponents/dist/MultiComboBox.js";` |
54+
| Multi ComboBox Item | `ui5-mcb-item` | comes with `ui5-multi-combobox` |
55+
| Panel | `ui5-panel` | `import "@ui5/webcomponents/dist/Panel.js";` |
56+
| Popover | `ui5-popover` | `import "@ui5/webcomponents/dist/Popover.js";` |
57+
| Radio Button | `ui5-radiobutton` | `import "@ui5/webcomponents/dist/RadioButton.js";` |
58+
| Range Slider | `ui5-range-slider` | `import "@ui5/webcomponents/dist/RangeSlider.js";` |
59+
| Responsive Popover | `ui5-responsive-popover` | `import "@ui5/webcomponents/dist/ResponsivePopover.js";` |
60+
| Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` |
61+
| Select Option | `ui5-option` | comes with `ui5-select ` |
62+
| Segmented Button | `ui5-segmented-button` | `import "@ui5/webcomponents/dist/SegmentedButton.js";` |
63+
| Segmented Button Item | `ui5-segmented-button-item`| comes with `ui5-segmented-button ` |
64+
| Suggestion Item | `ui5-suggestion-item` | comes with `InputSuggestions.js` feature - see below |
65+
| Slider | `ui5-slider` | `import "@ui5/webcomponents/dist/Slider.js";` |
66+
| Step Input | `ui5-step-input` | `import "@ui5/webcomponents/dist/StepInput.js";` |
67+
| Switch | `ui5-switch` | `import "@ui5/webcomponents/dist/Switch.js";` |
68+
| Tab Container | `ui5-tabcontainer` | `import "@ui5/webcomponents/dist/TabContainer.js";` |
69+
| Tab | `ui5-tab` | `import "@ui5/webcomponents/dist/Tab.js";` |
70+
| Tab Separator | `ui5-tab-separator` | `import "@ui5/webcomponents/dist/TabSeparator.js";` |
71+
| Table | `ui5-table` | `import "@ui5/webcomponents/dist/Table.js";` |
72+
| Table Column | `ui5-table-column` | `import "@ui5/webcomponents/dist/TableColumn.js";` |
73+
| Table Row | `ui5-table-row` | `import "@ui5/webcomponents/dist/TableRow.js";` |
74+
| Table Cell | `ui5-table-cell` | `import "@ui5/webcomponents/dist/TableCell.js";` |
75+
| Textarea | `ui5-textarea` | `import "@ui5/webcomponents/dist/TextArea.js";` |
76+
| TimePicker | `ui5-time-picker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
77+
| Title | `ui5-title` | `import "@ui5/webcomponents/dist/Title.js";` |
78+
| Toast | `ui5-toast` | `import "@ui5/webcomponents/dist/Toast.js";` |
79+
| Toggle Button | `ui5-toggle-button` | `import "@ui5/webcomponents/dist/ToggleButton.js";` |
80+
| Tree | `ui5-tree` | `import "@ui5/webcomponents/dist/Tree.js";` |
81+
| Tree Item | `ui5-tree-item` | comes with `ui5-tree` |
7582

7683
### 2. Assets
7784

‎packages/main/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ import Panel from "./dist/Panel.js";
6767
import RadioButton from "./dist/RadioButton.js";
6868
import ResponsivePopover from "./dist/ResponsivePopover.js";
6969
import SegmentedButton from "./dist/SegmentedButton.js";
70+
import SegmentedButtonItem from "./dist/SegmentedButtonItem.js";
7071
import Select from "./dist/Select.js";
7172
import Slider from "./dist/Slider.js";
7273
import StepInput from "./dist/StepInput.js";

‎packages/main/src/SegmentedButton.hbs

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1-
<div
1+
<ul
22
@click="{{_onclick}}"
3+
@keydown="{{_onkeydown}}"
4+
@keyup="{{_onkeyup}}"
35
@focusin="{{_onfocusin}}"
4-
class="ui5-segmentedbutton-root"
5-
role="group"
6+
class="ui5-segmented-button-root"
7+
role="listbox"
68
dir="{{effectiveDir}}"
7-
aria-roledescription="{{ariaDescription}}"
9+
aria-multiselectable="true"
10+
aria-describedby="{{_id}}-invisibleText"
11+
aria-roledescription={{ariaDescription}}
812
>
913
<slot></slot>
10-
</div>
14+
15+
<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{ariaDescribedBy}}</span>
16+
17+
</ul>

0 commit comments

Comments
 (0)