fix(ui5-flexible-column-layout): column visibility issue fixed (#11416)

* fix(ui5-flexible-column-layout): collumn visibility issue fixed

* fix(ui5-flexible-column-layout): apply feedback and other improvements

* fix(ui5-flexible-column-layout): remove obsolete comment

Author: kineticjs

packages/fiori/cypress/specs/FCL.cy.tsx

@@ -69,6 +69,15 @@ describe("Columns resize", () => {
 				expect(widthAfterMove).to.be.equal($el.width()!);
 			});
 	});
+
+	it("sets dedicated class to hidden columns", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--end")
+			.should($el => {
+				expect($el).to.have.class("ui5-fcl-column--hidden");
+			});
+	});
 });
 
 describe("ACC", () => {

packages/fiori/src/FlexibleColumnLayout.ts

@@ -436,25 +436,39 @@ class FlexibleColumnLayout extends UI5Element {
 
 		// hide column: 33% to 0, 25% to 0, etc .
 		if (currentlyHidden) {
-			// animate the width
-			columnDOM.style.width = typeof columnWidth === "number" ? `${columnWidth}px` : columnWidth;
-
-			// hide column with delay to allow the animation runs entirely
-			columnDOM.addEventListener("transitionend", this.columnResizeHandler);
-
+			this.collapseColumn(columnDOM);
 			return;
 		}
 
 		// show column: from 0 to 33%, from 0 to 25%, etc.
 		if (previouslyHidden) {
-			columnDOM.removeEventListener("transitionend", this.columnResizeHandler);
-			columnDOM.classList.remove("ui5-fcl-column--hidden");
-			columnDOM.style.width = typeof columnWidth === "number" ? `${columnWidth}px` : columnWidth;
+			this.expandColumn(columnDOM, columnWidth);
+		}
+	}
+
+	expandColumn(columnDOM: HTMLElement, columnWidth: string | number) {
+		columnDOM.classList.remove("ui5-fcl-column--hidden");
+		columnDOM.style.width = typeof columnWidth === "number" ? `${columnWidth}px` : columnWidth;
+	}
+
+	collapseColumn(columnDOM: HTMLElement) {
+		const hasAnimation = getAnimationMode() !== AnimationMode.None && !this.initialRendering;
+		columnDOM.style.width = "0px";
+
+		if (hasAnimation) {
+			// hide column with delay to allow the animation runs entirely
+			columnDOM.classList.add("ui5-fcl-column-collapse-animation");
+			columnDOM.addEventListener("transitionend", this.onColumnCollapseAnimationEnd);
+		} else {
+			columnDOM.classList.add("ui5-fcl-column--hidden");
 		}
 	}
 
-	columnResizeHandler = (e: Event) => {
-		(e.target as HTMLElement).classList.add("ui5-fcl-column--hidden");
+	onColumnCollapseAnimationEnd = (e: Event) => {
+		const columnDOM = e.target as HTMLElement;
+		columnDOM.classList.add("ui5-fcl-column--hidden");
+		columnDOM.classList.remove("ui5-fcl-column-collapse-animation");
+		columnDOM.removeEventListener("transitionend", this.onColumnCollapseAnimationEnd);
 	}
 
 	nextColumnLayout(layout: `${FCLLayout}`) {

packages/fiori/src/themes/FlexibleColumnLayout.css

@@ -17,7 +17,6 @@
 	box-sizing: border-box;
 	will-change: width;
 	overflow-y: auto;
-	min-width: 15.5rem; /* as noted in our documentation */
 }
 
 /* disable pointer events on columns while dragging the separator
@@ -30,6 +29,10 @@
 	transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
 }
 
+.ui5-fcl-column:not(.ui5-fcl-column-collapse-animation) {
+	min-width: 15.5rem; /* as noted in our documentation */
+}
+
 .ui5-fcl-column--hidden {
 	display: none;
 }