fix(ui5-busy-indicator): add block layer (#9233)

According to the design if busy indicator is used over some component there should be transparent background as overlay. Fixes: #9079
SAP · Jun 18, 2024 · da2c979 · da2c979
1 parent e53dd2d
commit da2c979
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 2 deletions.
diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css
@@ -89,6 +89,10 @@
 	flex-direction: column;
 }
 
+:host(:not(:empty)) .ui5-busy-indicator-busy-area {
+	background-color: var(--_ui5_busy_indicator_block_layer);
+}
+
 .ui5-busy-indicator-busy-area:focus {
 	outline: var(--_ui5_busy_indicator_focus_outline);
 	outline-offset: -2px;

diff --git a/packages/main/src/themes/base/BusyIndicator-parameters.css b/packages/main/src/themes/base/BusyIndicator-parameters.css
@@ -2,4 +2,5 @@
 	--_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_fiori_3_hcb/BusyIndicator-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/BusyIndicator-parameters.css";
+
+:root {
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -2,7 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
-@import "../base/BusyIndicator-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/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/BusyIndicator-parameters.css";
+
+:root {
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -2,7 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
-@import "../base/BusyIndicator-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/src/themes/sap_horizon_hcb/BusyIndicator-parameters.css b/packages/main/src/themes/sap_horizon_hcb/BusyIndicator-parameters.css
@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/BusyIndicator-parameters.css b/packages/main/src/themes/sap_horizon_hcw/BusyIndicator-parameters.css
@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
+	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,5 @@ @@
     :root {
     	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
+    	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
     }