Skip to content

Commit d43de85

Browse files
kskondovkskondov
authored
refactor(ui5-busy-indicator): API enhancements (#3361)
Part of: #3107 BREAKING_CHANGE: Changed tag name from "ui5-busyindicator" to "ui5-busy-indicator"
1 parent 22f354a commit d43de85

18 files changed

+109
-108
lines changed

‎docs/Public Module Imports.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
2525
| Avatar | `ui5-avatar` | `import "@ui5/webcomponents/dist/Avatar.js";` |
2626
| Avatar Group | `ui5-avatar-group` | `import "@ui5/webcomponents/dist/AvatarGroup.js";` |
2727
| Badge | `ui5-badge` | `import "@ui5/webcomponents/dist/Badge.js";` |
28-
| Busy Indicator | `ui5-busyindicator` | `import "@ui5/webcomponents/dist/BusyIndicator.js";` |
28+
| Busy Indicator | `ui5-busy-indicator` | `import "@ui5/webcomponents/dist/BusyIndicator.js";` |
2929
| Button | `ui5-button` | `import "@ui5/webcomponents/dist/Button.js";` |
3030
| Card | `ui5-card` | `import "@ui5/webcomponents/dist/Card.js";` |
3131
| Carousel | `ui5-carousel` | `import "@ui5/webcomponents/dist/Carousel.js";` |

‎packages/fiori/src/NotificationListGroupItem.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,6 @@
8282
</ui5-list>
8383

8484
{{#if busy}}
85-
<ui5-busyindicator active size="Medium" class="ui5-nli-busy"></ui5-busyindicator>
85+
<ui5-busy-indicator active size="Medium" class="ui5-nli-busy"></ui5-busy-indicator>
8686
{{/if}}
8787
</li>

‎packages/fiori/src/NotificationListItem.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,6 @@
9696
</div>
9797

9898
{{#if busy}}
99-
<ui5-busyindicator active size="Medium" class="ui5-nli-busy"></ui5-busyindicator>
99+
<ui5-busy-indicator active size="Medium" class="ui5-nli-busy"></ui5-busy-indicator>
100100
{{/if}}
101101
</li>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
height: 100%;
2929
}
3030

31-
ui5-busyindicator {
31+
ui5-busy-indicator {
3232
display: block;
3333
}
3434

@@ -181,13 +181,13 @@
181181
id="fcl"
182182
>
183183
<div class="column" id="startColumn" slot="startColumn">
184-
<ui5-busyindicator id="startBusy">
184+
<ui5-busy-indicator id="startBusy">
185185
<div class="ui5-message-page">
186186
<ui5-icon class="ui5-message-page-icon" name="filter"></ui5-icon>
187187
<div class="ui5-message-page-title">Loading companies.</div>
188188
<div class="ui5-message-page-description">Please wait...</div>
189189
</div>
190-
</ui5-busyindicator>
190+
</ui5-busy-indicator>
191191
</div>
192192
<div class="column" id="midColumn" slot="midColumn"></div>
193193
<div class="column" id="endColumn" slot="endColumn"></div>

‎packages/main/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
1111
| ------------------------ | -------------------- | ---------------------------------------------------------- |
1212
| Avatar | `ui5-avatar` | `import "@ui5/webcomponents/dist/Avatar.js";` |
1313
| Badge | `ui5-badge` | `import "@ui5/webcomponents/dist/Badge.js";` |
14-
| Busy Indicator | `ui5-busyindicator` | `import "@ui5/webcomponents/dist/BusyIndicator.js";` |
14+
| Busy Indicator | `ui5-busy-indicator` | `import "@ui5/webcomponents/dist/BusyIndicator.js";` |
1515
| Button | `ui5-button` | `import "@ui5/webcomponents/dist/Button.js";` |
1616
| Card | `ui5-card` | `import "@ui5/webcomponents/dist/Card.js";` |
1717
| Carousel | `ui5-carousel` | `import "@ui5/webcomponents/dist/Carousel.js";` |

‎packages/main/src/BusyIndicator.hbs

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="{{classes.root}}">
22
{{#if active}}
33
<div
4-
class="ui5-busyindicator-busy-area"
4+
class="ui5-busy-indicator-busy-area"
55
title="{{ariaTitle}}"
66
tabindex="0"
77
role="progressbar"
@@ -10,13 +10,13 @@
1010
aria-valuetext="Busy"
1111
aria-labelledby="{{labelId}}"
1212
>
13-
<div class="ui5-busyindicator-circles-wrapper">
14-
<div class="ui5-busyindicator-circle circle-animation-0"></div>
15-
<div class="ui5-busyindicator-circle circle-animation-1"></div>
16-
<div class="ui5-busyindicator-circle circle-animation-2"></div>
13+
<div class="ui5-busy-indicator-circles-wrapper">
14+
<div class="ui5-busy-indicator-circle circle-animation-0"></div>
15+
<div class="ui5-busy-indicator-circle circle-animation-1"></div>
16+
<div class="ui5-busy-indicator-circle circle-animation-2"></div>
1717
</div>
1818
{{#if text}}
19-
<ui5-label id="{{_id}}-label" class="ui5-busyindicator-text">
19+
<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text">
2020
{{text}}
2121
</ui5-label>
2222
{{/if}}

‎packages/main/src/BusyIndicator.js

+10-9
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js";
1818
* @public
1919
*/
2020
const metadata = {
21-
tag: "ui5-busyindicator",
21+
tag: "ui5-busy-indicator",
22+
altTag: "ui5-busyindicator",
2223
languageAware: true,
2324
slots: /** @lends sap.ui.webcomponents.main.BusyIndicator.prototype */ {
2425

@@ -85,17 +86,17 @@ const metadata = {
8586
*
8687
* <h3 class="comment-api-title">Overview</h3>
8788
*
88-
* The <code>ui5-busyindicator</code> signals that some operation is going on and that the
89+
* The <code>ui5-busy-indicator</code> signals that some operation is going on and that the
8990
* user must wait. It does not block the current UI screen so other operations could be triggered in parallel.
9091
* It displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.
9192
*
9293
* <h3>Usage</h3>
93-
* For the <code>ui5-busyindicator</code> you can define the size, the text and whether it is shown or hidden.
94+
* For the <code>ui5-busy-indicator</code> you can define the size, the text and whether it is shown or hidden.
9495
* In order to hide it, use the "active" property.
9596
* <br><br>
96-
* In order to show busy state over an HTML element, simply nest the HTML element in a <code>ui5-busyindicator</code> instance.
97+
* In order to show busy state over an HTML element, simply nest the HTML element in a <code>ui5-busy-indicator</code> instance.
9798
* <br>
98-
* <b>Note:</b> Since <code>ui5-busyindicator</code> has <code>display: inline-block;</code> by default and no width of its own,
99+
* <b>Note:</b> Since <code>ui5-busy-indicator</code> has <code>display: inline-block;</code> by default and no width of its own,
99100
* whenever you need to wrap a block-level element, you should set <code>display: block</code> to the busy indicator as well.
100101
*
101102
* <h4>When to use:</h4>
@@ -119,7 +120,7 @@ const metadata = {
119120
* @author SAP SE
120121
* @alias sap.ui.webcomponents.main.BusyIndicator
121122
* @extends UI5Element
122-
* @tagname ui5-busyindicator
123+
* @tagname ui5-busy-indicator
123124
* @public
124125
* @since 0.12.0
125126
*/
@@ -181,8 +182,8 @@ class BusyIndicator extends UI5Element {
181182
get classes() {
182183
return {
183184
root: {
184-
"ui5-busyindicator-root": true,
185-
"ui5-busyindicator-root--ie": isIE(),
185+
"ui5-busy-indicator-root": true,
186+
"ui5-busy-indicator-root--ie": isIE(),
186187
},
187188
};
188189
}
@@ -217,7 +218,7 @@ class BusyIndicator extends UI5Element {
217218
}
218219

219220
event.preventDefault();
220-
this.shadowRoot.querySelector(".ui5-busyindicator-busy-area").focus();
221+
this.shadowRoot.querySelector(".ui5-busy-indicator-busy-area").focus();
221222
}
222223
}
223224

‎packages/main/src/ComboBoxPopover.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
@ui5-after-open={{_afterOpenPopover}}
88
@ui5-after-close={{_afterClosePopover}}
99
>
10-
<ui5-busyindicator
10+
<ui5-busy-indicator
1111
?active={{loading}}
1212
size="Medium"
1313
class="ui5-combobox-busy"
1414
>
15-
</ui5-busyindicator>
15+
</ui5-busy-indicator>
1616

1717
<div slot="header" class="ui5-responsive-popover-header">
1818
<div class="row">

‎packages/main/src/List.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@
5555

5656
{{#if busy}}
5757
<div class="ui5-list-busy-row">
58-
<ui5-busyindicator
58+
<ui5-busy-indicator
5959
active size="Medium"
6060
class="ui5-list-busy-ind"
6161
style="{{styles.busyInd}}"
62-
></ui5-busyindicator>
62+
></ui5-busy-indicator>
6363
</div>
6464
{{/if}}
6565
</div>

‎packages/main/src/Table.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -87,11 +87,11 @@
8787

8888
{{#*inline "busyRow"}}
8989
<div tabindex="-1" class="ui5-table-busy-row">
90-
<ui5-busyindicator
90+
<ui5-busy-indicator
9191
class="ui5-table-busy-ind"
9292
style="{{styles.busy}}"
9393
active
9494
size="Medium"
95-
></ui5-busyindicator>
95+
></ui5-busy-indicator>
9696
</div>
9797
{{/inline}}

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

+21-21
Original file line numberDiff line numberDiff line change
@@ -6,71 +6,71 @@
66
color: var(--sapContent_IconColor);
77
}
88

9-
:host([active]) :not(.ui5-busyindicator-root--ie) ::slotted(:not([class^="ui5-busyindicator-"])) {
9+
:host([active]) :not(.ui5-busy-indicator-root--ie) ::slotted(:not([class^="ui5-busy-indicator-"])) {
1010
opacity: 0.6;
1111
}
1212

1313
/**
1414
* IE fix: 0.6 makes the content almost invisible, so we set it to 0.95 in IE
1515
*/
16-
:host([active]) .ui5-busyindicator-root--ie ::slotted(:not([class^="ui5-busyindicator-"])) {
16+
:host([active]) .ui5-busy-indicator-root--ie ::slotted(:not([class^="ui5-busy-indicator-"])) {
1717
opacity: 0.95;
1818
}
1919

20-
:host([size="Small"]) .ui5-busyindicator-root {
20+
:host([size="Small"]) .ui5-busy-indicator-root {
2121
min-width: 1.5rem;
2222
min-height: .5rem;
2323
}
2424

25-
:host([size="Small"][text]:not([text=""])) .ui5-busyindicator-root {
25+
:host([size="Small"][text]:not([text=""])) .ui5-busy-indicator-root {
2626
min-height: 1.75rem;
2727
}
2828

29-
:host([size="Small"]) .ui5-busyindicator-circle {
29+
:host([size="Small"]) .ui5-busy-indicator-circle {
3030
width: .5rem;
3131
height: .5rem;
3232
}
3333

34-
:host(:not([size])) .ui5-busyindicator-root,
35-
:host([size="Medium"]) .ui5-busyindicator-root {
34+
:host(:not([size])) .ui5-busy-indicator-root,
35+
:host([size="Medium"]) .ui5-busy-indicator-root {
3636
min-width: 3rem;
3737
min-height: 1rem;
3838
}
3939

40-
:host(:not([size])[text]:not([text=""])) .ui5-busyindicator-root,
41-
:host([size="Medium"][text]:not([text=""])) .ui5-busyindicator-root {
40+
:host(:not([size])[text]:not([text=""])) .ui5-busy-indicator-root,
41+
:host([size="Medium"][text]:not([text=""])) .ui5-busy-indicator-root {
4242
min-height: 2.25rem;
4343
}
4444

45-
:host(:not([size])) .ui5-busyindicator-circle,
46-
:host([size="Medium"]) .ui5-busyindicator-circle {
45+
:host(:not([size])) .ui5-busy-indicator-circle,
46+
:host([size="Medium"]) .ui5-busy-indicator-circle {
4747
width: 1rem;
4848
height: 1rem;
4949
}
5050

51-
:host([size="Large"]) .ui5-busyindicator-root {
51+
:host([size="Large"]) .ui5-busy-indicator-root {
5252
min-width: 6rem;
5353
min-height: 2rem;
5454
}
5555

56-
:host([size="Large"][text]:not([text=""])) .ui5-busyindicator-root {
56+
:host([size="Large"][text]:not([text=""])) .ui5-busy-indicator-root {
5757
min-height: 3.25rem;
5858
}
5959

60-
:host([size="Large"]) .ui5-busyindicator-circle {
60+
:host([size="Large"]) .ui5-busy-indicator-circle {
6161
width: 2rem;
6262
height: 2rem;
6363
}
6464

65-
.ui5-busyindicator-root {
65+
.ui5-busy-indicator-root {
6666
display: flex;
6767
justify-content: center;
6868
align-items: center;
6969
position: relative;
7070
background-color: inherit;
7171
}
7272

73-
.ui5-busyindicator-busy-area {
73+
.ui5-busy-indicator-busy-area {
7474
position: absolute;
7575
z-index: 99;
7676
left: 0;
@@ -84,22 +84,22 @@
8484
flex-direction: column;
8585
}
8686

87-
.ui5-busyindicator-busy-area:focus {
87+
.ui5-busy-indicator-busy-area:focus {
8888
outline: 1px dotted var(--sapContent_FocusColor);
8989
outline-offset: -2px;
9090
}
9191

92-
.ui5-busyindicator-circles-wrapper {
92+
.ui5-busy-indicator-circles-wrapper {
9393
line-height: 0;
9494
}
9595

96-
.ui5-busyindicator-circle {
96+
.ui5-busy-indicator-circle {
9797
display: inline-block;
9898
background-color: currentColor;
9999
border-radius: 50%;
100100
}
101101

102-
.ui5-busyindicator-circle::before {
102+
.ui5-busy-indicator-circle::before {
103103
content: "";
104104
width: 100%;
105105
height: 100%;
@@ -120,7 +120,7 @@
120120
animation-delay: 400ms;
121121
}
122122

123-
.ui5-busyindicator-text {
123+
.ui5-busy-indicator-text {
124124
width: 100%;
125125
margin-top: .25rem;
126126
text-align: center;

0 commit comments

Comments
 (0)