diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js index 14a79a290200..3bc244b91bbe 100644 --- a/packages/main/src/Tab.js +++ b/packages/main/src/Tab.js @@ -56,7 +56,7 @@ const metadata = { }, /** - * Represents the "additionalText" text, which is displayed in the tab filter. + * Represents the "additionalText" text, which is displayed in the tab. * @type {string} * @defaultvalue "" * @public diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index a736780fffd6..5227863533c4 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -5,7 +5,6 @@ {{#if tabsAtTheBottom}} {{> contentArea}} {{/if}} -
{{#each items}} - {{#unless this.isSeparator}} - {{this.stripPresentation}} - {{/unless}} - {{#if this.isSeparator}} - - {{/if}} + {{this.stripPresentation}} {{/each}}
diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 346917598058..115a459609f6 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -146,8 +146,8 @@ const metadata = { /** * Defines whether the overflow select list is displayed. *

- * The overflow select list represents a list, where all tab filters are displayed - * so that it's easier for the user to select a specific tab filter. + * The overflow select list represents a list, where all tabs are displayed + * so that it's easier for the user to select a specific tab. * * @type {boolean} * @defaultvalue false @@ -461,14 +461,15 @@ class TabContainer extends UI5Element { const selectedTab = this.items[selectedIndex]; // update selected items - this._getTabs().forEach((item, index) => { - const selected = selectedIndex === index; - item.selected = selected; + this.items + .forEach((item, index) => { + const selected = selectedIndex === index; + item.selected = selected; - if (item._selected) { - item._selected = false; - } - }); + if (item._selected) { + item._selected = false; + } + }); if (this.fixed) { this.selectTab(selectedTab, selectedTabIndex); @@ -568,7 +569,7 @@ class TabContainer extends UI5Element { if (this.responsivePopover.opened) { this.responsivePopover.close(); } else { - this.responsivePopover.initialFocus = this.responsivePopover.content[0].items[0].id; + this.responsivePopover.initialFocus = this.responsivePopover.content[0].items.filter(item => item.classList.contains("ui5-tab-overflow-item"))[0].id; this.responsivePopover.showAt(button); } } @@ -586,6 +587,9 @@ class TabContainer extends UI5Element { } _handleResize() { + if (this.responsivePopover && this.responsivePopover.opened) { + this.responsivePopover.close(); + } this._updateMediaRange(); this._setItemsForStrip(); } diff --git a/packages/main/src/TabContainerPopover.hbs b/packages/main/src/TabContainerPopover.hbs index 9250eaa7eb2c..1af98ed20c7a 100644 --- a/packages/main/src/TabContainerPopover.hbs +++ b/packages/main/src/TabContainerPopover.hbs @@ -10,15 +10,11 @@ {{#if _endOverflowItems.length}} {{#each _endOverflowItems}} - {{#unless this.isSeparator}} - {{this.overflowPresentation}} - {{/unless}} + {{this.overflowPresentation}} {{/each}} - {{else }} + {{else}} {{#each _startOverflowItems}} - {{#unless this.isSeparator}} - {{this.overflowPresentation}} - {{/unless}} + {{this.overflowPresentation}} {{/each}} {{/if}} diff --git a/packages/main/src/TabSeparator.hbs b/packages/main/src/TabSeparator.hbs deleted file mode 100644 index 5dc902548a26..000000000000 --- a/packages/main/src/TabSeparator.hbs +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/packages/main/src/TabSeparator.js b/packages/main/src/TabSeparator.js index ff46a09c1b33..3d600d46d77a 100644 --- a/packages/main/src/TabSeparator.js +++ b/packages/main/src/TabSeparator.js @@ -1,6 +1,16 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; -import TabSeparatorTemplate from "./generated/templates/TabSeparatorTemplate.lit.js"; +import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js"; + +import TabContainer from "./TabContainer.js"; + +// Templates +import TabSeparatorInStripTemplate from "./generated/templates/TabSeparatorInStripTemplate.lit.js"; +import TabSeparatorInOverflowTemplate from "./generated/templates/TabSeparatorInOverflowTemplate.lit.js"; + +// Styles +import stripCss from "./generated/themes/TabSeparatorInStrip.css.js"; +import overflowCss from "./generated/themes/TabSeparatorInOverflow.css.js"; /** * @public @@ -30,8 +40,18 @@ class TabSeparator extends UI5Element { return litRender; } - static get template() { - return TabSeparatorTemplate; + static get stripTemplate() { + return TabSeparatorInStripTemplate; + } + + static get overflowTemplate() { + return TabSeparatorInOverflowTemplate; + } + + get classes() { + return { + "ui5-tc__separator": true, + }; } get isSeparator() { @@ -45,8 +65,19 @@ class TabSeparator extends UI5Element { get stableDomRef() { return `${this._id}-stable-dom-ref`; } + + get stripPresentation() { + return executeTemplate(this.constructor.stripTemplate, this); + } + + get overflowPresentation() { + return executeTemplate(this.constructor.overflowTemplate, this); + } } TabSeparator.define(); +TabContainer.registerTabStyles(stripCss); +TabContainer.registerStaticAreaTabStyles(overflowCss); + export default TabSeparator; diff --git a/packages/main/src/TabSeparatorInOverflow.hbs b/packages/main/src/TabSeparatorInOverflow.hbs new file mode 100644 index 000000000000..f9abf06039b8 --- /dev/null +++ b/packages/main/src/TabSeparatorInOverflow.hbs @@ -0,0 +1,8 @@ + + \ No newline at end of file diff --git a/packages/main/src/TabSeparatorInStrip.hbs b/packages/main/src/TabSeparatorInStrip.hbs new file mode 100644 index 000000000000..daf4eab61b94 --- /dev/null +++ b/packages/main/src/TabSeparatorInStrip.hbs @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css index bc433293663a..7a6ac9c53291 100644 --- a/packages/main/src/themes/TabContainer.css +++ b/packages/main/src/themes/TabContainer.css @@ -47,46 +47,10 @@ white-space: nowrap; } -.ui5-tc__separator { - width: 0; - border-left: 2px solid var(--sapList_BorderColor); - margin: 0.5rem 0.25rem; -} - .ui5-tc__separator:focus { outline: none; } -.ui5-tc__headerArrow { - position: absolute; - top: 0; - bottom: 1px; - z-index: 1; - display: flex; - align-items: center; - color: var(--sapContent_IconColor); - background-color: var(--sapObjectHeader_Background); - padding: 0 0.25rem; - visibility: hidden; -} - -.ui5-tc__headerArrowLeft { - left: 0; -} - -.ui5-tc__headerArrowRight { - right: 0; -} - -.ui5-tc__headerArrow:hover, -.ui5-tc__headerArrow:active { - color: var(--sapHighlightColor); -} - -.ui5-tc__headerArrow--visible { - visibility: visible; -} - .ui5-tc__overflow { flex: 0 0 0; margin: 0 0.25rem; @@ -117,7 +81,7 @@ } :host([tabs-placement="Bottom"]) .ui5-tc__content { - border-top: var(--_ui5_tc_content_border_bottom); + border-top: var(--_ui5_tc_content_border_bottom); } .ui5-tc__content--collapsed { diff --git a/packages/main/src/themes/TabSeparatorInOverflow.css b/packages/main/src/themes/TabSeparatorInOverflow.css new file mode 100644 index 000000000000..4b223ea8c2aa --- /dev/null +++ b/packages/main/src/themes/TabSeparatorInOverflow.css @@ -0,0 +1,8 @@ +.ui5-tc__separator { + min-height: 0.25rem; + border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor); + margin: 0 0.5rem; +} +ui5-list>.ui5-tc__separator:first-child { + min-height: 0.5rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/TabSeparatorInStrip.css b/packages/main/src/themes/TabSeparatorInStrip.css new file mode 100644 index 000000000000..7cdc59327b67 --- /dev/null +++ b/packages/main/src/themes/TabSeparatorInStrip.css @@ -0,0 +1,5 @@ +.ui5-tc__separator { + width: 0; + border-left: 0.0625rem solid var(--sapGroup_TitleBorderColor); + margin: 0.5rem 0.25rem; +} diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index a5b0114dae63..b0bdec8bbff1 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -18,8 +18,6 @@ - - @@ -33,174 +31,105 @@

ui5-tabcontainer

Compact

Text only End Overflow

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Text only Start And End Overflow

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Tab Container

- - + - - - - - - - - - - - - + + + + + +

Tab Container Start And End Overflow

- - + - - - - - - - - - - - - + + + + + +
@@ -492,21 +421,14 @@

TabContainer in Compact

- - + - - - - - - - - - - - - + + + + + + diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js index 74e304b85b59..91e9c75ffd73 100644 --- a/packages/main/test/specs/TabContainer.spec.js +++ b/packages/main/test/specs/TabContainer.spec.js @@ -14,7 +14,7 @@ describe("TabContainer general interaction", () => { const selectedFilterHtml = await selectedFilter.getHTML(); assert.include(selectedFilterHtml, SELECTION_CSS_CLASS, "The item has the selection css class set."); - assert.strictEqual(selectedFilter.id, selectedTab.id, "The IDs of the ui5-tab and the rendered tab filter matches."); + assert.strictEqual(selectedFilter.id, selectedTab.id, "The IDs of the ui5-tab and the rendered tab matches."); }); it("tests tabSelect event", async () => {