Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui5-tab): rename subTabs slot to items #8559

Merged
merged 1 commit into from
Mar 28, 2024
Merged

refactor(ui5-tab): rename subTabs slot to items #8559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions packages/main/src/Tab.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
slots: false,
},
})
subTabs!: Array<ITab>
items!: Array<ITab>

isInline?: boolean;
forcedMixedMode?: boolean;
Expand Down Expand Up @@ -224,15 +224,15 @@ class Tab extends UI5Element implements ITab, ITabbable {
}

get requiresExpandButton() {
return this.subTabs.length > 0 && this.isTopLevelTab && this.hasOwnContent;
return this.items.length > 0 && this.isTopLevelTab && this.hasOwnContent;
}

get isSingleClickArea() {
return this.subTabs.length > 0 && this.isTopLevelTab && !this.hasOwnContent;
return this.items.length > 0 && this.isTopLevelTab && !this.hasOwnContent;
}

get isTwoClickArea() {
return this.subTabs.length > 0 && this.isTopLevelTab && this.hasOwnContent;
return this.items.length > 0 && this.isTopLevelTab && this.hasOwnContent;
}

get isOnSelectedTabPath(): boolean {
Expand All @@ -254,7 +254,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
/**
* Returns the DOM reference of the tab that is placed in the header.
*
* **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`.
* **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`.
*
* **Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.
* @public
Expand Down Expand Up @@ -309,7 +309,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
}

get tabs(): Array<Tab> {
return this.subTabs.filter((tab): tab is Tab => !tab.isSeparator);
return this.items.filter((tab): tab is Tab => !tab.isSeparator);
}

get ariaLabelledBy() {
Expand Down Expand Up @@ -401,7 +401,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
}

get _roleDescription() {
return this.subTabs.length > 0 ? Tab.i18nBundle.getText(TAB_SPLIT_ROLE_DESCRIPTION) : undefined;
return this.items.length > 0 ? Tab.i18nBundle.getText(TAB_SPLIT_ROLE_DESCRIPTION) : undefined;
}

get _ariaHasPopup() {
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TabContainer.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
{{> contentArea}}
{{/unless}}

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

Expand Down
22 changes: 11 additions & 11 deletions packages/main/src/TabContainer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ interface ITab extends UI5Element {
isSingleClickArea?: boolean;
requiresExpandButton?: boolean;
selected?: boolean;
subTabs?: Array<ITab>;
items?: Array<ITab>;
tabs?: Array<ITab>
text?: string;
hasOwnContent?: boolean;
Expand Down Expand Up @@ -556,7 +556,7 @@ class TabContainer extends UI5Element {
return false;
});

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

if (item.subTabs) {
this._setIndentLevels(item.subTabs, level + 1);
if (item.items) {
this._setIndentLevels(item.items, level + 1);
}
}
});
Expand Down Expand Up @@ -1298,10 +1298,10 @@ class TabContainer extends UI5Element {
}

if (isTabInStrip(targetOwner)) {
return targetOwner.realTabReference.subTabs;
return targetOwner.realTabReference.items;
}

return targetOwner.subTabs;
return targetOwner.items;
}

_setPopoverItems(items: Array<ITab>) {
Expand Down Expand Up @@ -1337,11 +1337,11 @@ class TabContainer extends UI5Element {
}
}

get hasSubTabs(): boolean {
get hasItems(): boolean {
const tabs = this._getTabs();

for (let i = 0; i < tabs.length; i++) {
if (tabs[i].subTabs.length > 0) {
if (tabs[i].items.length > 0) {
return true;
}
}
Expand Down Expand Up @@ -1464,7 +1464,7 @@ class TabContainer extends UI5Element {
}

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

get shouldAnimate() {
Expand Down Expand Up @@ -1493,8 +1493,8 @@ const getTab = (el: HTMLElement | null) => {
const walk = (tabs: Array<ITab>, callback: (_: ITab) => void) => {
[...tabs].forEach(tab => {
callback(tab);
if (tab.subTabs) {
walk(tab.subTabs, callback);
if (tab.items) {
walk(tab.items, callback);
}
});
};
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/TabSeparator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ class TabSeparator extends UI5Element implements ITab {
/**
* Returns the DOM reference of the separator that is placed in the header.
*
* **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`.
* **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`.
* @public
*/
getTabInStripDomRef(): ITab | null {
Expand Down
74 changes: 37 additions & 37 deletions packages/main/test/pages/TabContainer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,17 @@ <h2>Nested Tabs</h2>
<ui5-tab text="Two">
<ui5-button id="button2">Button 2</ui5-button>

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

<ui5-tab slot="subTabs" text="2.1.1" selected>
<ui5-tab slot="items" text="2.1.1" selected>
<ui5-button id="button211">Button 211</ui5-button>
</ui5-tab>

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

<ui5-tab slot="subTabs" text="2.1.2">
<ui5-tab slot="subTabs" text="2.1.2.1">
<ui5-tab slot="items" text="2.1.2">
<ui5-tab slot="items" text="2.1.2.1">
<ui5-button id="button2121">Button 2121</ui5-button>
</ui5-tab>

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

</ui5-tab>

<ui5-tab text="2.2" slot="subTabs">
<ui5-tab text="2.2" slot="items">
Text for 2.2
</ui5-tab>
</ui5-tab>

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

<ui5-tab slot="subTabs" icon="sap-icon://menu2" text="3.1.1">
<ui5-tab slot="items" icon="sap-icon://menu2" text="3.1.1">
<ui5-button>Button 3.1.1</ui5-button>
</ui5-tab>
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
<ui5-tab slot="subTabs" icon="sap-icon://menu2" text="3.1.2">
<ui5-tab-separator slot="items"></ui5-tab-separator>
<ui5-tab slot="items" icon="sap-icon://menu2" text="3.1.2">
<ui5-button>Button 3.1.2</ui5-button>
</ui5-tab>
</ui5-tab>
Expand All @@ -76,23 +76,23 @@ <h2>Nested Tabs</h2>
<ui5-tab text="Four">
<ui5-button>Button 4</ui5-button>

<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
<ui5-tab slot="subTabs" text="Four 1">
<ui5-tab-separator slot="items"></ui5-tab-separator>
<ui5-tab slot="items" text="Four 1">
<ui5-button>Button 41</ui5-button>

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

<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
<ui5-tab slot="subTabs" text="Four 1.1.1">
<ui5-tab-separator slot="items"></ui5-tab-separator>
<ui5-tab slot="items" text="Four 1.1.1">
<ui5-button>Button 4111</ui5-button>

<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
<ui5-tab slot="subTabs" text="Four 1.1.1.1">
<ui5-tab-separator slot="items"></ui5-tab-separator>
<ui5-tab slot="items" text="Four 1.1.1.1">
<ui5-button>Button 41111</ui5-button>

<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
<ui5-tab-separator slot="items"></ui5-tab-separator>
</ui5-tab>
</ui5-tab>
</ui5-tab>
Expand All @@ -106,11 +106,11 @@ <h2>Nested Tabs</h2>
<ui5-tab text="Eight">Tab Content</ui5-tab>
<ui5-tab text="Nine">Tab Content</ui5-tab>
<ui5-tab text="Ten">Tab Content
<ui5-tab slot="subTabs" text="Ten 1">Tab 10.1 Content
<ui5-tab slot="subTabs" text="Ten 1.1">Tab 10.1.1 Content
<ui5-tab-separator slot="subTabs"></ui5-tab-separator>
<ui5-tab slot="subTabs" text="Ten 1.1.1">Tab Content
<ui5-tab slot="subTabs" text="Ten 1.1.1.1"></ui5-tab>
<ui5-tab slot="items" text="Ten 1">Tab 10.1 Content
<ui5-tab slot="items" text="Ten 1.1">Tab 10.1.1 Content
<ui5-tab-separator slot="items"></ui5-tab-separator>
<ui5-tab slot="items" text="Ten 1.1.1">Tab Content
<ui5-tab slot="items" text="Ten 1.1.1.1"></ui5-tab>
</ui5-tab>
</ui5-tab>
</ui5-tab>
Expand All @@ -120,14 +120,14 @@ <h2>Nested Tabs</h2>
<ui5-tab text="Twelve"></ui5-tab>
<ui5-tab text="Thirteen"></ui5-tab>
<ui5-tab text="Fourteen">
<ui5-tab slot="subTabs" text="Fourteen 1">1
<ui5-tab slot="subTabs" text="Fourteen 1.1">1.1</ui5-tab>
<ui5-tab slot="items" text="Fourteen 1">1
<ui5-tab slot="items" text="Fourteen 1.1">1.1</ui5-tab>
</ui5-tab>
<ui5-tab slot="subTabs" text="Fourteen 2">2
<ui5-tab slot="subTabs" text="Fourteen 2.1">2.1
<ui5-tab slot="subTabs" text="Fourteen 2.1.1">2.1.1</ui5-tab>
<ui5-tab slot="items" text="Fourteen 2">2
<ui5-tab slot="items" text="Fourteen 2.1">2.1
<ui5-tab slot="items" text="Fourteen 2.1.1">2.1.1</ui5-tab>
</ui5-tab>
<ui5-tab slot="subTabs" text="Fourteen 2.2">2.2</ui5-tab>
<ui5-tab slot="items" text="Fourteen 2.2">2.2</ui5-tab>
</ui5-tab>
</ui5-tab>
<ui5-tab text="Fifteen"></ui5-tab>
Expand All @@ -144,18 +144,18 @@ <h2>Text only End Overflow</h2>
<ui5-tabcontainer id="tabContainerEndOverflow" collapsed fixed>
<ui5-tab design="Positive" text="One"></ui5-tab>
<ui5-tab design="Negative" text="Two" disabled>
<ui5-tab slot="subTabs" text="2.1"></ui5-tab>
<ui5-tab slot="items" text="2.1"></ui5-tab>
</ui5-tab>
<ui5-tab design="Critical" text="Three">
<ui5-tab slot="subTabs" design="Positive" text="3.1">
<ui5-tab slot="items" design="Positive" text="3.1">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
</ui5-tab>
<ui5-tab text="Four"></ui5-tab>

<ui5-tab text="Five">
<ui5-tab slot="subTabs" text="nested in Five">
<ui5-tab slot="subTabs" text="nested deeper in Five">text</ui5-tab>
<ui5-tab slot="items" text="nested in Five">
<ui5-tab slot="items" text="nested deeper in Five">text</ui5-tab>
text
</ui5-tab>
</ui5-tab>
Expand Down Expand Up @@ -778,7 +778,7 @@ <h2>Text only Start And End Overflow Custom Overflow Buttons</h2>
<ui5-tab id="nestedTabParent" text="Seventh tab">
<ui5-button>Button 1</ui5-button>

<ui5-tab id="nestedTab" slot="subTabs" text="Nested tab">
<ui5-tab id="nestedTab" slot="items" text="Nested tab">
<ui5-button>Button 1</ui5-button>
</ui5-tab>
</ui5-tab>
Expand Down Expand Up @@ -876,8 +876,8 @@ <h3>Dynamically Insert Tab and Focus It</h3>
function walk(tabs, callback) {
[...tabs].forEach(tab => {
callback(tab);
if (tab.subTabs) {
walk(tab.subTabs, callback);
if (tab.items) {
walk(tab.items, callback);
}});
};

Expand Down
10 changes: 5 additions & 5 deletions packages/main/test/pages/TabContainerDragAndDrop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,18 @@ <h2>Drag and drop</h2>
<ui5-tabcontainer id="tabContainerDnd" collapsed fixed tabs-overflow-mode="StartAndEnd">
<ui5-tab id="tabOne" movable design="Positive" text="One"></ui5-tab>
<ui5-tab id="tabTwo" movable design="Negative" text="Two" disabled>
<ui5-tab slot="subTabs" movable text="2.1"></ui5-tab>
<ui5-tab slot="items" movable text="2.1"></ui5-tab>
</ui5-tab>
<ui5-tab id="tabThree" movable design="Critical" text="Three">
<ui5-tab slot="subTabs" movable design="Positive" text="3.1">
<ui5-tab slot="items" movable design="Positive" text="3.1">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
content
</ui5-tab>
<ui5-tab id="tabFour" movable text="Four (forbids nesting)"></ui5-tab>
<ui5-tab id="tabFive" movable text="Five">
<ui5-tab slot="subTabs" movable text="nested in Five">
<ui5-tab slot="subTabs" movable text="nested deeper in Five">text</ui5-tab>
<ui5-tab slot="items" movable text="nested in Five">
<ui5-tab slot="items" movable text="nested deeper in Five">text</ui5-tab>
text
</ui5-tab>
</ui5-tab>
Expand Down Expand Up @@ -131,7 +131,7 @@ <h2>Drag and drop</h2>
const newParent = source.element.parentElement;

if (newParent.hasAttribute("ui5-tab")) {
source.element.slot = "subTabs";
source.element.slot = "items";
} else {
source.element.slot = "";
}
Expand Down
Loading