feat(ui5-panel): enable custom styling of title (#7688)

SAP · Oct 12, 2023 · 9d5a3d1 · 9d5a3d1
1 parent 1299f76
commit 9d5a3d1
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css
@@ -28,6 +28,10 @@
 	outline: none;
 	box-sizing: border-box;
 	padding-right: var(--_ui5_panel_header_padding_right);
+	font-family: "72override", var(--sapFontHeaderFamily);
+	font-size: var(--sapGroup_Title_FontSize);
+	font-weight: normal;
+	color: var(--sapGroup_TitleTextColor);
 }
 
 .ui5-panel-header-icon {
@@ -81,11 +85,6 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	font-family: "72override", var(--sapFontHeaderFamily);
-	font-size: var(--sapGroup_Title_FontSize);
-	font-weight: normal;
-	color: var(--sapGroup_TitleTextColor);
-	font-weight: normal;
 }
 
 .ui5-panel-content {

diff --git a/packages/main/test/pages/Panel.html b/packages/main/test/pages/Panel.html
@@ -88,7 +88,7 @@
 
 	<br>
 
-	<ui5-panel id="panel-expandable" accessible-role="Complementary" header-text="Both expandable and expanded" header-level="H4">
+	<ui5-panel id="panel-expandable" accessible-role="Complementary" header-text="Both expandable and expanded with custom color" header-level="H4">
 
 
 		<!-- Content -->

diff --git a/packages/main/test/pages/styles/Panel.css b/packages/main/test/pages/styles/Panel.css
@@ -11,3 +11,7 @@
 #panel-stickyHeader::part(content) {
     max-height: 70px;
 }
+
+#panel-expandable::part(header) {
+    color: green;
+}