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

* fix(ui5-busy-indicator): add block layer According to the design if busy indicator is used over some component there should be transparent background as overlay. fixes #9079
SAP · Jun 14, 2024 · ba4ddb3 · ba4ddb3
1 parent b124e3d
commit ba4ddb3
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);
+}
+
 :host([desktop]) .ui5-busy-indicator-busy-area:focus,
 .ui5-busy-indicator-busy-area:focus-visible {
 	outline: var(--_ui5_busy_indicator_focus_outline);

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
@@ -3,7 +3,7 @@
 @import "./Tag-parameters.css";
 @import "./Bar-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 "./Tag-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%);
 }