From aaf7873464a5fdde8acf845f6c0195f019bd1905 Mon Sep 17 00:00:00 2001 From: Vikas Awaghade <67629551+vikas-cldcvr@users.noreply.github.com> Date: Fri, 10 Nov 2023 11:26:28 +0530 Subject: [PATCH] FLOW-962 f-popover max-height issue fixed + f-search stroies updated (#186) --- packages/flow-core/CHANGELOG.md | 6 + packages/flow-core/package.json | 2 +- .../src/components/f-popover/f-popover.ts | 2 +- .../src/components/f-search/f-search.ts | 19 +- ...-search.stories.js => f-search.stories.ts} | 239 +++++++++++++++--- 5 files changed, 230 insertions(+), 38 deletions(-) rename stories/flow-core/{f-search.stories.js => f-search.stories.ts} (73%) diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md index 7b2b70f5b..cccc20401 100644 --- a/packages/flow-core/CHANGELOG.md +++ b/packages/flow-core/CHANGELOG.md @@ -2,6 +2,12 @@ # Change Log +## [2.2.2] - 2023-11-10 + +### Bug Fixes + +- `f-popover` : reset `max-height` issue fixed. + ## [2.2.1] - 2023-11-08 ### Improvements diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json index 993441caa..afee116e0 100644 --- a/packages/flow-core/package.json +++ b/packages/flow-core/package.json @@ -1,6 +1,6 @@ { "name": "@cldcvr/flow-core", - "version": "2.2.1", + "version": "2.2.2", "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-popover/f-popover.ts b/packages/flow-core/src/components/f-popover/f-popover.ts index 8513f549c..cafdfc994 100644 --- a/packages/flow-core/src/components/f-popover/f-popover.ts +++ b/packages/flow-core/src/components/f-popover/f-popover.ts @@ -441,7 +441,7 @@ export class FPopover extends FRoot { const topPosition = Number(this.style.top.replace("px", "")) + 16; this.style.height = `calc(100vh - ${topPosition}px)`; this.style.maxHeight = `calc(100vh - ${topPosition}px)`; - } else { + } else if (changedProperties.has("autoHeight") && !this.autoHeight) { this.style.removeProperty("height"); this.style.removeProperty("max-height"); } diff --git a/packages/flow-core/src/components/f-search/f-search.ts b/packages/flow-core/src/components/f-search/f-search.ts index 3809b8dba..fd6987f1a 100644 --- a/packages/flow-core/src/components/f-search/f-search.ts +++ b/packages/flow-core/src/components/f-search/f-search.ts @@ -91,8 +91,15 @@ export class FSearch extends FRoot { /** * @attribute sets the value of scope in use */ - @property({ reflect: true, type: String }) - ["selected-scope"]?: string; + @property({ reflect: true, type: String, attribute: "selected-scope" }) + selectedScope?: string; + + /** + * for vue2 camelcase support + */ + set ["selected-scope"](val: string) { + this.selectedScope = val; + } /** * @attribute Defines the placeholder text @@ -219,7 +226,7 @@ export class FSearch extends FRoot { this.value = String(e.detail.value); } } - this.dispatchInputEvent(e.detail.value, this["selected-scope"]); + this.dispatchInputEvent(e.detail.value, this.selectedScope); } /** @@ -227,7 +234,7 @@ export class FSearch extends FRoot { */ handleScopeSelection(e: CustomEvent<{ value: string }>) { e.stopPropagation(); - this["selected-scope"] = e.detail.value; + this.selectedScope = e.detail.value; this.dispatchInputEvent(this.value ?? "", e.detail.value); } @@ -253,7 +260,7 @@ export class FSearch extends FRoot { */ clearInputValue() { this.value = ""; - this.dispatchInputEvent("", this["selected-scope"]); + this.dispatchInputEvent("", this.selectedScope); } /** @@ -350,7 +357,7 @@ export class FSearch extends FRoot { placeholder="Search by" .state=${this.state} .size=${this.size} - .value=${this["selected-scope"]} + .value=${this.selectedScope} @input=${this.handleScopeSelection} >` diff --git a/stories/flow-core/f-search.stories.js b/stories/flow-core/f-search.stories.ts similarity index 73% rename from stories/flow-core/f-search.stories.js rename to stories/flow-core/f-search.stories.ts index 3b716eaa1..733ae007d 100644 --- a/stories/flow-core/f-search.stories.js +++ b/stories/flow-core/f-search.stories.ts @@ -1,8 +1,8 @@ import { html } from "lit-html"; -import fInputAnatomy from "../svg/i-finput-anatomy.js"; -import { unsafeSVG } from "lit-html/directives/unsafe-svg.js"; -import { useArgs, useEffect, useState } from "@storybook/client-api"; +import { useArgs } from "@storybook/manager-api"; +import { useState } from "@storybook/preview-api"; import { unsafeHTML } from "lit-html/directives/unsafe-html.js"; +import { FSearchResultWhen } from "@cldcvr/flow-core"; export default { title: "@cldcvr/flow-core/f-search", @@ -15,10 +15,10 @@ export default { }; export const Playground = { - render: args => { + render: (args: Record) => { const [_, updateArgs] = useArgs(); - const handleInput = e => { + const handleInput = (e: CustomEvent) => { console.log(e.detail); updateArgs({ @@ -27,7 +27,7 @@ export const Playground = { }); }; - const handleSearch = event => { + const handleSearch = (event: CustomEvent) => { console.log(event.detail); }; @@ -50,7 +50,7 @@ export const Playground = { .resultMaxHeight=${args["result-max-height"]} @search=${handleSearch} > - ${unsafeHTML(args.slot)} + ${unsafeHTML(args.slot as string)} `; @@ -159,11 +159,11 @@ export const Playground = { }; export const Variant = { - render: args => { + render: () => { const variants = ["curved", "round", "block"]; const [value, setValue] = useState(""); - const handleValue = e => { + const handleValue = (e: CustomEvent) => { setValue(e.detail.value); }; @@ -213,11 +213,11 @@ export const Variant = { }; export const Category = { - render: args => { + render: () => { const categories = ["fill", "outline", "transparent"]; const [value, setValue] = useState(""); - const handleValue = e => { + const handleValue = (e: CustomEvent) => { setValue(e.detail.value); }; @@ -267,10 +267,10 @@ export const Category = { }; export const Value = { - render: args => { + render: () => { const [value, setValue] = useState("Suggestion 2"); - const handleValue = e => { + const handleValue = (e: CustomEvent) => { setValue(e.detail.value); }; @@ -314,10 +314,10 @@ export const Value = { }; export const Placeholder = { - render: args => { + render: () => { const [value, setValue] = useState(""); - const handleValue = e => { + const handleValue = (e: CustomEvent) => { setValue(e.detail.value); }; @@ -361,11 +361,11 @@ export const Placeholder = { }; export const Size = { - render: args => { + render: () => { const sizes = ["small", "medium"]; const [value, setValue] = useState(""); - const handleValue = e => { + const handleValue = (e: CustomEvent) => { setValue(e.detail.value); }; @@ -411,14 +411,14 @@ export const Size = { }; export const State = { - render: args => { + render: () => { const states = [ ["default", "primary", "success"], ["danger", "warning", "default"] ]; const [value, setValue] = useState(""); - const handleValue = e => { + const handleValue = (e: CustomEvent) => { setValue(e.detail.value); }; @@ -472,15 +472,15 @@ export const State = { }; export const Result = { - render: args => { + render: () => { const [value, setValue] = useState("jane"); - const handleValue = e => { + const handleValue = (e: CustomEvent) => { console.log("in input", e); setValue(e.detail.value); }; - const handleSelected = e => { + const handleSelected = (e: CustomEvent) => { console.log("in selected", e); }; @@ -491,7 +491,7 @@ export const Result = { lastname: "jane" }, - template: function (value) { + template: function (value: string) { return html`${this.value.firstname} ${this.value.lastname}${this.value.firstname} ${this.value.lastname} { + const resultWhen = (result: string | Record, value: string) => { console.log("in result when"); if (value === "*" || value === "$") { @@ -535,7 +535,7 @@ export const Result = { .includes(value?.toLocaleLowerCase() ?? ""); } - return result.toLocaleLowerCase().includes(value?.toLocaleLowerCase() ?? ""); + return (result as string).toLocaleLowerCase().includes(value?.toLocaleLowerCase() ?? ""); }; return html` @@ -621,10 +621,10 @@ export const Result = { }; export const Scope = { - render: args => { + render: () => { const [value, setValue] = useState(""); - const handleValue = e => { + const handleValue = (e: CustomEvent) => { setValue(e.detail.value); }; @@ -669,11 +669,190 @@ export const Scope = { name: "scope" }; +export const selectedScope = { + render: () => { + const [value, setValue] = useState(""); + + const handleValue = (e: CustomEvent) => { + setValue(e.detail.value); + }; + + return html` + + + + Label + 'scope 2' is selected + These 3 scopes are used above ["scope 1", "scope 2", "scope 3"] + + `; + }, + + name: "selected-scope" +}; + +export const resultMaxHeight = { + render: () => { + const [value, setValue] = useState(""); + + const handleValue = (e: CustomEvent) => { + setValue(e.detail.value); + }; + + return html` + + + + Label + 'result-max-height' set to 150px + Click in search box to see results/suggestions + + `; + }, + + name: "result-max-height" +}; + +export const resultWhen = { + render: () => { + const [value, setValue] = useState(""); + + const handleValue = (e: CustomEvent) => { + setValue(e.detail.value); + }; + + const resWhen: FSearchResultWhen = (suggestion, value) => { + if (value === "*") { + return true; + } + return (suggestion as string).toLocaleLowerCase().includes(value?.toLocaleLowerCase() ?? ""); + }; + + return html` + + + + Label + 'result-when' is used to customised behavior of showing results. (By default, it will + employ the '.includes' method on each result for filtering and display.) + + E.g. type '*' in search box to see all result + + + 
+							const resWhen: FSearchResultWhen = (suggestion, value) => {
+								if (value === "*") {
+									return true;
+								}
+								return (suggestion as string).toLocaleLowerCase().includes(value?.toLocaleLowerCase() ?? "");
+							};
+
+ + + + `; + }, + + name: "result-when" +}; + export const Flags = { - render: args => { + render: () => { const [value, setValue] = useState(""); - const handleValue = e => { + const handleValue = (e: CustomEvent) => { setValue(e.detail.value); };