From e366d8b7f89ca24ed6d50e40dbba1014742b17c2 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 26 Aug 2024 13:58:52 -0500 Subject: [PATCH 01/11] fix(form-pill): fix issues where pill textt not being truncated --- .changeset/violet-cows-share.md | 6 ++ .../components/combobox/package.json | 2 + .../stories/MultiselectCombobox.stories.tsx | 24 +++++++ .../components/form-pill-group/package.json | 2 + .../form-pill-group/src/FormPill.tsx | 1 + .../form-pill-group/src/FormPillButton.tsx | 23 ++++++- .../form-pill-group/src/FormPillGroup.tsx | 1 + .../form-pill-group/stories/index.stories.tsx | 62 +++++++++++++++++++ .../components/popover/package.json | 2 + 9 files changed, 122 insertions(+), 1 deletion(-) create mode 100644 .changeset/violet-cows-share.md diff --git a/.changeset/violet-cows-share.md b/.changeset/violet-cows-share.md new file mode 100644 index 0000000000..8cdb66f147 --- /dev/null +++ b/.changeset/violet-cows-share.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/form-pill-group": patch +"@twilio-paste/core": patch +--- + +[FormPillGroup] fixed a bug where long text in a form pill would wrap and break styling. Text within FormPill is now truncated so FormPill(s) will not stretch beyond FormPillGroup width. diff --git a/packages/paste-core/components/combobox/package.json b/packages/paste-core/components/combobox/package.json index bbf901363c..0d5e52cd4f 100644 --- a/packages/paste-core/components/combobox/package.json +++ b/packages/paste-core/components/combobox/package.json @@ -55,6 +55,7 @@ "@twilio-paste/styling-library": "^3.0.0", "@twilio-paste/text": "^10.0.0", "@twilio-paste/theme": "^11.0.0", + "@twilio-paste/truncate": "^14.0.0", "@twilio-paste/types": "^6.0.0", "@twilio-paste/uid-library": "^2.0.0", "@twilio-paste/utils": "^5.0.0", @@ -89,6 +90,7 @@ "@twilio-paste/styling-library": "^3.0.0", "@twilio-paste/text": "^10.1.0", "@twilio-paste/theme": "^11.0.1", + "@twilio-paste/truncate": "^14.1.0", "@twilio-paste/types": "^6.0.0", "@twilio-paste/uid-library": "^2.0.0", "@twilio-paste/utils": "^5.0.0", diff --git a/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx b/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx index face3ee2e9..0e0f4a1fa2 100644 --- a/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx +++ b/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx @@ -688,3 +688,27 @@ export default { ), ], } as Meta; + +export const MultiselectComboboxInNarrowContainer = (): React.ReactNode => { + const [inputValue, setInputValue] = React.useState(""); + const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]); + + return ( + + { + setInputValue(newInputValue); + }} + onSelectedItemsChange={(selectedItems) => { + // eslint-disable-next-line no-console + console.log(selectedItems); + }} + /> + + ); +}; +MultiselectComboboxInNarrowContainer.storyName = "Narrow Contrainer"; diff --git a/packages/paste-core/components/form-pill-group/package.json b/packages/paste-core/components/form-pill-group/package.json index 0e92e43744..23f96e49e4 100644 --- a/packages/paste-core/components/form-pill-group/package.json +++ b/packages/paste-core/components/form-pill-group/package.json @@ -39,6 +39,7 @@ "@twilio-paste/style-props": "^9.0.0", "@twilio-paste/styling-library": "^3.0.0", "@twilio-paste/theme": "^11.0.0", + "@twilio-paste/truncate": "^14.0.0", "@twilio-paste/types": "^6.0.0", "@twilio-paste/uid-library": "^2.0.0", "@types/react": "^16.8.6 || ^17.0.2 || ^18.0.27", @@ -58,6 +59,7 @@ "@twilio-paste/style-props": "^9.1.0", "@twilio-paste/styling-library": "^3.0.0", "@twilio-paste/theme": "^11.0.0", + "@twilio-paste/truncate": "^14.1.0", "@twilio-paste/types": "^6.0.0", "@twilio-paste/uid-library": "^2.0.0", "@types/react": "^18.0.27", diff --git a/packages/paste-core/components/form-pill-group/src/FormPill.tsx b/packages/paste-core/components/form-pill-group/src/FormPill.tsx index 11ebc071a8..976c8f576d 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPill.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPill.tsx @@ -140,6 +140,7 @@ export const FormPill = React.forwardRef( position="relative" display="inline-block" borderRadius="borderRadiusPill" + maxWidth="100%" {...computedStyles} > { + if (typeof children === "string") { + return {children}; + } + + if (React.isValidElement(children)) { + return React.cloneElement(children, { + children: renderChildren(children.props.children), + }); + } + + if (Array.isArray(children)) { + return children.map((child, index) => {renderChildren(child)}); + } + + return children; +}; + export const FormPillButton = React.forwardRef( ( { @@ -77,6 +96,7 @@ export const FormPillButton = React.forwardRef paddingLeft="space30" paddingRight={isDismissable ? (size === "large" ? "space90" : "space80") : "space30"} transition="background-color 150ms ease-in, border-color 150ms ease-in, box-shadow 150ms ease-in, color 150ms ease-in" + maxWidth="100%" {...computedStyles} > @@ -86,7 +106,8 @@ export const FormPillButton = React.forwardRef {i18nErrorLabel} ) : null} - {props.children} + + {renderChildren(props.children)} ); diff --git a/packages/paste-core/components/form-pill-group/src/FormPillGroup.tsx b/packages/paste-core/components/form-pill-group/src/FormPillGroup.tsx index 217eead602..8dbd906f1e 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPillGroup.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPillGroup.tsx @@ -88,6 +88,7 @@ const FormPillGroupStyles = React.forwardRef {props.children} diff --git a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx index 6fe794b0b0..e073d0d73c 100644 --- a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx +++ b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx @@ -2,6 +2,7 @@ import { Avatar } from "@twilio-paste/avatar"; import { Box } from "@twilio-paste/box"; import { CalendarIcon } from "@twilio-paste/icons/esm/CalendarIcon"; +import { Stack } from "@twilio-paste/stack"; import * as React from "react"; import { FormPill, FormPillGroup, useFormPillState } from "../src"; @@ -177,6 +178,67 @@ export const FormPillTreeVariant = (): JSX.Element => { FormPillTreeVariant.storyName = "FormPillGroup Tree Variant"; +export const PillStringOverflowVSComposed: React.FC< + React.PropsWithChildren<{ + selected?: boolean; + dismissable?: boolean; + disabled?: boolean; + ariaLabel?: string; + size?: FormPillGroupSizeVariant; + }> +> = ({ selected = false, dismissable = true, disabled = false, ariaLabel = "Basic pills:", size }) => { + const pillState = useFormPillState(); + return ( + + + + {PILL_NAMES.map((pill, index) => ( + 2 ? "error" : "default"} + onDismiss={dismissable ? () => {} : undefined} + disabled={disabled} + > + {index % 3 === 2 ? ( + + ) : null} + {index % 3 === 1 ? ( + + ) : null} + {pill} + + ))} + + + + {PILL_NAMES.map((pill, index) => ( + 2 ? "error" : "default"} + onDismiss={dismissable ? () => {} : undefined} + disabled={disabled} + > + {pill} + + ))} + + + + ); +}; + +PillStringOverflowVSComposed.storyName = "Pill String Overflow vs Composed"; + // eslint-disable-next-line import/no-default-export export default { title: "Components/Form Pill Group", diff --git a/packages/paste-core/components/popover/package.json b/packages/paste-core/components/popover/package.json index 91a3eb40c2..d47893ce09 100644 --- a/packages/paste-core/components/popover/package.json +++ b/packages/paste-core/components/popover/package.json @@ -44,6 +44,7 @@ "@twilio-paste/styling-library": "^3.0.0", "@twilio-paste/text": "^10.0.0", "@twilio-paste/theme": "^11.0.0", + "@twilio-paste/truncate": "^14.0.0", "@twilio-paste/types": "^6.0.0", "@twilio-paste/uid-library": "^2.0.0", "@types/react": "^16.8.6 || ^17.0.2 || ^18.0.27", @@ -71,6 +72,7 @@ "@twilio-paste/styling-library": "^3.0.0", "@twilio-paste/text": "^10.1.0", "@twilio-paste/theme": "^11.0.0", + "@twilio-paste/truncate": "^14.1.0", "@twilio-paste/types": "^6.0.0", "@twilio-paste/uid-library": "^2.0.0", "@types/react": "^18.0.27", From 5050da2077ad5cf3641f239a17c8c802551e64bd Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 26 Aug 2024 14:02:58 -0500 Subject: [PATCH 02/11] chore(pr): update lockfile --- yarn.lock | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/yarn.lock b/yarn.lock index 345a9283f8..ef15b4e291 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12207,6 +12207,7 @@ __metadata: "@twilio-paste/styling-library": ^3.0.0 "@twilio-paste/text": ^10.1.0 "@twilio-paste/theme": ^11.0.1 + "@twilio-paste/truncate": ^14.1.0 "@twilio-paste/types": ^6.0.0 "@twilio-paste/uid-library": ^2.0.0 "@twilio-paste/utils": ^5.0.0 @@ -12244,6 +12245,7 @@ __metadata: "@twilio-paste/styling-library": ^3.0.0 "@twilio-paste/text": ^10.0.0 "@twilio-paste/theme": ^11.0.0 + "@twilio-paste/truncate": ^14.0.0 "@twilio-paste/types": ^6.0.0 "@twilio-paste/uid-library": ^2.0.0 "@twilio-paste/utils": ^5.0.0 @@ -13073,6 +13075,7 @@ __metadata: "@twilio-paste/style-props": ^9.1.0 "@twilio-paste/styling-library": ^3.0.0 "@twilio-paste/theme": ^11.0.0 + "@twilio-paste/truncate": ^14.1.0 "@twilio-paste/types": ^6.0.0 "@twilio-paste/uid-library": ^2.0.0 "@types/react": ^18.0.27 @@ -13094,6 +13097,7 @@ __metadata: "@twilio-paste/style-props": ^9.0.0 "@twilio-paste/styling-library": ^3.0.0 "@twilio-paste/theme": ^11.0.0 + "@twilio-paste/truncate": ^14.0.0 "@twilio-paste/types": ^6.0.0 "@twilio-paste/uid-library": ^2.0.0 "@types/react": ^16.8.6 || ^17.0.2 || ^18.0.27 @@ -14109,6 +14113,7 @@ __metadata: "@twilio-paste/styling-library": ^3.0.0 "@twilio-paste/text": ^10.1.0 "@twilio-paste/theme": ^11.0.0 + "@twilio-paste/truncate": ^14.1.0 "@twilio-paste/types": ^6.0.0 "@twilio-paste/uid-library": ^2.0.0 "@types/react": ^18.0.27 @@ -14137,6 +14142,7 @@ __metadata: "@twilio-paste/styling-library": ^3.0.0 "@twilio-paste/text": ^10.0.0 "@twilio-paste/theme": ^11.0.0 + "@twilio-paste/truncate": ^14.0.0 "@twilio-paste/types": ^6.0.0 "@twilio-paste/uid-library": ^2.0.0 "@types/react": ^16.8.6 || ^17.0.2 || ^18.0.27 From 50ec9451ce10ddad5c4160ff6be4498f3d0f7826 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 26 Aug 2024 14:10:53 -0500 Subject: [PATCH 03/11] chore(pr): refactor recursion types --- .../components/form-pill-group/src/FormPillButton.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx b/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx index 10f5a0debb..8e1ace0ace 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx @@ -40,13 +40,13 @@ const renderChildren = (children: React.ReactNode): React.ReactNode => { } if (React.isValidElement(children)) { - return React.cloneElement(children, { - children: renderChildren(children.props.children), - }); + return {renderChildren(children.props.children)}; } if (Array.isArray(children)) { - return children.map((child, index) => {renderChildren(child)}); + return children.map((child, index) => ( + {renderChildren(child)} + )); } return children; From e7991066fff5a36f84ad383933049354c4e832bc Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 26 Aug 2024 14:35:42 -0500 Subject: [PATCH 04/11] fix(storybook): a11y unique ids --- .../components/form-pill-group/stories/index.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx index e073d0d73c..bb20258cd8 100644 --- a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx +++ b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx @@ -195,7 +195,7 @@ export const PillStringOverflowVSComposed: React.FC< {PILL_NAMES.map((pill, index) => ( 2 ? "error" : "default"} @@ -221,7 +221,7 @@ export const PillStringOverflowVSComposed: React.FC< {PILL_NAMES.map((pill, index) => ( 2 ? "error" : "default"} From ca29e1a64d04daaa23d6fca83575966c663f0dc0 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 26 Aug 2024 14:45:12 -0500 Subject: [PATCH 05/11] fix(storybook): fix a11y violations --- .../form-pill-group/stories/index.stories.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx index bb20258cd8..f705c71626 100644 --- a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx +++ b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx @@ -188,13 +188,15 @@ export const PillStringOverflowVSComposed: React.FC< }> > = ({ selected = false, dismissable = true, disabled = false, ariaLabel = "Basic pills:", size }) => { const pillState = useFormPillState(); + const pillState2 = useFormPillState(); + return ( - + {PILL_NAMES.map((pill, index) => ( - + {PILL_NAMES.map((pill, index) => ( 2 ? "error" : "default"} onDismiss={dismissable ? () => {} : undefined} From e612d230cfdc6e4a5b6992aa707ef9e3e1c86f5a Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 27 Aug 2024 10:50:41 -0500 Subject: [PATCH 06/11] chore(combobox): add ellipse stlying when selected value exceeds length --- .changeset/warm-zoos-kick.md | 6 ++++++ .../components/combobox/src/singleselect/Combobox.tsx | 1 + .../components/combobox/stories/Combobox.stories.tsx | 10 ++++++++++ 3 files changed, 17 insertions(+) create mode 100644 .changeset/warm-zoos-kick.md diff --git a/.changeset/warm-zoos-kick.md b/.changeset/warm-zoos-kick.md new file mode 100644 index 0000000000..92d0302bb4 --- /dev/null +++ b/.changeset/warm-zoos-kick.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/combobox": patch +"@twilio-paste/core": patch +--- + +[Combobox] added ellipse styling to text that exceeds length of a single select combobox when not active diff --git a/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx b/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx index a79a355c7d..d2f126c7c1 100644 --- a/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx +++ b/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx @@ -168,6 +168,7 @@ const Combobox = React.forwardRef( autocomplete={autocomplete} aria-describedby={helpText != null ? helpTextId : null} element={`${element}_ELEMENT`} + textOverflow="ellipsis" /> {!autocomplete && ( diff --git a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx index 5ec77fac05..c9d82b3edf 100644 --- a/packages/paste-core/components/combobox/stories/Combobox.stories.tsx +++ b/packages/paste-core/components/combobox/stories/Combobox.stories.tsx @@ -885,3 +885,13 @@ ComboboxInModal.parameters = { disable: true, }, }; + +export const ComboboxErrorNarrowContainer: StoryFn = () => { + return ( + + + + ); +}; + +ComboboxErrorNarrowContainer.storyName = "Combobox - Error narrow container"; From f02ffdf6b3cf24d9d87eeb1c90d4ad1ef0da5f01 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 27 Aug 2024 13:59:00 -0500 Subject: [PATCH 07/11] fix(form-pill): apply ellipse min width box only to elements that have text as the child --- .../form-pill-group/src/FormPillButton.tsx | 42 +++++---- .../form-pill-group/stories/index.stories.tsx | 89 +++++++++++++++++++ 2 files changed, 112 insertions(+), 19 deletions(-) diff --git a/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx b/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx index 8e1ace0ace..c9738749ec 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx @@ -34,24 +34,6 @@ const sizeStyles: Record { - if (typeof children === "string") { - return {children}; - } - - if (React.isValidElement(children)) { - return {renderChildren(children.props.children)}; - } - - if (Array.isArray(children)) { - return children.map((child, index) => ( - {renderChildren(child)} - )); - } - - return children; -}; - export const FormPillButton = React.forwardRef( ( { @@ -73,6 +55,29 @@ export const FormPillButton = React.forwardRef const { size, variant: groupVariant } = React.useContext(FormPillGroupContext); const { height, fontSize } = sizeStyles[size]; + const renderChildren = (children: React.ReactNode): React.ReactNode => { + if (typeof children === "string") { + return {children}; + } + + if (React.isValidElement(children)) { + if (children.props.children && typeof children.props.children === "string") { + return ( + + {renderChildren(children.props.children)} + + ); + } + return {renderChildren(children.props.children)}; + } + + if (Array.isArray(children)) { + return children.map((child) => renderChildren(child)); + } + + return children; + }; + return ( {i18nErrorLabel} ) : null} - {renderChildren(props.children)} diff --git a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx index f705c71626..d6631b601e 100644 --- a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx +++ b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx @@ -3,6 +3,7 @@ import { Avatar } from "@twilio-paste/avatar"; import { Box } from "@twilio-paste/box"; import { CalendarIcon } from "@twilio-paste/icons/esm/CalendarIcon"; import { Stack } from "@twilio-paste/stack"; +import { Text } from "@twilio-paste/text"; import * as React from "react"; import { FormPill, FormPillGroup, useFormPillState } from "../src"; @@ -241,6 +242,94 @@ export const PillStringOverflowVSComposed: React.FC< PillStringOverflowVSComposed.storyName = "Pill String Overflow vs Composed"; +export const PillNarrowContainerDecorationsEnd: React.FC< + React.PropsWithChildren<{ + selected?: boolean; + dismissable?: boolean; + disabled?: boolean; + ariaLabel?: string; + size?: FormPillGroupSizeVariant; + }> +> = ({ selected = false, dismissable = true, disabled = false, ariaLabel = "Basic pills:", size }) => { + const pillState = useFormPillState(); + const pillState2 = useFormPillState(); + + return ( + + + {PILL_NAMES.map((pill, index) => ( + 2 ? "error" : "default"} + onDismiss={dismissable ? () => {} : undefined} + disabled={disabled} + > + {pill} + {index % 3 === 2 ? ( + + ) : null} + {index % 3 === 1 ? : null} + + ))} + + + ); +}; + +PillNarrowContainerDecorationsEnd.storyName = "Pill Narrow Container Decorations End"; + +export const PillNarrowContainerFormattedTextContent: React.FC< + React.PropsWithChildren<{ + selected?: boolean; + dismissable?: boolean; + disabled?: boolean; + ariaLabel?: string; + size?: FormPillGroupSizeVariant; + }> +> = ({ selected = false, dismissable = true, disabled = false, ariaLabel = "Basic pills:", size }) => { + const pillState = useFormPillState(); + const pillState2 = useFormPillState(); + + return ( + + + {PILL_NAMES.map((pill, index) => ( + 2 ? "error" : "default"} + onDismiss={dismissable ? () => {} : undefined} + disabled={disabled} + > + {index % 3 === 2 ? ( + + ) : null} + {index % 3 === 1 ? : null} + + {pill} + + + ))} + + + ); +}; + +PillNarrowContainerFormattedTextContent.storyName = "Pill Narrow Container Formatted Text Content"; + // eslint-disable-next-line import/no-default-export export default { title: "Components/Form Pill Group", From e1c300a33f637ea737470b98ccf36ff4b2a550a0 Mon Sep 17 00:00:00 2001 From: krisantrobus <55083528+krisantrobus@users.noreply.github.com> Date: Thu, 29 Aug 2024 14:23:16 -0500 Subject: [PATCH 08/11] Update packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx Co-authored-by: Sarah --- .../components/combobox/stories/MultiselectCombobox.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx b/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx index 0e0f4a1fa2..317a5960dd 100644 --- a/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx +++ b/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx @@ -711,4 +711,4 @@ export const MultiselectComboboxInNarrowContainer = (): React.ReactNode => { ); }; -MultiselectComboboxInNarrowContainer.storyName = "Narrow Contrainer"; +MultiselectComboboxInNarrowContainer.storyName = "Narrow Container"; From 06e950dd00f1fa7b28c0fb7dc7abd9a9e4210616 Mon Sep 17 00:00:00 2001 From: krisantrobus <55083528+krisantrobus@users.noreply.github.com> Date: Fri, 30 Aug 2024 14:56:54 -0500 Subject: [PATCH 09/11] Update packages/paste-core/components/form-pill-group/stories/index.stories.tsx Co-authored-by: Nora Krantz <75342690+nkrantz@users.noreply.github.com> --- .../components/form-pill-group/stories/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx index d6631b601e..47892b2f81 100644 --- a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx +++ b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx @@ -285,7 +285,7 @@ export const PillNarrowContainerDecorationsEnd: React.FC< PillNarrowContainerDecorationsEnd.storyName = "Pill Narrow Container Decorations End"; -export const PillNarrowContainerFormattedTextContent: React.FC< +export const PillNarrowContainerFormattedTextContent: StoryFn< React.PropsWithChildren<{ selected?: boolean; dismissable?: boolean; From 63c5ec1fcdda3cec6c26440cd27feb85c81729c2 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 30 Aug 2024 14:58:56 -0500 Subject: [PATCH 10/11] chore(pr): addressing comments --- .../components/form-pill-group/stories/index.stories.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx index d6631b601e..fda50b963c 100644 --- a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx +++ b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx @@ -283,8 +283,6 @@ export const PillNarrowContainerDecorationsEnd: React.FC< ); }; -PillNarrowContainerDecorationsEnd.storyName = "Pill Narrow Container Decorations End"; - export const PillNarrowContainerFormattedTextContent: React.FC< React.PropsWithChildren<{ selected?: boolean; @@ -295,7 +293,6 @@ export const PillNarrowContainerFormattedTextContent: React.FC< }> > = ({ selected = false, dismissable = true, disabled = false, ariaLabel = "Basic pills:", size }) => { const pillState = useFormPillState(); - const pillState2 = useFormPillState(); return ( @@ -318,7 +315,7 @@ export const PillNarrowContainerFormattedTextContent: React.FC< /> ) : null} {index % 3 === 1 ? : null} - + {pill} @@ -328,8 +325,6 @@ export const PillNarrowContainerFormattedTextContent: React.FC< ); }; -PillNarrowContainerFormattedTextContent.storyName = "Pill Narrow Container Formatted Text Content"; - // eslint-disable-next-line import/no-default-export export default { title: "Components/Form Pill Group", From 7735287f0598e3ad810fedfbe992cacb673c6e80 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 30 Aug 2024 15:15:40 -0500 Subject: [PATCH 11/11] chore(pr): addressing comments --- .../components/combobox/stories/MultiselectCombobox.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx b/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx index 433c4f2438..62624785b2 100644 --- a/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx +++ b/packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx @@ -714,7 +714,7 @@ export default { ], } as Meta; -export const MultiselectComboboxInNarrowContainer = (): React.ReactNode => { +export const MultiselectComboboxInNarrowContainer = (): StoryFn => { const [inputValue, setInputValue] = React.useState(""); const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);