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],
 })
 
 /**
@@ -655,13 +661,34 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	async _onkeydown(e: KeyboardEvent) {
+		if (isEnter(e) || isSpace(e)) {
+			e.preventDefault();
+			const focusedElement = e.target as HTMLElement;
+			if (focusedElement === this.startArrowDOM) {
+				this.switchLayoutOnArrowPress();
+				return;
+			}
+			return;
+		}
+
 		const stepSize = 2,
 			bigStepSize = this._width,
 			isRTL = this.effectiveDir === "rtl";
 		let step = 0;
+
+		if (!this.startColumnVisible && e.target === this.startSeparatorDOM && isLeft(e)) {
+			return;
+		}
+
 		if (isLeft(e)) {
+			if (this.startArrowDOM === e.target) {
+				return;
+			}
 			step = -stepSize * 10;
 		} else if (isRight(e)) {
+			if (this.startArrowDOM === e.target) {
+				return;
+			}
 			step = stepSize * 10;
 		} else if (isLeftShift(e)) {
 			step = -stepSize;
@@ -818,6 +845,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 +931,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 +1041,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 +1057,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) {
@@ -34,6 +35,7 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 				onKeyDown={this._onkeydown}
 				onKeyUp={this._onkeyup}
 			>
+				{ arrowStart.call(this) }
 				{ gripStart.call(this) }
 			</div>
 
@@ -82,6 +84,20 @@ 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}
+			class="ui5-fcl-arrow ui5-fcl-arrow--start"
+			style={{
+				display: this.showStartSeparatorArrow ? "inline-block" : "none",
+			}}
+		/>
+	);
+}
+
 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);
@@ -83,8 +95,14 @@
 	background-position-x: calc(50% - 0.03125rem);
 }
 
-.ui5-fcl-separator:hover .ui5-fcl-grip:before,
-.ui5-fcl-separator:hover .ui5-fcl-grip:after {
+/*only if the arrow is present the lines will be shorten*/
+.ui5-fcl-separator:has(.ui5-fcl-arrow--start):hover:not(:has(.ui5-fcl-arrow--start:hover)) .ui5-fcl-grip:before,
+.ui5-fcl-separator:has(.ui5-fcl-arrow--start):hover:not(:has(.ui5-fcl-arrow--start:hover)) .ui5-fcl-grip:after {
+	height: calc(40% - 1rem);
+}
+
+.ui5-fcl-separator:hover:not(:has(.ui5-fcl-arrow--start:hover)) .ui5-fcl-grip:before,
+.ui5-fcl-separator:hover:not(:has(.ui5-fcl-arrow--start:hover)) .ui5-fcl-grip:after {
 	height: calc(50% - 1rem);
 }
 

packages/fiori/src/types/FCLLayout.ts

@@ -72,6 +72,26 @@ enum FCLLayout {
 	 */
 	ThreeColumnsMidExpandedEndHidden = "ThreeColumnsMidExpandedEndHidden",
 
+	 /**
+     * Desktop: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.
+     * Tablet:  Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.
+     * Phone:   Fixed -- 100 percent width of the Mid column, only the Mid column is displayed.
+     *
+     * Use to display the Mid and End columns while the Start column is hidden.
+     * @public
+     */
+	 ThreeColumnsStartHiddenMidExpanded = "ThreeColumnsStartHiddenMidExpanded",
+
+	 /**
+	  * Desktop: Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed.
+	  * Tablet:  Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed.
+	  * Phone:   Fixed -- 100 percent width of the End column, only the End column is displayed.
+	  *
+	  * Use to display the Mid column and expanded End column while the grip of the separator is not visible.
+	  * @public
+	  */
+	 ThreeColumnsStartHiddenEndExpanded = "ThreeColumnsStartHiddenEndExpanded",
+
 	/**
 	 * Desktop: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed
 	 * Tablet:  Fixed -- 100 -- percent widths of columns, only the Mid column is displayed