Skip to content

Commit bca726e

Browse files
georgimkvgeorgimkv
authored
refactor(ui5-radio-button): change tag name (#3405)
Part of #3107 BREAKING_CHANGE: component's tag name `ui5-radiobutton` has been changed to `ui5-radio-button`
1 parent 10b0b3e commit bca726e

30 files changed

+247
-242
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ You can then explore component test pages on:
145145
You can start the Playground app with the following commands:
146146

147147
```sh
148-
# install palyground specific dependencies (one time only)
148+
# install playground specific dependencies (one time only)
149149
cd packages/playground
150150
yarn install:dependencies
151151

@@ -165,7 +165,7 @@ See the [instructions](/docs/dev/Testing%20Web%20Components.md#24-getting-the-te
165165
To build the UI5 Web Components project, run the following commands:
166166

167167
```sh
168-
yarn # to install all dependecies
168+
yarn # to install all dependencies
169169
yarn build # to build the project
170170
```
171171

‎docs/Public Module Imports.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
5353
| Multi ComboBox Item | `ui5-mcb-item` | comes with `ui5-multi-combobox` |
5454
| Panel | `ui5-panel` | `import "@ui5/webcomponents/dist/Panel.js";` |
5555
| Popover | `ui5-popover` | `import "@ui5/webcomponents/dist/Popover.js";` |
56-
| Radio Button | `ui5-radiobutton` | `import "@ui5/webcomponents/dist/RadioButton.js";` |
56+
| Radio Button | `ui5-radio-button` | `import "@ui5/webcomponents/dist/RadioButton.js";` |
5757
| Range Slider | `ui5-range-slider` | `import "@ui5/webcomponents/dist/RangeSlider.js";` |
5858
| Responsive Popover | `ui5-responsive-popover` | `import "@ui5/webcomponents/dist/ResponsivePopover.js";` |
5959
| Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` |
@@ -75,7 +75,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
7575
| TimePicker | `ui5-time-picker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
7676
| Title | `ui5-title` | `import "@ui5/webcomponents/dist/Title.js";` |
7777
| Toast | `ui5-toast` | `import "@ui5/webcomponents/dist/Toast.js";` |
78-
| Toggle Button | `ui5-toggle-button` | `import "@ui5/webcomponents/dist/ToggleButton.js";` |
78+
| Toggle Button | `ui5-toggle-button` | `import "@ui5/webcomponents/dist/ToggleButton.js";` |
7979
| Tree | `ui5-tree` | `import "@ui5/webcomponents/dist/Tree.js";` |
8080
| Tree Item | `ui5-tree-item` | comes with `ui5-tree` |
8181

@@ -120,7 +120,7 @@ However, if you need to submit forms, you can import the module above and it wil
120120
- `ui5-input`
121121
- `ui5-textarea`
122122
- `ui5-checkbox`
123-
- `ui5-radiobutton`
123+
- `ui5-radio-button`
124124
- `ui5-date-picker`
125125
- `ui5-select`
126126

‎packages/fiori/src/NotificationListItem.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const metadata = {
9595
},
9696

9797
/**
98-
* Defines the elements, dipalyed in the footer of the of the <code>ui5-li-notification</code>.
98+
* Defines the elements, displayed in the footer of the of the component.
9999
* @type {HTMLElement[]}
100100
* @slot footnotes
101101
* @public
@@ -343,11 +343,11 @@ class NotificationListItem extends NotificationListItemBase {
343343
}
344344

345345
get accInvisibleText() {
346-
const notifcationTxt = this.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_TXT);
347-
const readTxt = this.read ? this.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ) : this.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
346+
const notificationText = this.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_TXT);
347+
const readText = this.read ? this.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ) : this.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
348348
const priorityText = this.priorityText;
349349

350-
return `${notifcationTxt} ${readTxt} ${priorityText}`;
350+
return `${notificationText} ${readText} ${priorityText}`;
351351
}
352352

353353
get classes() {

‎packages/main/README.md

+46-46
Original file line numberDiff line numberDiff line change
@@ -7,52 +7,52 @@
77

88
Provides general purpose UI building blocks such as buttons, labels, inputs and popups.
99

10-
| Web Component | Tag name | Module import |
11-
| ------------------------ | -------------------- | ---------------------------------------------------------- |
12-
| Avatar | `ui5-avatar` | `import "@ui5/webcomponents/dist/Avatar.js";` |
13-
| Badge | `ui5-badge` | `import "@ui5/webcomponents/dist/Badge.js";` |
14-
| Busy Indicator | `ui5-busy-indicator` | `import "@ui5/webcomponents/dist/BusyIndicator.js";` |
15-
| Button | `ui5-button` | `import "@ui5/webcomponents/dist/Button.js";` |
16-
| Card | `ui5-card` | `import "@ui5/webcomponents/dist/Card.js";` |
17-
| Carousel | `ui5-carousel` | `import "@ui5/webcomponents/dist/Carousel.js";` |
18-
| Checkbox | `ui5-checkbox` | `import "@ui5/webcomponents/dist/CheckBox.js";` |
19-
| ComboBox | `ui5-combobox` | `import "@ui5/webcomponents/dist/ComboBox.js";` |
20-
| ComboBox Item | `ui5-cb-item` | comes with ui5-combobox |
21-
| Date Picker | `ui5-date-picker` | `import "@ui5/webcomponents/dist/DatePicker.js";` |
22-
| Dialog | `ui5-dialog` | `import "@ui5/webcomponents/dist/Dialog.js";` |
23-
| File Uploader | `ui5-file-uploader` | `import "@ui5/webcomponents/dist/FileUploader.js";` |
24-
| Icon | `ui5-icon` | `import "@ui5/webcomponents/dist/Icon.js";` |
25-
| Input | `ui5-input` | `import "@ui5/webcomponents/dist/Input.js";` |
26-
| Label | `ui5-label` | `import "@ui5/webcomponents/dist/Label.js";` |
27-
| Link | `ui5-link` | `import "@ui5/webcomponents/dist/Link.js";` |
28-
| List | `ui5-list` | `import "@ui5/webcomponents/dist/List.js";` |
29-
| List - Standard Item | `ui5-li` | `import "@ui5/webcomponents/dist/StandardListItem.js";` |
30-
| List - Custom Item | `ui5-li-custom` | `import "@ui5/webcomponents/dist/CustomListItem.js";` |
31-
| List - Group Header Item | `ui5-li-groupheader` | `import "@ui5/webcomponents/dist/GroupHeaderListItem.js";` |
32-
| Message Strip | `ui5-messagestrip` | `import "@ui5/webcomponents/dist/MessageStrip.js";` |
33-
| Multi ComboBox | `ui5-multi-combobox` | `import "@ui5/webcomponents/dist/MultiComboBox.js";` |
34-
| Multi ComboBox Item | `ui5-mcb-item` | `import "@ui5/webcomponents/dist/MultiComboBoxItem.js";` |
35-
| Panel | `ui5-panel` | `import "@ui5/webcomponents/dist/Panel.js";` |
36-
| Popover | `ui5-popover` | `import "@ui5/webcomponents/dist/Popover.js";` |
37-
| Radio Button | `ui5-radiobutton` | `import "@ui5/webcomponents/dist/RadioButton.js";` |
38-
| Responsive Popover | `ui5-responsive-popover`| `import "@ui5/webcomponents/dist/ResponsivePopover.js";`|
39-
| Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` |
40-
| Select Option | `ui5-option` | comes with ui5-select |
41-
| Segmented Button | `ui5-segmented-button`|`import "@ui5/webcomponents/dist/SegmentedButton.js";` |
42-
| Suggestion Item | `ui5-suggestion-item`|`import "@ui5/webcomponents/dist/SuggestionItem.js";` |
43-
| Switch | `ui5-switch` | `import "@ui5/webcomponents/dist/Switch.js";` |
44-
| Tab Container | `ui5-tabcontainer` | `import "@ui5/webcomponents/dist/TabContainer.js";` |
45-
| Tab | `ui5-tab` | `import "@ui5/webcomponents/dist/Tab.js";` |
46-
| Tab Separator | `ui5-tab-separator` | `import "@ui5/webcomponents/dist/TabSeparator.js";` |
47-
| Table | `ui5-table` | `import "@ui5/webcomponents/dist/Table.js";` |
48-
| Table Column | `ui5-table-column` | `import "@ui5/webcomponents/dist/TableColumn.js";` |
49-
| Table Row | `ui5-table-row` | `import "@ui5/webcomponents/dist/TableRow.js";` |
50-
| Table Cell | `ui5-table-cell` | `import "@ui5/webcomponents/dist/TableCell.js";` |
51-
| Textarea | `ui5-textarea` | `import "@ui5/webcomponents/dist/TextArea.js";` |
52-
| TimePicker | `ui5-time-picker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
53-
| Title | `ui5-title` | `import "@ui5/webcomponents/dist/Title.js";` |
54-
| Toast | `ui5-toast` | `import "@ui5/webcomponents/dist/Toast.js";` |
55-
| Toggle Button | `ui5-toggle-button` | `import "@ui5/webcomponents/dist/ToggleButton.js";` |
10+
| Web Component | Tag name | Module import |
11+
| ------------------------ | ------------------------ | ---------------------------------------------------------- |
12+
| Avatar | `ui5-avatar` | `import "@ui5/webcomponents/dist/Avatar.js";` |
13+
| Badge | `ui5-badge` | `import "@ui5/webcomponents/dist/Badge.js";` |
14+
| Busy Indicator | `ui5-busy-indicator` | `import "@ui5/webcomponents/dist/BusyIndicator.js";` |
15+
| Button | `ui5-button` | `import "@ui5/webcomponents/dist/Button.js";` |
16+
| Card | `ui5-card` | `import "@ui5/webcomponents/dist/Card.js";` |
17+
| Carousel | `ui5-carousel` | `import "@ui5/webcomponents/dist/Carousel.js";` |
18+
| Checkbox | `ui5-checkbox` | `import "@ui5/webcomponents/dist/CheckBox.js";` |
19+
| ComboBox | `ui5-combobox` | `import "@ui5/webcomponents/dist/ComboBox.js";` |
20+
| ComboBox Item | `ui5-cb-item` | comes with ui5-combobox |
21+
| Date Picker | `ui5-date-picker` | `import "@ui5/webcomponents/dist/DatePicker.js";` |
22+
| Dialog | `ui5-dialog` | `import "@ui5/webcomponents/dist/Dialog.js";` |
23+
| File Uploader | `ui5-file-uploader` | `import "@ui5/webcomponents/dist/FileUploader.js";` |
24+
| Icon | `ui5-icon` | `import "@ui5/webcomponents/dist/Icon.js";` |
25+
| Input | `ui5-input` | `import "@ui5/webcomponents/dist/Input.js";` |
26+
| Label | `ui5-label` | `import "@ui5/webcomponents/dist/Label.js";` |
27+
| Link | `ui5-link` | `import "@ui5/webcomponents/dist/Link.js";` |
28+
| List | `ui5-list` | `import "@ui5/webcomponents/dist/List.js";` |
29+
| List - Standard Item | `ui5-li` | `import "@ui5/webcomponents/dist/StandardListItem.js";` |
30+
| List - Custom Item | `ui5-li-custom` | `import "@ui5/webcomponents/dist/CustomListItem.js";` |
31+
| List - Group Header Item | `ui5-li-groupheader` | `import "@ui5/webcomponents/dist/GroupHeaderListItem.js";` |
32+
| Message Strip | `ui5-messagestrip` | `import "@ui5/webcomponents/dist/MessageStrip.js";` |
33+
| Multi ComboBox | `ui5-multi-combobox` | `import "@ui5/webcomponents/dist/MultiComboBox.js";` |
34+
| Multi ComboBox Item | `ui5-mcb-item` | `import "@ui5/webcomponents/dist/MultiComboBoxItem.js";` |
35+
| Panel | `ui5-panel` | `import "@ui5/webcomponents/dist/Panel.js";` |
36+
| Popover | `ui5-popover` | `import "@ui5/webcomponents/dist/Popover.js";` |
37+
| Radio Button | `ui5-radio-button` | `import "@ui5/webcomponents/dist/RadioButton.js";` |
38+
| Responsive Popover | `ui5-responsive-popover` | `import "@ui5/webcomponents/dist/ResponsivePopover.js";` |
39+
| Select | `ui5-select` | `import "@ui5/webcomponents/dist/Select.js";` |
40+
| Select Option | `ui5-option` | comes with ui5-select |
41+
| Segmented Button | `ui5-segmented-button` |`import "@ui5/webcomponents/dist/SegmentedButton.js";` |
42+
| Suggestion Item | `ui5-suggestion-item` |`import "@ui5/webcomponents/dist/SuggestionItem.js";` |
43+
| Switch | `ui5-switch` | `import "@ui5/webcomponents/dist/Switch.js";` |
44+
| Tab Container | `ui5-tabcontainer` | `import "@ui5/webcomponents/dist/TabContainer.js";` |
45+
| Tab | `ui5-tab` | `import "@ui5/webcomponents/dist/Tab.js";` |
46+
| Tab Separator | `ui5-tab-separator` | `import "@ui5/webcomponents/dist/TabSeparator.js";` |
47+
| Table | `ui5-table` | `import "@ui5/webcomponents/dist/Table.js";` |
48+
| Table Column | `ui5-table-column` | `import "@ui5/webcomponents/dist/TableColumn.js";` |
49+
| Table Row | `ui5-table-row` | `import "@ui5/webcomponents/dist/TableRow.js";` |
50+
| Table Cell | `ui5-table-cell` | `import "@ui5/webcomponents/dist/TableCell.js";` |
51+
| Textarea | `ui5-textarea` | `import "@ui5/webcomponents/dist/TextArea.js";` |
52+
| TimePicker | `ui5-time-picker` | `import "@ui5/webcomponents/dist/TimePicker.js";` |
53+
| Title | `ui5-title` | `import "@ui5/webcomponents/dist/Title.js";` |
54+
| Toast | `ui5-toast` | `import "@ui5/webcomponents/dist/Toast.js";` |
55+
| Toggle Button | `ui5-toggle-button` | `import "@ui5/webcomponents/dist/ToggleButton.js";` |
5656

5757
For a complete list of all public module imports from the `main` package, click [here](../../docs/Public%20Module%20Imports.md#main):
5858

‎packages/main/src/ListItem.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,14 @@
5959

6060
{{#*inline "selectionElement"}}
6161
{{#if modeSingleSelect}}
62-
<ui5-radiobutton
62+
<ui5-radio-button
6363
?disabled="{{isInactive}}"
6464
tabindex="-1"
6565
id="{{_id}}-singleSelectionElement"
6666
class="ui5-li-singlesel-radiobtn"
6767
?checked="{{selected}}"
6868
@click="{{onSingleSelectionComponentPress}}">
69-
</ui5-radiobutton>
69+
</ui5-radio-button>
7070
{{/if}}
7171

7272
{{#if modeMultiSelect}}

‎packages/main/src/ListItem.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ class ListItem extends ListItemBase {
218218
}
219219

220220
/*
221-
* Called when selection components in Single (ui5-radiobutton)
221+
* Called when selection components in Single (ui5-radio-button)
222222
* and Multi (ui5-checkbox) selection modes are used.
223223
*/
224224
onMultiSelectionComponentPress(event) {

‎packages/main/src/RadioButton.js

+10-7
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ import radioButtonCss from "./generated/themes/RadioButton.css.js";
2929
* @public
3030
*/
3131
const metadata = {
32-
tag: "ui5-radiobutton",
32+
tag: "ui5-radio-button",
33+
altTag: "ui5-radiobutton",
3334
languageAware: true,
3435
properties: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
3536

@@ -70,6 +71,7 @@ const metadata = {
7071
* @type {boolean}
7172
* @defaultvalue false
7273
* @public
74+
* @since 1.0.0-rc.15
7375
*/
7476
checked: {
7577
type: Boolean,
@@ -193,6 +195,7 @@ const metadata = {
193195
*
194196
* @event
195197
* @public
198+
* @since 1.0.0-rc.15
196199
*/
197200
change: {},
198201
},
@@ -203,17 +206,17 @@ const metadata = {
203206
*
204207
* <h3 class="comment-api-title">Overview</h3>
205208
*
206-
* The <code>ui5-radiobutton</code> component enables users to select a single option from a set of options.
207-
* When a <code>ui5-radiobutton</code> is selected by the user, the
209+
* The <code>ui5-radio-button</code> component enables users to select a single option from a set of options.
210+
* When a <code>ui5-radio-button</code> is selected by the user, the
208211
* <code>change</code> event is fired.
209-
* When a <code>ui5-radiobutton</code> that is within a group is selected, the one
212+
* When a <code>ui5-radio-button</code> that is within a group is selected, the one
210213
* that was previously selected gets automatically deselected. You can group radio buttons by using the <code>name</code> property.
211214
* <br>
212-
* <b>Note:</b> If <code>ui5-radiobutton</code> is not part of a group, it can be selected once, but can not be deselected back.
215+
* <b>Note:</b> If <code>ui5-radio-button</code> is not part of a group, it can be selected once, but can not be deselected back.
213216
*
214217
* <h3>Keyboard Handling</h3>
215218
*
216-
* Once the <code>ui5-radiobutton</code> is on focus, it might be selected by pressing the Space and Enter keys.
219+
* Once the <code>ui5-radio-button</code> is on focus, it might be selected by pressing the Space and Enter keys.
217220
* <br>
218221
* The Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group,
219222
* while TAB and SHIFT + TAB can be used to enter or leave the radio button group.
@@ -228,7 +231,7 @@ const metadata = {
228231
* @author SAP SE
229232
* @alias sap.ui.webcomponents.main.RadioButton
230233
* @extends sap.ui.webcomponents.base.UI5Element
231-
* @tagname ui5-radiobutton
234+
* @tagname ui5-radio-button
232235
* @public
233236
*/
234237
class RadioButton extends UI5Element {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@
1818
}
1919

2020
[ui5-checkbox].ui5-li-singlesel-radiobtn,
21-
[ui5-radiobutton].ui5-li-singlesel-radiobtn {
21+
[ui5-radio-button].ui5-li-singlesel-radiobtn {
2222
display: flex;
2323
align-items: center;
2424
}
2525

2626
.ui5-li-root.ui5-custom-li-root,
2727
[ui5-checkbox].ui5-li-singlesel-radiobtn,
28-
[ui5-radiobutton].ui5-li-singlesel-radiobtn {
28+
[ui5-radio-button].ui5-li-singlesel-radiobtn {
2929
min-width: var(--_ui5_custom_list_item_rb_min_width);
3030
}

0 commit comments

Comments
 (0)