WIP: add semantic icons in HCB

SAP · Apr 10, 2019 · 31142b0 · 31142b0
1 parent 284605f
commit 31142b0
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 2 deletions.
diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs
@@ -103,6 +103,7 @@
 {{#*inline "textOnlyTab"}}
 	<div class="{{this.headerItemContentClasses}}">
 		<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
+			<span class="{{this.headerItemSemanticIconClasses}}"></span>
 			{{this.item.text}}
 		</span>
 
@@ -122,6 +123,7 @@
 
 		{{#if this.item.text}}
 			<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
+				<span class="{{this.headerItemSemanticIconClasses}}"></span>
 				{{this.item.text}}
 			</span>
 		{{/if}}
@@ -136,6 +138,7 @@
 
 		{{#if this.item.text}}
 			<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
+				<span class="{{this.headerItemSemanticIconClasses}}"></span>
 				{{this.item.text}}
 			</span>
 		{{/if}}

diff --git a/packages/main/src/TabContainerTemplateContext.js b/packages/main/src/TabContainerTemplateContext.js
@@ -64,6 +64,7 @@ class TabContainerTemplateContext {
 				headerItemClasses: calculateHeaderItemClasses(item, context),
 				headerItemContentClasses: calculateHeaderItemContentClasses(item),
 				headerItemIconClasses: calculateHeaderItemIconClasses(item),
+				headerItemSemanticIconClasses: calculateHeaderItemSemanticIconClasses(item),
 				headerItemTextClasses: calculateHeaderItemTextClasses(item),
 				headerItemAdditionalTextClasses: calculateHeaderItemAdditionalTextClasses(item),
 				overflowItemClasses: calculateOverflowItemClasses(item),
@@ -136,6 +137,16 @@ const calculateHeaderItemIconClasses = item => {
 	return classes.join(" ");
 };
 
+const calculateHeaderItemSemanticIconClasses = item => {
+	const classes = ["ui5-tc-headerItemSemanticIcon"];
+
+	if (item.iconColor !== IconColor.Default) {
+		classes.push(`ui5-tc-headerItemSemanticIcon--${item.iconColor.toLowerCase()}`);
+	}
+
+	return classes.join(" ");
+};
+
 const calculateHeaderItemTextClasses = item => {
 	const classes = ["ui5-tc__headerItemText"];
 

diff --git a/packages/main/src/themes-next/TabContainer.css b/packages/main/src/themes-next/TabContainer.css
@@ -90,10 +90,31 @@ ui5-tabcontainer {
 
 .ui5-tc__headerItem--withIcon:focus .ui5-tc-headerItemIcon,
 .ui5-tc__headerItem--mixedMode:focus .ui5-tc__headerItemContent,
-.ui5-tc__headerItem--textOnly:focus .ui5-tc__headerItemContent{
+.ui5-tc__headerItem--textOnly:focus .ui5-tc__headerItemContent {
 	outline: var(--_ui5_tc_headerItem_focus_border);
 }
 
+.ui5-tc-headerItemSemanticIcon::before {
+	display: var(--_ui5_tc_headerItemSemanticIcon_display);
+	font-family: "SAP-icons";
+	font-size: 0.75rem;
+	margin-right: 0.25rem;
+	speak: none;
+	-webkit-font-smoothing: antialiased;
+}
+
+.ui5-tc-headerItemSemanticIcon--positive::before {
+	content: "\e1ab";
+}
+
+.ui5-tc-headerItemSemanticIcon--negative::before {
+	content: "\e1ac";
+}
+
+.ui5-tc-headerItemSemanticIcon--critical::before {
+	content: "\e1ae";
+}
+
 /*** Icon and text Tab styles ***/
 .ui5-tc__headerItem--withIcon,
 .ui5-tc__headerItem--mixedMode {
@@ -216,6 +237,7 @@ ui5-tabcontainer {
 /*** Semantic states ***/
 .ui5-tc__headerItem--positive.ui5-tc__headerItem--textOnly,
 .ui5-tc__headerItem--positive .ui5-tc-headerItemIcon,
+.ui5-tc-headerItemSemanticIcon--positive::before,
 .ui5-tc__overflowItem--positive {
 	color: var(--sapUiPositive);
 	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
@@ -233,6 +255,7 @@ ui5-tabcontainer {
 
 .ui5-tc__headerItem--negative.ui5-tc__headerItem--textOnly,
 .ui5-tc__headerItem--negative .ui5-tc-headerItemIcon,
+.ui5-tc-headerItemSemanticIcon--negative::before,
 .ui5-tc__overflowItem--negative {
 	color: var(--sapUiNegative);
 	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
@@ -250,6 +273,7 @@ ui5-tabcontainer {
 
 .ui5-tc__headerItem--critical.ui5-tc__headerItem--textOnly,
 .ui5-tc__headerItem--critical .ui5-tc-headerItemIcon,
+.ui5-tc-headerItemSemanticIcon--critical::before,
 .ui5-tc__overflowItem--critical {
 	color: var(--sapUiCritical);
 	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
@@ -287,6 +311,11 @@ ui5-tabcontainer {
 	margin-left: 0;
 }
 
+[dir=rtl] .ui5-tc-headerItemSemanticIcon::before {
+	margin-left: 0.25rem;
+	margin-right: 0;
+}
+
 [dir=rtl] .ui5-tc-headerItemIcon {
 	margin-left: 0.25rem;
 	margin-right: 0;

diff --git a/packages/main/src/themes-next/base/TabContainer-parameters.css b/packages/main/src/themes-next/base/TabContainer-parameters.css
@@ -10,6 +10,7 @@
 	--_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_headerItemSemanticIcon_display: none;
 
 	/* Header Item icons */
 	--_ui5_tc_headerItemIcon_border: 1px solid var(--sapUiHighlight);

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
@@ -8,6 +8,7 @@
 	--_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_headerItemSemanticIcon_display: inline-block;
 
 	/* Header Item icons */
 	--_ui5_tc_headerItemIcon_border: 1px solid var(--sapUiObjectHeaderBorderColor);

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
@@ -41,7 +41,7 @@ <h2 class="control-header">TabContainer</h2>
 		<h3>Basic TabContainer</h3>
 		<div class="snippet">
 			<ui5-tabcontainer class="full-width" show-overflow>
-				<ui5-tab icon="sap-icon://menu" text="Tab 1">
+				<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://activities" text="Tab 2" selected>