refactor(ui5-tabcontainer): remove fixed property (#8676)

Property "fixed" is removed. The Tab Container has been previously expandable/collapsible like a Panel and it was controlled by the "fixed" property, however this was not backed by specs and UX/VD specs. BREAKING CHANGE: Property "fixed" is removed and there is no alternative provided. The TabContainer is no longer expandable/collapsible via use interaction. You can still show the TabContainer collapsed via the "collapsed" property. Related to: #8461
SAP · Apr 8, 2024 · 98052e1 · 98052e1
1 parent 926ae75
commit 98052e1
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 75 deletions.
diff --git a/packages/fiori/test/pages/F6TestPage.html b/packages/fiori/test/pages/F6TestPage.html
@@ -263,7 +263,7 @@
 				</div>
 				<br><br>
 
-				<ui5-tabcontainer id="tabContainer1" fixed collapsed>
+				<ui5-tabcontainer id="tabContainer1" collapsed>
 					<ui5-tab text="Products" additional-text="125">
 					</ui5-tab>
 					<ui5-tab-separator></ui5-tab-separator>

diff --git a/packages/fiori/test/pages/FCL.html b/packages/fiori/test/pages/FCL.html
@@ -624,7 +624,7 @@
 			</div>
 			<br><br>
 
-			<ui5-tabcontainer id="tabContainer1" fixed collapsed>
+			<ui5-tabcontainer id="tabContainer1" collapsed>
 				<ui5-tab text="Products" additional-text="125">
 				</ui5-tab>
 				<ui5-tab-separator></ui5-tab-separator>

diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts
@@ -10,8 +10,6 @@ import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js";
 import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
-import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import {
 	isDesktop,
@@ -182,15 +180,6 @@ type TabContainerMoveEventDetail = {
 	},
 })
 class TabContainer extends UI5Element {
-	/**
-	 * Defines whether the tabs are in a fixed state that is not
-	 * expandable/collapsible by user interaction.
-	 * @default false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	fixed!: boolean;
-
 	/**
 	 * Defines whether the tab content is collapsed.
 	 * @default false
@@ -762,7 +751,6 @@ class TabContainer extends UI5Element {
 	}
 
 	_onItemSelect(selectedTabId: string) {
-		const previousTab = this._selectedTab;
 		const selectedTabIndex = this._itemsFlat!.findIndex(item => item.__id === selectedTabId);
 		const selectedTab = this._itemsFlat![selectedTabIndex] as Tab;
 
@@ -782,45 +770,6 @@ class TabContainer extends UI5Element {
 				}
 			}
 		});
-
-		if (this.fixed) {
-			return;
-		}
-
-		if (!this.shouldAnimate) {
-			this.toggle(selectedTab, previousTab);
-		} else {
-			this.toggleAnimated(selectedTab, previousTab);
-		}
-	}
-
-	async toggleAnimated(selectedTab: Tab, previousTab: Tab) {
-		const content = this.shadowRoot!.querySelector<HTMLElement>(".ui5-tc__content")!;
-		let animationPromise = null;
-
-		this._animationRunning = true;
-
-		if (selectedTab === previousTab) {
-			// click on already selected tab - animate both directions
-			this.collapsed = !this.collapsed;
-			animationPromise = this.collapsed ? this.slideContentUp(content) : this.slideContentDown(content);
-		} else {
-			// click on new tab - animate if the content is currently collapsed
-			animationPromise = this.collapsed ? this.slideContentDown(content) : Promise.resolve();
-			this.collapsed = false;
-		}
-
-		await animationPromise;
-		this._contentCollapsed = this.collapsed;
-		this._animationRunning = false;
-	}
-
-	toggle(selectedTab: Tab, previousTab: Tab) {
-		if (selectedTab === previousTab) {
-			this.collapsed = !this.collapsed;
-		} else {
-			this.collapsed = false;
-		}
 	}
 
 	/**
@@ -1410,10 +1359,6 @@ class TabContainer extends UI5Element {
 		return this.hasItems ? `${this._id}-invisibleText` : undefined;
 	}
 
-	get shouldAnimate() {
-		return getAnimationMode() !== AnimationMode.None;
-	}
-
 	static async onDefine() {
 		TabContainer.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html
@@ -25,7 +25,7 @@ <h1 class="header-title">ui5-tabcontainer</h1>
 
 	<section>
 		<h2>Nested Tabs</h2>
-		<ui5-tabcontainer id="tabContainerNestedTabs" collapsed>
+		<ui5-tabcontainer id="tabContainerNestedTabs">
 			<ui5-tab text="One">
 				<ui5-button>Button 1</ui5-button>
 			</ui5-tab>
@@ -141,7 +141,7 @@ <h2>Nested Tabs</h2>
 
 	<section>
 		<h2>Text only End Overflow</h2>
-		<ui5-tabcontainer id="tabContainerEndOverflow" collapsed fixed>
+		<ui5-tabcontainer id="tabContainerEndOverflow">
 			<ui5-tab design="Positive" text="One"></ui5-tab>
 			<ui5-tab design="Negative" text="Two" disabled>
 				<ui5-tab slot="items" text="2.1"></ui5-tab>
@@ -195,7 +195,7 @@ <h2>Text only End Overflow</h2>
 
 	<section>
 		<h2>Text only Start And End Overflow</h2>
-		<ui5-tabcontainer id="tabContainerStartAndEndOverflow" overflow-mode="StartAndEnd" collapsed fixed>
+		<ui5-tabcontainer id="tabContainerStartAndEndOverflow" overflow-mode="StartAndEnd" collapsed>
 			<ui5-tab text="One"></ui5-tab>
 			<ui5-tab text="Two"></ui5-tab>
 			<ui5-tab text="Three"></ui5-tab>
@@ -232,7 +232,7 @@ <h2>Text only Start And End Overflow</h2>
 	<section>
 		<h2>Tab Container</h2>
 		<ui5-checkbox text="prevent tab-select event" id="cbPrevent"></ui5-checkbox>
-		<ui5-tabcontainer id="tabContainer1" fixed collapsed>
+		<ui5-tabcontainer id="tabContainer1" collapsed>
 			<ui5-tab stable-dom-ref="products-ref" text="Products" additional-text="125"></ui5-tab>
 			<ui5-tab-separator></ui5-tab-separator>
 			<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25"></ui5-tab>
@@ -246,7 +246,7 @@ <h2>Tab Container</h2>
 
 	<section>
 		<h2>Tab Container Start And End Overflow</h2>
-		<ui5-tabcontainer id="tabContainer2" fixed collapsed overflow-mode="StartAndEnd">
+		<ui5-tabcontainer id="tabContainer2" collapsed overflow-mode="StartAndEnd">
 			<ui5-tab stable-dom-ref="products-ref" text="Products" additional-text="125"></ui5-tab>
 			<ui5-tab-separator></ui5-tab-separator>
 			<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25"></ui5-tab>
@@ -349,7 +349,7 @@ <h2>Text only</h2>
 
 	<section class="tabcontainer2auto">
 		<h2>Scrollable child</h2>
-		<ui5-tabcontainer fixed class="tabcontainer3auto" id="tc-scrollable-child">
+		<ui5-tabcontainer class="tabcontainer3auto" id="tc-scrollable-child">
 			<ui5-tab text="Tab 1" selected id="scrollable-tab">
 				<ui5-button>Toggle style</ui5-button>
 
@@ -546,7 +546,7 @@ <h3>TabContainer in Compact</h3>
 				</ui5-tab>
 			</ui5-tabcontainer>
 
-			<ui5-tabcontainer id="tabContainer1Compact" fixed collapsed>
+			<ui5-tabcontainer id="tabContainer1Compact" collapsed>
 				<ui5-tab stable-dom-ref="products-ref" text="Products" additional-text="125"></ui5-tab>
 				<ui5-tab-separator></ui5-tab-separator>
 				<ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25"></ui5-tab>
@@ -704,7 +704,7 @@ <h2>Background design</h2>
 
 	<section>
 		<h2>Text only Start And End Overflow Custom Overflow Buttons</h2>
-		<ui5-tabcontainer id="tabContainerCustomOverflowButtons" overflow-mode="StartAndEnd" collapsed fixed>
+		<ui5-tabcontainer id="tabContainerCustomOverflowButtons" overflow-mode="StartAndEnd" collapsed>
 				<ui5-button slot="startOverflowButton" id="startOverflowButton">Start</ui5-button>
 				<ui5-button slot="overflowButton" id="endOverflowButton">End</ui5-button>
 			<ui5-tab text="One"></ui5-tab>

diff --git a/packages/main/test/pages/TabContainerDragAndDrop.html b/packages/main/test/pages/TabContainerDragAndDrop.html
@@ -17,7 +17,7 @@
 
 	<section>
 		<h2>Drag and drop</h2>
-		<ui5-tabcontainer id="tabContainerDnd" collapsed fixed overflow-mode="StartAndEnd">
+		<ui5-tabcontainer id="tabContainerDnd" collapsed 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="items" movable text="2.1"></ui5-tab>

diff --git a/packages/playground/_stories/main/TabContainer/TabContainer.stories.ts b/packages/playground/_stories/main/TabContainer/TabContainer.stories.ts
@@ -16,7 +16,6 @@ export default {
 
 const Template: UI5StoryArgs<TabContainer, StoryArgsSlots> = (args) => {
 	return html`<ui5-tabcontainer
-	?fixed="${ifDefined(args.fixed)}"
 	?collapsed="${ifDefined(args.collapsed)}"
 	tab-layout="${ifDefined(args.tabLayout)}"
 	overflow-mode="${ifDefined(args.overflowMode)}"
@@ -51,7 +50,6 @@ Basic.args = {
 export const TextOnlyTabs = Template.bind({});
 TextOnlyTabs.args = {
 	collapsed: true,
-	fixed: true,
 	default: `<ui5-tab text="Home"></ui5-tab>
 <ui5-tab text="What's new" selected></ui5-tab>
 <ui5-tab text="Who are we"></ui5-tab>
@@ -62,7 +60,6 @@ TextOnlyTabs.args = {
 export const TextOnlyEndOverflow = Template.bind({});
 TextOnlyEndOverflow.args = {
 	collapsed: true,
-	fixed: true,
 	default: `<ui5-tab text="Tab 1"></ui5-tab>
 <ui5-tab text="Tab 2"></ui5-tab>
 <ui5-tab text="Tab 3"></ui5-tab>
@@ -92,7 +89,6 @@ export const InlineTabLayout = Template.bind({});
 InlineTabLayout.args = {
 	tabLayout: TabLayout.Inline,
 	collapsed: true,
-	fixed: true,
 	default: `<ui5-tab icon="laptop" text="Monitors" additional-text="10"></ui5-tab>
 <ui5-tab icon="video" text="Cameras" additional-text="2" selected></ui5-tab>
 <ui5-tab icon="home" text="Rooms" additional-text="16"></ui5-tab>`,

diff --git a/packages/website/docs/_samples/fiori/FlexibleColumnLayout/Basic/sample.html b/packages/website/docs/_samples/fiori/FlexibleColumnLayout/Basic/sample.html
@@ -126,7 +126,7 @@
                 </div>
             </div>
             <br /><br />
-            <ui5-tabcontainer id="tabContainer1" fixed collapsed>
+            <ui5-tabcontainer id="tabContainer1" collapsed>
                 <ui5-tab text="Products" additional-text="125"> </ui5-tab>
                 <ui5-tab-separator></ui5-tab-separator>
                 <ui5-tab icon="sap-icon://menu2" text="Laptops" design="Positive" additional-text="25">

diff --git a/packages/website/docs/_samples/main/TabContainer/OverflowMode/sample.html b/packages/website/docs/_samples/main/TabContainer/OverflowMode/sample.html
@@ -9,7 +9,7 @@
 <body style="background-color: var(--sapBackgroundColor);">
 <!-- playground-fold-end -->
 
-<ui5-tabcontainer overflow-mode="End" collapsed fixed>
+<ui5-tabcontainer overflow-mode="End" collapsed>
     <ui5-tab text="Tab 1"></ui5-tab>
     <ui5-tab text="Tab 2"></ui5-tab>
     <ui5-tab text="Tab 3"></ui5-tab>
@@ -36,7 +36,7 @@
 </ui5-tabcontainer>
 
 <br>
-<ui5-tabcontainer overflow-mode="StartAndEnd" collapsed fixed>
+<ui5-tabcontainer overflow-mode="StartAndEnd" collapsed>
     <ui5-tab text="Tab 1"></ui5-tab>
     <ui5-tab text="Tab 2"></ui5-tab>
     <ui5-tab text="Tab 3"></ui5-tab>

diff --git a/packages/website/docs/_samples/main/TabContainer/TabLayout/sample.html b/packages/website/docs/_samples/main/TabContainer/TabLayout/sample.html
@@ -9,15 +9,15 @@
 <body style="background-color: var(--sapBackgroundColor);">
 <!-- playground-fold-end -->
 
-<ui5-tabcontainer tab-layout="Inline" collapsed fixed>
+<ui5-tabcontainer tab-layout="Inline" collapsed>
     <ui5-tab icon="laptop" text="Monitors" additional-text="10"></ui5-tab>
     <ui5-tab icon="video" text="Cameras" additional-text="2" selected></ui5-tab>
     <ui5-tab icon="home" text="Rooms" additional-text="16"></ui5-tab>
 </ui5-tabcontainer>
 
 <br>
 
-<ui5-tabcontainer tab-layout="Standard" collapsed fixed>
+<ui5-tabcontainer tab-layout="Standard" collapsed>
     <ui5-tab icon="laptop" text="Monitors" additional-text="10"></ui5-tab>
     <ui5-tab icon="video" text="Cameras" additional-text="2" selected></ui5-tab>
     <ui5-tab icon="home" text="Rooms" additional-text="16"></ui5-tab>