FDS-672 FDS-673 f-table-schema is not clearing the last selection when selectable="single"

packages/flow-core/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 # Change Log
 
+## [2.9.12] - 2024-05-27
+
+### Improvements
+
+- `disabled` attribute added in `f-tab-node`.
+- `f-select` chevron clikable area increased
+
 ## [2.9.11] - 2024-05-17
 
 ### Bug Fixes

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.9.11",
+  "version": "2.9.12",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

packages/flow-core/src/components/f-select/f-select.scss

@@ -173,10 +173,13 @@ applies styles on f-select
 
 			.f-select-suffix {
 				position: relative;
-				padding: 0px 12px;
 				display: flex;
-				gap: 8px;
 				align-items: center;
+				.chevron {
+					padding: 0px 12px;
+					height: 100%;
+					align-items: center;
+				}
 			}
 
 			.loader-suffix {

packages/flow-core/src/components/f-select/render.ts

@@ -67,13 +67,15 @@ export default function render(this: FSelect) {
 				data-qa-caret="i-chevron-down"
 				source="i-chevron-down"
 				.size=${"x-small"}
+				class="chevron"
 				clickable
 				@click=${this.handleDropDownOpen}
 		  ></f-icon>`
 		: html`<f-icon
 				data-qa-caret="i-chevron-up"
 				source="i-chevron-up"
 				.size=${"x-small"}
+				class="chevron"
 				clickable
 				@click=${this.handleDropDownClose}
 		  ></f-icon>`;

packages/flow-core/src/components/f-tab-node/f-tab-node-global.scss

@@ -10,35 +10,37 @@ f-tab-node {
 	&[direction="vertical"] {
 		flex-direction: row;
 	}
-	&[active]:after {
-		display: block;
-		content: "";
-		border-bottom: solid 3px var(--color-primary-default);
-		transform: scaleX(1);
-		z-index: 100;
-	}
-	&[active][direction="vertical"]:after {
-		display: block;
-		content: "";
-		border-right: solid 3px var(--color-primary-default);
-		transform: scaleX(1);
-		z-index: 100;
-	}
-	&[direction="vertical"]:after {
-		display: block;
-		content: "";
-		border-right: solid 3px var(--color-surface-tertiary-hover);
-		transform: scaleX(0);
-		transition: transform 250ms ease-in-out;
-	}
-	&:after {
-		display: block;
-		content: "";
-		border-bottom: solid 3px var(--color-surface-tertiary-hover);
-		transform: scaleX(0);
-		transition: transform 250ms ease-in-out;
-	}
-	&:hover:after {
-		transform: scaleX(1);
+	&:not([disabled]) {
+		&[active]:after {
+			display: block;
+			content: "";
+			border-bottom: solid 3px var(--color-primary-default);
+			transform: scaleX(1);
+			z-index: 100;
+		}
+		&[active][direction="vertical"]:after {
+			display: block;
+			content: "";
+			border-right: solid 3px var(--color-primary-default);
+			transform: scaleX(1);
+			z-index: 100;
+		}
+		&[direction="vertical"]:after {
+			display: block;
+			content: "";
+			border-right: solid 3px var(--color-surface-tertiary-hover);
+			transform: scaleX(0);
+			transition: transform 250ms ease-in-out;
+		}
+		&:after {
+			display: block;
+			content: "";
+			border-bottom: solid 3px var(--color-surface-tertiary-hover);
+			transform: scaleX(0);
+			transition: transform 250ms ease-in-out;
+		}
+		&:hover:after {
+			transform: scaleX(1);
+		}
 	}
 }

packages/flow-core/src/components/f-tab-node/f-tab-node.ts

@@ -33,6 +33,12 @@ export class FTabNode extends FRoot {
 	@property({ type: Boolean, reflect: true })
 	active?: boolean = false;
 
+	/**
+	 * @attribute to disable f-tab-node
+	 */
+	@property({ type: Boolean, reflect: true })
+	disabled?: boolean = false;
+
 	/**
 	 * tab-width
 	 */
@@ -76,7 +82,12 @@ export class FTabNode extends FRoot {
 		/**
 		 * Final html to render
 		 */
-		return html`<f-div data-qa-tab .width=${this.tabWidth} padding="medium" class="f-tab-node"
+		return html`<f-div
+			.disabled=${this.disabled}
+			data-qa-tab
+			.width=${this.tabWidth}
+			padding="medium"
+			class="f-tab-node"
 			><slot></slot
 		></f-div>`;
 	}

packages/flow-table/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.4.6] - 2024-05-27
+
+### Bug Fixes
+
+- `f-table-schema` is not clearing the last selection when `selectable="single"`.
+
 ## [2.4.5] - 2024-05-20
 
 ### Bug Fixes

packages/flow-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-table",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "description": "Table component for flow library",
   "module": "dist/flow-table.es.js",
   "main": "dist/flow-table.cjs.js",

packages/flow-table/src/components/f-table-schema/f-table-schema.ts

@@ -596,6 +596,11 @@ export class FTableSchema extends FRoot {
 	}
 
 	handleRowSelection(row: FTableSchemaDataRow, event: CustomEvent) {
+		if (this.selectable === "single") {
+			this.data.rows.forEach(row => {
+				row.selected = false;
+			});
+		}
 		row.selected = event.detail.value;
 		/**
 		 * Whenever row is selected/de-selected this event emitts with header object

stories/flow-core/f-tab-node.mdx

@@ -45,4 +45,16 @@ Blue bottom border appears for the active node. Takes up boolean value.
 	<Story of={FTabNodeStories.Active} />
 </Canvas>
 
+<br />
+
+## disabled
+
+<f-divider />
+
+To disable f-tab-node
+
+<Canvas>
+	<Story of={FTabNodeStories.Disabled} />
+</Canvas>
+
 <ArgsTable of={"f-tab-node"} />

stories/flow-core/f-tab-node.stories.js → stories/flow-core/f-tab-node.stories.ts

@@ -1,7 +1,6 @@
+import { FTabNode } from "@ollion/flow-core";
 import { html } from "lit-html";
-import FDivAnatomy from "../svg/i-fdiv-anatomy.js";
-import { unsafeSVG } from "lit-html/directives/unsafe-svg.js";
-import { useArgs, useState } from "@storybook/client-api";
+import { createRef, ref } from "lit/directives/ref.js";
 
 export default {
 	title: "@ollion/flow-core/f-tab-node",
@@ -14,7 +13,7 @@ export default {
 };
 
 export const Playground = {
-	render: args => {
+	render: (args: Record<string, string>) => {
 		return html` <f-div>
 			<f-tab-node ?active=${args.active} .width=${args.width} variant=${args.variant}>
 				<f-div width="100%" height="100%" align="middle-center" direction="column"
@@ -59,18 +58,32 @@ export const Playground = {
 };
 
 export const ContentId = {
-	render: args => {
-		const [selected, setSelected] = useState("uni-1");
-
+	render: () => {
+		let selected = "uni-1";
+		const tab1 = createRef<FTabNode>();
+		const tab2 = createRef<FTabNode>();
+		const setSelected = (tabid: string) => {
+			if (tabid === "uni-1") {
+				tab1.value!.active = true;
+				tab2.value!.active = false;
+				selected = "uni-1";
+			} else {
+				tab2.value!.active = true;
+				tab1.value!.active = false;
+				selected = "uni-2";
+			}
+		};
 		return html`
 			<f-div>
 				<f-tab-node
+					${ref(tab1)}
 					?active=${selected === "uni-1"}
 					content-id="uni-1"
 					@click=${() => setSelected("uni-1")}
 					>Tab 1</f-tab-node
 				>
 				<f-tab-node
+					${ref(tab2)}
 					?active=${selected === "uni-2"}
 					content-id="uni-2"
 					@click=${() => setSelected("uni-2")}
@@ -129,7 +142,7 @@ export const ContentId = {
 };
 
 export const Active = {
-	render: args => {
+	render: () => {
 		return html`<f-div>
 			<f-tab-node ?active=${true} variant="fill">
 				<f-div width="100%" height="100%" align="middle-center" direction="column"
@@ -159,3 +172,35 @@ export const Active = {
 		}
 	}
 };
+
+export const Disabled = {
+	render: () => {
+		return html`<f-div>
+			<f-tab-node variant="fill">
+				<f-div width="100%" height="100%" align="middle-center" direction="column"
+					><f-div align="middle-center" height="hug-content" width="hug-content">Tab Item</f-div
+					><f-div align="middle-center" height="hug-content" width="hug-content"
+						>disabled="false"</f-div
+					></f-div
+				>
+			</f-tab-node>
+			<f-tab-node disabled ?active=${false} variant="fill">
+				<f-div width="100%" height="100%" align="middle-center" direction="column"
+					><f-div align="middle-center" height="hug-content" width="hug-content">Tab Item</f-div
+					><f-div align="middle-center" height="hug-content" width="hug-content"
+						>disabled = "true"</f-div
+					></f-div
+				>
+			</f-tab-node>
+		</f-div>`;
+	},
+
+	name: "disabled",
+
+	parameters: {
+		docs: {
+			inlineStories: false,
+			iframeHeight: 200
+		}
+	}
+};