diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index 600e2ed2b7f7..bc50ec27da80 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -103,6 +103,7 @@ {{#*inline "textOnlyTab"}}
+ {{this.item.text}} @@ -122,6 +123,7 @@ {{#if this.item.text}} + {{this.item.text}} {{/if}} @@ -136,6 +138,7 @@ {{#if this.item.text}} + {{this.item.text}} {{/if}} diff --git a/packages/main/src/TabContainerTemplateContext.js b/packages/main/src/TabContainerTemplateContext.js index c3351d0b4c10..aa8ecdfa113c 100644 --- 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 index 0bb3293fbe95..bd43bf59c03d 100644 --- 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 index 27704ca4d297..4e416831c872 100644 --- 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 index 369ae638ab2e..383e6fb8097e 100644 --- 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 index 033b4db5f7c4..986a85f02623 100644 --- 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 @@

TabContainer

Basic TabContainer

- + Quibusdam, veniam! Architecto debitis iusto ad et, asperiores quisquam perferendis reprehenderit ipsa voluptate minus minima, perspiciatis cum. Totam harum necessitatibus numquam voluptatum.