fix(ui5-busy-indicator): let focus border radius be set from the host…

… element (#9508)
SAP · Jul 19, 2024 · 01af2a6 · 01af2a6
1 parent 8dc5e51
commit 01af2a6
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 24 deletions.
diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css
@@ -2,10 +2,6 @@
 	display: inline-block;
 }
 
-:host {
-	border-radius: unset;
-}
-
 :host([_is-busy]) {
 	color: var(--_ui5_busy_indicator_color);
 }
@@ -103,7 +99,6 @@
 .ui5-busy-indicator-busy-area:focus-visible {
 	outline: var(--_ui5_busy_indicator_focus_outline);
 	outline-offset: -2px;
-	border-radius: var(--_ui5_busy_indicator_focus_border_radius);
 }
 
 .ui5-busy-indicator-circles-wrapper {

diff --git a/packages/main/src/themes/base/BusyIndicator-parameters.css b/packages/main/src/themes/base/BusyIndicator-parameters.css
@@ -1,6 +1,5 @@
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_IconColor);
 	--_ui5_busy_indicator_focus_outline:  var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	--_ui5_busy_indicator_focus_border_radius: 0px;
 	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 20%);
 }
diff --git a/packages/main/src/themes/sap_horizon/BusyIndicator-parameters.css b/packages/main/src/themes/sap_horizon/BusyIndicator-parameters.css
@@ -2,6 +2,5 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
-	--_ui5_busy_indicator_focus_border_radius: 0.75rem;
 	--_ui5_busy_indicator_focus_outline:  var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/BusyIndicator-parameters.css b/packages/main/src/themes/sap_horizon_dark/BusyIndicator-parameters.css
@@ -2,6 +2,5 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
-	--_ui5_busy_indicator_focus_border_radius: 0.75rem;
 	--_ui5_busy_indicator_focus_outline:  var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/BusyIndicator-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/BusyIndicator-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css
@@ -3,7 +3,6 @@
 @import "./Tag-parameters.css";
 @import "./Breadcrumbs-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
-@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "./CalendarLegendItem-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_exp/BusyIndicator-parameters.css b/packages/main/src/themes/sap_horizon_exp/BusyIndicator-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css
@@ -3,7 +3,6 @@
 @import "./Tag-parameters.css";
 @import "./Breadcrumbs-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
-@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/CalendarLegend-parameters.css";
 @import "../base/CalendarLegendItem-parameters.css";

diff --git a/packages/main/test/pages/BusyIndicator.html b/packages/main/test/pages/BusyIndicator.html
@@ -218,6 +218,17 @@
     </div>
     <br />
 
+	<h2>Border Radius</h2>
+	<ui5-busy-indicator active>
+		<div class="circle">
+			<span>No border radius set (default)</span>
+		</div>
+	</ui5-busy-indicator>
+	<ui5-busy-indicator active class="busyIndicatorRadius50">
+		<div class="circle">
+			<span>With 50% border radius</span>
+		</div>
+	</ui5-busy-indicator>
 
 	<script>
 		document.getElementById("fetch-btn").addEventListener("click", function(event) {

diff --git a/packages/main/test/pages/styles/BusyIndicator.css b/packages/main/test/pages/styles/BusyIndicator.css
@@ -32,3 +32,17 @@
 .busyindicator8auto {
     width: 100%;
 }
+
+.circle {
+    background-color: orange;
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.busyIndicatorRadius50 {
+    border-radius: 50%;
+}