diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md index 6ab338c8c..0036831bf 100644 --- a/packages/flow-core/CHANGELOG.md +++ b/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 diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json index 718e2c91b..c892974e9 100644 --- a/packages/flow-core/package.json +++ b/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", diff --git a/packages/flow-core/src/components/f-select/f-select.scss b/packages/flow-core/src/components/f-select/f-select.scss index a2bb9a544..2c1d0c1d7 100644 --- a/packages/flow-core/src/components/f-select/f-select.scss +++ b/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 { diff --git a/packages/flow-core/src/components/f-select/render.ts b/packages/flow-core/src/components/f-select/render.ts index c8d107911..148e1e4ce 100644 --- a/packages/flow-core/src/components/f-select/render.ts +++ b/packages/flow-core/src/components/f-select/render.ts @@ -67,6 +67,7 @@ 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} >` @@ -74,6 +75,7 @@ export default function render(this: FSelect) { data-qa-caret="i-chevron-up" source="i-chevron-up" .size=${"x-small"} + class="chevron" clickable @click=${this.handleDropDownClose} >`; diff --git a/packages/flow-core/src/components/f-tab-node/f-tab-node-global.scss b/packages/flow-core/src/components/f-tab-node/f-tab-node-global.scss index cfa00e1b3..f0296909d 100644 --- a/packages/flow-core/src/components/f-tab-node/f-tab-node-global.scss +++ b/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); + } } } diff --git a/packages/flow-core/src/components/f-tab-node/f-tab-node.ts b/packages/flow-core/src/components/f-tab-node/f-tab-node.ts index b405daa16..b0990c006 100644 --- a/packages/flow-core/src/components/f-tab-node/f-tab-node.ts +++ b/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``; } diff --git a/packages/flow-table/CHANGELOG.md b/packages/flow-table/CHANGELOG.md index b1689d992..aee9b1ba4 100644 --- a/packages/flow-table/CHANGELOG.md +++ b/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 diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json index 962e3007f..b4c449b6b 100644 --- a/packages/flow-table/package.json +++ b/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", diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts index 40a6e55a0..b740c7e2d 100644 --- a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts +++ b/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 diff --git a/stories/flow-core/f-tab-node.mdx b/stories/flow-core/f-tab-node.mdx index 4085f4f40..b8de47732 100644 --- a/stories/flow-core/f-tab-node.mdx +++ b/stories/flow-core/f-tab-node.mdx @@ -45,4 +45,16 @@ Blue bottom border appears for the active node. Takes up boolean value. +
+ +## disabled + + + +To disable f-tab-node + + + + + diff --git a/stories/flow-core/f-tab-node.stories.js b/stories/flow-core/f-tab-node.stories.ts similarity index 73% rename from stories/flow-core/f-tab-node.stories.js rename to stories/flow-core/f-tab-node.stories.ts index 4ed0a5611..0d446a6ba 100644 --- a/stories/flow-core/f-tab-node.stories.js +++ b/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) => { return html` { - const [selected, setSelected] = useState("uni-1"); - + render: () => { + let selected = "uni-1"; + const tab1 = createRef(); + const tab2 = createRef(); + 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` setSelected("uni-1")} >Tab 1 setSelected("uni-2")} @@ -129,7 +142,7 @@ export const ContentId = { }; export const Active = { - render: args => { + render: () => { return html` { + return html` + + Tab Itemdisabled="false" + + + Tab Itemdisabled = "true" + + `; + }, + + name: "disabled", + + parameters: { + docs: { + inlineStories: false, + iframeHeight: 200 + } + } +};