From de1ab1c2bd3cc4f49d21d8d2a4544e6a934f1313 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Fri, 26 Nov 2021 11:45:54 +0200 Subject: [PATCH 01/44] ui5-tabcontainer: introduce overflow tabs Initial commit --- packages/main/src/Tab.js | 8 + packages/main/src/TabContainer.hbs | 20 +- packages/main/src/TabContainer.js | 133 +++--- packages/main/src/TabContainerPopover.hbs | 2 +- packages/main/src/TabInOverflow.hbs | 1 - packages/main/src/themes/TabContainer.css | 5 + packages/main/src/themes/TabInOverflow.css | 4 + packages/main/src/themes/TabInStrip.css | 4 + .../themes/base/TabContainer-parameters.css | 2 +- .../sap_fiori_3/TabContainer-parameters.css | 2 +- packages/main/src/types/TabsOverflowMode.js | 40 ++ packages/main/test/pages/TabContainer.html | 448 ++---------------- 12 files changed, 172 insertions(+), 497 deletions(-) create mode 100644 packages/main/src/types/TabsOverflowMode.js diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js index a7ca70105b62..8c3c7fd9f51e 100644 --- a/packages/main/src/Tab.js +++ b/packages/main/src/Tab.js @@ -294,6 +294,10 @@ class Tab extends UI5Element { classes.push(`ui5-tab-strip-item--${this.design.toLowerCase()}`); } + if (this.hidden) { + classes.push("ui5-tab-strip-item--hidden"); + } + return classes.join(" "); } @@ -318,6 +322,10 @@ class Tab extends UI5Element { classes.push("ui5-tab-overflow-item--disabled"); } + if (!this.hidden) { + classes.push("ui5-tab-overflow-item--hidden"); + } + return classes.join(" "); } diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index 1747823d700d..261911661ddb 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -8,14 +8,6 @@
-
- -
-
- -
{{#if shouldShowOverflow}} @@ -62,10 +46,10 @@ + aria-haspopup="true" + icon-end>MORE {{/if}}
{{/if}} diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 55b567a89244..93b9ec582b09 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -1,7 +1,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; -import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js"; import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js"; import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js"; import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js"; @@ -12,8 +11,6 @@ import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import "@ui5/webcomponents-icons/dist/slim-arrow-up.js"; import "@ui5/webcomponents-icons/dist/slim-arrow-down.js"; -import "@ui5/webcomponents-icons/dist/slim-arrow-left.js"; -import "@ui5/webcomponents-icons/dist/slim-arrow-right.js"; import { TABCONTAINER_PREVIOUS_ICON_ACC_NAME, TABCONTAINER_NEXT_ICON_ACC_NAME, TABCONTAINER_OVERFLOW_MENU_TITLE } from "./generated/i18n/i18n-defaults.js"; import Button from "./Button.js"; import Icon from "./Icon.js"; @@ -30,8 +27,6 @@ import tabContainerCss from "./generated/themes/TabContainer.css.js"; import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; import TabLayout from "./types/TabLayout.js"; -const SCROLL_STEP = 128; - const tabStyles = []; const staticAreaTabStyles = []; @@ -174,21 +169,6 @@ const metadata = { type: Object, }, - _scrollable: { - type: Boolean, - noAttribute: true, - }, - - _scrollableBack: { - type: Boolean, - noAttribute: true, - }, - - _scrollableForward: { - type: Boolean, - noAttribute: true, - }, - _animationRunning: { type: Boolean, noAttribute: true, @@ -289,10 +269,6 @@ class TabContainer extends UI5Element { this._handleResize = this._handleResize.bind(this); - // Init ScrollEnablement - this._scrollEnablement = new ScrollEnablement(this); - this._scrollEnablement.attachEvent("scroll", this._updateScrolling.bind(this)); - // Init ItemNavigation this._itemNavigation = new ItemNavigation(this, { getItemsCallback: () => this._getTabs(), @@ -319,8 +295,7 @@ class TabContainer extends UI5Element { } onAfterRendering() { - this._scrollEnablement.scrollContainer = this._getHeaderScrollContainer(); - this._updateScrolling(); + this.scrollContainer = this._getHeaderScrollContainer(); this.items.forEach(item => { item._getTabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`); @@ -338,21 +313,11 @@ class TabContainer extends UI5Element { _onTablistFocusin(event) { const target = event.target; - if (!this._scrollable || !target.classList.contains("ui5-tab-strip-item")) { + if (!target.classList.contains("ui5-tab-strip-item")) { return; } - const headerScrollContainer = this._getHeaderScrollContainer(); - const leftArrowWidth = this.shadowRoot.querySelector(".ui5-tc__headerArrowLeft").offsetWidth; - const rightArrowWidth = this.shadowRoot.querySelector(".ui5-tc__headerArrowRight").offsetWidth; - - if (this._scrollableBack && (target.offsetLeft - leftArrowWidth < headerScrollContainer.scrollLeft)) { - this._scrollEnablement.move(target.offsetLeft - leftArrowWidth - headerScrollContainer.scrollLeft, 0, true); - this._updateScrolling(); - } else if (this._scrollableForward && (target.offsetLeft + target.offsetWidth > headerScrollContainer.scrollLeft + headerScrollContainer.offsetWidth - rightArrowWidth)) { - this._scrollEnablement.move(target.offsetLeft + target.offsetWidth - headerScrollContainer.scrollLeft - headerScrollContainer.offsetWidth + rightArrowWidth, 0, true); - this._updateScrolling(); - } + this._showEndOverflow(); } _onHeaderClick(event) { @@ -398,9 +363,11 @@ class TabContainer extends UI5Element { } _onOverflowListItemSelect(event) { + const overflowItemIndex = event.detail.item.parentNode._itemNavigation._currentIndex; this._onItemSelect(event.detail.item); this.responsivePopover.close(); this.shadowRoot.querySelector(`#${event.detail.item.id}`).focus(); + this._updateEndOverflow(overflowItemIndex); } _onItemSelect(target) { @@ -482,6 +449,7 @@ class TabContainer extends UI5Element { } async _onOverflowButtonClick(event) { + this._updateEndOverflow(); const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > [ui5-button]"); if (event.target !== button) { @@ -496,18 +464,53 @@ class TabContainer extends UI5Element { } } - _onHeaderBackArrowClick() { - this._scrollEnablement.move(-SCROLL_STEP, 0).promise() - .then(_ => this._updateScrolling()); + _updateEndOverflow(overflowItemIndex) { + const allItems = this.items; + const containerOffsetWidth = this._getHeaderScrollContainer().offsetWidth - this.getDomRef().querySelector(".ui-tc__overflowButton").offsetWidth; + + this.itemsInEndOverflow = []; + this.lastVisibleTab = this._findLastVisibleItem(allItems, containerOffsetWidth); + + for (let index = this.lastVisibleTab + 1; index < allItems.length; index++) { + allItems[index].hidden = true; + } + + for (let index = 0; index < this.items.length; index++) { + this.itemsInEndOverflow.push({ + text: this.items[index].text, + hidden: this.items[index].hidden, + icon: this.items[index].icon, + overflowPresentation: this.items[index].overflowPresentation, + }); + } + if (overflowItemIndex) { + allItems[this.lastVisibleTab].hidden = true; + allItems[overflowItemIndex].hidden = false; + } + return this.itemsInEndOverflow; } - _onHeaderForwardArrowClick() { - this._scrollEnablement.move(SCROLL_STEP, 0).promise() - .then(_ => this._updateScrolling()); + _findLastVisibleItem(items, tabStripWidth) { + const startIndex = 0; + let lastVisibleTabIndex = -1, + index, + itemSize; + + for (index = startIndex; index < items.length; index++) { + itemSize = items[index]._getRealDomRef().offsetWidth; + + tabStripWidth -= itemSize; + if (tabStripWidth <= 0) { + lastVisibleTabIndex = index; + break; + } + } + + return lastVisibleTabIndex; } _handleResize() { - this._updateScrolling(); + this._showEndOverflow(); this._updateMediaRange(); } @@ -516,14 +519,17 @@ class TabContainer extends UI5Element { this.responsivePopover.close(); } - _updateScrolling() { + _showEndOverflow() { const headerScrollContainer = this._getHeaderScrollContainer(); + let allItemsWidth = 0; + + this.items.forEach(item => { + allItemsWidth += item._getRealDomRef().offsetWidth; + }); - this._scrollable = headerScrollContainer.offsetWidth < headerScrollContainer.scrollWidth; - this._scrollableBack = headerScrollContainer.scrollLeft > 0; - this._scrollableForward = Math.ceil(headerScrollContainer.scrollLeft) < headerScrollContainer.scrollWidth - headerScrollContainer.offsetWidth; + this.showOverflow = headerScrollContainer.offsetWidth < allItemsWidth; - if (!this._scrollable) { + if (!this.showOverflow) { this._closeRespPopover(); } } @@ -544,13 +550,17 @@ class TabContainer extends UI5Element { return this.shadowRoot.querySelector(`#${this._id}-headerScrollContainer`); } + _getHeaderOverflowButton() { + return this.shadowRoot.querySelector(".ui5-tc__overflowButton"); + } + async _respPopover() { const staticAreaItem = await this.getStaticAreaItemDomRef(); return staticAreaItem.querySelector(`#${this._id}-overflowMenu`); } get shouldShowOverflow() { - return this.showOverflow && this._scrollable; + return this.showOverflow; } get classes() { @@ -563,7 +573,6 @@ class TabContainer extends UI5Element { }, header: { "ui5-tc__header": true, - "ui5-tc__header--scrollable": this._scrollable, }, headerInnerContainer: { "ui5-tc__headerInnerContainer": true, @@ -577,16 +586,16 @@ class TabContainer extends UI5Element { separator: { "ui5-tc__separator": true, }, - headerBackArrow: { - "ui5-tc__headerArrow": true, - "ui5-tc__headerArrowLeft": true, - "ui5-tc__headerArrow--visible": this._scrollableBack, - }, - headerForwardArrow: { - "ui5-tc__headerArrow": true, - "ui5-tc__headerArrowRight": true, - "ui5-tc__headerArrow--visible": this._scrollableForward, - }, + // headerBackArrow: { + // "ui5-tc__headerArrow": true, + // "ui5-tc__headerArrowLeft": true, + // "ui5-tc__headerArrow--visible": this._scrollableBack, + // }, + // headerForwardArrow: { + // "ui5-tc__headerArrow": true, + // "ui5-tc__headerArrowRight": true, + // "ui5-tc__headerArrow--visible": this._scrollableForward, + // }, content: { "ui5-tc__content": true, "ui5-tc__content--collapsed": this._contentCollapsed, diff --git a/packages/main/src/TabContainerPopover.hbs b/packages/main/src/TabContainerPopover.hbs index 49ba3ae7819c..a1bd1b7ec6a3 100644 --- a/packages/main/src/TabContainerPopover.hbs +++ b/packages/main/src/TabContainerPopover.hbs @@ -8,7 +8,7 @@ _hide-header class="ui5-tab-container-responsive-popover" > - + {{#each items}} {{#unless this.isSeparator}} {{this.overflowPresentation}} diff --git a/packages/main/src/TabInOverflow.hbs b/packages/main/src/TabInOverflow.hbs index c7c55dddeb0e..bbc4752c47d3 100644 --- a/packages/main/src/TabInOverflow.hbs +++ b/packages/main/src/TabInOverflow.hbs @@ -2,7 +2,6 @@ id="{{this._id}}" class="{{this.overflowClasses}}" type="{{this.overflowState}}" - ?selected="{{this.effectiveSelected}}" ?disabled="{{this.effectiveDisabled}}" aria-disabled="{{this.effectiveDisabled}}" aria-selected="{{this.effectiveSelected}}" diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css index 931ec24621d8..407b723a922a 100644 --- a/packages/main/src/themes/TabContainer.css +++ b/packages/main/src/themes/TabContainer.css @@ -102,6 +102,11 @@ margin: 0 0.25rem; } +.ui-tc__overflowButton>[ui5-button] { + margin-top: 0.25rem; + border-radius: 0.75rem; + height: 1.5rem; +} .ui5-tc-root.ui5-tc--textOnly .ui5-tc__content { height: calc(100% - var(--_ui5_tc_header_height_text_only)); /* the header height (text only tabs) */ } diff --git a/packages/main/src/themes/TabInOverflow.css b/packages/main/src/themes/TabInOverflow.css index 697d7344b7ea..cc0311a39ef5 100644 --- a/packages/main/src/themes/TabInOverflow.css +++ b/packages/main/src/themes/TabInOverflow.css @@ -46,6 +46,10 @@ color: var(--_ui5_tc_overflowItem_current_color); } +.ui5-tab-overflow-item--hidden { + display: none; +} + .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); diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index 08f1955b7f87..f53b9f1de65a 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -348,3 +348,7 @@ margin-right: 0; margin-left: 0.5rem; } + +.ui5-tab-strip-item--hidden { + display: none; +} \ No newline at end of file diff --git a/packages/main/src/themes/base/TabContainer-parameters.css b/packages/main/src/themes/base/TabContainer-parameters.css index 4f85d51b513d..b4c1367d7d37 100644 --- a/packages/main/src/themes/base/TabContainer-parameters.css +++ b/packages/main/src/themes/base/TabContainer-parameters.css @@ -69,7 +69,7 @@ --_ui5_tc_headerItemIcon_neutral_selected_background: var(--sapNeutralColor); --_ui5_tc_headerItemIcon_semantic_selected_color: var(--sapGroup_ContentBackground); - --_ui5_tc_overflowItem_default_color: var(--sapHighlightColor); + --_ui5_tc_overflowItem_default_color: var(--sapNeutralTextColor); --_ui5_tc_overflowItem_current_color: CurrentColor; --_ui5_tc_content_border_bottom: 0.125rem solid var(--sapObjectHeader_BorderColor); diff --git a/packages/main/src/themes/sap_fiori_3/TabContainer-parameters.css b/packages/main/src/themes/sap_fiori_3/TabContainer-parameters.css index 44b630fef437..98dba5dd09e1 100644 --- a/packages/main/src/themes/sap_fiori_3/TabContainer-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/TabContainer-parameters.css @@ -6,7 +6,7 @@ /* Header Item */ --_ui5_tc_headerItemContent_border_bottom: 0.1875rem solid var(--sapSelectedColor); - --_ui5_tc_overflowItem_default_color: var(--sapHighlightColor); + --_ui5_tc_overflowItem_default_color: var(--sapNeutralTextColor); --_ui5_tc_overflowItem_current_color: CurrentColor; --_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor); } diff --git a/packages/main/src/types/TabsOverflowMode.js b/packages/main/src/types/TabsOverflowMode.js new file mode 100644 index 000000000000..49492d0bc60d --- /dev/null +++ b/packages/main/src/types/TabsOverflowMode.js @@ -0,0 +1,40 @@ +import DataType from "@ui5/webcomponents-base/dist/types/DataType.js"; + +/** + * @lends sap.ui.webcomponents.main.types.TabsOverflowMode.prototype + * @public + */ +const TabsOverflowModes = { + /** + * End type if there is only one overflow in the end of the scroll container . + * @public + * @type {End} + */ + End: "End", + + /** + * StartAndEnd type if there are overflows at the beginning and at end of the scroll container . + * @public + * @type {StartAndEnd} + */ + StartAndEnd: "StartAndEnd", +}; + +/** + * @class + * Different types of overflow modes. + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.types.TabsOverflowMode + * @public + * @enum {string} + */ +class TabsOverflowMode extends DataType { + static isValid(value) { + return !!TabsOverflowModes[value]; + } +} + +TabsOverflowMode.generateTypeAccessors(TabsOverflowModes); + +export default TabsOverflowMode; diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index 6ae1d3e88395..e0c246b0ba3e 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -31,434 +31,56 @@

ui5-tabcontainer

-

Text only

- - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

Tab Container

- - - - - - - - - - - - - - - - - -
- -
-

Icon only

- - - Button 11 - Button 12 - - - Button 3 - - - Button 3 - - - Button 2 - - - Button 2 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 2 - - - Button 3 - - -
- -
-

Text only

- - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - -
- -
- - - Toggle style - - - Source - Method - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - Cell 1 - Cell 2 - - - Cell 1 - Cell 2 - - - Cell 1 - Cell 2 - - - Cell 1 - Cell 2 - - - - - -
- -
-

Icon and Text

- - - -
-

Content with set height: 300px

- Button 11 - Button 12 -
- - - Button 2 - - - Button 3 - - -
- -
-

Icon and Text with tabLayout="Inline"

- - - -
-

Content with set height: 300px

- Button 11 - Button 12 -
- - - Button 2 - - - Button 3 - - -
- -
-

Text and additional text

- - - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - -
- -
-

Text and additional text with tabLayout="Inline"

- - - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - -
- -
-

Tabs with input elements

- - - -

ui5-input

- - - -

browser input

- - - -
- -
-

Result

- - -
- -
-

TabContainer in Compact

-
- - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - - - - - - - - - - - - - - - - - - - - - +
+

Text only

+ + Button 11 Button 12 - - Button 3 + + Button 2 - + Button 3 - - Button 2 + + Button 4 - - Button 2 + + Button 5 - - Button 3 + + Button 6 - - Button 3 - - - Button 3 + + Button 7 - - Button 3 + + Button 8 - - Button 3 + + Button 9 - - Button 3 + + Button 10 - - Button 2 + + Button 11 - - Button 3 + + Button 12 - -
-
- -
-

Tab Container With Custom Menu Button

- - - - - - - - - - - - - - - - - - -
- - + + + - + + \ No newline at end of file From 2a24d59c7ca572f2a36a493b31520263d6f575c7 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Mon, 29 Nov 2021 17:32:52 +0200 Subject: [PATCH 02/44] Fixing bugs --- packages/main/src/TabContainer.js | 48 +- packages/main/test/pages/TabContainer.html | 445 ++++++++++++++++-- packages/main/test/specs/TabContainer.spec.js | 81 ---- 3 files changed, 444 insertions(+), 130 deletions(-) diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 93b9ec582b09..baf37745f29f 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -26,6 +26,7 @@ import TabContainerPopoverTemplate from "./generated/templates/TabContainerPopov import tabContainerCss from "./generated/themes/TabContainer.css.js"; import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; import TabLayout from "./types/TabLayout.js"; +import TabsOverflowMode from "./types/TabsOverflowMode.js"; const tabStyles = []; const staticAreaTabStyles = []; @@ -155,6 +156,30 @@ const metadata = { defaultValue: TabLayout.Standard, }, + /** + * Defines the overflow mode of the tab strip. + * + *

+ * Note: + * Only one overflow at the end would be displayed by default, + * but when set to StartAndEnd, there will be two overflows on both ends. + * + *

+ * Available options are: + *
    + *
  • Standard
    • + *
  • Inline
    • + *
+ * + * @type {TabsOverflowMode} + * @defaultvalue "End" + * @public + */ + tabsOverflowMode: { + type: String, + defaultValue: TabsOverflowMode.End, + }, + /** * Defines the current media query size. * @@ -465,13 +490,13 @@ class TabContainer extends UI5Element { } _updateEndOverflow(overflowItemIndex) { - const allItems = this.items; + const allItems = this._getTabs(); const containerOffsetWidth = this._getHeaderScrollContainer().offsetWidth - this.getDomRef().querySelector(".ui-tc__overflowButton").offsetWidth; + const lastVisibleTab = this._findLastVisibleItem(allItems, containerOffsetWidth); this.itemsInEndOverflow = []; - this.lastVisibleTab = this._findLastVisibleItem(allItems, containerOffsetWidth); - for (let index = this.lastVisibleTab + 1; index < allItems.length; index++) { + for (let index = lastVisibleTab + 1; index < allItems.length; index++) { allItems[index].hidden = true; } @@ -484,7 +509,7 @@ class TabContainer extends UI5Element { }); } if (overflowItemIndex) { - allItems[this.lastVisibleTab].hidden = true; + allItems[lastVisibleTab].hidden = true; allItems[overflowItemIndex].hidden = false; } return this.itemsInEndOverflow; @@ -521,10 +546,11 @@ class TabContainer extends UI5Element { _showEndOverflow() { const headerScrollContainer = this._getHeaderScrollContainer(); + const allItems = this._getTabs(); let allItemsWidth = 0; - this.items.forEach(item => { - allItemsWidth += item._getRealDomRef().offsetWidth; + allItems.forEach(item => { + allItemsWidth += item._getTabInStripDomRef.offsetWidth; }); this.showOverflow = headerScrollContainer.offsetWidth < allItemsWidth; @@ -586,16 +612,6 @@ class TabContainer extends UI5Element { separator: { "ui5-tc__separator": true, }, - // headerBackArrow: { - // "ui5-tc__headerArrow": true, - // "ui5-tc__headerArrowLeft": true, - // "ui5-tc__headerArrow--visible": this._scrollableBack, - // }, - // headerForwardArrow: { - // "ui5-tc__headerArrow": true, - // "ui5-tc__headerArrowRight": true, - // "ui5-tc__headerArrow--visible": this._scrollableForward, - // }, content: { "ui5-tc__content": true, "ui5-tc__content--collapsed": this._contentCollapsed, diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index e0c246b0ba3e..1b28bf8444f3 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -31,56 +31,435 @@

ui5-tabcontainer

+

Text only

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

Text only

- - +
+

Tab Container

+ + + + + + + + + + + + + + + + + +
+ +
+

Icon only

+ + + Button 11 + Button 12 + + + Button 3 + + + Button 3 + + + Button 2 + + + Button 2 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 2 + + + Button 3 + + +
+ +
+

Text only

+ + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + +
+ +
+ + + Toggle style + + + Source + Method + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + Cell 1 + Cell 2 + + + Cell 1 + Cell 2 + + + Cell 1 + Cell 2 + + + Cell 1 + Cell 2 + + + + + +
+ +
+

Icon and Text

+ + + +
+

Content with set height: 300px

Button 11 Button 12 +
+ + + Button 2 + + + Button 3 + + +
+ +
+

Icon and Text with tabLayout="Inline"

+ + + +
+

Content with set height: 300px

+ Button 11 + Button 12 +
+ + + Button 2 + + + Button 3 + + +
+ +
+

Text and additional text

+ + + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + +
+ +
+

Text and additional text with tabLayout="Inline"

+ + + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + +
+ +
+

Tabs with input elements

+ + + +

ui5-input

+ + + +

browser input

+ + + +
+ +
+

Result

+ + +
+ +
+

TabContainer in Compact

+
+ + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + + + - - Button 2 + + + + + + + + + + + + + + + + + + Button 11 + Button 12 - + Button 3 - - Button 4 + + Button 3 + + + Button 2 + + + Button 2 - - Button 5 + + Button 3 - - Button 6 + + Button 3 - - Button 7 + + Button 3 - - Button 8 + + Button 3 - - Button 9 + + Button 3 - - Button 10 + + Button 3 - - Button 11 + + Button 2 - - Button 12 + + Button 3 -
- - + + +
+ +
+

Tab Container With Custom Menu Button

+ + + + + + + + + + + + + + + + + + +
+ + \ No newline at end of file diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js index 9636b363f43a..6d73317a3642 100644 --- a/packages/main/test/specs/TabContainer.spec.js +++ b/packages/main/test/specs/TabContainer.spec.js @@ -45,87 +45,6 @@ describe("TabContainer general interaction", () => { assert.strictEqual(await browser.$("#tabContainerIconOnly").getAttribute("media-range"), "XL", "media-range=XL"); }); - it("scroll works on iconsOnly TabContainer", async () => { - await browser.setWindowSize(520, 1080); - - const arrowLeft = await browser.$("#tabContainerIconOnly").shadow$(".ui5-tc__headerArrowLeft ui5-button"); - const arrowRight = await browser.$("#tabContainerIconOnly").shadow$(".ui5-tc__headerArrowRight ui5-button"); - - assert.notOk(await arrowLeft.isDisplayed(), "'Left Arrow' should be initially hidden"); - assert.ok(await arrowRight.isDisplayed(), "'Right Arrow' should be initially shown"); - - await arrowRight.click(); - - await arrowLeft.waitForDisplayed({ - timeout: 1000, - interval: 100, - timeoutMsg: "'Left Arrow' should be visible after 'Right arrow' click" - }); - - await arrowLeft.click(); - - await arrowLeft.waitForDisplayed({ - reverse: true, - timeout: 1000, - interval: 100, - timeoutMsg: "'Left Arrow' should be hidden after 'Left arrow' click" - }); - await arrowRight.waitForDisplayed({ - timeout: 1000, - interval: 100, - timeoutMsg: "'Right Arrow' should be visible after 'Left arrow' click" - }); - }); - - it("scroll works on textOnly TabContainer", async () => { - await browser.setWindowSize(520, 1080); - - let arrowLeft = await browser.$("#tabContainerTextOnly").shadow$(".ui5-tc__headerArrowLeft ui5-button"); - let arrowRight = await browser.$("#tabContainerTextOnly").shadow$(".ui5-tc__headerArrowRight ui5-button"); - - assert.notOk(await arrowLeft.isDisplayed(), "'Left Arrow' should be initially hidden"); - assert.ok(await arrowRight.isDisplayed(), "'Right Arrow' should be initially shown"); - - await arrowRight.click(); - - await arrowLeft.waitForDisplayed({ - timeout: 1000, - interval: 100, - timeoutMsg: "'Left Arrow' should be visible after 'Right arrow' click" - }); - - await arrowLeft.click(); - - await arrowLeft.waitForDisplayed({ - reverse: true, - timeout: 1000, - interval: 100, - timeoutMsg: "'Left Arrow' should be hidden after 'Left arrow' click" - }); - await arrowRight.waitForDisplayed({ - timeout: 1000, - interval: 100, - timeoutMsg: "'Right Arrow' should be visible after 'Left arrow' click" - }); - - // act: open overflow - const overflowBtn = await browser.$("#tabContainerTextOnly").shadow$(".ui-tc__overflowButton"); - await overflowBtn.click(); - - // assert: the overflow popover is open. - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#tabContainerTextOnly") - const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover"); - assert.strictEqual(await overflowPopover.isDisplayedInViewport(), true, - "Popover is open."); - - // act: resize, so the overflow button is not visible - await browser.setWindowSize(1600, 1080); - - // assert: the overflow popover is closed. - assert.strictEqual(await overflowPopover.isDisplayedInViewport(), false, - "Popover is closed."); - }); - it("tests if content is scrollable when tabcontainer takes limited height by its parent", async () => { const { tcHeight, tcScrollHeight } = await browser.executeAsync(done => { const scrollableContent = document.getElementById("tc-scrollable-child"); From d35e5849c0a0f382829ac7b55cec48be9b051612 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Thu, 2 Dec 2021 17:25:55 +0200 Subject: [PATCH 03/44] filter visible tab strip items --- packages/main/src/Tab.js | 6 +- packages/main/src/TabContainer.hbs | 36 +++-- packages/main/src/TabContainer.js | 173 +++++++++++++--------- packages/main/src/TabSeparator.hbs | 4 +- packages/main/src/TabSeparator.js | 8 + packages/main/src/themes/TabContainer.css | 12 +- packages/main/src/themes/TabInStrip.css | 9 +- 7 files changed, 146 insertions(+), 102 deletions(-) diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js index 8c3c7fd9f51e..f8612c53c66d 100644 --- a/packages/main/src/Tab.js +++ b/packages/main/src/Tab.js @@ -117,7 +117,7 @@ const metadata = { type: String, defaultValue: "-1", noAttribute: true, - }, + } }, events: /** @lends sap.ui.webcomponents.main.Tab.prototype */ { }, @@ -294,10 +294,6 @@ class Tab extends UI5Element { classes.push(`ui5-tab-strip-item--${this.design.toLowerCase()}`); } - if (this.hidden) { - classes.push("ui5-tab-strip-item--hidden"); - } - return classes.join(" "); } diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index 261911661ddb..230a6650de1b 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -34,25 +34,23 @@ - - {{#if shouldShowOverflow}} -
- {{#if overflowButton.length}} - - {{else}} - MORE - {{/if}} -
- {{/if}} + {{#unless tabsAtTheBottom}} diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index baf37745f29f..2c74a728e8c6 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -301,6 +301,18 @@ class TabContainer extends UI5Element { } onBeforeRendering() { + // update selected tab + const tabs = this._getTabs(); + if (tabs.length) { + const selectedTabs = this._getTabs().filter(tab => tab.selected); + if (selectedTabs.length) { + this._selectedTab = selectedTabs[0]; + } else { + this._selectedTab = tabs[0]; + this._selectedTab.selected = true; + } + } + // Set external properties to items this.items.filter(item => !item.isSeparator).forEach((item, index, arr) => { item._isInline = this.tabLayout === TabLayout.Inline; @@ -320,8 +332,6 @@ class TabContainer extends UI5Element { } onAfterRendering() { - this.scrollContainer = this._getHeaderScrollContainer(); - this.items.forEach(item => { item._getTabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`); }); @@ -335,16 +345,6 @@ class TabContainer extends UI5Element { ResizeHandler.deregister(this._getHeader(), this._handleResize); } - _onTablistFocusin(event) { - const target = event.target; - - if (!target.classList.contains("ui5-tab-strip-item")) { - return; - } - - this._showEndOverflow(); - } - _onHeaderClick(event) { const tab = getTab(event.target); if (!tab) { @@ -388,11 +388,9 @@ class TabContainer extends UI5Element { } _onOverflowListItemSelect(event) { - const overflowItemIndex = event.detail.item.parentNode._itemNavigation._currentIndex; this._onItemSelect(event.detail.item); this.responsivePopover.close(); this.shadowRoot.querySelector(`#${event.detail.item.id}`).focus(); - this._updateEndOverflow(overflowItemIndex); } _onItemSelect(target) { @@ -474,8 +472,7 @@ class TabContainer extends UI5Element { } async _onOverflowButtonClick(event) { - this._updateEndOverflow(); - const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui-tc__overflowButton > [ui5-button]"); + const button = this.overflowButton[0] || this.getDomRef().querySelector(".ui5-tc__overflowButton > [ui5-button]"); if (event.target !== button) { return; @@ -489,75 +486,117 @@ class TabContainer extends UI5Element { } } - _updateEndOverflow(overflowItemIndex) { - const allItems = this._getTabs(); - const containerOffsetWidth = this._getHeaderScrollContainer().offsetWidth - this.getDomRef().querySelector(".ui-tc__overflowButton").offsetWidth; - const lastVisibleTab = this._findLastVisibleItem(allItems, containerOffsetWidth); + _handleResize() { + this._updateMediaRange(); + this._setItemsForStrip(); + } - this.itemsInEndOverflow = []; + _setItemsForStrip() { + const headerScrollContainer = this._getHeaderScrollContainer(); + const endOverflowButton = this._getHeaderOverflowButton(); + let allItemsWidth = 0; - for (let index = lastVisibleTab + 1; index < allItems.length; index++) { - allItems[index].hidden = true; + if (!this._selectedTab) { + return; } - for (let index = 0; index < this.items.length; index++) { - this.itemsInEndOverflow.push({ - text: this.items[index].text, - hidden: this.items[index].hidden, - icon: this.items[index].icon, - overflowPresentation: this.items[index].overflowPresentation, - }); + const itemsDomRefs = this.items.map(function (item) { return item.getTabInStripDomRef(); }); + + // make sure the end overflow is hidden + endOverflowButton.setAttribute("hidden", ""); + + // show all tabs + for (let i = 0; i < itemsDomRefs.length; i++) { + itemsDomRefs[i].removeAttribute("hidden"); } - if (overflowItemIndex) { - allItems[lastVisibleTab].hidden = true; - allItems[overflowItemIndex].hidden = false; + + itemsDomRefs.forEach(item => { + allItemsWidth += this._getItemWidth(item); + }); + + let showEndOverflow = headerScrollContainer.offsetWidth < allItemsWidth; + + if (showEndOverflow) { + this._updateEndOverflow(itemsDomRefs); + } else { + this._closeRespPopover(); } - return this.itemsInEndOverflow; } - _findLastVisibleItem(items, tabStripWidth) { - const startIndex = 0; - let lastVisibleTabIndex = -1, - index, - itemSize; + _updateEndOverflow(itemsDomRefs) { + // show end overflow button + this._getHeaderOverflowButton().removeAttribute("hidden"); - for (index = startIndex; index < items.length; index++) { - itemSize = items[index]._getRealDomRef().offsetWidth; + const selectedTabDomRef = this._selectedTab.getTabInStripDomRef(); + const containerWidth = this._getHeaderScrollContainer().offsetWidth; - tabStripWidth -= itemSize; - if (tabStripWidth <= 0) { - lastVisibleTabIndex = index; - break; - } - } + const selectedItemIndexAndWidth = this._getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef); + const lastVisibleTabIndex = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width); - return lastVisibleTabIndex; + for (let i = lastVisibleTabIndex + 1; i < itemsDomRefs.length; i++) { + itemsDomRefs[i].setAttribute("hidden", ""); + } } - _handleResize() { - this._showEndOverflow(); - this._updateMediaRange(); + _getItemWidth(itemDomRef) { + const styles = window.getComputedStyle(itemDomRef); + const margins = Number.parseInt(styles.marginLeft) + Number.parseInt(styles.marginRight); + + return itemDomRef.offsetWidth + margins; } - async _closeRespPopover() { - this.responsivePopover = await this._respPopover(); - this.responsivePopover.close(); + _getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef) { + const index = itemsDomRefs.indexOf(selectedTabDomRef); + let width = selectedTabDomRef.offsetWidth; + let selectedSeparator; + + if (itemsDomRefs[index - 1] && itemsDomRefs[index - 1].classList.contains("ui5-tc__separator")) { + selectedSeparator = itemsDomRefs[index - 1]; + width += this._getItemWidth(selectedSeparator); + } + + itemsDomRefs.splice(index, 1); + + // if previous item is a separator - remove it + if (selectedSeparator) { + itemsDomRefs.splice(index - 1, 1); + } + + return { + index: index, + width: width + }; } - _showEndOverflow() { - const headerScrollContainer = this._getHeaderScrollContainer(); - const allItems = this._getTabs(); - let allItemsWidth = 0; + _findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemWidth, startIndex) { + startIndex = startIndex || 0; - allItems.forEach(item => { - allItemsWidth += item._getTabInStripDomRef.offsetWidth; - }); + let lastVisibleIndex = -1; + let index = startIndex; - this.showOverflow = headerScrollContainer.offsetWidth < allItemsWidth; + for (; index < itemsDomRefs.length; index++) { + let itemWidth = this._getItemWidth(itemsDomRefs[index]); - if (!this.showOverflow) { - this._closeRespPopover(); + if (containerWidth < selectedItemWidth + itemWidth) { + break; + } + + selectedItemWidth += itemWidth; + lastVisibleIndex = index; } + + // if prev item is separator - hide it + let prevItem = itemsDomRefs[index - 1]; + if (prevItem && prevItem.classList.contains("ui5-tc__separator")) { + lastVisibleIndex -= 1; + } + + return lastVisibleIndex; + } + + async _closeRespPopover() { + this.responsivePopover = await this._respPopover(); + this.responsivePopover.close(); } _updateMediaRange() { @@ -585,10 +624,6 @@ class TabContainer extends UI5Element { return staticAreaItem.querySelector(`#${this._id}-overflowMenu`); } - get shouldShowOverflow() { - return this.showOverflow; - } - get classes() { return { root: { @@ -604,7 +639,7 @@ class TabContainer extends UI5Element { "ui5-tc__headerInnerContainer": true, }, headerScrollContainer: { - "ui-tc__headerScrollContainer": true, + "ui5-tc__headerScrollContainer": true, }, headerList: { "ui5-tc__headerList": true, diff --git a/packages/main/src/TabSeparator.hbs b/packages/main/src/TabSeparator.hbs index 0a09d16cdd51..5dc902548a26 100644 --- a/packages/main/src/TabSeparator.hbs +++ b/packages/main/src/TabSeparator.hbs @@ -1 +1,3 @@ - + diff --git a/packages/main/src/TabSeparator.js b/packages/main/src/TabSeparator.js index c67a6014b570..ff46a09c1b33 100644 --- a/packages/main/src/TabSeparator.js +++ b/packages/main/src/TabSeparator.js @@ -37,6 +37,14 @@ class TabSeparator extends UI5Element { get isSeparator() { return true; } + + getTabInStripDomRef() { + return this._getTabInStripDomRef; + } + + get stableDomRef() { + return `${this._id}-stable-dom-ref`; + } } TabSeparator.define(); diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css index 407b723a922a..c67b4f2d79df 100644 --- a/packages/main/src/themes/TabContainer.css +++ b/packages/main/src/themes/TabContainer.css @@ -44,7 +44,7 @@ height: var(--_ui5_tc_header_height_text_with_additional_text); } -.ui-tc__headerScrollContainer { +.ui5-tc__headerScrollContainer { box-sizing: border-box; overflow: hidden; flex: 1 1 100%; @@ -98,11 +98,15 @@ visibility: visible; } -.ui-tc__overflowButton { +.ui5-tc__overflowButton { margin: 0 0.25rem; } -.ui-tc__overflowButton>[ui5-button] { +.ui5-tc__overflowButton[hidden] { + display: none; +} + +.ui5-tc__overflowButton>[ui5-button] { margin-top: 0.25rem; border-radius: 0.75rem; height: 1.5rem; @@ -163,7 +167,7 @@ } /*** RTL ***/ -[dir=rtl] .ui-tc__overflowButton { +[dir=rtl] .ui5-tc__overflowButton { margin-right: auto; margin-left: 0.25rem; } diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index f53b9f1de65a..f8df9e5fae8e 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -14,6 +14,11 @@ height: var(--_ui5_tc_header_height); } +.ui5-tc__separator[hidden], +.ui5-tab-strip-item[hidden] { + display: none; +} + .ui5-tab-strip-itemContent { padding: var(--_ui5_tc_headerItemContent_padding); border: var(--_ui5_tc_headerItemContent_default_focus_border); @@ -347,8 +352,4 @@ [dir=rtl] .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText { margin-right: 0; margin-left: 0.5rem; -} - -.ui5-tab-strip-item--hidden { - display: none; } \ No newline at end of file From 0daed6329194d0651695906e66b7d95a2cfd75fd Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Thu, 2 Dec 2021 17:54:09 +0200 Subject: [PATCH 04/44] filter overflow items --- packages/main/src/Tab.js | 12 +++++++----- packages/main/src/TabContainer.js | 5 ++++- packages/main/src/TabInOverflow.hbs | 1 + packages/main/src/themes/TabInOverflow.css | 2 +- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js index f8612c53c66d..6b1a2f4e1a07 100644 --- a/packages/main/src/Tab.js +++ b/packages/main/src/Tab.js @@ -117,7 +117,13 @@ const metadata = { type: String, defaultValue: "-1", noAttribute: true, - } + }, + + hideInOverflow: { + type: Boolean, + defaultValue: false, + noAttribute: true, + }, }, events: /** @lends sap.ui.webcomponents.main.Tab.prototype */ { }, @@ -318,10 +324,6 @@ class Tab extends UI5Element { classes.push("ui5-tab-overflow-item--disabled"); } - if (!this.hidden) { - classes.push("ui5-tab-overflow-item--hidden"); - } - return classes.join(" "); } diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 2c74a728e8c6..3d8b72c339c2 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -390,6 +390,7 @@ class TabContainer extends UI5Element { _onOverflowListItemSelect(event) { this._onItemSelect(event.detail.item); this.responsivePopover.close(); + this._setItemsForStrip(); this.shadowRoot.querySelector(`#${event.detail.item.id}`).focus(); } @@ -500,7 +501,7 @@ class TabContainer extends UI5Element { return; } - const itemsDomRefs = this.items.map(function (item) { return item.getTabInStripDomRef(); }); + const itemsDomRefs = this.items.map(item => item.getTabInStripDomRef()); // make sure the end overflow is hidden endOverflowButton.setAttribute("hidden", ""); @@ -521,6 +522,8 @@ class TabContainer extends UI5Element { } else { this._closeRespPopover(); } + + this.items.forEach(item => item.hideInOverflow = !item.getTabInStripDomRef().hasAttribute("hidden")); } _updateEndOverflow(itemsDomRefs) { diff --git a/packages/main/src/TabInOverflow.hbs b/packages/main/src/TabInOverflow.hbs index bbc4752c47d3..9ae7d8c5f5f3 100644 --- a/packages/main/src/TabInOverflow.hbs +++ b/packages/main/src/TabInOverflow.hbs @@ -3,6 +3,7 @@ class="{{this.overflowClasses}}" type="{{this.overflowState}}" ?disabled="{{this.effectiveDisabled}}" + ?hidden="{{this.hideInOverflow}}" aria-disabled="{{this.effectiveDisabled}}" aria-selected="{{this.effectiveSelected}}" aria-labelledby="{{this.ariaLabelledBy}}" diff --git a/packages/main/src/themes/TabInOverflow.css b/packages/main/src/themes/TabInOverflow.css index cc0311a39ef5..5e98ac9f4311 100644 --- a/packages/main/src/themes/TabInOverflow.css +++ b/packages/main/src/themes/TabInOverflow.css @@ -46,7 +46,7 @@ color: var(--_ui5_tc_overflowItem_current_color); } -.ui5-tab-overflow-item--hidden { +.ui5-tab-overflow-item[hidden] { display: none; } From 72464a5c79b5bc3922fbd62d32b84c6881e92af7 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Thu, 2 Dec 2021 18:33:44 +0200 Subject: [PATCH 05/44] fix lint error and inline mode filtering --- packages/main/src/TabContainer.js | 15 +++++++++------ packages/main/src/themes/TabInStrip.css | 4 +++- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 3d8b72c339c2..2ffd098ef084 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -384,6 +384,7 @@ class TabContainer extends UI5Element { _onHeaderItemSelect(tab) { if (!tab.hasAttribute("disabled")) { this._onItemSelect(tab); + this._setItemsForStrip(); } } @@ -515,7 +516,7 @@ class TabContainer extends UI5Element { allItemsWidth += this._getItemWidth(item); }); - let showEndOverflow = headerScrollContainer.offsetWidth < allItemsWidth; + const showEndOverflow = headerScrollContainer.offsetWidth < allItemsWidth; if (showEndOverflow) { this._updateEndOverflow(itemsDomRefs); @@ -523,7 +524,9 @@ class TabContainer extends UI5Element { this._closeRespPopover(); } - this.items.forEach(item => item.hideInOverflow = !item.getTabInStripDomRef().hasAttribute("hidden")); + this.items.forEach(item => { + item.hideInOverflow = !item.getTabInStripDomRef().hasAttribute("hidden"); + }); } _updateEndOverflow(itemsDomRefs) { @@ -566,8 +569,8 @@ class TabContainer extends UI5Element { } return { - index: index, - width: width + index, + width, }; } @@ -578,7 +581,7 @@ class TabContainer extends UI5Element { let index = startIndex; for (; index < itemsDomRefs.length; index++) { - let itemWidth = this._getItemWidth(itemsDomRefs[index]); + const itemWidth = this._getItemWidth(itemsDomRefs[index]); if (containerWidth < selectedItemWidth + itemWidth) { break; @@ -589,7 +592,7 @@ class TabContainer extends UI5Element { } // if prev item is separator - hide it - let prevItem = itemsDomRefs[index - 1]; + const prevItem = itemsDomRefs[index - 1]; if (prevItem && prevItem.classList.contains("ui5-tc__separator")) { lastVisibleIndex -= 1; } diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index f8df9e5fae8e..e67fd8444348 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -15,7 +15,9 @@ } .ui5-tc__separator[hidden], -.ui5-tab-strip-item[hidden] { +.ui5-tab-strip-item[hidden], +.ui5-tab-strip-item--textOnly[hidden], +.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline[hidden] { display: none; } From f76383155e9e62ad2091976e6376813fe9c0a88b Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Fri, 3 Dec 2021 17:06:23 +0200 Subject: [PATCH 06/44] implemented "start and end" overflow --- packages/main/src/Tab.js | 3 +- packages/main/src/TabContainer.hbs | 21 ++- packages/main/src/TabContainer.js | 222 +++++++++++++++++++++++++--- packages/main/src/TabInOverflow.hbs | 2 +- 4 files changed, 225 insertions(+), 23 deletions(-) diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js index 6b1a2f4e1a07..416932946d06 100644 --- a/packages/main/src/Tab.js +++ b/packages/main/src/Tab.js @@ -119,9 +119,8 @@ const metadata = { noAttribute: true, }, - hideInOverflow: { + hideInEndOverflow: { type: Boolean, - defaultValue: false, noAttribute: true, }, }, diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index 230a6650de1b..49e446c2c02f 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -7,6 +7,23 @@ {{/if}}
+
@@ -35,8 +52,8 @@
@@ -65,7 +65,7 @@ tabindex="-1" title="{{overflowMenuTitle}}" aria-haspopup="true" - icon-end>MORE + icon-end>{{this._endOverflowText}} {{/if}}
diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index d2bfdbd5d15a..fa17c960352f 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -30,6 +30,7 @@ import TabsOverflowMode from "./types/TabsOverflowMode.js"; const tabStyles = []; const staticAreaTabStyles = []; +const defaultOverflowText = "MORE"; /** * @public @@ -217,6 +218,18 @@ const metadata = { type: Boolean, noAttribute: true, }, + + _startOverflowText: { + type: String, + noAttribute: true, + defaultValue: defaultOverflowText, + }, + + _endOverflowText: { + type: String, + noAttribute: true, + defaultValue: defaultOverflowText, + }, }, events: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ { @@ -497,6 +510,10 @@ class TabContainer extends UI5Element { return; } + this.items.forEach(item => { + item.isInEndOverflow = false; + }); + this.responsivePopover = await this._respPopover(); if (this.responsivePopover.opened) { this.responsivePopover.close(); @@ -512,6 +529,10 @@ class TabContainer extends UI5Element { return; } + this.items.forEach(item => { + item.isInEndOverflow = true; + }); + this.responsivePopover = await this._respPopover(); if (this.responsivePopover.opened) { this.responsivePopover.close(); @@ -542,6 +563,8 @@ class TabContainer extends UI5Element { // show all tabs for (let i = 0; i < itemsDomRefs.length; i++) { itemsDomRefs[i].removeAttribute("hidden"); + itemsDomRefs[i].removeAttribute("start-overflow"); + itemsDomRefs[i].removeAttribute("end-overflow"); } itemsDomRefs.forEach(item => { @@ -564,9 +587,7 @@ class TabContainer extends UI5Element { break; } - this.items.forEach(item => { - item.hideInEndOverflow = !item.getTabInStripDomRef().hasAttribute("hidden"); - }); + this._updateOverflowItems(); } _updateEndOverflow(itemsDomRefs) { @@ -581,6 +602,7 @@ class TabContainer extends UI5Element { for (let i = lastVisibleTabIndex + 1; i < itemsDomRefs.length; i++) { itemsDomRefs[i].setAttribute("hidden", ""); + itemsDomRefs[i].setAttribute("end-overflow", ""); } } @@ -605,6 +627,7 @@ class TabContainer extends UI5Element { for (let i = lastVisible + 1; i < itemsDomRefs.length; i++) { itemsDomRefs[i].setAttribute("hidden", ""); + itemsDomRefs[i].setAttribute("end-overflow", ""); } return; @@ -625,6 +648,7 @@ class TabContainer extends UI5Element { for (let i = firstVisible - 1; i >= 0; i--) { itemsDomRefs[i].setAttribute("hidden", ""); + itemsDomRefs[i].setAttribute("start-overflow", ""); } return; @@ -647,10 +671,12 @@ class TabContainer extends UI5Element { for (let i = firstVisible - 1; i >= 0; i--) { itemsDomRefs[i].setAttribute("hidden", ""); + itemsDomRefs[i].setAttribute("start-overflow", ""); } for (let i = lastVisible + 1; i < itemsDomRefs.length; i++) { itemsDomRefs[i].setAttribute("hidden", ""); + itemsDomRefs[i].setAttribute("end-overflow", ""); } } @@ -782,6 +808,32 @@ class TabContainer extends UI5Element { return lastVisibleIndex; } + _updateOverflowItems() { + const isStartAndEndOverflow = this.tabsOverflowMode === TabsOverflowMode.StartAndEnd; + let startOverflowItemsCount = 0; + let endOverflowItemsCount = 0; + + this.items.forEach(item => { + item.hideInStartOverflow = !item.getTabInStripDomRef().hasAttribute("start-overflow"); + item.hideInEndOverflow = !item.getTabInStripDomRef().hasAttribute("end-overflow"); + + if (isStartAndEndOverflow) { + if (!item.hideInStartOverflow && !item.isSeparator) { + startOverflowItemsCount++; + } else if (!item.hideInEndOverflow && !item.isSeparator) { + endOverflowItemsCount++; + } + } + }); + + if (isStartAndEndOverflow) { + this._startOverflowText = startOverflowItemsCount; + this._endOverflowText = endOverflowItemsCount; + } else { + this._endOverflowText = defaultOverflowText; + } + } + async _closeRespPopover() { this.responsivePopover = await this._respPopover(); this.responsivePopover.close(); diff --git a/packages/main/src/TabInOverflow.hbs b/packages/main/src/TabInOverflow.hbs index 9a11cad5a942..9ae7d8c5f5f3 100644 --- a/packages/main/src/TabInOverflow.hbs +++ b/packages/main/src/TabInOverflow.hbs @@ -3,7 +3,7 @@ class="{{this.overflowClasses}}" type="{{this.overflowState}}" ?disabled="{{this.effectiveDisabled}}" - ?hidden="{{this.hideInEndOverflow}}" + ?hidden="{{this.hideInOverflow}}" aria-disabled="{{this.effectiveDisabled}}" aria-selected="{{this.effectiveSelected}}" aria-labelledby="{{this.ariaLabelledBy}}" diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index 1b28bf8444f3..ff46a320a953 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -30,436 +30,37 @@

ui5-tabcontainer

-
-

Text only

- - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-

Tab Container

- - - - - - - - - - - - - - - - - -
- -
-

Icon only

- - - Button 11 - Button 12 - - - Button 3 - - - Button 3 - - - Button 2 - - - Button 2 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 2 - - - Button 3 - - -
- -
-

Text only

- - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - -
- -
- - - Toggle style - - - Source - Method - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - Cell 1 - Cell 2 - - - Cell 1 - Cell 2 - - - Cell 1 - Cell 2 - - - Cell 1 - Cell 2 - - - - - -
- -
-

Icon and Text

- - - -
-

Content with set height: 300px

- Button 11 - Button 12 -
- - - Button 2 - - - Button 3 - - -
- -
-

Icon and Text with tabLayout="Inline"

- - - -
-

Content with set height: 300px

- Button 11 - Button 12 -
- - - Button 2 - - - Button 3 - - -
- -
-

Text and additional text

- - - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - -
- -
-

Text and additional text with tabLayout="Inline"

- - - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - -
- -
-

Tabs with input elements

- - - -

ui5-input

- - - -

browser input

- - - -
- -
-

Result

- - -
- -
-

TabContainer in Compact

-
- - - Button 11 - Button 12 - - - Button 2 - - - Button 3 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - Button 4 - - - - - - - - - - - - - - - - - - - - - - - - Button 11 - Button 12 - - - Button 3 - - - Button 3 - - - Button 2 - - - Button 2 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 3 - - - Button 2 - - - Button 3 - - - -
-
- -
-

Tab Container With Custom Menu Button

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

Start and End Overflow

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From f85caa7767aaca92285e3d47af5464f8e486188b Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Mon, 6 Dec 2021 16:43:48 +0200 Subject: [PATCH 08/44] fix filtering corner cases --- packages/main/src/TabContainer.js | 40 ++++++++++++------------------- 1 file changed, 15 insertions(+), 25 deletions(-) diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index fa17c960352f..0a457d6b3c89 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -615,14 +615,13 @@ class TabContainer extends UI5Element { let firstVisible; let lastVisible; - // show "end" overflow button - this._getHeaderEndOverflowButton().removeAttribute("hidden"); - - // width is changed - containerWidth = this._getHeaderScrollContainer().offsetWidth; - // has "end", but no "start" overflow if (!hasStartOverflow) { + // show "end" overflow button + this._getHeaderEndOverflowButton().removeAttribute("hidden"); + // width is changed + containerWidth = this._getHeaderScrollContainer().offsetWidth; + lastVisible = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width); for (let i = lastVisible + 1; i < itemsDomRefs.length; i++) { @@ -633,17 +632,13 @@ class TabContainer extends UI5Element { return; } - // show "start" overflow button - this._getHeaderStartOverflowButton().removeAttribute("hidden"); - - // hide "end" overflow button - this._getHeaderEndOverflowButton().setAttribute("hidden", ""); - - // width is changed - containerWidth = this._getHeaderScrollContainer().offsetWidth; - // has "start", but no "end" overflow if (!hasEndOverflow) { + // show "start" overflow button + this._getHeaderStartOverflowButton().removeAttribute("hidden"); + // width is changed + containerWidth = this._getHeaderScrollContainer().offsetWidth; + firstVisible = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width); for (let i = firstVisible - 1; i >= 0; i--) { @@ -654,18 +649,13 @@ class TabContainer extends UI5Element { return; } + // show "start" overflow button + this._getHeaderStartOverflowButton().removeAttribute("hidden"); // show "end" overflow button this._getHeaderEndOverflowButton().removeAttribute("hidden"); - // width is changed containerWidth = this._getHeaderScrollContainer().offsetWidth; - const leftItems = []; - - for (let index = 0; index < selectedItemIndexAndWidth.index; index++) { - leftItems.push(itemsDomRefs[index]); - } - firstVisible = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, selectedItemIndexAndWidth.index - 1); lastVisible = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, firstVisible); @@ -762,12 +752,12 @@ class TabContainer extends UI5Element { } _findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemWidth, startIndex) { - let lastVisible = itemsDomRefs.length; - if (startIndex === undefined) { startIndex = itemsDomRefs.length - 1; } + let lastVisible = startIndex + 1; + for (let index = startIndex; index >= 0; index--) { const itemWidth = this._getItemWidth(itemsDomRefs[index]); @@ -785,7 +775,7 @@ class TabContainer extends UI5Element { _findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemWidth, startIndex) { startIndex = startIndex || 0; - let lastVisibleIndex = -1; + let lastVisibleIndex = startIndex - 1; let index = startIndex; for (; index < itemsDomRefs.length; index++) { From fe1340c11170002bce9f9f2d55c7388d89694327 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Mon, 6 Dec 2021 16:54:04 +0200 Subject: [PATCH 09/44] fix test page and the overflow buttons count text --- packages/main/src/TabContainer.js | 4 +- packages/main/test/pages/TabContainer.html | 430 +++++++++++++++++++++ 2 files changed, 432 insertions(+), 2 deletions(-) diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 0a457d6b3c89..a1f772be169f 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -817,8 +817,8 @@ class TabContainer extends UI5Element { }); if (isStartAndEndOverflow) { - this._startOverflowText = startOverflowItemsCount; - this._endOverflowText = endOverflowItemsCount; + this._startOverflowText = "+" + startOverflowItemsCount; + this._endOverflowText = "+" + endOverflowItemsCount; } else { this._endOverflowText = defaultOverflowText; } diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index ff46a320a953..808aa805e598 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -30,6 +30,430 @@

ui5-tabcontainer

+
+

Text only

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

Tab Container

+ + + + + + + + + + + + + + + + + +
+ +
+

Icon only

+ + + Button 11 + Button 12 + + + Button 3 + + + Button 3 + + + Button 2 + + + Button 2 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 2 + + + Button 3 + + +
+ +
+

Text only

+ + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + +
+ +
+ + + Toggle style + + + Source + Method + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + Cell 1 + Cell 2 + + + Cell 1 + Cell 2 + + + Cell 1 + Cell 2 + + + Cell 1 + Cell 2 + + + + + +
+ +
+

Icon and Text

+ + + +
+

Content with set height: 300px

+ Button 11 + Button 12 +
+ + + Button 2 + + + Button 3 + + +
+ +
+

Icon and Text with tabLayout="Inline"

+ + + +
+

Content with set height: 300px

+ Button 11 + Button 12 +
+ + + Button 2 + + + Button 3 + + +
+ +
+

Text and additional text

+ + + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + +
+ +
+

Text and additional text with tabLayout="Inline"

+ + + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + +
+ +
+

Tabs with input elements

+ + + +

ui5-input

+ + + +

browser input

+ + + +
+ +
+

Result

+ + +
+ +
+

TabContainer in Compact

+
+ + + Button 11 + Button 12 + + + Button 2 + + + Button 3 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + Button 4 + + + + + + + + + + + + + + + + + + + + + + + + Button 11 + Button 12 + + + Button 3 + + + Button 3 + + + Button 2 + + + Button 2 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 3 + + + Button 2 + + + Button 3 + + + +
+
+ +
+

Tab Container With Custom Menu Button

+ + + + + + + + + + + + + + + + + + +
+

Start and End Overflow

@@ -61,6 +485,12 @@

Start and End Overflow

 + \ No newline at end of file From 05287bbf31bbe214ea32b057ce548e73cc39094e Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Tue, 7 Dec 2021 09:51:53 +0200 Subject: [PATCH 10/44] fix lint errors --- packages/main/src/TabContainer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index a1f772be169f..618a7da04466 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -817,8 +817,8 @@ class TabContainer extends UI5Element { }); if (isStartAndEndOverflow) { - this._startOverflowText = "+" + startOverflowItemsCount; - this._endOverflowText = "+" + endOverflowItemsCount; + this._startOverflowText = `+${startOverflowItemsCount}`; + this._endOverflowText = `+${endOverflowItemsCount}`; } else { this._endOverflowText = defaultOverflowText; } From a4af1be4650d8fb0b823a0e8b33dc5026aa0bccb Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Thu, 9 Dec 2021 09:38:09 +0200 Subject: [PATCH 11/44] Added documentation and samples --- packages/fiori/test/pages/FCL.html | 2 +- packages/fiori/test/pages/FCLApp.html | 2 +- .../samples/FlexibleColumnLayout.sample.html | 2 +- packages/main/src/TabContainer.js | 23 +-- packages/main/test/pages/Kitchen.html | 4 +- packages/main/test/pages/Kitchen.openui5.html | 4 +- packages/main/test/pages/TabContainer.html | 185 +++++++++++++----- .../test/samples/TabContainer.sample.html | 174 +++++++++++++++- 8 files changed, 314 insertions(+), 82 deletions(-) diff --git a/packages/fiori/test/pages/FCL.html b/packages/fiori/test/pages/FCL.html index d5157594db6f..bfb72c777cc3 100644 --- a/packages/fiori/test/pages/FCL.html +++ b/packages/fiori/test/pages/FCL.html @@ -603,7 +603,7 @@

- + diff --git a/packages/fiori/test/pages/FCLApp.html b/packages/fiori/test/pages/FCLApp.html index 25fabe5a0913..c7d5aab2fd74 100644 --- a/packages/fiori/test/pages/FCLApp.html +++ b/packages/fiori/test/pages/FCLApp.html @@ -64,7 +64,7 @@
- + This is the best product diff --git a/packages/fiori/test/samples/FlexibleColumnLayout.sample.html b/packages/fiori/test/samples/FlexibleColumnLayout.sample.html index 8a03f38bce94..617cda3b4576 100644 --- a/packages/fiori/test/samples/FlexibleColumnLayout.sample.html +++ b/packages/fiori/test/samples/FlexibleColumnLayout.sample.html @@ -167,7 +167,7 @@

FlexibleColumnLayout - One Initial Column



- + diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 618a7da04466..7a7691ecb7d1 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -73,7 +73,7 @@ const metadata = { }, /** - * Defines the button which will open the overflow menu. If nothing is provided to this slot, + * Defines the button which will open the start overflow menu if available. If nothing is provided to this slot, * the default button will be used. * * @type {sap.ui.webcomponents.main.IButton} @@ -133,20 +133,6 @@ const metadata = { defaultValue: TabContainerTabsPlacement.Top, }, - /** - * 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. - * - * @type {boolean} - * @defaultvalue false - * @public - */ - showOverflow: { - type: Boolean, - }, - /** * Defines the alignment of the content and the additionalText of a tab. * @@ -172,12 +158,13 @@ const metadata = { }, /** - * Defines the overflow mode of the tab strip. + * Defines the overflow mode of the tab strip. If you have a large number of tabs, only the tabs that can fit on screen will be visible. + * All other tabs that can 't fit on the screen are available in an overflow tab "More". * *

* Note: - * Only one overflow at the end would be displayed by default, - * but when set to StartAndEnd, there will be two overflows on both ends. + * Only one overflow at the end would be displayed by default, + * but when set to StartAndEnd, there will be two overflows on both ends, and tab order will not change on tab selection. * *

* Available options are: diff --git a/packages/main/test/pages/Kitchen.html b/packages/main/test/pages/Kitchen.html index 6cb568f84dd2..db1e6b86f19c 100644 --- a/packages/main/test/pages/Kitchen.html +++ b/packages/main/test/pages/Kitchen.html @@ -335,7 +335,7 @@
- + Cucumber Banana @@ -361,7 +361,7 @@ - + Cucumber Banana diff --git a/packages/main/test/pages/Kitchen.openui5.html b/packages/main/test/pages/Kitchen.openui5.html index 660a56a589ff..494bc63d5cc2 100644 --- a/packages/main/test/pages/Kitchen.openui5.html +++ b/packages/main/test/pages/Kitchen.openui5.html @@ -314,7 +314,7 @@
- + Cucumber Banana @@ -340,7 +340,7 @@ - + Cucumber Banana diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index 808aa805e598..a05f821730ca 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -29,11 +29,76 @@

ui5-tabcontainer

+
+

Text only End Overflow

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

Text only

- - +

Text only Start And End Overflow

+ + @@ -57,12 +122,69 @@

Text only

 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Tab Container

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

Tab Container Start And End Overflow

+ @@ -83,7 +205,7 @@

Tab Container

Icon only

- + Button 11 Button 12 @@ -129,7 +251,7 @@

Icon only

Text only

- + Button 11 Button 12 @@ -171,7 +293,7 @@

Text only

- + Toggle style @@ -233,7 +355,7 @@

Text only

Icon and Text

- +

Content with set height: 300px

@@ -253,7 +375,7 @@

Content with set height: 300px

Icon and Text with tabLayout="Inline"

- +

Content with set height: 300px

@@ -273,7 +395,7 @@

Content with set height: 300px

Text and additional text

- + Button 11 Button 12 @@ -290,7 +412,7 @@

Text and additional text

Text and additional text with tabLayout="Inline"

- + Button 11 Button 12 @@ -307,7 +429,7 @@

Text and additional text with tabLayout="Inline"

Tabs with input elements

- +

ui5-input

@@ -328,7 +450,7 @@

Result

TabContainer in Compact

- + Button 11 Button 12 @@ -368,7 +490,7 @@

TabContainer in Compact

 - + @@ -386,7 +508,7 @@

TabContainer in Compact

 - + Button 11 Button 12 @@ -434,7 +556,7 @@

TabContainer in Compact

Tab Container With Custom Menu Button

- + @@ -454,37 +576,6 @@

Tab Container With Custom Menu Button
-

Start and End Overflow

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From 6c57478afe0ba6e48600e2929ae8f18ebe20cb2a Mon Sep 17 00:00:00 2001 From: Georgi Minkov Date: Fri, 17 Dec 2021 15:03:02 +0200 Subject: [PATCH 27/44] lint --- packages/main/src/TabContainer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 35590c02e091..6a82a5af3505 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -585,7 +585,10 @@ class TabContainer extends UI5Element { const isEndOverflow = event.currentTarget.classList.contains("ui5-tc__endOverflowButton"); const isStartOverflow = event.currentTarget.classList.contains("ui5-tc__startOverflowButton"); - if (isDown(event) || isStartOverflow && isLeft(event) || isEndOverflow && isRight(event)) { + switch (true) { + case isDown(event): + case isStartOverflow && isLeft(event): + case isEndOverflow && isRight(event): await this._onOverflowButtonClick(event); } } From 257a36fc763223b24f9b296abffb1c8c09da0130 Mon Sep 17 00:00:00 2001 From: Georgi Minkov Date: Mon, 20 Dec 2021 10:07:30 +0200 Subject: [PATCH 28/44] fix test --- packages/main/test/pages/TabContainer.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index d0b15099b827..a5b0114dae63 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -57,7 +57,7 @@

Text only End Overflow

 - + @@ -137,7 +137,7 @@

Text only Start And End Overflow

 - + From 7ec9b4bc9da5af06e63c771b191b24890684937f Mon Sep 17 00:00:00 2001 From: Georgi Minkov Date: Mon, 20 Dec 2021 10:21:39 +0200 Subject: [PATCH 29/44] feat(ui5-tabcontainer): show separators in overflow Part of #2540 --- packages/main/src/TabContainer.hbs | 22 +- packages/main/src/TabContainer.js | 12 +- packages/main/src/TabContainerPopover.hbs | 10 +- packages/main/src/TabSeparator.hbs | 3 - packages/main/src/TabSeparator.js | 37 ++- packages/main/src/TabSeparatorInOverflow.hbs | 7 + packages/main/src/TabSeparatorInStrip.hbs | 6 + packages/main/src/themes/TabContainer.css | 42 +-- .../src/themes/TabSeparatorInOverflow.css | 8 + .../main/src/themes/TabSeparatorInStrip.css | 9 + packages/main/test/pages/TabContainer.html | 250 ++++++------------ 11 files changed, 166 insertions(+), 240 deletions(-) delete mode 100644 packages/main/src/TabSeparator.hbs create mode 100644 packages/main/src/TabSeparatorInOverflow.hbs create mode 100644 packages/main/src/TabSeparatorInStrip.hbs create mode 100644 packages/main/src/themes/TabSeparatorInOverflow.css create mode 100644 packages/main/src/themes/TabSeparatorInStrip.css diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index 74b4b5186576..49bbfe69243d 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -7,11 +7,11 @@ {{/if}}
- {{!-- // TODO render this overflow conditionally with isModeStartAndEnd --}} + {{!-- TODO render this overflow conditionally with isModeStartAndEnd --}}

Text only Start And End Overflow

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

Tab Container

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

Tab Container Start And End Overflow

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

TabContainer in Compact

 - - + - - - - - - - - - - - - + + + + + + From 885a6b1895d8a338eb9975cd84a161333df68738 Mon Sep 17 00:00:00 2001 From: Georgi Minkov Date: Mon, 20 Dec 2021 13:26:11 +0200 Subject: [PATCH 30/44] rename classes, refactor --- packages/main/src/Tab.js | 23 --- packages/main/src/TabContainer.hbs | 17 +- packages/main/src/TabContainer.js | 165 +++++++++--------- packages/main/src/TabContainerPopover.hbs | 2 +- packages/main/src/TabInOverflow.hbs | 2 +- packages/main/src/themes/TabContainer.css | 9 +- packages/main/test/specs/TabContainer.spec.js | 16 +- 7 files changed, 103 insertions(+), 131 deletions(-) diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js index 48c4090c68b8..14a79a290200 100644 --- a/packages/main/src/Tab.js +++ b/packages/main/src/Tab.js @@ -119,21 +119,6 @@ const metadata = { noAttribute: true, }, - hideInStartOverflow: { - type: Boolean, - noAttribute: true, - }, - - hideInEndOverflow: { - type: Boolean, - noAttribute: true, - }, - - isInEndOverflow: { - type: Boolean, - noAttribute: true, - }, - _selected: { type: Boolean, }, @@ -343,14 +328,6 @@ class Tab extends UI5Element { get overflowState() { return this.disabled ? "Inactive" : "Active"; } - - get hideInOverflow() { - if (this.isInEndOverflow) { - return this.hideInEndOverflow; - } - - return this.hideInStartOverflow; - } } Tab.define(); diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index 74b4b5186576..a736780fffd6 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -7,11 +7,10 @@ {{/if}}
- {{!-- // TODO render this overflow conditionally with isModeStartAndEnd --}}
- - + + Toggle style diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js index 74e304b85b59..f5a1d8ead5f3 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 () => { @@ -45,29 +45,6 @@ describe("TabContainer general interaction", () => { assert.strictEqual(await browser.$("#tabContainerIconOnly").getAttribute("media-range"), "XL", "media-range=XL"); }); - it("tests if content is scrollable when tabcontainer takes limited height by its parent", async () => { - const { tcHeight, tcScrollHeight } = await browser.executeAsync(done => { - const scrollableContent = document.getElementById("tc-scrollable-child"); - - done({ - tcHeight: scrollableContent.offsetHeight, - tcScrollHeight: scrollableContent.scrollHeight, - }); - }); - - const { tabHeight, tabScrollHeight } = await browser.executeAsync(done => { - const scrollableContent = document.getElementById("scrollable-tab").shadowRoot.querySelector("div"); - - done({ - tabHeight: scrollableContent.offsetHeight, - tabScrollHeight: scrollableContent.scrollHeight, - }); - }); - - assert.isBelow(tabHeight, tabScrollHeight, "Tab Content is scrollable"); - assert.isAtLeast(tcHeight, tcScrollHeight, "TabContainer is not scrollable"); - }); - it("tests aria attrs", async () => { const tabContainer = await browser.$("#tabContainer1"); const tab4 = await tabContainer.shadow$(".ui5-tab-strip-item:nth-child(4)"); From 3d211c79f59a6def5656805fae739114c55c810a Mon Sep 17 00:00:00 2001 From: Georgi Minkov Date: Wed, 22 Dec 2021 10:42:58 +0200 Subject: [PATCH 36/44] cancel item selection in overflow list --- packages/main/src/TabContainer.js | 26 +++++++++-------------- packages/main/src/TabContainerPopover.hbs | 2 +- packages/main/src/TabInOverflow.hbs | 1 - 3 files changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 168b20c4530e..346917598058 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -266,12 +266,8 @@ const metadata = { */ "tab-select": { detail: { - tab: { - type: HTMLElement, - }, - tabIndex: { - type: Number, - }, + tab: { type: HTMLElement }, + tabIndex: { type: Number }, }, }, }, @@ -449,12 +445,14 @@ class TabContainer extends UI5Element { } } - _onOverflowListItemSelect(event) { - const selectedItem = event.detail.selectedItems[0]; - this._onItemSelect(selectedItem); + _onOverflowListItemClick(event) { + event.preventDefault(); // cancel the item selection + const { item } = event.detail; + + this._onItemSelect(item); this.responsivePopover.close(); this._setItemsForStrip(); - this.shadowRoot.querySelector(`#${selectedItem.id}`).focus(); + this.shadowRoot.querySelector(`#${item.id}`).focus(); } _onItemSelect(target) { @@ -526,15 +524,11 @@ class TabContainer extends UI5Element { } slideContentDown(element) { - return slideDown({ - element, - }).promise(); + return slideDown({ element }).promise(); } slideContentUp(element) { - return slideUp({ - element, - }).promise(); + return slideUp({ element }).promise(); } async _onOverflowClick(event) { diff --git a/packages/main/src/TabContainerPopover.hbs b/packages/main/src/TabContainerPopover.hbs index 97f517955df8..9250eaa7eb2c 100644 --- a/packages/main/src/TabContainerPopover.hbs +++ b/packages/main/src/TabContainerPopover.hbs @@ -7,7 +7,7 @@ _hide-header class="ui5-tab-container-responsive-popover" > - + {{#if _endOverflowItems.length}} {{#each _endOverflowItems}} {{#unless this.isSeparator}} diff --git a/packages/main/src/TabInOverflow.hbs b/packages/main/src/TabInOverflow.hbs index 85ec015ed63b..bbc4752c47d3 100644 --- a/packages/main/src/TabInOverflow.hbs +++ b/packages/main/src/TabInOverflow.hbs @@ -3,7 +3,6 @@ class="{{this.overflowClasses}}" type="{{this.overflowState}}" ?disabled="{{this.effectiveDisabled}}" - {{!-- ?hidden="{{this.hideInOverflow}}" --}} aria-disabled="{{this.effectiveDisabled}}" aria-selected="{{this.effectiveSelected}}" aria-labelledby="{{this.ariaLabelledBy}}" From 4a6f384db3e7e9728d6cbee48d3ff3fffde4d486 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Wed, 22 Dec 2021 12:11:06 +0200 Subject: [PATCH 37/44] css separators --- packages/main/src/TabSeparatorInOverflow.hbs | 2 -- packages/main/src/themes/TabSeparatorInOverflow.css | 8 ++------ packages/main/src/themes/TabSeparatorInStrip.css | 5 ----- 3 files changed, 2 insertions(+), 13 deletions(-) diff --git a/packages/main/src/TabSeparatorInOverflow.hbs b/packages/main/src/TabSeparatorInOverflow.hbs index 606ceb11f64c..34e99c7cd4e8 100644 --- a/packages/main/src/TabSeparatorInOverflow.hbs +++ b/packages/main/src/TabSeparatorInOverflow.hbs @@ -1,11 +1,9 @@ {{!-- check which tag to use --}} -
------------------
 \ No newline at end of file diff --git a/packages/main/src/themes/TabSeparatorInOverflow.css b/packages/main/src/themes/TabSeparatorInOverflow.css index 0a7b618816f8..1a24d756c97c 100644 --- a/packages/main/src/themes/TabSeparatorInOverflow.css +++ b/packages/main/src/themes/TabSeparatorInOverflow.css @@ -1,9 +1,5 @@ .ui5-tc__separator { - margin: 0rem 0.25rem; min-height: 0.25rem; + border-bottom: 2px solid var(--sapList_BorderColor); + margin: 0.5rem 0.25rem 0.625rem; } - -/* check if this can ever receive focus, it must not */ -.ui5-tc__separator:focus { - outline: none; -} \ No newline at end of file diff --git a/packages/main/src/themes/TabSeparatorInStrip.css b/packages/main/src/themes/TabSeparatorInStrip.css index c5dc4966ff60..83db22674c08 100644 --- a/packages/main/src/themes/TabSeparatorInStrip.css +++ b/packages/main/src/themes/TabSeparatorInStrip.css @@ -2,8 +2,3 @@ border-left: 2px solid var(--sapList_BorderColor); margin: 0.5rem 0.25rem; } - -/* check if this can ever receive focus, it must not */ -.ui5-tc__separator:focus { - outline: none; -} \ No newline at end of file From 8f87ae696f8fde27a2d81e37ace1e6ece84678d5 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Thu, 23 Dec 2021 10:59:33 +0200 Subject: [PATCH 38/44] Fix bug with multiple separators --- packages/main/src/TabContainer.hbs | 10 ---------- packages/main/src/TabSeparatorInOverflow.hbs | 1 - 2 files changed, 11 deletions(-) diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs index ca1f5c3e9927..5227863533c4 100644 --- a/packages/main/src/TabContainer.hbs +++ b/packages/main/src/TabContainer.hbs @@ -5,9 +5,7 @@ {{#if tabsAtTheBottom}} {{> contentArea}} {{/if}} -
- {{!-- TODO render this overflow conditionally with isModeStartAndEnd --}}
{{#each items}} {{this.stripPresentation}} - {{#if this.isSeparator}} - - {{/if}} {{/each}}
diff --git a/packages/main/src/TabSeparatorInOverflow.hbs b/packages/main/src/TabSeparatorInOverflow.hbs index 34e99c7cd4e8..f9abf06039b8 100644 --- a/packages/main/src/TabSeparatorInOverflow.hbs +++ b/packages/main/src/TabSeparatorInOverflow.hbs @@ -1,4 +1,3 @@ -{{!-- check which tag to use --}} Date: Fri, 7 Jan 2022 16:12:36 +0200 Subject: [PATCH 39/44] Address code review --- packages/main/src/TabContainer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index b02c0765bcf0..33c8f3fb8274 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -469,7 +469,7 @@ class TabContainer extends UI5Element { if (item._selected) { item._selected = false; } - }, this); + }); if (this.fixed) { this.selectTab(selectedTab, selectedTabIndex); @@ -587,6 +587,9 @@ class TabContainer extends UI5Element { } _handleResize() { + if (this.responsivePopover && this.responsivePopover.opened) { + this.responsivePopover.close(); + } this._updateMediaRange(); this._setItemsForStrip(); } From 7375956f55c968a6d84ced89baa9e73273fe3667 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Fri, 7 Jan 2022 16:20:08 +0200 Subject: [PATCH 40/44] Code review comments --- packages/main/test/pages/TabContainer.html | 4 ++-- packages/main/test/specs/TabContainer.spec.js | 23 +++++++++++++++++++ 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index 8a83329bb911..b0bdec8bbff1 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -223,8 +223,8 @@

Text only

- - + + Toggle style diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js index f5a1d8ead5f3..91e9c75ffd73 100644 --- a/packages/main/test/specs/TabContainer.spec.js +++ b/packages/main/test/specs/TabContainer.spec.js @@ -45,6 +45,29 @@ describe("TabContainer general interaction", () => { assert.strictEqual(await browser.$("#tabContainerIconOnly").getAttribute("media-range"), "XL", "media-range=XL"); }); + it("tests if content is scrollable when tabcontainer takes limited height by its parent", async () => { + const { tcHeight, tcScrollHeight } = await browser.executeAsync(done => { + const scrollableContent = document.getElementById("tc-scrollable-child"); + + done({ + tcHeight: scrollableContent.offsetHeight, + tcScrollHeight: scrollableContent.scrollHeight, + }); + }); + + const { tabHeight, tabScrollHeight } = await browser.executeAsync(done => { + const scrollableContent = document.getElementById("scrollable-tab").shadowRoot.querySelector("div"); + + done({ + tabHeight: scrollableContent.offsetHeight, + tabScrollHeight: scrollableContent.scrollHeight, + }); + }); + + assert.isBelow(tabHeight, tabScrollHeight, "Tab Content is scrollable"); + assert.isAtLeast(tcHeight, tcScrollHeight, "TabContainer is not scrollable"); + }); + it("tests aria attrs", async () => { const tabContainer = await browser.$("#tabContainer1"); const tab4 = await tabContainer.shadow$(".ui5-tab-strip-item:nth-child(4)"); From 2982baeec2e19a4e0a142b006a9285724c51e8a6 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Mon, 10 Jan 2022 11:33:57 +0200 Subject: [PATCH 41/44] Updated separator metrics according to VD spec --- packages/main/src/themes/TabSeparatorInOverflow.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/main/src/themes/TabSeparatorInOverflow.css b/packages/main/src/themes/TabSeparatorInOverflow.css index 1a24d756c97c..52aaf751136e 100644 --- a/packages/main/src/themes/TabSeparatorInOverflow.css +++ b/packages/main/src/themes/TabSeparatorInOverflow.css @@ -1,5 +1,8 @@ .ui5-tc__separator { min-height: 0.25rem; - border-bottom: 2px solid var(--sapList_BorderColor); - margin: 0.5rem 0.25rem 0.625rem; + border-bottom: 0.0625rem solid var(--sapToolbar_SeparatorColor); + margin: 0 0.5rem; } +ui5-list>.ui5-tc__separator:first-child { + min-height: 0.5rem; +} \ No newline at end of file From ab8313d2a1b6a23748f7a0649e637ff120679189 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Mon, 10 Jan 2022 12:14:45 +0200 Subject: [PATCH 42/44] Update separator parameters --- packages/main/src/themes/TabContainer.css | 6 ------ packages/main/src/themes/TabSeparatorInOverflow.css | 2 +- packages/main/src/themes/TabSeparatorInStrip.css | 3 ++- 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css index bf38dd073971..7a6ac9c53291 100644 --- a/packages/main/src/themes/TabContainer.css +++ b/packages/main/src/themes/TabContainer.css @@ -47,12 +47,6 @@ 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; } diff --git a/packages/main/src/themes/TabSeparatorInOverflow.css b/packages/main/src/themes/TabSeparatorInOverflow.css index 52aaf751136e..4b223ea8c2aa 100644 --- a/packages/main/src/themes/TabSeparatorInOverflow.css +++ b/packages/main/src/themes/TabSeparatorInOverflow.css @@ -1,6 +1,6 @@ .ui5-tc__separator { min-height: 0.25rem; - border-bottom: 0.0625rem solid var(--sapToolbar_SeparatorColor); + border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor); margin: 0 0.5rem; } ui5-list>.ui5-tc__separator:first-child { diff --git a/packages/main/src/themes/TabSeparatorInStrip.css b/packages/main/src/themes/TabSeparatorInStrip.css index 83db22674c08..7cdc59327b67 100644 --- a/packages/main/src/themes/TabSeparatorInStrip.css +++ b/packages/main/src/themes/TabSeparatorInStrip.css @@ -1,4 +1,5 @@ .ui5-tc__separator { - border-left: 2px solid var(--sapList_BorderColor); + width: 0; + border-left: 0.0625rem solid var(--sapGroup_TitleBorderColor); margin: 0.5rem 0.25rem; } From 146f106a3813a5a05c5cf02b093b65ea2fc045c1 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Mon, 10 Jan 2022 12:30:33 +0200 Subject: [PATCH 43/44] Focus on first focusable element in overflow --- packages/main/src/TabContainer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index 33c8f3fb8274..cff2f08d762c 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -38,6 +38,7 @@ import tabContainerCss from "./generated/themes/TabContainer.css.js"; import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; import TabLayout from "./types/TabLayout.js"; import TabsOverflowMode from "./types/TabsOverflowMode.js"; +import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js"; const tabStyles = []; const staticAreaTabStyles = []; @@ -569,7 +570,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 = getFirstFocusableElement(this.responsivePopover.content[0]).id; this.responsivePopover.showAt(button); } } From 3a704cc90af14219d9f85657fdb2b0ccc45a9be3 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Mon, 10 Jan 2022 12:46:07 +0200 Subject: [PATCH 44/44] Updated first focusable element selection --- packages/main/src/TabContainer.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index cff2f08d762c..115a459609f6 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -38,7 +38,6 @@ import tabContainerCss from "./generated/themes/TabContainer.css.js"; import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; import TabLayout from "./types/TabLayout.js"; import TabsOverflowMode from "./types/TabsOverflowMode.js"; -import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js"; const tabStyles = []; const staticAreaTabStyles = []; @@ -570,7 +569,7 @@ class TabContainer extends UI5Element { if (this.responsivePopover.opened) { this.responsivePopover.close(); } else { - this.responsivePopover.initialFocus = getFirstFocusableElement(this.responsivePopover.content[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); } }