feat(ui5-avatar-group): implement Horizon theme (#5171)

Related to: #5008
SAP · May 9, 2022 · 78298af · 78298af
1 parent 1c8870b
commit 78298af
Show file tree

Hide file tree

Showing 17 changed files with 28 additions and 12 deletions.
diff --git a/packages/main/src/themes/AvatarGroup.css b/packages/main/src/themes/AvatarGroup.css
@@ -10,6 +10,7 @@
 :host([type="Group"]) .ui5-avatar-group-items:focus {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: var(--_ui5_avatar_group_focus_border_radius);
 }
 
 .ui5-avatar-group-root {
@@ -41,8 +42,8 @@
 
 ::slotted([ui5-button][focused]),
 .ui5-avatar-group-overflow-btn[focused] {
-	outline: var(--_ui5_button_outline);
-	outline-offset: var(--_ui5_avatar_group_overflow_button_focus_offset);
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
 }
 
 .ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {

diff --git a/packages/main/src/themes/base/AvatarGroup-parameter.css b/packages/main/src/themes/base/AvatarGroup-parameter.css
diff --git a/packages/main/src/themes/base/AvatarGroup-parameters.css b/packages/main/src/themes/base/AvatarGroup-parameters.css
@@ -0,0 +1,3 @@
+[ui5-avatar-group] {
+	--_ui5_button_focused_border: none
+}
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "../base/Avatar-parameters.css";
+@import "../base/AvatarGroup-parameters.css";
 @import "../base/Badge-parameters.css";
 @import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
+@import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
+@import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
+@import "../base/AvatarGroup-parameters.css";
 @import "../base/Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
+@import "../base/AvatarGroup-parameters.css";
 @import "../base/Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";

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
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
+@import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";

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
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
+@import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon/AvatarGroup-parameters.css b/packages/main/src/themes/sap_horizon/AvatarGroup-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/AvatarGroup-parameters.css";
+
+:root {
+	--_ui5_avatar_group_focus_border_radius: 0.375rem;
+}
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -1,7 +1,8 @@
 @import "./sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
-@import "./Badge-parameters.css";
+@import "./AvatarGroup-parameters.css";
+@import "../base/Badge-parameters.css";
 @import "./Breadcrumbs-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -1,7 +1,8 @@
 @import "./sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
-@import "./Badge-parameters.css";
+@import "../sap_horizon/AvatarGroup-parameters.css";
+@import "../base/Badge-parameters.css";
 @import "./Breadcrumbs-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
+@import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "./Avatar-parameters.css";
+@import "../base/AvatarGroup-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";

diff --git a/packages/main/test/pages/AvatarGroup.html b/packages/main/test/pages/AvatarGroup.html
@@ -24,7 +24,7 @@
 
 </head>
 
-<body>
+<body class="avatargroup1auto">
 	<ul>
 	    <li><a href="?sap-ui-theme=sap_fiori_3">Fiori 3</a></li>
 		<li><a href="?sap-ui-theme=sap_fiori_3_dark">Fiori 3 Dark</a></li>

diff --git a/packages/main/test/pages/styles/AvatarGroup.css b/packages/main/test/pages/styles/AvatarGroup.css
@@ -24,7 +24,9 @@ code {
 }
 
 .avatargroup1auto {
-    width: 400px
+    width: 400px;
+    background-color: var(--sapBackgroundColor);
+    color: var(--sapTextColor);
 }
 
 .avatargroup2auto {
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,7 @@ @@
     </head>
-    <body>
+    <body class="avatargroup1auto">
     	<ul>
     	    <li><a href="?sap-ui-theme=sap_fiori_3">Fiori 3</a></li>
     		<li><a href="?sap-ui-theme=sap_fiori_3_dark">Fiori 3 Dark</a></li>
@@ Expand Down @@