WIP: fix border colors of the selected semantic icon tabs

SAP · Apr 10, 2019 · 38cdc35 · 38cdc35
1 parent c7e9d6e
commit 38cdc35
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/packages/main/src/themes-next/TabContainer.css b/packages/main/src/themes-next/TabContainer.css
@@ -218,6 +218,7 @@ ui5-tabcontainer {
 .ui5-tc__headerItem--positive .ui5-tc-headerItemIcon,
 .ui5-tc__overflowItem--positive {
 	color: var(--sapUiPositive);
+	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
 }
 
 .ui5-tc__headerItem--positive.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon {
@@ -234,6 +235,7 @@ ui5-tabcontainer {
 .ui5-tc__headerItem--negative .ui5-tc-headerItemIcon,
 .ui5-tc__overflowItem--negative {
 	color: var(--sapUiNegative);
+	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
 }
 
 .ui5-tc__headerItem--negative.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon {
@@ -250,6 +252,7 @@ ui5-tabcontainer {
 .ui5-tc__headerItem--critical .ui5-tc-headerItemIcon,
 .ui5-tc__overflowItem--critical {
 	color: var(--sapUiCritical);
+	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
 }
 
 .ui5-tc__headerItem--critical.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon {
@@ -266,6 +269,7 @@ ui5-tabcontainer {
 .ui5-tc__headerItem--neutral .ui5-tc-headerItemIcon,
 .ui5-tc__overflowItem--neutral {
 	color: var(--sapUiNeutral);
+	border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
 }
 
 .ui5-tc__headerItem--neutral.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon {

diff --git a/packages/main/src/themes-next/base/TabContainer-parameters.css b/packages/main/src/themes-next/base/TabContainer-parameters.css
@@ -2,9 +2,13 @@
 	--_ui5_tc_header_box_shadow: inset 0 -0.25rem 0 -0.125rem var(--sapUiObjectHeaderBorderColor);
 	--_ui5_tc_header_border_bottom: 0.125rem solid var(--sapUiObjectHeaderBackground);
 	--_ui5_tc_headerItem_color: var(--sapUiGroupTitleTextColor);
+	--_ui5_tc_headerItem_positive_selected_border_color: var(--sapUiPositive);
+	--_ui5_tc_headerItem_negative_selected_border_color: var(--sapUiNegative);
+	--_ui5_tc_headerItem_critical_selected_border_color: var(--sapUiCritical);
+	--_ui5_tc_headerItem_neutral_selected_border_color: var(--sapUiNeutral);
 	--_ui5_tc_headerItemContent_border_bottom: 0.125rem solid var(--sapUiSelected);
 	--_ui5_tc_headerItem_focus_border: 1px dotted var(--sapUiContentFocusColor);
-	--_ui5_tc_headerItemIcon_border: 1px solid currentColor;
+	--_ui5_tc_headerItemIcon_border: 1px solid var(--sapUiHighlight);
 	--_ui5_tc_headerItemIcon_color: var(--sapUiHighlight);
 	--_ui5_tc_headerItemIcon_selected_background: var(--sapUiHighlight);
 	--_ui5_tc_headerItemIcon_selected_color: var(--sapUiGroupContentBackground);

diff --git a/packages/main/src/themes-next/sap_belize_hcb/TabContainer-parameters.css b/packages/main/src/themes-next/sap_belize_hcb/TabContainer-parameters.css
@@ -5,6 +5,10 @@
 	--_ui5_tc_headerItem_focus_border: 0.125rem dotted var(--sapUiContentFocusColor);
 	--_ui5_tc_headerItemIcon_border: 1px solid var(--sapUiObjectHeaderBorderColor);
 	--_ui5_tc_headerItemIcon_color: var(--sapUiObjectHeaderBorderColor);
+	--_ui5_tc_headerItem_positive_selected_border_color: var(--sapUiObjectHeaderBorderColor);
+	--_ui5_tc_headerItem_negative_selected_border_color: var(--sapUiObjectHeaderBorderColor);
+	--_ui5_tc_headerItem_critical_selected_border_color: var(--sapUiObjectHeaderBorderColor);
+	--_ui5_tc_headerItem_neutral_selected_border_color: var(--sapUiObjectHeaderBorderColor);
 	--_ui5_tc_headerItemIcon_selected_background: var(--sapUiSelected);
 	--_ui5_tc_headerItemIcon_selected_color: var(--sapUiContentIconColor);
 	--_ui5_tc_headerItemIcon_positive_selected_background: var(--sapUiSelected);

diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/TabContainer.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/TabContainer.sample.html
@@ -44,6 +44,9 @@ <h3>Basic TabContainer</h3>
 				<ui5-tab icon="sap-icon://menu" text="Tab 1" icon-color="Positive">
 					<ui5-label>Quibusdam, veniam! Architecto debitis iusto ad et, asperiores quisquam perferendis reprehenderit ipsa voluptate minus minima, perspiciatis cum. Totam harum necessitatibus numquam voluptatum.</ui5-label>
 				</ui5-tab>
+				<ui5-tab icon="sap-icon://menu" icon-color="Negative" text="asd"></ui5-tab>
+				<ui5-tab icon="sap-icon://menu" icon-color="Critical" text="asd"></ui5-tab>
+				<ui5-tab icon="sap-icon://menu" icon-color="Neutral" text="asd"></ui5-tab>
 				<ui5-tab icon="sap-icon://activities" text="Tab 2" selected>
 					<ui5-label>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magni facere error dicta beatae optio repudiandae vero, quidem voluptatibus perferendis eum maiores rem tempore voluptates aperiam eos enim delectus unde.</ui5-label>
 				</ui5-tab>
@@ -61,7 +64,7 @@ <h3>Basic TabContainer</h3>
 		</div>
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-tabcontainer class="full-width" show-overflow>
-	<ui5-tab icon="sap-icon://menu" text="Tab 1">
+	<ui5-tab text="Tab 1">
 		<ui5-label>Quibusdam, veniam! Architecto debitis iusto ad et, asperiores quisquam perferendis reprehenderit ipsa voluptate minus minima, perspiciatis cum. Totam harum necessitatibus numquam voluptatum.</ui5-label>
 	</ui5-tab>
 	<ui5-tab icon="sap-icon://activities" text="Tab 2" selected>
@@ -85,6 +88,10 @@ <h3>Basic TabContainer</h3>
 		<h3>Text Only TabContainer</h3>
 		<div class="snippet">
 			<ui5-tabcontainer class="full-width" collapsed fixed show-overflow>
+				<ui5-tab icon-color="Positive" text="asd"></ui5-tab>
+				<ui5-tab icon-color="Negative" text="asd"></ui5-tab>
+				<ui5-tab icon-color="Critical" text="asd"></ui5-tab>
+				<ui5-tab icon-color="Neutral" text="asd"></ui5-tab>
 				<ui5-tab text="Home"></ui5-tab>
 				<ui5-tab text="What's new" selected></ui5-tab>
 				<ui5-tab text="Who are we"></ui5-tab>