feat(ui5-flexible-column-layout): add arrow icon functionality

packages/fiori/src/FlexibleColumnLayout.ts

@@ -10,6 +10,8 @@ import { supportsTouch } from "@ui5/webcomponents-base/dist/Device.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents-icons/dist/vertical-grip.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import {
@@ -19,12 +21,15 @@ import {
 	isRightShift,
 	isHome,
 	isEnd,
+	isEnter,
+	isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { PassiveEventListenerObject, AriaLandmarkRole } from "@ui5/webcomponents-base";
 import FCLLayout from "./types/FCLLayout.js";
 import type { LayoutConfiguration } from "./fcl-utils/FCLLayout.js";
 import {
 	getLayoutsByMedia,
+	getNextLayoutByArrowPress,
 } from "./fcl-utils/FCLLayout.js";
 
 // Texts
@@ -167,6 +172,7 @@ type UserDefinedColumnLayouts = {
 	renderer: jsxRenderer,
 	styles: FlexibleColumnLayoutCss,
 	template: FlexibleColumnLayoutTemplate,
+	dependencies: [Icon, Button],
 })
 
 /**
@@ -476,6 +482,9 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	onSeparatorPress(e: TouchEvent | MouseEvent) {
+		if (e.target as HTMLElement === this.startArrowDOM) {
+			return;
+		}
 		const pressedSeparator = (e.target as HTMLElement).closest(".ui5-fcl-separator") as HTMLElement;
 		if (pressedSeparator.classList.contains("ui5-fcl-separator-start") && !this.showStartSeparatorGrip) {
 			return;
@@ -654,11 +663,26 @@ class FlexibleColumnLayout extends UI5Element {
 		return columnLayoutToAdjust;
 	}
 
-	async _onkeydown(e: KeyboardEvent) {
+	_onArrowKeydown(e: KeyboardEvent) {
+		if (isEnter(e) || isSpace(e)) {
+		  e.preventDefault();
+		  const focusedElement = e.target as HTMLElement;
+		  if (focusedElement === this.startArrowDOM) {
+				this.switchLayoutOnArrowPress();
+		  }
+		}
+	  }
+
+	async _onSeparatorKeydown(e: KeyboardEvent) {
+		const separator = e.target as HTMLElement;
+		if (!separator.classList.contains("ui5-fcl-separator")) {
+			return;
+		}
 		const stepSize = 2,
 			bigStepSize = this._width,
 			isRTL = this.effectiveDir === "rtl";
 		let step = 0;
+
 		if (isLeft(e)) {
 			step = -stepSize * 10;
 		} else if (isRight(e)) {
@@ -679,7 +703,6 @@ class FlexibleColumnLayout extends UI5Element {
 			return;
 		}
 
-		const separator = e.target as HTMLElement;
 		if (!this.separatorMovementSession) {
 			this.separatorMovementSession = this.initSeparatorMovementSession(separator, 0, false);
 		}
@@ -693,7 +716,7 @@ class FlexibleColumnLayout extends UI5Element {
 		separator.focus();
 	}
 
-	_onkeyup() {
+	_onSeparatorKeyUp() {
 		if (this.separatorMovementSession) {
 			this.onSeparatorMoveEnd();
 		}
@@ -818,6 +841,30 @@ class FlexibleColumnLayout extends UI5Element {
 			return FCLLayout.ThreeColumnsMidExpanded;
 		}
 
+		if (moved({
+			separator: "start",
+			from: FCLLayout.ThreeColumnsStartHiddenMidExpanded,
+			forward: true,
+		}) && !isTablet && Math.ceil(startColumnPxWidth) >= COLUMN_MIN_WIDTH) {
+			return FCLLayout.ThreeColumnsMidExpanded;
+		}
+
+		if (moved({
+			separator: "end",
+			from: FCLLayout.ThreeColumnsStartHiddenMidExpanded,
+			forward: false,
+		}) && newColumnWidths.mid < newColumnWidths.end) {
+			return FCLLayout.ThreeColumnsStartHiddenEndExpanded;
+		}
+
+		if (moved({
+			separator: "end",
+			from: FCLLayout.ThreeColumnsStartHiddenEndExpanded,
+			forward: true,
+		}) && newColumnWidths.mid >= newColumnWidths.end) {
+			return FCLLayout.ThreeColumnsStartHiddenMidExpanded;
+		}
+
 		if (moved({
 			separator: "end",
 			from: FCLLayout.ThreeColumnsMidExpandedEndHidden,
@@ -880,6 +927,14 @@ class FlexibleColumnLayout extends UI5Element {
 		return fclLayoutBeforeMove; // no layout change
 	}
 
+	switchLayoutOnArrowPress() {
+		const lastUsedLayout = this.layout as FCLLayout;
+		this.layout = getNextLayoutByArrowPress()[lastUsedLayout as keyof typeof getNextLayoutByArrowPress];
+		if (this.layout !== lastUsedLayout) {
+			this.fireLayoutChange(true, false);
+		}
+	}
+
 	get _availableWidthForColumns() {
 		let width = this._width;
 		if (this.showStartSeparator) {
@@ -982,6 +1037,10 @@ class FlexibleColumnLayout extends UI5Element {
 		return this.disableResizing ? false : this.startSeparatorGripVisibility;
 	}
 
+	get showStartSeparatorArrow() {
+		return this.disableResizing ? false : this.startSeparatorArrowVisibility;
+	}
+
 	get showEndSeparatorGrip() {
 		return this.disableResizing ? false : this.endSeparatorGripVisibility;
 	}
@@ -994,6 +1053,18 @@ class FlexibleColumnLayout extends UI5Element {
 		return this.effectiveSeparatorsInfo[1].gripVisible;
 	}
 
+	get startSeparatorArrowVisibility() {
+		return this.effectiveSeparatorsInfo[0].arrowVisible;
+	}
+
+	get startArrowDirection() {
+		return this.effectiveSeparatorsInfo[0].arrowDirection;
+	}
+
+	get startArrowDOM() {
+		return this.shadowRoot!.querySelector<HTMLElement>(".ui5-fcl-arrow--start")!;
+	}
+
 	get effectiveSeparatorsInfo() {
 		return this._effectiveLayoutsByMedia[this.media][this.effectiveLayout].separators;
 	}

packages/fiori/src/FlexibleColumnLayoutTemplate.tsx

@@ -2,6 +2,7 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/InitialConfiguration.js";
 import verticalGrip from "@ui5/webcomponents-icons/dist/vertical-grip.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
 import type FlexibleColumnLayout from "./FlexibleColumnLayout.js";
 
 export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout) {
@@ -31,9 +32,10 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 				tabindex={this.startSeparatorTabIndex}
 				onMouseDown={this.onSeparatorPress}
 				onTouchStart={this.onSeparatorPress}
-				onKeyDown={this._onkeydown}
-				onKeyUp={this._onkeyup}
+				onKeyDown={this._onSeparatorKeydown}
+				onKeyUp={this._onSeparatorKeyUp}
 			>
+				{ this.showStartSeparatorArrow && arrowStart.call(this) }
 				{ gripStart.call(this) }
 			</div>
 
@@ -59,8 +61,8 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 				tabindex={this.endSeparatorTabIndex}
 				onMouseDown={this.onSeparatorPress}
 				onTouchStart={this.onSeparatorPress}
-				onKeyDown={this._onkeydown}
-				onKeyUp={this._onkeyup}
+				onKeyDown={this._onSeparatorKeydown}
+				onKeyUp={this._onSeparatorKeyUp}
 			>
 				{ gripEnd.call(this) }
 			</div>
@@ -82,6 +84,18 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 	);
 }
 
+function arrowStart(this: FlexibleColumnLayout) {
+	return (
+		<Button
+			icon={this.startArrowDirection === "backward" ? "slim-arrow-left" : "slim-arrow-right"}
+			design="Transparent"
+			onClick={this.switchLayoutOnArrowPress}
+			onKeyDown={this._onArrowKeydown}
+			class="ui5-fcl-arrow ui5-fcl-arrow--start"
+		/>
+	);
+}
+
 function gripStart(this: FlexibleColumnLayout) {
 	return (
 		<Icon

packages/fiori/src/fcl-utils/FCLLayout.ts

@@ -8,6 +8,8 @@ type LayoutConfiguration = {
 			separators: Array<{
 				visible: boolean;
 				gripVisible?: boolean;
+				arrowVisible?: boolean;
+				arrowDirection?: "forward" | "backward";
 			}>;
 		};
 	};
@@ -40,14 +42,24 @@ const getLayoutsByMedia = (): LayoutConfiguration => {
 			"ThreeColumnsMidExpanded": {
 				layout: ["25%", "50%", "25%"],
 				separators:	[
-					{ visible: true, gripVisible: true },
+					{
+						visible: true,
+						gripVisible: true,
+						arrowVisible: true,
+						arrowDirection: "backward",
+					},
 					{ visible: true, gripVisible: true },
 				],
 			},
 			"ThreeColumnsEndExpanded": {
 				layout: ["25%", "25%", "50%"],
 				separators: [
-					{ visible: true, gripVisible: false },
+					{
+						visible: true,
+						gripVisible: false,
+						arrowVisible: true,
+						arrowDirection: "backward",
+					},
 					{ visible: true, gripVisible: true },
 				],
 			},
@@ -65,6 +77,30 @@ const getLayoutsByMedia = (): LayoutConfiguration => {
 					{ visible: true, gripVisible: true },
 				],
 			},
+			"ThreeColumnsStartHiddenMidExpanded": {
+				layout: ["0px", "33%", "67%"],
+				separators: [
+					{
+						visible: true,
+						gripVisible: true,
+						arrowVisible: true,
+						arrowDirection: "forward",
+					},
+					{ visible: true, gripVisible: true },
+				],
+			},
+			"ThreeColumnsStartHiddenEndExpanded": {
+				layout: ["0px", "33%", "67%"],
+				separators: [
+					{
+						visible: true,
+						gripVisible: false,
+						arrowVisible: true,
+						arrowDirection: "forward",
+					},
+					{ visible: true, gripVisible: true },
+				],
+			},
 			"MidColumnFullScreen": {
 				layout: ["0px", "100%", "0px"],
 				separators: [
@@ -130,6 +166,20 @@ const getLayoutsByMedia = (): LayoutConfiguration => {
 					{ visible: true, gripVisible: true },
 				],
 			},
+			"ThreeColumnsStartHiddenMidExpanded": {
+				layout: ["0px", "67%", "33%"],
+				separators: [
+					{ visible: true, gripVisible: true },
+					{ visible: true, gripVisible: true },
+				],
+			},
+			"ThreeColumnsStartHiddenEndExpanded": {
+				layout: ["0px", "33%", "67%"],
+				separators: [
+					{ visible: false },
+					{ visible: true, gripVisible: true },
+				],
+			},
 			"MidColumnFullScreen": {
 				layout: ["0px", "100%", "0px"],
 				separators: [
@@ -195,6 +245,20 @@ const getLayoutsByMedia = (): LayoutConfiguration => {
 					{ visible: false },
 				],
 			},
+			"ThreeColumnsStartHiddenMidExpanded": {
+				layout: ["0px", "0px", "100%"],
+				separators: [
+					{ visible: false },
+					{ visible: false },
+				],
+			},
+			"ThreeColumnsStartHiddenEndExpanded": {
+				layout: ["0px", "0px", "100%"],
+				separators: [
+					{ visible: false },
+					{ visible: false },
+				],
+			},
 			"MidColumnFullScreen": {
 				layout: ["0px", "100%", "0px"],
 				separators: [
@@ -213,8 +277,18 @@ const getLayoutsByMedia = (): LayoutConfiguration => {
 	};
 };
 
+const getNextLayoutByArrowPress = () => {
+	return {
+		"ThreeColumnsMidExpanded": "ThreeColumnsStartHiddenMidExpanded",
+		"ThreeColumnsEndExpanded": "ThreeColumnsStartHiddenEndExpanded",
+		"ThreeColumnsStartHiddenMidExpanded": "ThreeColumnsMidExpanded",
+		"ThreeColumnsStartHiddenEndExpanded": "ThreeColumnsEndExpanded",
+	};
+};
+
 export {
 	getLayoutsByMedia,
+	getNextLayoutByArrowPress,
 };
 
 export type {

packages/fiori/src/themes/FlexibleColumnLayout.css

@@ -33,7 +33,7 @@
 	display: none;
 }
 
-/* arrow */
+/* separator */
 .ui5-fcl-separator {
 	display: flex;
 	align-items: center;
@@ -59,7 +59,19 @@
 	padding-bottom: 0.3125rem;
 }
 
-/* arrow decoration */
+.ui5-fcl-arrow {
+	position: absolute;
+    top: 1rem;
+	width: 1.5rem;
+	height: 1.5rem;
+	min-width: 1.5rem;
+	will-change: transform;
+	overflow: visible;
+	z-index: 10;
+	cursor: pointer;
+}
+
+/* grip decoration */
 .ui5-fcl-grip:before {
 	background-image: var(--_ui5_fcl_decoration_top);
 	bottom: calc(50% + 1rem);
@@ -88,6 +100,11 @@
 	height: calc(50% - 1rem);
 }
 
+/* Only apply shorter height when arrow is visible */
+.ui5-fcl-separator:hover .ui5-fcl-arrow + .ui5-fcl-grip::before  {
+	height: calc(40% - 1rem);
+}
+
 [aria-hidden] ::slotted([slot="startColumn"]),
 [aria-hidden] ::slotted([slot="midColumn"]),
 [aria-hidden] ::slotted([slot="endColumn"]){