Skip to content

Commit a494473

Browse files
GerganaKremenskaGerganaKremenska
authored
feat(ui5-busy-indicator): added property text-placement (#8471)
* feat(ui5-busy-indicator): added new property text-placement * feat(ui5-busy-indicator): added property text-placement added example and additional test * feat(ui5-busy-indicator): added property text-placement added example and additional test * feat(ui5-busy-indicator): added property text-placement updated sample * feat(ui5-busy-indicator): added property text-placement texts are updated
1 parent 93b074d commit a494473

File tree

10 files changed

+133
-11
lines changed

10 files changed

+133
-11
lines changed

‎packages/main/src/BusyIndicator.hbs

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,30 @@
1111
aria-labelledby="{{labelId}}"
1212
data-sap-focus-ref
1313
>
14+
{{#if textPosition.top}}
15+
{{> busy-text}}
16+
{{/if}}
1417
<div class="ui5-busy-indicator-circles-wrapper">
1518
<div class="ui5-busy-indicator-circle circle-animation-0"></div>
1619
<div class="ui5-busy-indicator-circle circle-animation-1"></div>
1720
<div class="ui5-busy-indicator-circle circle-animation-2"></div>
1821
</div>
19-
{{#if text}}
20-
<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text" wrapping-type="Normal">
21-
{{text}}
22-
</ui5-label>
22+
{{#if textPosition.bottom}}
23+
{{> busy-text}}
2324
{{/if}}
2425
</div>
2526
{{/if}}
26-
2727
<slot></slot>
2828

2929
{{#if _isBusy}}
3030
<span data-ui5-focus-redirect tabindex="0" @focusin="{{_redirectFocus}}"></span>
3131
{{/if}}
32-
</div>
32+
</div>
33+
34+
{{#*inline "busy-text"}}
35+
{{#if text}}
36+
<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text {{classes.textPosition}}" wrapping-type="Normal">
37+
{{text}}
38+
</ui5-label>
39+
{{/if}}
40+
{{/inline}}

‎packages/main/src/BusyIndicator.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
88
import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
99
import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
1010
import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
11+
import BusyIndicatorTextPlacement from "./types/BusyIndicatorTextPlacement.js";
1112
import Label from "./Label.js";
1213

1314
// Template
@@ -98,6 +99,15 @@ class BusyIndicator extends UI5Element {
9899
@property({ validator: Integer, defaultValue: 1000 })
99100
delay!: number;
100101

102+
/**
103+
* Defines the placement of the text.
104+
*
105+
* @default "Bottom"
106+
* @public
107+
*/
108+
@property({ type: BusyIndicatorTextPlacement, defaultValue: BusyIndicatorTextPlacement.Bottom })
109+
textPlacement!: `${BusyIndicatorTextPlacement}`;
110+
101111
/**
102112
* Defines if the component is currently in busy state.
103113
* @private
@@ -154,6 +164,16 @@ class BusyIndicator extends UI5Element {
154164
root: {
155165
"ui5-busy-indicator-root": true,
156166
},
167+
textPosition: {
168+
"ui5-busy-indicator-text-placement-top ": this.textPlacement === BusyIndicatorTextPlacement.Top,
169+
"ui5-busy-indicator-text-placement-bottom ": this.textPlacement === BusyIndicatorTextPlacement.Bottom,
170+
},
171+
};
172+
}
173+
get textPosition() {
174+
return {
175+
top: this.text && this.textPlacement === BusyIndicatorTextPlacement.Top,
176+
bottom: this.text && this.textPlacement === BusyIndicatorTextPlacement.Bottom,
157177
};
158178
}
159179

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,17 @@
128128

129129
.ui5-busy-indicator-text {
130130
width: 100%;
131-
margin-top: .25rem;
132131
text-align: center;
133132
}
134133

134+
.ui5-busy-indicator-text-placement-top {
135+
margin-bottom: 0.5rem
136+
}
137+
138+
.ui5-busy-indicator-text-placement-bottom {
139+
margin-top: 0.5rem;
140+
}
141+
135142
@keyframes grow {
136143
0%, 50%, 100% {
137144
-webkit-transform: scale(0.5);
@@ -140,7 +147,7 @@
140147
}
141148
25% {
142149
-webkit-transform: scale(1);
143-
-moz-transform: scale(1);
150+
-moz-transform: scale(1);
144151
transform: scale(1);
145152
}
146153
}

‎packages/main/src/types/BusyIndicatorTextPlacement.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* Different BusyIndicator text placements.
3+
*
4+
* @public
5+
*/
6+
enum BusyIndicatorTextPlacement {
7+
/**
8+
* The text will be displayed on top of the busy indicator.
9+
* @public
10+
*/
11+
Top = "Top",
12+
13+
/**
14+
* The text will be displayed at the bottom of the busy indicator.
15+
* @public
16+
*/
17+
Bottom = "Bottom",
18+
}
19+
20+
export default BusyIndicatorTextPlacement;

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121

2222

2323
<link rel="stylesheet" type="text/css" href="./styles/BusyIndicator.css">
24+
<link rel="stylesheet" type="text/css" href="./styles/Dialog.css">
2425
</head>
2526

2627
<body class="busyindicator1auto">
@@ -40,8 +41,8 @@
4041

4142
<br />
4243
<br />
43-
<ui5-busy-indicator active text="Loading" class="busyindicator2auto"></ui5-busy-indicator>
44-
44+
<ui5-busy-indicator id="busy-indicator-text-placement-bottom" active text="Loading" class="busyindicator2auto"></ui5-busy-indicator>
45+
<ui5-busy-indicator id="busy-indicator-text-placement-top" text="Loading" text-placement="Top" active class="busyindicator2auto"></ui5-busy-indicator>
4546
<br />
4647
<br />
4748

@@ -172,6 +173,15 @@
172173
</div>
173174
</ui5-dialog>
174175

176+
<ui5-button id="open-dialog-loading-text">Open Dialog with loading text indicator</ui5-button>
177+
<ui5-dialog id="dialog-loading-text" header-text="Loading Data" initial-focus="btnOk">
178+
<ui5-busy-indicator style="display: block;" active text="Loading data from backend server" text-placement="Top">
179+
</ui5-busy-indicator>
180+
<div slot="footer" class="dialogFooter">
181+
<ui5-button id="btnOk" design="Emphasized">OK</ui5-button>
182+
</div>
183+
</ui5-dialog>
184+
175185
<br>
176186
<br>
177187
<span>Indicator with delay</span>
@@ -208,6 +218,7 @@
208218
</div>
209219
<br />
210220

221+
211222
<script>
212223
document.getElementById("fetch-btn").addEventListener("click", function(event) {
213224
var busyIndicator = document.getElementById("busy-container");
@@ -270,6 +281,11 @@
270281
document.getElementById("dialog-delayed-indicator-indicator").active = true;
271282
document.getElementById("dialog-delayed-indicator").show();
272283
});
284+
285+
document.getElementById("open-dialog-loading-text").addEventListener("click", function () {
286+
document.getElementById("dialog-loading-text").show();
287+
});
288+
273289
</script>
274290
</body>
275291

‎packages/main/test/specs/BusyIndicator.spec.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,4 +112,18 @@ describe("BusyIndicator general interaction", () => {
112112

113113
assert.equal(height, 144, "Height of the root element inherits the height of the Busy Indicator");
114114
});
115+
116+
it("test busy indicators text-placement=top property", async () => {
117+
const busyIndicator = await browser.$("#busy-indicator-text-placement-top");
118+
const busyIndicatorTopLabel = await busyIndicator.shadow$(".ui5-busy-indicator-text-placement-top");
119+
120+
assert.isOk(busyIndicatorTopLabel, "The text is displayed on top of the busy indicator");
121+
});
122+
123+
it("test busy indicators text-placement=bottom property", async () => {
124+
const busyIndicator = await browser.$("#busy-indicator-text-placement-bottom");
125+
const busyIndicatorTopLabel = await busyIndicator.shadow$(".ui5-busy-indicator-text-placement-bottom");
126+
127+
assert.isOk(busyIndicatorTopLabel, "The text is displayed at the bottom of the busy indicator");
128+
});
115129
});

‎packages/website/docs/_components_pages/main/BusyIndicator.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ slug: ../BusyIndicator
55
import Basic from "../../_samples/main/BusyIndicator/Basic/Basic.md";
66
import WithComponent from "../../_samples/main/BusyIndicator/WithComponent/WithComponent.md";
77
import Sizes from "../../_samples/main/BusyIndicator/Sizes/Sizes.md";
8+
import TextPlacement from "../../_samples/main/BusyIndicator/TextPlacement/TextPlacement.md";
89

910

1011
<%COMPONENT_OVERVIEW%>
@@ -14,13 +15,18 @@ import Sizes from "../../_samples/main/BusyIndicator/Sizes/Sizes.md";
1415

1516
<%COMPONENT_METADATA%>
1617

17-
## More Samples
18+
## More Samples
1819

1920
### Sizes
2021
The BusyIndicator comes in several sizes - Small, Medium and Large.
2122

2223
<Sizes />
2324

25+
### Text Placement with display text
26+
The BusyIndicator can display text either above (via text-placement="Top") or below the animated dots (by default).
27+
28+
<TextPlacement />
29+
2430
### Busy component
2531
The BusyIndicator can be placed over another web component.
2632

‎packages/website/docs/_samples/main/BusyIndicator/TextPlacement/TextPlacement.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import html from '!!raw-loader!./sample.html';
2+
import js from '!!raw-loader!./main.js';
3+
4+
<Editor html={html} js={js} />

‎packages/website/docs/_samples/main/BusyIndicator/TextPlacement/main.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "@ui5/webcomponents/dist/BusyIndicator.js";

‎packages/website/docs/_samples/main/BusyIndicator/TextPlacement/sample.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!-- playground-fold -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Sample</title>
9+
</head>
10+
11+
<body style="background-color: var(--sapBackgroundColor)">
12+
<!-- playground-fold-end -->
13+
14+
<ui5-busy-indicator text="Loading data from backend server.." active>
15+
<div style="height: 200px; width: 200px;"></div>
16+
</ui5-busy-indicator>
17+
<ui5-busy-indicator text="Loading data from backend server..." text-placement="Top" active>
18+
<div style="height: 200px; width: 200px;"></div>
19+
</ui5-busy-indicator>
20+
21+
<!-- playground-fold -->
22+
<script type="module" src="main.js"></script>
23+
</body>
24+
25+
</html>
26+
<!-- playground-fold-end -->

0 commit comments

Comments
 (0)