feat(ui5-tab-container): adjust focus styles in overflow to sap_horizon

GerganaKremenska · web-flow · commit e2a4bdcab7c1 · 2021-10-29T19:05:06.000+03:00
diff --git a/packages/main/src/TabContainerPopover.hbs b/packages/main/src/TabContainerPopover.hbs
@@ -6,6 +6,7 @@
 	with-padding
 	hide-arrow
 	_hide-header
+	class="ui5-tab-container-responsive-popover"
 >
 	<ui5-list @ui5-item-press="{{_onOverflowListItemSelect}}">
 		{{#each items}}
diff --git a/packages/main/src/themes/TabInOverflow.css b/packages/main/src/themes/TabInOverflow.css
@@ -45,3 +45,13 @@
     padding-right: 1rem;
     color: var(--_ui5_tc_overflowItem_current_color);
 }
+
+.ui5-tab-container-responsive-popover [ui5-li-custom][focused]:first-child::part(native-li)::after {
+	border-top-left-radius: var(--_ui5_tc_overflowItem_focus_border);
+	border-top-right-radius: var(--_ui5_tc_overflowItem_focus_border);
+}
+
+.ui5-tab-container-responsive-popover [ui5-li-custom][focused]:last-child::part(native-li)::after {
+	border-bottom-left-radius: var(--_ui5_tc_overflowItem_focus_border);
+	border-bottom-right-radius: var(--_ui5_tc_overflowItem_focus_border);
+}
diff --git a/packages/main/src/themes/base/TabContainer-parameters.css b/packages/main/src/themes/base/TabContainer-parameters.css
@@ -56,6 +56,7 @@
 	--_ui5_tc_overflowItem_positive_color: var(--sapPositiveColor);
 	--_ui5_tc_overflowItem_negative_color: var(--sapNegativeColor);
 	--_ui5_tc_overflowItem_critical_color: var(--sapCriticalColor);
+	--_ui5_tc_overflowItem_focus_border: 0px;
 
 	/* Header Item icons */
 	--_ui5_tc_headerItemIcon_border: 1px solid var(--sapHighlightColor);
diff --git a/packages/main/src/themes/sap_horizon/TabContainer-parameters.css b/packages/main/src/themes/sap_horizon/TabContainer-parameters.css
@@ -19,4 +19,7 @@
 
 	/* Header Item icons */
 	--_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapHighlightColor);
+
+	/* Overflow Item */
+	--_ui5_tc_overflowItem_focus_border: 0.75rem;
 }

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@`
`6`	`6`	`with-padding`
`7`	`7`	`hide-arrow`
`8`	`8`	`_hide-header`
	`9`	`+ class="ui5-tab-container-responsive-popover"`
`9`	`10`	`>`
`10`	`11`	`<ui5-list @ui5-item-press="{{_onOverflowListItemSelect}}">`
`11`	`12`	`{{#each items}}`
Original file line number	Diff line number	Diff line change
`@@ -19,4 +19,7 @@`
`19`	`19`
`20`	`20`	`/* Header Item icons */`
`21`	`21`	`--_ui5_tc_headerItemIcon_border: 0.125rem solid var(--sapHighlightColor);`
	`22`	`+`
	`23`	`+ /* Overflow Item */`
	`24`	`+ --_ui5_tc_overflowItem_focus_border: 0.75rem;`
`22`	`25`	`}`