fix(ui5-flexible-column-layout): correct min-width constraint (#9673)

* feat(ui5-flexible-column-layout): correct min-width constraint * fix(ui5-flexible-column-layout): correct min-width docu * fix(ui5-flexible-column-layout): add test * fix(ui5-flexible-column-layout): stabilize test
SAP · Aug 19, 2024 · 08fa1b9 · 08fa1b9
1 parent e4c48cf
commit 08fa1b9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts
@@ -61,7 +61,7 @@ const COLUMN = {
 	END: 2,
 } as const;
 
-const COLUMN_MIN_WIDTH = 312;
+const COLUMN_MIN_WIDTH = 248;
 
 type SeparatorMovementSession = {
 	separator: HTMLElement,
@@ -133,7 +133,7 @@ type UserDefinedColumnLayouts = {
  * The component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,
  * and 3 columns for sizes bigger than 1023px.
  *
- * **Note:** When the component displays more than one column, the minimal width of each column is 312px. Consequently, when the user drags a column separator to resize the columns, the minimal allowed width of any resized column is 312px.
+ * **Note:** When the component displays more than one column, the minimal width of each column is 248px. Consequently, when the user drags a column separator to resize the columns, the minimal allowed width of any resized column is 248px.
  *
  * ### Keyboard Handling
  *

diff --git a/packages/fiori/src/themes/FlexibleColumnLayout.css b/packages/fiori/src/themes/FlexibleColumnLayout.css
@@ -37,6 +37,7 @@
 	border-inline-start: var(--_ui5_fcl_column_border);
 	border-inline-end: var(--_ui5_fcl_column_border);
 	position: relative;
+	box-sizing: border-box;
 }
 
 .ui5-fcl-separator:focus {

diff --git a/packages/fiori/test/specs/FCL.spec.js b/packages/fiori/test/specs/FCL.spec.js
@@ -349,12 +349,38 @@ describe("Preserves column min-width", () => {
 		await browser.url(`test/pages/FCL.html?sap-ui-animationMode=none`);
 	});
 
+	it("complies with min-width requiremet on smallest desktop", async () => {
+		await browser.setWindowSize(1400, 1080);
+
+		const fcl = await browser.$("#fcl3"),
+			smallestDesktopWidth = 1024,
+			smallestColumnWidth = 248;
+
+		// set initial state
+		await fcl.setProperty("layout", "ThreeColumnsMidExpanded");
+		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set");
+
+		// set FCL width to the smallest desktop width
+		await browser.executeAsync(async (newWidth, done) => {
+			document.getElementById("fcl3").style.width = `${newWidth}px`;
+			done();
+		}, smallestDesktopWidth);
+
+		const startColumn = await fcl.shadow$(".ui5-fcl-column--start");
+		const startColumnWidth = await startColumn.getSize("width");
+		const fclWidth = await fcl.getSize("width");
+
+		// assert
+		assert.strictEqual(fclWidth, smallestDesktopWidth, "fcl is the smallest desktop width");
+		assert.strictEqual(startColumnWidth, smallestColumnWidth, "min-width is respected");
+	});
+
 	it("preserves min-width of begin column", async () => {
 		await browser.setWindowSize(1400, 1080);
 
 		const fcl = await browser.$("#fcl3"),
 			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start"),
-			smallestColumnWidth = 312;
+			smallestColumnWidth = 248;
 
 		// set initial state
 		await fcl.setProperty("layout", "TwoColumnsMidExpanded");
@@ -375,7 +401,7 @@ describe("Preserves column min-width", () => {
 	it("preserves min-width of mid column in 2-column layout", async () => {
 		const fcl = await browser.$("#fcl3"),
 			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start"),
-			smallestColumnWidth = 312;
+			smallestColumnWidth = 248;
 
 		// set initial state
 		await fcl.setProperty("layout", "TwoColumnsStartExpanded");
@@ -396,7 +422,7 @@ describe("Preserves column min-width", () => {
 	it("preserves min-width of mid column in 3-column layout", async () => {
 		const fcl = await browser.$("#fcl3"),
 			endSeparator = await fcl.shadow$(".ui5-fcl-separator-end"),
-			smallestColumnWidth = 312;
+			smallestColumnWidth = 248;
 
 		// set initial state
 		await fcl.setProperty("layout", "ThreeColumnsMidExpanded");
@@ -417,7 +443,7 @@ describe("Preserves column min-width", () => {
 	it("preserves min-width of end column", async () => {
 		const fcl = await browser.$("#fcl3"),
 			endSeparator = await fcl.shadow$(".ui5-fcl-separator-end"),
-			smallestColumnWidth = 312;
+			smallestColumnWidth = 248;
 
 		// set initial state
 		await fcl.setProperty("layout", "ThreeColumnsMidExpanded");
@@ -439,7 +465,7 @@ describe("Preserves column min-width", () => {
 		const fcl = await browser.$("#fcl3"),
 			endSeparator = await fcl.shadow$(".ui5-fcl-separator-end"),
 			endColumn = await fcl.shadow$(".ui5-fcl-column--end"),
-			smallestColumnWidth = 312;
+			smallestColumnWidth = 248;
 
 		// set initial state
 		await fcl.setProperty("layout", "ThreeColumnsMidExpandedEndHidden");