From 49675ed8a7ae0776991d72d56a8271b6652fc15c Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Wed, 16 Apr 2025 15:47:21 +0300 Subject: [PATCH 1/2] chore(ui5-tabcontainer): test skip items rearrange --- packages/main/src/TabContainer.ts | 18 +- packages/main/test/pages/TabContainer.html | 1048 +------------------- 2 files changed, 24 insertions(+), 1042 deletions(-) diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts index 42bd5ba747e0..07c3301b026a 100644 --- a/packages/main/src/TabContainer.ts +++ b/packages/main/src/TabContainer.ts @@ -314,6 +314,9 @@ class TabContainer extends UI5Element { @property({ type: Number, noAttribute: true }) _width?: number; + skipRearrangeCount: number = 0; + isOverflowClick: boolean = false; + /** * Defines the tabs. * @@ -410,7 +413,11 @@ class TabContainer extends UI5Element { return; } - this._setItemsForStrip(); + if (this.skipRearrangeCount === 0) { + this._setItemsForStrip(); + } else { + this.skipRearrangeCount--; + } if (!this.shadowRoot!.contains(document.activeElement)) { const focusStart = this._getRootTab(this._selectedTab); @@ -735,6 +742,7 @@ class TabContainer extends UI5Element { } if (!tab.realTabReference.hasOwnContent && tab.realTabReference.tabs.length) { + this.isOverflowClick = false; await this._togglePopover(tab); return; @@ -771,6 +779,7 @@ class TabContainer extends UI5Element { return; } + this.isOverflowClick = false; await this._togglePopover(opener, true); } @@ -855,6 +864,7 @@ class TabContainer extends UI5Element { _onHeaderItemSelect(tab: HTMLElement) { if (!tab.hasAttribute("disabled")) { + this.skipRearrangeCount = 2; this._onItemSelect(tab.id); } } @@ -862,6 +872,10 @@ class TabContainer extends UI5Element { async _onOverflowListItemClick(e: CustomEvent) { e.preventDefault(); // cancel the item selection + if (!this.isOverflowClick) { + this.skipRearrangeCount = 2; + } + this._onItemSelect(e.detail.item.id.slice(0, -3)); // strip "-li" from end of id this._closePopover(); await renderFinished(); @@ -952,6 +966,7 @@ class TabContainer extends UI5Element { opener = this.startOverflowButton[0] || this._getStartOverflowBtnDOM(); } + this.isOverflowClick = true; await this._togglePopover(opener, true); } @@ -1343,6 +1358,7 @@ class TabContainer extends UI5Element { const newItemsFlat = this._flatten(items); if (!arraysAreEqual(this._popoverItemsFlat, newItemsFlat)) { + this.skipRearrangeCount = 1; this._popoverItemsFlat = newItemsFlat; } } diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index b546d9ae1772..7fccacc1c6ed 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -17,240 +17,9 @@ -

ui5-tabcontainer

- Compact - -
-

Nested Tabs

- - - Button 1 - - - - - - Button 2 - - - Button 21 - - - Button 211 - - - - - - - Button 2121 - - - Button 212 - - - - - - Text for 2.2 - - - - - - Button 3.1 - - - Button 3.1.1 - - - - Button 3.1.2 - - - - - - Button 4 - - - - Button 41 - - - - Button 411 - - - - Button 4111 - - - - Button 41111 - - - - - - - - - Tab Content - Tab Content - - Tab Content - Tab Content - Tab Content - Tab Content - Tab 10.1 Content - Tab 10.1.1 Content - - Tab Content - - - - - - - - - - - 1 - 1.1 - - 2 - 2.1 - 2.1.1 - - 2.2 - - - - - - - - - -
- -
-

Text only End Overflow

- - - - - - - - Button 3 - - - - - - - text - text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-

Semantic States Overflow

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

Text only Start And End Overflow

@@ -272,536 +41,15 @@

Text only Start And End Overflow

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

Tab Container

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

Tab Container Start And End Overflow

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

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 - - -
- -
-

Scrollable child

- - - Toggle style - - - Option 1 - Option 2 - Option 4 - Option 5 - Option 6 - Option 7 - Option 8 - Option 9 - Option 10 - Option 11 - Option 12 - Option 13 - Option 14 - Option 15 - Option 16 - Option 17 - Option 18 - Option 19 - Option 20 - Option 21 - Option 22 - Option 23 - Option 24 - Option 25 - Option 26 - Option 27 - Option 28 - Option 29 - Option 30 - Option 31 - Option 32 - Option 33 - Option 34 - Option 35 - Option 36 - Option 37 - Option 38 - Option 39 - Option 40 - Option 41 - Option 42 - Option 43 - Option 44 - Option 45 - - - - -
- -
-

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 - - - -
-
- -
-

No paddings for the Content

- - - - Source - Method - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - Cell 1 - Cell 2 - - - - - - - Source - Method - - - Cell 3 - Cell 4 - - - - Cell 3 - Cell 4 - - - - Cell 3 - Cell 4 - - - - Cell 3 - Cell 4 - - - - Cell 3 - Cell 4 - - - -
- -
-

Background design

-
-
- Header Background - - - -
- -
- Content Background - - - -
-
- - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita voluptates accusamus est quibusdam inventore ipsam? - - - Accusamus minus aperiam sunt ipsam eos quos et maxime facilis tempora neque ratione nemo laborum expedita aliquid officiis nisi, necessitatibus quasi distinctio? - - - Dolores totam perferendis numquam incidunt obcaecati, id quo at alias rem deserunt praesentium repellat ipsum commodi consequuntur veniam et ducimus animi qui nobis accusantium tenetur eveniet culpa non! - - -
- -
-

Transparent TabContainer in Content

- - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita voluptates accusamus est quibusdam inventore ipsam? - - - Accusamus minus aperiam sunt ipsam eos quos et maxime facilis tempora neque ratione nemo laborum expedita aliquid officiis nisi, necessitatibus quasi distinctio? - - - Dolores totam perferendis numquam incidunt obcaecati, id quo at alias rem deserunt praesentium repellat ipsum commodi consequuntur veniam et ducimus animi qui nobis accusantium tenetur eveniet culpa non! - - - - - Accusamus minus aperiam sunt ipsam eos quos et maxime facilis tempora neque ratione nemo laborum expedita aliquid officiis nisi, necessitatibus quasi distinctio? - - -
- -
-

Text only Start And End Overflow Custom Overflow Buttons

- - Start - End - - - - - - - - - - - - - - - - - - - @@ -814,288 +62,6 @@

Text only Start And End Overflow Custom Overflow Buttons

 - - - - Button 1 - - - Button 2 - - - Button 3 - - - Button 4 - - - -
- Select tabs programmatically - - - Button 1 - - - Button 1 - - - Button 1 - - - Button 1 - - - Button 1 - - - Button 1 - - - Button 1 - - - Button 1 - - - - Button 1 - - - - Select First Tab - Select Last Tab - Select a Nested Tab -
-
- Empty Tab Container - - -
-
-

Add new selected tab programmatically

- add tabs - - - - -
-
-

No explicitly selected tab

- add new tab at the beginning - - - - -
- -
- - -
-

Custom padding

- - - - Button 1 - - - Button 2 - - - Button 3 - - - Button 4 - - - Button 5 - - Tab Content - -
- -
-

Dynamically Insert Tab and Focus It

- Insert and Focus New Tab - - - Button 1 - - -
- -
-

Narrow Tab Container

- - - - - - -
- -
-

No Auto Selection

- - - 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 - - - Reset tab selection -
- - - From be5b976239b45cffa652e1918098bd992aecce21 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Thu, 17 Apr 2025 11:12:20 +0300 Subject: [PATCH 2/2] chore: test page --- packages/main/test/pages/TabContainer.html | 1116 ++++++++++++++++++- packages/main/test/pages/TabContainer1.html | 67 ++ 2 files changed, 1142 insertions(+), 41 deletions(-) create mode 100644 packages/main/test/pages/TabContainer1.html diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html index 7fccacc1c6ed..faddcaf9d46b 100644 --- a/packages/main/test/pages/TabContainer.html +++ b/packages/main/test/pages/TabContainer.html @@ -17,51 +17,1085 @@ -
-

ui5-tabcontainer

-
+ +
+

ui5-tabcontainer

+
+Compact + +
+

Nested Tabs

+ + + Button 1 + + + + + + Button 2 + + + Button 21 + + + Button 211 + + + + + + + Button 2121 + + + Button 212 + + + + + + Text for 2.2 + + + + + + Button 3.1 + + + Button 3.1.1 + + + + Button 3.1.2 + + + + + + Button 4 + + + + Button 41 + + + + Button 411 + + + + Button 4111 + + + + Button 41111 + + + + + + + + + Tab Content + Tab Content + + Tab Content + Tab Content + Tab Content + Tab Content + Tab 10.1 Content + Tab 10.1.1 Content + + Tab Content + + + + + + + + + + + 1 + 1.1 + + 2 + 2.1 + 2.1.1 + + 2.2 + + + + + + + + + +
+ +
+

Text only End Overflow

+ + + + + + + + Button 3 + + + + + + + text + text + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

Semantic States Overflow

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

Text only Start And End Overflow

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

Tab Container

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

Tab Container Start And End Overflow

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

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 + + +
+ +
+

Scrollable child

+ + + Toggle style + + + Option 1 + Option 2 + Option 4 + Option 5 + Option 6 + Option 7 + Option 8 + Option 9 + Option 10 + Option 11 + Option 12 + Option 13 + Option 14 + Option 15 + Option 16 + Option 17 + Option 18 + Option 19 + Option 20 + Option 21 + Option 22 + Option 23 + Option 24 + Option 25 + Option 26 + Option 27 + Option 28 + Option 29 + Option 30 + Option 31 + Option 32 + Option 33 + Option 34 + Option 35 + Option 36 + Option 37 + Option 38 + Option 39 + Option 40 + Option 41 + Option 42 + Option 43 + Option 44 + Option 45 + + + + +
+ +
+

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 + + + +
+
+ +
+

No paddings for the Content

+ + + + Source + Method + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + Cell 1 + Cell 2 + + + + + + + Source + Method + + + Cell 3 + Cell 4 + + + + Cell 3 + Cell 4 + + + + Cell 3 + Cell 4 + + + + Cell 3 + Cell 4 + + + + Cell 3 + Cell 4 + + + + +
+ +
+

Background design

+
+
+ Header Background + + + +
+ +
+ Content Background + + + +
+
+ + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita voluptates accusamus est quibusdam inventore ipsam? + + + Accusamus minus aperiam sunt ipsam eos quos et maxime facilis tempora neque ratione nemo laborum expedita aliquid officiis nisi, necessitatibus quasi distinctio? + + + Dolores totam perferendis numquam incidunt obcaecati, id quo at alias rem deserunt praesentium repellat ipsum commodi consequuntur veniam et ducimus animi qui nobis accusantium tenetur eveniet culpa non! + + +
+ +
+

Transparent TabContainer in Content

+ + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita voluptates accusamus est quibusdam inventore ipsam? + + + Accusamus minus aperiam sunt ipsam eos quos et maxime facilis tempora neque ratione nemo laborum expedita aliquid officiis nisi, necessitatibus quasi distinctio? + + + Dolores totam perferendis numquam incidunt obcaecati, id quo at alias rem deserunt praesentium repellat ipsum commodi consequuntur veniam et ducimus animi qui nobis accusantium tenetur eveniet culpa non! + + + + + Accusamus minus aperiam sunt ipsam eos quos et maxime facilis tempora neque ratione nemo laborum expedita aliquid officiis nisi, necessitatibus quasi distinctio? + + +
+ +
+

Text only Start And End Overflow Custom Overflow Buttons

+ + Start + End + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Button 1 + + + Button 2 + + + Button 3 + + + Button 4 + + +
-

Text only Start And End Overflow

- - - - - - - - - - - - - - - - - - - - - - - - - - + Select tabs programmatically + + + Button 1 + + + Button 1 + + + Button 1 + + + Button 1 + + + Button 1 + + + Button 1 + + + Button 1 + + + Button 1 - - - - - - - - - - - + + Button 1 + + + Select First Tab + Select Last Tab + Select a Nested Tab
+
+ Empty Tab Container + + +
+
+

Add new selected tab programmatically

+ add tabs + + + + +
+
+

No explicitly selected tab

+ add new tab at the beginning + + + + +
+ +
+ + +
+

Custom padding

+ + + + Button 1 + + + Button 2 + + + Button 3 + + + Button 4 + + + Button 5 + + Tab Content + +
+ +
+

Dynamically Insert Tab and Focus It

+ Insert and Focus New Tab + + + Button 1 + + +
+ +
+

Narrow Tab Container

+ + + + + + + +
+ +
+

No Auto Selection

+ + + 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 + + + Reset tab selection +
+ + + diff --git a/packages/main/test/pages/TabContainer1.html b/packages/main/test/pages/TabContainer1.html new file mode 100644 index 000000000000..44894facc4d7 --- /dev/null +++ b/packages/main/test/pages/TabContainer1.html @@ -0,0 +1,67 @@ + + + + + + + Tab Container + + + + + + + +
+

ui5-tabcontainer

+
+
+

Text only Start And End Overflow

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