Skip to content

Commit 10c0cfd

Browse files
dimovpetardimovpetar
authored
fix(ui5-busy-indicator): make text and circles determine indicator dimensions when there is no content (SAP#11223)
1 parent 1fbb797 commit 10c0cfd

File tree

9 files changed

+78
-49
lines changed

9 files changed

+78
-49
lines changed

‎packages/fiori/src/themes/Search.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,10 @@
8181
height: 100%;
8282
}
8383

84+
.search-popover-busy-wrapper [ui5-busy-indicator] {
85+
z-index: 1;
86+
}
87+
8488
.search-popover-busy-wrapper::after {
8589
content: "";
8690
position: absolute;

‎packages/main/cypress/specs/BusyIndicator.cy.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import BusyIndicator from "../../src/BusyIndicator.js";
2+
3+
describe("Rendering", () => {
4+
it("Rendering without content", () => {
5+
cy.mount(<BusyIndicator id="busyInd" active></BusyIndicator>);
6+
7+
cy.get("#busyInd")
8+
.shadow()
9+
.find(".ui5-busy-indicator-busy-area:not(.ui5-busy-indicator-busy-area-over-content)")
10+
.should("exist");
11+
12+
});
13+
14+
it("Rendering with content", () => {
15+
cy.mount(
16+
<BusyIndicator id="busyInd" active>
17+
<span>content</span>
18+
</BusyIndicator>
19+
);
20+
21+
cy.get("#busyInd")
22+
.shadow()
23+
.find(".ui5-busy-indicator-busy-area.ui5-busy-indicator-busy-area-over-content")
24+
.should("exist");
25+
});
26+
});

‎packages/main/src/BusyIndicator.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
99
import {
1010
isDesktop,
1111
} from "@ui5/webcomponents-base/dist/Device.js";
12+
import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
1213
import type BusyIndicatorSize from "./types/BusyIndicatorSize.js";
1314
import BusyIndicatorTextPlacement from "./types/BusyIndicatorTextPlacement.js";
1415

@@ -166,6 +167,10 @@ class BusyIndicator extends UI5Element {
166167
};
167168
}
168169

170+
get hasContent() {
171+
return willShowContent(Array.from(this.children));
172+
}
173+
169174
onBeforeRendering() {
170175
if (this.active) {
171176
if (!this._isBusy && !this._busyTimeoutId) {

‎packages/main/src/BusyIndicatorTemplate.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ export default function BusyIndicatorTemplate(this: BusyIndicator) {
66
<div class="ui5-busy-indicator-root">
77
{this._isBusy && (
88
<div
9-
class="ui5-busy-indicator-busy-area"
9+
class={{
10+
"ui5-busy-indicator-busy-area": true,
11+
"ui5-busy-indicator-busy-area-over-content": this.hasContent,
12+
}}
1013
title={this.ariaTitle}
1114
tabindex={0}
1215
role="progressbar"

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,16 @@
7676
border-radius: inherit;
7777
}
7878

79-
.ui5-busy-indicator-busy-area {
79+
.ui5-busy-indicator-busy-area.ui5-busy-indicator-busy-area-over-content {
8080
position: absolute;
81-
z-index: 99;
8281
left: 0;
8382
right: 0;
8483
top: 0;
8584
bottom: 0;
85+
z-index: 99;
86+
}
87+
88+
.ui5-busy-indicator-busy-area {
8689
display: flex;
8790
justify-content: center;
8891
align-items: center;

‎packages/main/src/themes/sap_horizon/BusyIndicator-parameters.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,4 @@
22

33
:root {
44
--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
5-
--_ui5_busy_indicator_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
65
}

‎packages/main/src/themes/sap_horizon_dark/BusyIndicator-parameters.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,4 @@
22

33
:root {
44
--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
5-
--_ui5_busy_indicator_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
65
}

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

Lines changed: 30 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -37,52 +37,19 @@
3737
<br />
3838
<ui5-busy-indicator size="M" active id="indicator2"></ui5-busy-indicator>
3939

40-
<ui5-title>ui5-busy-indicator with text</ui5-title>
41-
42-
<br />
43-
<br />
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>
46-
<br />
47-
<br />
48-
49-
<div>
50-
<ui5-button id="beforeIndicatorWithBtn">focus stop before</ui5-button>
51-
<ui5-busy-indicator id="indicatorWithBtn" size="M" active>
52-
<ui5-button>Hello World</ui5-button>
53-
</ui5-busy-indicator>
54-
<ui5-button id="afterIndicatorWithBtn" >focus stop after</ui5-button>
55-
</div>
56-
40+
<h2>With Text</h2>
41+
<ui5-busy-indicator id="busy-indicator-text-placement-bottom" active text="Loading" class="busyindicator2auto redBorder"></ui5-busy-indicator>
42+
<ui5-busy-indicator id="busy-indicator-text-placement-top" text="Loading" text-placement="Top" active class="busyindicator2auto redBorder"></ui5-busy-indicator>
43+
<ui5-busy-indicator id="busy-indicator-text-placement-top" text="Very very very very very very very very very long text" active class="busyindicator2auto redBorder"></ui5-busy-indicator>
44+
<ui5-busy-indicator id="busy-indicator-text-placement-top" text="Very very very very very very very very very long text" active class="redBorder"></ui5-busy-indicator>
5745
<br />
5846
<br />
47+
<h2>With Text and Content (Not by Design)</h2>
5948
<ui5-busy-indicator size="M" active text="Loading">
6049
<ui5-checkbox text="Hello World"></ui5-checkbox>
6150
</ui5-busy-indicator>
62-
6351
<br />
6452
<br />
65-
66-
<ui5-button id="fetch-btn" class="busyindicator3auto">Fetch List Data</ui5-button>
67-
<br>
68-
<br>
69-
<ui5-busy-indicator id="busy-container" class="busyindicator4auto" size="M" text="Loading">
70-
<ui5-list id="fetch-list" no-data-text="No Data" header-text="Available Items" class="busyindicator5auto"></ui5-list>
71-
</ui5-busy-indicator>
72-
73-
<br>
74-
<br>
75-
<br>
76-
<br>
77-
78-
<ui5-busy-indicator size="M" active class="busyindicator6auto">
79-
<ui5-list class="busyindicator7auto">
80-
<ui5-li>Item 1</ui5-li>
81-
<ui5-li>Item 2</ui5-li>
82-
<ui5-li>Item 3</ui5-li>
83-
</ui5-list>
84-
</ui5-busy-indicator>
85-
8653
<ui5-busy-indicator size="M" active class="busyindicator6auto" text="Custom loading text">
8754
<ui5-list class="busyindicator7auto">
8855
<ui5-li>Item 1</ui5-li>
@@ -91,10 +58,19 @@
9158
</ui5-list>
9259
</ui5-busy-indicator>
9360

94-
<br>
95-
<br>
96-
<br>
61+
<h2>Tab Chain</h2>
62+
<div>
63+
<ui5-button id="beforeIndicatorWithBtn">focus stop before</ui5-button>
64+
<ui5-busy-indicator id="indicatorWithBtn" size="M" active>
65+
<ui5-button>Hello World</ui5-button>
66+
</ui5-busy-indicator>
67+
<ui5-button id="afterIndicatorWithBtn" >focus stop after</ui5-button>
68+
</div>
9769

70+
<br />
71+
<br />
72+
73+
<h2>Sizes</h2>
9874
<span>Medium (default) </span>
9975
<br>
10076
<br>
@@ -124,6 +100,16 @@
124100
<br>
125101
<br>
126102

103+
<h2>Dynamic Indicator</h2>
104+
<ui5-button id="fetch-btn" class="busyindicator3auto">Fetch List Data</ui5-button>
105+
<br>
106+
<br>
107+
<ui5-busy-indicator id="busy-container" class="busyindicator4auto" size="M" text="Loading">
108+
<ui5-list id="fetch-list" no-data-text="No Data" header-text="Available Items" class="busyindicator5auto"></ui5-list>
109+
</ui5-busy-indicator>
110+
111+
<br>
112+
<br>
127113
<ui5-busy-indicator id="busy-tree" class="busyindicator8auto" delay="0">
128114
<ui5-tree id="treeDynamic">
129115
<div slot="header">
@@ -183,7 +169,7 @@
183169

184170
<br>
185171
<br>
186-
<span>Indicator with delay</span>
172+
<h2>With Delay</h2>
187173
<div></div>
188174
<ui5-button id="open-dialog-delayed-indicator">Open dialog</ui5-button>
189175
<ui5-dialog id="dialog-delayed-indicator">
@@ -196,6 +182,7 @@
196182

197183
<br>
198184
<br>
185+
<h2>Height</h2>
199186
<div style="display: flex;">
200187
<div style="border: 1px solid black;">
201188
<ui5-busy-indicator active style="height: 100%;">

‎packages/main/test/pages/styles/BusyIndicator.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
.busyindicator2auto {
66
width: 10rem;
7-
border: 1px solid red
87
}
98

109
.busyindicator3auto {
@@ -45,4 +44,8 @@
4544

4645
.busyIndicatorRadius50 {
4746
border-radius: 50%;
47+
}
48+
49+
.redBorder {
50+
border: 1px solid red;
4851
}

0 commit comments

Comments
 (0)