Skip to content

Commit 9f3e05b

Browse files
kskondovkskondov
committed
refactor(ui5-tabcontainer, ui5-tab): rename subTabs slot
subTabs slot of ui5-tab is renamed to items
1 parent 6c42f86 commit 9f3e05b

File tree

10 files changed

+105
-105
lines changed

10 files changed

+105
-105
lines changed

‎packages/main/src/Tab.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
180180
slots: false,
181181
},
182182
})
183-
subTabs!: Array<ITab>
183+
items!: Array<ITab>
184184

185185
isInline?: boolean;
186186
forcedMixedMode?: boolean;
@@ -224,15 +224,15 @@ class Tab extends UI5Element implements ITab, ITabbable {
224224
}
225225

226226
get requiresExpandButton() {
227-
return this.subTabs.length > 0 && this.isTopLevelTab && this.hasOwnContent;
227+
return this.items.length > 0 && this.isTopLevelTab && this.hasOwnContent;
228228
}
229229

230230
get isSingleClickArea() {
231-
return this.subTabs.length > 0 && this.isTopLevelTab && !this.hasOwnContent;
231+
return this.items.length > 0 && this.isTopLevelTab && !this.hasOwnContent;
232232
}
233233

234234
get isTwoClickArea() {
235-
return this.subTabs.length > 0 && this.isTopLevelTab && this.hasOwnContent;
235+
return this.items.length > 0 && this.isTopLevelTab && this.hasOwnContent;
236236
}
237237

238238
get isOnSelectedTabPath(): boolean {
@@ -254,7 +254,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
254254
/**
255255
* Returns the DOM reference of the tab that is placed in the header.
256256
*
257-
* **Note:** Tabs, placed in the `subTabs` slot of other tabs are not shown in the header. Calling this method on such tabs will return `null`.
257+
* **Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `null`.
258258
*
259259
* **Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.
260260
* @public
@@ -309,7 +309,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
309309
}
310310

311311
get tabs(): Array<Tab> {
312-
return this.subTabs.filter((tab): tab is Tab => !tab.isSeparator);
312+
return this.items.filter((tab): tab is Tab => !tab.isSeparator);
313313
}
314314

315315
get ariaLabelledBy() {
@@ -401,7 +401,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
401401
}
402402

403403
get _roleDescription() {
404-
return this.subTabs.length > 0 ? Tab.i18nBundle.getText(TAB_SPLIT_ROLE_DESCRIPTION) : undefined;
404+
return this.items.length > 0 ? Tab.i18nBundle.getText(TAB_SPLIT_ROLE_DESCRIPTION) : undefined;
405405
}
406406

407407
get _ariaHasPopup() {

‎packages/main/src/TabContainer.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
{{> contentArea}}
7676
{{/unless}}
7777

78-
{{#if hasSubTabs}}
78+
{{#if hasItems}}
7979
<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
8080
{{/if}}
8181

‎packages/main/src/TabContainer.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ interface ITab extends UI5Element {
7979
isSingleClickArea?: boolean;
8080
requiresExpandButton?: boolean;
8181
selected?: boolean;
82-
subTabs?: Array<ITab>;
82+
items?: Array<ITab>;
8383
tabs?: Array<ITab>
8484
text?: string;
8585
hasOwnContent?: boolean;
@@ -556,7 +556,7 @@ class TabContainer extends UI5Element {
556556
return false;
557557
});
558558

559-
if (acceptedPlacement === MovePlacement.On && (closestPosition.element as Tab).realTabReference.subTabs.length) {
559+
if (acceptedPlacement === MovePlacement.On && (closestPosition.element as Tab).realTabReference.items.length) {
560560
popoverTarget = closestPosition.element;
561561
} else if (!acceptedPlacement) {
562562
this.dropIndicatorDOM!.targetReference = null;
@@ -791,8 +791,8 @@ class TabContainer extends UI5Element {
791791
if (item.hasAttribute("ui5-tab") || item.hasAttribute("ui5-tab-separator")) {
792792
item.forcedLevel = level;
793793

794-
if (item.subTabs) {
795-
this._setIndentLevels(item.subTabs, level + 1);
794+
if (item.items) {
795+
this._setIndentLevels(item.items, level + 1);
796796
}
797797
}
798798
});
@@ -1298,10 +1298,10 @@ class TabContainer extends UI5Element {
12981298
}
12991299

13001300
if (isTabInStrip(targetOwner)) {
1301-
return targetOwner.realTabReference.subTabs;
1301+
return targetOwner.realTabReference.items;
13021302
}
13031303

1304-
return targetOwner.subTabs;
1304+
return targetOwner.items;
13051305
}
13061306

13071307
_setPopoverItems(items: Array<ITab>) {
@@ -1337,11 +1337,11 @@ class TabContainer extends UI5Element {
13371337
}
13381338
}
13391339

1340-
get hasSubTabs(): boolean {
1340+
get hasItems(): boolean {
13411341
const tabs = this._getTabs();
13421342

13431343
for (let i = 0; i < tabs.length; i++) {
1344-
if (tabs[i].subTabs.length > 0) {
1344+
if (tabs[i].items.length > 0) {
13451345
return true;
13461346
}
13471347
}
@@ -1464,7 +1464,7 @@ class TabContainer extends UI5Element {
14641464
}
14651465

14661466
get tablistAriaDescribedById() {
1467-
return this.hasSubTabs ? `${this._id}-invisibleText` : undefined;
1467+
return this.hasItems ? `${this._id}-invisibleText` : undefined;
14681468
}
14691469

14701470
get shouldAnimate() {
@@ -1493,8 +1493,8 @@ const getTab = (el: HTMLElement | null) => {
14931493
const walk = (tabs: Array<ITab>, callback: (_: ITab) => void) => {
14941494
[...tabs].forEach(tab => {
14951495
callback(tab);
1496-
if (tab.subTabs) {
1497-
walk(tab.subTabs, callback);
1496+
if (tab.items) {
1497+
walk(tab.items, callback);
14981498
}
14991499
});
15001500
};

‎packages/main/src/TabSeparator.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ class TabSeparator extends UI5Element implements ITab {
5656
/**
5757
* Returns the DOM reference of the separator that is placed in the header.
5858
*
59-
* **Note:** Tabs and separators, placed in the `subTabs` slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return `null`.
59+
* **Note:** Tabs and separators, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return `null`.
6060
* @public
6161
*/
6262
getTabInStripDomRef(): ITab | null {

‎packages/main/test/pages/TabContainer.html

+37-37
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,17 @@ <h2>Nested Tabs</h2>
3535
<ui5-tab text="Two">
3636
<ui5-button id="button2">Button 2</ui5-button>
3737

38-
<ui5-tab slot="subTabs" text="2.1">
38+
<ui5-tab slot="items" text="2.1">
3939
<ui5-button id="button21">Button 21</ui5-button>
4040

41-
<ui5-tab slot="subTabs" text="2.1.1" selected>
41+
<ui5-tab slot="items" text="2.1.1" selected>
4242
<ui5-button id="button211">Button 211</ui5-button>
4343
</ui5-tab>
4444

45-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
45+
<ui5-tab-separator slot="items"></ui5-tab-separator>
4646

47-
<ui5-tab slot="subTabs" text="2.1.2">
48-
<ui5-tab slot="subTabs" text="2.1.2.1">
47+
<ui5-tab slot="items" text="2.1.2">
48+
<ui5-tab slot="items" text="2.1.2.1">
4949
<ui5-button id="button2121">Button 2121</ui5-button>
5050
</ui5-tab>
5151

@@ -54,20 +54,20 @@ <h2>Nested Tabs</h2>
5454

5555
</ui5-tab>
5656

57-
<ui5-tab text="2.2" slot="subTabs">
57+
<ui5-tab text="2.2" slot="items">
5858
Text for 2.2
5959
</ui5-tab>
6060
</ui5-tab>
6161

6262
<ui5-tab text="Three">
63-
<ui5-tab slot="subTabs" icon="sap-icon://menu2" text="3.1">
63+
<ui5-tab slot="items" icon="sap-icon://menu2" text="3.1">
6464
<ui5-button>Button 3.1</ui5-button>
6565

66-
<ui5-tab slot="subTabs" icon="sap-icon://menu2" text="3.1.1">
66+
<ui5-tab slot="items" icon="sap-icon://menu2" text="3.1.1">
6767
<ui5-button>Button 3.1.1</ui5-button>
6868
</ui5-tab>
69-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
70-
<ui5-tab slot="subTabs" icon="sap-icon://menu2" text="3.1.2">
69+
<ui5-tab-separator slot="items"></ui5-tab-separator>
70+
<ui5-tab slot="items" icon="sap-icon://menu2" text="3.1.2">
7171
<ui5-button>Button 3.1.2</ui5-button>
7272
</ui5-tab>
7373
</ui5-tab>
@@ -76,23 +76,23 @@ <h2>Nested Tabs</h2>
7676
<ui5-tab text="Four">
7777
<ui5-button>Button 4</ui5-button>
7878

79-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
80-
<ui5-tab slot="subTabs" text="Four 1">
79+
<ui5-tab-separator slot="items"></ui5-tab-separator>
80+
<ui5-tab slot="items" text="Four 1">
8181
<ui5-button>Button 41</ui5-button>
8282

83-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
84-
<ui5-tab design="Positive" slot="subTabs" text="Four 1.1">
83+
<ui5-tab-separator slot="items"></ui5-tab-separator>
84+
<ui5-tab design="Positive" slot="items" text="Four 1.1">
8585
<ui5-button>Button 411</ui5-button>
8686

87-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
88-
<ui5-tab slot="subTabs" text="Four 1.1.1">
87+
<ui5-tab-separator slot="items"></ui5-tab-separator>
88+
<ui5-tab slot="items" text="Four 1.1.1">
8989
<ui5-button>Button 4111</ui5-button>
9090

91-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
92-
<ui5-tab slot="subTabs" text="Four 1.1.1.1">
91+
<ui5-tab-separator slot="items"></ui5-tab-separator>
92+
<ui5-tab slot="items" text="Four 1.1.1.1">
9393
<ui5-button>Button 41111</ui5-button>
9494

95-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
95+
<ui5-tab-separator slot="items"></ui5-tab-separator>
9696
</ui5-tab>
9797
</ui5-tab>
9898
</ui5-tab>
@@ -106,11 +106,11 @@ <h2>Nested Tabs</h2>
106106
<ui5-tab text="Eight">Tab Content</ui5-tab>
107107
<ui5-tab text="Nine">Tab Content</ui5-tab>
108108
<ui5-tab text="Ten">Tab Content
109-
<ui5-tab slot="subTabs" text="Ten 1">Tab 10.1 Content
110-
<ui5-tab slot="subTabs" text="Ten 1.1">Tab 10.1.1 Content
111-
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
112-
<ui5-tab slot="subTabs" text="Ten 1.1.1">Tab Content
113-
<ui5-tab slot="subTabs" text="Ten 1.1.1.1"></ui5-tab>
109+
<ui5-tab slot="items" text="Ten 1">Tab 10.1 Content
110+
<ui5-tab slot="items" text="Ten 1.1">Tab 10.1.1 Content
111+
<ui5-tab-separator slot="items"></ui5-tab-separator>
112+
<ui5-tab slot="items" text="Ten 1.1.1">Tab Content
113+
<ui5-tab slot="items" text="Ten 1.1.1.1"></ui5-tab>
114114
</ui5-tab>
115115
</ui5-tab>
116116
</ui5-tab>
@@ -120,14 +120,14 @@ <h2>Nested Tabs</h2>
120120
<ui5-tab text="Twelve"></ui5-tab>
121121
<ui5-tab text="Thirteen"></ui5-tab>
122122
<ui5-tab text="Fourteen">
123-
<ui5-tab slot="subTabs" text="Fourteen 1">1
124-
<ui5-tab slot="subTabs" text="Fourteen 1.1">1.1</ui5-tab>
123+
<ui5-tab slot="items" text="Fourteen 1">1
124+
<ui5-tab slot="items" text="Fourteen 1.1">1.1</ui5-tab>
125125
</ui5-tab>
126-
<ui5-tab slot="subTabs" text="Fourteen 2">2
127-
<ui5-tab slot="subTabs" text="Fourteen 2.1">2.1
128-
<ui5-tab slot="subTabs" text="Fourteen 2.1.1">2.1.1</ui5-tab>
126+
<ui5-tab slot="items" text="Fourteen 2">2
127+
<ui5-tab slot="items" text="Fourteen 2.1">2.1
128+
<ui5-tab slot="items" text="Fourteen 2.1.1">2.1.1</ui5-tab>
129129
</ui5-tab>
130-
<ui5-tab slot="subTabs" text="Fourteen 2.2">2.2</ui5-tab>
130+
<ui5-tab slot="items" text="Fourteen 2.2">2.2</ui5-tab>
131131
</ui5-tab>
132132
</ui5-tab>
133133
<ui5-tab text="Fifteen"></ui5-tab>
@@ -144,18 +144,18 @@ <h2>Text only End Overflow</h2>
144144
<ui5-tabcontainer id="tabContainerEndOverflow" collapsed fixed>
145145
<ui5-tab design="Positive" text="One"></ui5-tab>
146146
<ui5-tab design="Negative" text="Two" disabled>
147-
<ui5-tab slot="subTabs" text="2.1"></ui5-tab>
147+
<ui5-tab slot="items" text="2.1"></ui5-tab>
148148
</ui5-tab>
149149
<ui5-tab design="Critical" text="Three">
150-
<ui5-tab slot="subTabs" design="Positive" text="3.1">
150+
<ui5-tab slot="items" design="Positive" text="3.1">
151151
<ui5-button>Button 3</ui5-button>
152152
</ui5-tab>
153153
</ui5-tab>
154154
<ui5-tab text="Four"></ui5-tab>
155155

156156
<ui5-tab text="Five">
157-
<ui5-tab slot="subTabs" text="nested in Five">
158-
<ui5-tab slot="subTabs" text="nested deeper in Five">text</ui5-tab>
157+
<ui5-tab slot="items" text="nested in Five">
158+
<ui5-tab slot="items" text="nested deeper in Five">text</ui5-tab>
159159
text
160160
</ui5-tab>
161161
</ui5-tab>
@@ -778,7 +778,7 @@ <h2>Text only Start And End Overflow Custom Overflow Buttons</h2>
778778
<ui5-tab id="nestedTabParent" text="Seventh tab">
779779
<ui5-button>Button 1</ui5-button>
780780

781-
<ui5-tab id="nestedTab" slot="subTabs" text="Nested tab">
781+
<ui5-tab id="nestedTab" slot="items" text="Nested tab">
782782
<ui5-button>Button 1</ui5-button>
783783
</ui5-tab>
784784
</ui5-tab>
@@ -876,8 +876,8 @@ <h3>Dynamically Insert Tab and Focus It</h3>
876876
function walk(tabs, callback) {
877877
[...tabs].forEach(tab => {
878878
callback(tab);
879-
if (tab.subTabs) {
880-
walk(tab.subTabs, callback);
879+
if (tab.items) {
880+
walk(tab.items, callback);
881881
}});
882882
};
883883

‎packages/main/test/pages/TabContainerDragAndDrop.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,18 @@ <h2>Drag and drop</h2>
2020
<ui5-tabcontainer id="tabContainerDnd" collapsed fixed tabs-overflow-mode="StartAndEnd">
2121
<ui5-tab id="tabOne" movable design="Positive" text="One"></ui5-tab>
2222
<ui5-tab id="tabTwo" movable design="Negative" text="Two" disabled>
23-
<ui5-tab slot="subTabs" movable text="2.1"></ui5-tab>
23+
<ui5-tab slot="items" movable text="2.1"></ui5-tab>
2424
</ui5-tab>
2525
<ui5-tab id="tabThree" movable design="Critical" text="Three">
26-
<ui5-tab slot="subTabs" movable design="Positive" text="3.1">
26+
<ui5-tab slot="items" movable design="Positive" text="3.1">
2727
<ui5-button>Button 3</ui5-button>
2828
</ui5-tab>
2929
content
3030
</ui5-tab>
3131
<ui5-tab id="tabFour" movable text="Four (forbids nesting)"></ui5-tab>
3232
<ui5-tab id="tabFive" movable text="Five">
33-
<ui5-tab slot="subTabs" movable text="nested in Five">
34-
<ui5-tab slot="subTabs" movable text="nested deeper in Five">text</ui5-tab>
33+
<ui5-tab slot="items" movable text="nested in Five">
34+
<ui5-tab slot="items" movable text="nested deeper in Five">text</ui5-tab>
3535
text
3636
</ui5-tab>
3737
</ui5-tab>
@@ -131,7 +131,7 @@ <h2>Drag and drop</h2>
131131
const newParent = source.element.parentElement;
132132

133133
if (newParent.hasAttribute("ui5-tab")) {
134-
source.element.slot = "subTabs";
134+
source.element.slot = "items";
135135
} else {
136136
source.element.slot = "";
137137
}

0 commit comments

Comments
 (0)