Skip to content

Commit b3b42f6

Browse files
ilhan007ilhan007
authored
refactor(ui5-segmented-button): rename tag name (#3345)
As part of #3107 we decided to change the tag name mainly for better readability. BREAKING_CHANGE: Component's tag name has been renamed from ui5-segmentedbutton to ui5-segmented-button.
1 parent 998be76 commit b3b42f6

14 files changed

+87
-86
lines changed

‎docs/Public Module Imports.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
5858
| Responsive Popover | `ui5-responsive-popover` | `import "@ui5/webcomponents/dist/ResponsivePopover.js";` |
5959
| Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` |
6060
| Select Option | `ui5-option` | comes with `ui5-select ` |
61-
| Segmented Button | `ui5-segmentedbutton` | `import "@ui5/webcomponents/dist/SegmentedButton.js";` |
61+
| Segmented Button | `ui5-segmented-button` | `import "@ui5/webcomponents/dist/SegmentedButton.js";` |
6262
| Suggestion Item | `ui5-suggestion-item` | comes with `InputSuggestions.js` feature - see below |
6363
| Slider | `ui5-slider` | `import "@ui5/webcomponents/dist/Slider.js";` |
6464
| Step Input | `ui5-step-input` | `import "@ui5/webcomponents/dist/StepInput.js";` |

‎packages/fiori/test/pages/FCL.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -156,21 +156,21 @@
156156

157157
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
158158
<ui5-label>Availability</ui5-label>
159-
<ui5-segmentedbutton id="segButton1">
159+
<ui5-segmented-button id="segButton1">
160160
<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
161161
<ui5-toggle-button>In depot</ui5-toggle-button>
162162
<ui5-toggle-button>Damaged</ui5-toggle-button>
163163
<ui5-toggle-button>Out of stock</ui5-toggle-button>
164-
</ui5-segmentedbutton>
164+
</ui5-segmented-button>
165165
</div>
166166

167167
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
168168
<ui5-label>Size</ui5-label>
169-
<ui5-segmentedbutton id="sb">
169+
<ui5-segmented-button id="sb">
170170
<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
171171
<ui5-toggle-button>Medium</ui5-toggle-button>
172172
<ui5-toggle-button>Largr</ui5-toggle-button>
173-
</ui5-segmentedbutton>
173+
</ui5-segmented-button>
174174
</div>
175175
</div>
176176
</div>

‎packages/fiori/test/pages/Wizard.html

+20-20
Original file line numberDiff line numberDiff line change
@@ -104,21 +104,21 @@ <h2>Wizard</h2>
104104

105105
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
106106
<ui5-label>Availability</ui5-label>
107-
<ui5-segmentedbutton>
107+
<ui5-segmented-button>
108108
<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
109109
<ui5-toggle-button>In depot</ui5-toggle-button>
110110
<ui5-toggle-button>Damaged</ui5-toggle-button>
111111
<ui5-toggle-button>Out of stock</ui5-toggle-button>
112-
</ui5-segmentedbutton>
112+
</ui5-segmented-button>
113113
</div>
114114

115115
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
116116
<ui5-label>Size</ui5-label>
117-
<ui5-segmentedbutton id="sb">
117+
<ui5-segmented-button id="sb">
118118
<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
119119
<ui5-toggle-button>Medium</ui5-toggle-button>
120120
<ui5-toggle-button>Large</ui5-toggle-button>
121-
</ui5-segmentedbutton>
121+
</ui5-segmented-button>
122122
</div>
123123
</div>
124124
</div>
@@ -229,21 +229,21 @@ <h2>Wizard non-standard</h2>
229229

230230
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
231231
<ui5-label>Availability</ui5-label>
232-
<ui5-segmentedbutton>
232+
<ui5-segmented-button>
233233
<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
234234
<ui5-toggle-button>In depot</ui5-toggle-button>
235235
<ui5-toggle-button>Damaged</ui5-toggle-button>
236236
<ui5-toggle-button>Out of stock</ui5-toggle-button>
237-
</ui5-segmentedbutton>
237+
</ui5-segmented-button>
238238
</div>
239239

240240
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
241241
<ui5-label>Size</ui5-label>
242-
<ui5-segmentedbutton>
242+
<ui5-segmented-button>
243243
<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
244244
<ui5-toggle-button>Medium</ui5-toggle-button>
245245
<ui5-toggle-button>Large</ui5-toggle-button>
246-
</ui5-segmentedbutton>
246+
</ui5-segmented-button>
247247
</div>
248248
</div>
249249
</div>
@@ -381,21 +381,21 @@ <h2>Wizard non-standard 2</h2>
381381

382382
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
383383
<ui5-label>Availability</ui5-label>
384-
<ui5-segmentedbutton>
384+
<ui5-segmented-button>
385385
<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
386386
<ui5-toggle-button>In depot</ui5-toggle-button>
387387
<ui5-toggle-button>Damaged</ui5-toggle-button>
388388
<ui5-toggle-button>Out of stock</ui5-toggle-button>
389-
</ui5-segmentedbutton>
389+
</ui5-segmented-button>
390390
</div>
391391

392392
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
393393
<ui5-label>Size</ui5-label>
394-
<ui5-segmentedbutton>
394+
<ui5-segmented-button>
395395
<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
396396
<ui5-toggle-button>Medium</ui5-toggle-button>
397397
<ui5-toggle-button>Large</ui5-toggle-button>
398-
</ui5-segmentedbutton>
398+
</ui5-segmented-button>
399399
</div>
400400
</div>
401401
</div>
@@ -502,21 +502,21 @@ <h2>Wizard non-standard 3</h2>
502502

503503
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
504504
<ui5-label>Availability</ui5-label>
505-
<ui5-segmentedbutton>
505+
<ui5-segmented-button>
506506
<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
507507
<ui5-toggle-button>In depot</ui5-toggle-button>
508508
<ui5-toggle-button>Damaged</ui5-toggle-button>
509509
<ui5-toggle-button>Out of stock</ui5-toggle-button>
510-
</ui5-segmentedbutton>
510+
</ui5-segmented-button>
511511
</div>
512512

513513
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
514514
<ui5-label>Size</ui5-label>
515-
<ui5-segmentedbutton>
515+
<ui5-segmented-button>
516516
<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
517517
<ui5-toggle-button>Medium</ui5-toggle-button>
518518
<ui5-toggle-button>Large</ui5-toggle-button>
519-
</ui5-segmentedbutton>
519+
</ui5-segmented-button>
520520
</div>
521521
</div>
522522
</div>
@@ -625,21 +625,21 @@ <h2>Wizard non-standard 3</h2>
625625

626626
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
627627
<ui5-label>Availability</ui5-label>
628-
<ui5-segmentedbutton>
628+
<ui5-segmented-button>
629629
<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
630630
<ui5-toggle-button>In depot</ui5-toggle-button>
631631
<ui5-toggle-button>Damaged</ui5-toggle-button>
632632
<ui5-toggle-button>Out of stock</ui5-toggle-button>
633-
</ui5-segmentedbutton>
633+
</ui5-segmented-button>
634634
</div>
635635

636636
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
637637
<ui5-label>Size</ui5-label>
638-
<ui5-segmentedbutton id="sb2">
638+
<ui5-segmented-button id="sb2">
639639
<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
640640
<ui5-toggle-button>Medium</ui5-toggle-button>
641641
<ui5-toggle-button>Largr</ui5-toggle-button>
642-
</ui5-segmentedbutton>
642+
</ui5-segmented-button>
643643
</div>
644644
</div>
645645
</div>

‎packages/fiori/test/pages/Wizard_test.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,11 @@
4646

4747
<div style="display: flex; flex-direction: row; margin-top: 1rem; justify-content: flex-end; align-items: center;">
4848
<ui5-label>Configure step-switch-threshold</ui5-label>
49-
<ui5-segmentedbutton id="setting">
49+
<ui5-segmented-button id="setting">
5050
<ui5-toggle-button threshold="0.3">0.5</ui5-toggle-button>
5151
<ui5-toggle-button threshold="0.7" pressed>default (0.7)</ui5-toggle-button>
5252
<ui5-toggle-button threshold="1">1</ui5-toggle-button>
53-
</ui5-segmentedbutton>
53+
</ui5-segmented-button>
5454
</div>
5555

5656
</div>
@@ -120,21 +120,21 @@
120120

121121
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
122122
<ui5-label>Availability</ui5-label>
123-
<ui5-segmentedbutton id="segButton1">
123+
<ui5-segmented-button id="segButton1">
124124
<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
125125
<ui5-toggle-button>In depot</ui5-toggle-button>
126126
<ui5-toggle-button>Damaged</ui5-toggle-button>
127127
<ui5-toggle-button>Out of stock</ui5-toggle-button>
128-
</ui5-segmentedbutton>
128+
</ui5-segmented-button>
129129
</div>
130130

131131
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
132132
<ui5-label>Size</ui5-label>
133-
<ui5-segmentedbutton id="sb">
133+
<ui5-segmented-button id="sb">
134134
<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
135135
<ui5-toggle-button>Medium</ui5-toggle-button>
136136
<ui5-toggle-button>Largr</ui5-toggle-button>
137-
</ui5-segmentedbutton>
137+
</ui5-segmented-button>
138138
</div>
139139
</div>
140140
</div>
@@ -256,21 +256,21 @@
256256

257257
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
258258
<ui5-label>Availability</ui5-label>
259-
<ui5-segmentedbutton>
259+
<ui5-segmented-button>
260260
<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
261261
<ui5-toggle-button>In depot</ui5-toggle-button>
262262
<ui5-toggle-button>Damaged</ui5-toggle-button>
263263
<ui5-toggle-button>Out of stock</ui5-toggle-button>
264-
</ui5-segmentedbutton>
264+
</ui5-segmented-button>
265265
</div>
266266

267267
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
268268
<ui5-label>Size</ui5-label>
269-
<ui5-segmentedbutton>
269+
<ui5-segmented-button>
270270
<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
271271
<ui5-toggle-button>Medium</ui5-toggle-button>
272272
<ui5-toggle-button>Largr</ui5-toggle-button>
273-
</ui5-segmentedbutton>
273+
</ui5-segmented-button>
274274
</div>
275275
</div>
276276
</div>

‎packages/fiori/test/samples/Wizard.sample.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -98,21 +98,21 @@ <h3>Wizard</h3>
9898

9999
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
100100
<ui5-label>Availability</ui5-label>
101-
<ui5-segmentedbutton id="segButton1">
101+
<ui5-segmented-button id="segButton1">
102102
<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
103103
<ui5-toggle-button>In depot</ui5-toggle-button>
104104
<ui5-toggle-button>Damaged</ui5-toggle-button>
105105
<ui5-toggle-button>Out of stock</ui5-toggle-button>
106-
</ui5-segmentedbutton>
106+
</ui5-segmented-button>
107107
</div>
108108

109109
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
110110
<ui5-label>Size</ui5-label>
111-
<ui5-segmentedbutton id="sb">
111+
<ui5-segmented-button id="sb">
112112
<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
113113
<ui5-toggle-button>Medium</ui5-toggle-button>
114114
<ui5-toggle-button>Large</ui5-toggle-button>
115-
</ui5-segmentedbutton>
115+
</ui5-segmented-button>
116116
</div>
117117
</div>
118118
</div>
@@ -231,11 +231,11 @@ <h3>Wizard</h3>
231231
<ui5-wizard-step icon="action-settings" title-text="Options" disabled>
232232
<ui5-title>3. Options</ui5-title><br>
233233

234-
<ui5-segmentedbutton id="sb">
234+
<ui5-segmented-button id="sb">
235235
<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
236236
<ui5-toggle-button>Medium</ui5-toggle-button>
237237
<ui5-toggle-button>Large</ui5-toggle-button>
238-
</ui5-segmentedbutton>
238+
</ui5-segmented-button>
239239

240240
<!-- Move to step 4 -->
241241
<ui5-button id="toStep4" hidden>Step 4</ui5-button>

‎packages/main/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
3838
| Responsive Popover | `ui5-responsive-popover`| `import "@ui5/webcomponents/dist/ResponsivePopover.js";`|
3939
| Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` |
4040
| Select Option | `ui5-option` | comes with ui5-select |
41-
| Segmented Button | `ui5-segmentedbutton`|`import "@ui5/webcomponents/dist/SegmentedButton.js";` |
41+
| Segmented Button | `ui5-segmented-button`|`import "@ui5/webcomponents/dist/SegmentedButton.js";` |
4242
| Suggestion Item | `ui5-suggestion-item`|`import "@ui5/webcomponents/dist/SuggestionItem.js";` |
4343
| Switch | `ui5-switch` | `import "@ui5/webcomponents/dist/Switch.js";` |
4444
| Tab Container | `ui5-tabcontainer` | `import "@ui5/webcomponents/dist/TabContainer.js";` |

‎packages/main/src/DateTimePickerPopover.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
{{#*inline "header"}}
55
{{#if phone}}
66
<div class="ui5-dt-picker-header">
7-
<ui5-segmentedbutton style="width: 8rem">
7+
<ui5-segmented-button style="width: 8rem">
88
<ui5-toggle-button key="Date" ?pressed="{{showDateView}}" @click="{{_dateTimeSwitchChange}}">{{btnDateLabel}}</ui5-toggle-button>
99
<ui5-toggle-button key="Time" ?pressed="{{showTimeView}}" @click="{{_dateTimeSwitchChange}}">{{btnTimeLabel}}</ui5-toggle-button>
10-
</ui5-segmentedbutton>
10+
</ui5-segmented-button>
1111
</div>
1212
{{/if}}
1313
{{/inline}}

‎packages/main/src/SegmentedButton.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div
22
@click="{{_onclick}}"
33
@focusin="{{_onfocusin}}"
4-
class="ui5-segmentedbutton-root"
4+
class="ui5-segmented-button-root"
55
role="group"
66
dir="{{effectiveDir}}"
77
aria-roledescription="{{ariaDescription}}"

‎packages/main/src/SegmentedButton.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
1818
* @public
1919
*/
2020
const metadata = {
21-
tag: "ui5-segmentedbutton",
21+
tag: "ui5-segmented-button",
22+
altTag: "ui5-segmentedbutton",
2223
languageAware: true,
2324
properties: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */ {},
2425
managedSlots: true,
@@ -61,7 +62,7 @@ const metadata = {
6162
*
6263
* <h3 class="comment-api-title">Overview</h3>
6364
*
64-
* The <code>ui5-segmentedbutton</code> shows a group of buttons. When the user clicks or taps
65+
* The <code>ui5-segmented-button</code> shows a group of buttons. When the user clicks or taps
6566
* one of the buttons, it stays in a pressed state. It automatically resizes the buttons
6667
* to fit proportionally within the component. When no width is set, the component uses the available width.
6768
* <br><br>
@@ -75,7 +76,7 @@ const metadata = {
7576
* @author SAP SE
7677
* @alias sap.ui.webcomponents.main.SegmentedButton
7778
* @extends sap.ui.webcomponents.base.UI5Element
78-
* @tagname ui5-segmentedbutton
79+
* @tagname ui5-segmented-button
7980
* @since 1.0.0-rc.6
8081
* @public
8182
*/

‎packages/main/src/themes/SegmentedButton.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
display: inline-block;
33
}
44

5-
.ui5-segmentedbutton-root {
5+
.ui5-segmented-button-root {
66
display: flex;
77
}
88

‎packages/main/test/pages/RTL.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@
2828

2929

3030
<div style="display: flex; align-items: center;">
31-
<ui5-segmentedbutton id="tb">
31+
<ui5-segmented-button id="tb">
3232
<ui5-toggle-button pressed>EN</ui5-toggle-button>
3333
<ui5-toggle-button>DE</ui5-toggle-button>
3434
<ui5-toggle-button>BG</ui5-toggle-button>
3535
<ui5-toggle-button>ES</ui5-toggle-button>
3636
<ui5-toggle-button>HE</ui5-toggle-button>
3737
<ui5-toggle-button>AR</ui5-toggle-button>
38-
</ui5-segmentedbutton>
38+
</ui5-segmented-button>
3939
<div style="flex: auto;"></div>
4040
<ui5-label style="margin:0 5px;">Manually switch RTL:</ui5-label>
4141
<ui5-switch id="sw"></ui5-switch>

0 commit comments

Comments
 (0)