fix(ui5-shellbar): separator height is fixed (#12056)

PetyaMarkovaBogdanova · web-flow · commit 0995652783f2 · 2025-08-05T09:11:54.000+03:00
diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
@@ -372,9 +372,9 @@ slot[name="profile"] {
 .ui5-shellbar-separator {
 	flex-grow: 0;
 	flex-shrink: 0;
-	height: 1rem;
+	height: var(--_ui5-shellbar-separator-height);
 	width: 1px;
-	background-color: var(--sapToolbar_SeparatorColor);
+	background-color: var(--_ui5-shellbar_separator-color);
 }
 
 .ui5-shellbar-separator-end {
diff --git a/packages/fiori/src/themes/base/ShellBar-parameters.css b/packages/fiori/src/themes/base/ShellBar-parameters.css
@@ -21,4 +21,5 @@
 	--_ui5_shellbar_image_button_border_radius: 50%;
 	--_ui5-shellbar-content-margin-start: 0.5rem;
 	--_ui5-shellbar-overflow-button-margin: 0.5rem;
+	--_ui5-shellbar_separator-color: var(--sapToolbar_SeparatorColor);
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -165,6 +165,9 @@
 
 	/* DynamicPageTitle */
 	--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);
+
+	/* ShellBar */
+	--_ui5-shellbar-separator-height: 1.5rem;
 }
 
 [data-ui5-compact-size],
@@ -401,4 +404,7 @@
 
 	/* DynamicPageTitle */
 	--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);
+
+	/* ShellBar */
+	--_ui5-shellbar-separator-height: 1.5rem;
 }

Original file line number	Diff line number	Diff line change
`@@ -21,4 +21,5 @@`
`21`	`21`	`--_ui5_shellbar_image_button_border_radius: 50%;`
`22`	`22`	`--_ui5-shellbar-content-margin-start: 0.5rem;`
`23`	`23`	`--_ui5-shellbar-overflow-button-margin: 0.5rem;`
	`24`	`+ --_ui5-shellbar_separator-color: var(--sapToolbar_SeparatorColor);`
`24`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -165,6 +165,9 @@`
`165`	`165`
`166`	`166`	`/* DynamicPageTitle */`
`167`	`167`	`--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);`
	`168`	`+`
	`169`	`+ /* ShellBar */`
	`170`	`+ --_ui5-shellbar-separator-height: 1.5rem;`
`168`	`171`	`}`
`169`	`172`
`170`	`173`	`[data-ui5-compact-size],`
`@@ -401,4 +404,7 @@`
`401`	`404`
`402`	`405`	`/* DynamicPageTitle */`
`403`	`406`	`--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);`
	`407`	`+`
	`408`	`+ /* ShellBar */`
	`409`	`+ --_ui5-shellbar-separator-height: 1.5rem;`
`404`	`410`	`}`