fix(ui5-flexible-column-layout): Fix media breakpoints (#1984)

The media breakpoints are now aligned with the Fiori 3 specs. Related to: #1972
SAP · Jul 27, 2020 · f17cba3 · f17cba3
1 parent 0ffca82
commit f17cba3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js
@@ -239,8 +239,8 @@ class FlexibleColumnLayout extends UI5Element {
 
 	static get BREAKPOINTS() {
 		return {
-			"M": 960,
-			"L": 1280,
+			"PHONE": 599,
+			"TABLET": 1023,
 		};
 	}
 
@@ -563,11 +563,11 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	get media() {
-		if (this._width <= FlexibleColumnLayout.BREAKPOINTS.M) {
+		if (this._width <= FlexibleColumnLayout.BREAKPOINTS.PHONE) {
 			return FlexibleColumnLayout.MEDIA.PHONE;
 		}
 
-		if (this._width <= FlexibleColumnLayout.BREAKPOINTS.L) {
+		if (this._width <= FlexibleColumnLayout.BREAKPOINTS.TABLET) {
 			return FlexibleColumnLayout.MEDIA.TABLET;
 		}
 

diff --git a/packages/fiori/test/specs/FCL.spec.js b/packages/fiori/test/specs/FCL.spec.js
@@ -20,9 +20,9 @@ describe("FlexibleColumnLayout Behavior", () => {
 		assert.strictEqual(layoutChangeCounter.getValue(), "1", "The event layout-change is not fired.");
 	});
 
-	it("tests Tablet Size 1200px", () => {
+	it("tests Tablet Size 1000px", () => {
 		// act
-		browser.setWindowSize(1200, 1080);
+		browser.setWindowSize(1000, 1080);
 
 		const layoutChangeCounter = browser.$("#testLayoutChange");
 		const visibleColumns = browser.execute(() => {
@@ -35,9 +35,9 @@ describe("FlexibleColumnLayout Behavior", () => {
 		assert.strictEqual(layoutChangeCounter.getValue(), "2", "The event layout-change after resizing.");
 	});
 
-	it("tests Phone size 870px", () => {
+	it("tests Phone size 500px", () => {
 		// act
-		browser.setWindowSize(870, 1080);
+		browser.setWindowSize(500, 1080);
 
 		const layoutChangeCounter = browser.$("#testLayoutChange");
 		const visibleColumns = browser.execute(() => {
@@ -57,19 +57,20 @@ describe("FlexibleColumnLayout Behavior", () => {
 		const fcl = browser.$("#fcl1");
 		const layoutChangeCounter = browser.$("#layoutChangeRes4");
 		const arrow = fcl.shadow$(".ui5-fcl-arrow--start");
+		let counter = parseInt(layoutChangeCounter.getValue()) || 0;
 
 		// act
 		arrow.click();
 
-		// assert (two times the event has been fired due resize already)
-		assert.strictEqual(layoutChangeCounter.getValue(), "4", "The event layout-change fired once.");
+		// assert
+		assert.strictEqual(layoutChangeCounter.getValue(), `${++counter}`, "The event layout-change fired once.");
 		assert.strictEqual(fcl.getProperty("layout"), "TwoColumnsMidExpanded", "new layout set");
 
 		// act
 		arrow.click();
 
-		// // assert
-		assert.strictEqual(layoutChangeCounter.getValue(), "5", "The event layout-change fired again.");
+		// assert
+		assert.strictEqual(layoutChangeCounter.getValue(), `${++counter}`, "The event layout-change fired again.");
 		assert.strictEqual(fcl.getProperty("layout"), "TwoColumnsStartExpanded", "new layout set");
 	});