From 3bb0464bc0330fe1906e6cd4b17f8fa800c1f1bc Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Fri, 22 Sep 2023 11:48:15 +0200 Subject: [PATCH 01/12] overflow --- .../stories/TagGroup/TagGroupOverflow.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx index 0d35fcac44b801..c2b0ee262d3eb0 100644 --- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx @@ -150,7 +150,7 @@ export const WithOverflow = () => { return (
- + {defaultItems.map(({ value, ...rest }) => ( From caeccf6178b8f2feda5e87b378db0681e9cd2f4f Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Fri, 22 Sep 2023 12:28:18 +0200 Subject: [PATCH 02/12] dismiss --- .../InteractionTagDismiss.stories.tsx | 72 +++++++++-- .../stories/Tag/TagDismiss.stories.tsx | 73 +++++++++-- .../TagGroup/TagGroupDismiss.stories.tsx | 115 ++++++++++++++---- 3 files changed, 220 insertions(+), 40 deletions(-) diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx index 146783dbca0a57..b3a0b9a8fe5a28 100644 --- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; - +import { Button, makeStyles } from '@fluentui/react-components'; +import { usePrevious } from '@fluentui/react-utilities'; import { InteractionTag, InteractionTagPrimary, @@ -8,27 +9,80 @@ import { TagGroupProps, } from '@fluentui/react-tags-preview'; +const useStyles = makeStyles({ + container: { + display: 'flex', + flexDirection: 'column', + rowGap: '10px', + }, + resetButton: { + width: 'fit-content', + }, +}); + const initialTags = [ { value: '1', children: 'Tag 1' }, { value: '2', children: 'Tag 2' }, { value: '3', children: 'Tag 3' }, ]; +/** + * focus management for the reset button + */ +const useResetExample = (visibleTags: typeof initialTags) => { + const resetButtonRef = React.useRef(null); + const firstTagRef = React.useRef(null); + + React.useEffect(() => { + if (visibleTags.length === 0) { + resetButtonRef.current?.focus(); + } + }, [visibleTags.length]); + + const prevVisibleTags = usePrevious(visibleTags); + React.useEffect(() => { + if (visibleTags.length && prevVisibleTags?.length === 0) { + firstTagRef.current?.focus(); + } + }, [prevVisibleTags?.length, visibleTags.length]); + + return { firstTagRef, resetButtonRef }; +}; + export const Dismiss = () => { const [visibleTags, setVisibleTags] = React.useState(initialTags); const removeItem: TagGroupProps['onDismiss'] = (_e, { value }) => { setVisibleTags([...visibleTags].filter(tag => tag.value !== value)); }; + const resetItems = () => setVisibleTags(initialTags); + const { firstTagRef, resetButtonRef } = useResetExample(visibleTags); + + const styles = useStyles(); return ( - - {visibleTags.map(tag => ( - - {tag.children} - - - ))} - +
+ {visibleTags.length !== 0 && ( + + {visibleTags.map((tag, index) => ( + + + {tag.children} + + + + ))} + + )} + + +
); }; diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx index 840a4715ad5e4e..a3397c2d4fd07f 100644 --- a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx @@ -1,5 +1,18 @@ import * as React from 'react'; import { Tag, TagGroup, TagGroupProps } from '@fluentui/react-tags-preview'; +import { Button, makeStyles } from '@fluentui/react-components'; +import { usePrevious } from '@fluentui/react-utilities'; + +const useStyles = makeStyles({ + container: { + display: 'flex', + flexDirection: 'column', + rowGap: '10px', + }, + resetButton: { + width: 'fit-content', + }, +}); const initialTags = [ { value: '1', children: 'Tag 1' }, @@ -7,20 +20,66 @@ const initialTags = [ { value: '3', children: 'Tag 3' }, ]; +/** + * focus management for the reset button + */ +const useResetExample = (visibleTags: typeof initialTags) => { + const resetButtonRef = React.useRef(null); + const firstTagRef = React.useRef(null); + + React.useEffect(() => { + if (visibleTags.length === 0) { + resetButtonRef.current?.focus(); + } + }, [visibleTags.length]); + + const prevVisibleTags = usePrevious(visibleTags); + React.useEffect(() => { + if (visibleTags.length && prevVisibleTags?.length === 0) { + firstTagRef.current?.focus(); + } + }, [prevVisibleTags?.length, visibleTags.length]); + + return { firstTagRef, resetButtonRef }; +}; + export const Dismiss = () => { const [visibleTags, setVisibleTags] = React.useState(initialTags); const removeItem: TagGroupProps['onDismiss'] = (_e, { value }) => { setVisibleTags([...visibleTags].filter(tag => tag.value !== value)); }; + const resetItems = () => setVisibleTags(initialTags); + const { firstTagRef, resetButtonRef } = useResetExample(visibleTags); + + const styles = useStyles(); return ( - - {visibleTags.map(tag => ( - - {tag.children} - - ))} - +
+ {visibleTags.length !== 0 && ( + + {visibleTags.map((tag, index) => ( + + {tag.children} + + ))} + + )} + + +
); }; diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx index 26982e94ca6a95..e1032cf13a7c6f 100644 --- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx @@ -7,7 +7,19 @@ import { InteractionTagPrimary, InteractionTagSecondary, } from '@fluentui/react-tags-preview'; -import { makeStyles } from '@fluentui/react-components'; +import { Button, makeStyles } from '@fluentui/react-components'; +import { usePrevious } from '@fluentui/react-utilities'; + +const useStyles = makeStyles({ + container: { + display: 'flex', + flexDirection: 'column', + rowGap: '10px', + }, + resetButton: { + width: 'fit-content', + }, +}); const initialTags = [ { value: '1', children: 'Tag 1' }, @@ -15,20 +27,65 @@ const initialTags = [ { value: '3', children: 'Tag 3' }, ]; +/** + * focus management for the reset button + */ +const useResetExample = (visibleTags: typeof initialTags) => { + const resetButtonRef = React.useRef(null); + const firstTagRef = React.useRef(null); + + React.useEffect(() => { + if (visibleTags.length === 0) { + resetButtonRef.current?.focus(); + } + }, [visibleTags.length]); + + const prevVisibleTags = usePrevious(visibleTags); + React.useEffect(() => { + if (visibleTags.length && prevVisibleTags?.length === 0) { + firstTagRef.current?.focus(); + } + }, [prevVisibleTags?.length, visibleTags.length]); + + return { firstTagRef, resetButtonRef }; +}; + const DismissWithTags = () => { const [visibleTags, setVisibleTags] = React.useState(initialTags); const removeItem: TagGroupProps['onDismiss'] = (_e, { value }) => { setVisibleTags([...visibleTags].filter(tag => tag.value !== value)); }; + const resetItems = () => setVisibleTags(initialTags); + const { firstTagRef, resetButtonRef } = useResetExample(visibleTags); + + const styles = useStyles(); return ( - - {visibleTags.map(tag => ( - - {tag.children} - - ))} - + <> + {visibleTags.length !== 0 && ( + + {visibleTags.map((tag, index) => ( + + {tag.children} + + ))} + + )} + + ); }; @@ -37,27 +94,37 @@ const DismissWithInteractionTags = () => { const removeItem: TagGroupProps['onDismiss'] = (_e, { value }) => { setVisibleTags([...visibleTags].filter(tag => tag.value !== value)); }; + const resetItems = () => setVisibleTags(initialTags); + const { firstTagRef, resetButtonRef } = useResetExample(visibleTags); + + const styles = useStyles(); return ( - - {visibleTags.map(tag => ( - - {tag.children} - - - ))} - + <> + {visibleTags.length !== 0 && ( + + {visibleTags.map((tag, index) => ( + + + {tag.children} + + + + ))} + + )} + + ); }; -const useStyles = makeStyles({ - container: { - display: 'flex', - flexDirection: 'column', - rowGap: '10px', - }, -}); - export const Dismiss = () => { const styles = useStyles(); return ( From ec30af1a913496d043e606035173473bed3a0af2 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Fri, 22 Sep 2023 13:51:54 +0200 Subject: [PATCH 03/12] cleanup --- .../InteractionTagDismiss.stories.tsx | 18 +++++++--------- .../stories/Tag/TagDismiss.stories.tsx | 19 +++++++---------- .../TagGroup/TagGroupDismiss.stories.tsx | 21 ++++++++----------- 3 files changed, 25 insertions(+), 33 deletions(-) diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx index b3a0b9a8fe5a28..5a7ab1ad938f98 100644 --- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx @@ -29,22 +29,20 @@ const initialTags = [ /** * focus management for the reset button */ -const useResetExample = (visibleTags: typeof initialTags) => { +const useResetExample = (visibleTagsLength: number) => { const resetButtonRef = React.useRef(null); const firstTagRef = React.useRef(null); + const prevVisibleTagsLengthRef = React.useRef(visibleTagsLength); React.useEffect(() => { - if (visibleTags.length === 0) { + if (visibleTagsLength === 0) { resetButtonRef.current?.focus(); - } - }, [visibleTags.length]); - - const prevVisibleTags = usePrevious(visibleTags); - React.useEffect(() => { - if (visibleTags.length && prevVisibleTags?.length === 0) { + } else if (prevVisibleTagsLengthRef.current === 0) { firstTagRef.current?.focus(); } - }, [prevVisibleTags?.length, visibleTags.length]); + + prevVisibleTagsLengthRef.current = visibleTagsLength; + }, [visibleTagsLength]); return { firstTagRef, resetButtonRef }; }; @@ -55,7 +53,7 @@ export const Dismiss = () => { setVisibleTags([...visibleTags].filter(tag => tag.value !== value)); }; const resetItems = () => setVisibleTags(initialTags); - const { firstTagRef, resetButtonRef } = useResetExample(visibleTags); + const { firstTagRef, resetButtonRef } = useResetExample(visibleTags.length); const styles = useStyles(); diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx index a3397c2d4fd07f..18aa1921118a8f 100644 --- a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { Tag, TagGroup, TagGroupProps } from '@fluentui/react-tags-preview'; import { Button, makeStyles } from '@fluentui/react-components'; -import { usePrevious } from '@fluentui/react-utilities'; const useStyles = makeStyles({ container: { @@ -23,22 +22,20 @@ const initialTags = [ /** * focus management for the reset button */ -const useResetExample = (visibleTags: typeof initialTags) => { +const useResetExample = (visibleTagsLength: number) => { const resetButtonRef = React.useRef(null); const firstTagRef = React.useRef(null); + const prevVisibleTagsLengthRef = React.useRef(visibleTagsLength); React.useEffect(() => { - if (visibleTags.length === 0) { + if (visibleTagsLength === 0) { resetButtonRef.current?.focus(); - } - }, [visibleTags.length]); - - const prevVisibleTags = usePrevious(visibleTags); - React.useEffect(() => { - if (visibleTags.length && prevVisibleTags?.length === 0) { + } else if (prevVisibleTagsLengthRef.current === 0) { firstTagRef.current?.focus(); } - }, [prevVisibleTags?.length, visibleTags.length]); + + prevVisibleTagsLengthRef.current = visibleTagsLength; + }, [visibleTagsLength]); return { firstTagRef, resetButtonRef }; }; @@ -49,7 +46,7 @@ export const Dismiss = () => { setVisibleTags([...visibleTags].filter(tag => tag.value !== value)); }; const resetItems = () => setVisibleTags(initialTags); - const { firstTagRef, resetButtonRef } = useResetExample(visibleTags); + const { firstTagRef, resetButtonRef } = useResetExample(visibleTags.length); const styles = useStyles(); diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx index e1032cf13a7c6f..c9c975ebbb70e7 100644 --- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx @@ -8,7 +8,6 @@ import { InteractionTagSecondary, } from '@fluentui/react-tags-preview'; import { Button, makeStyles } from '@fluentui/react-components'; -import { usePrevious } from '@fluentui/react-utilities'; const useStyles = makeStyles({ container: { @@ -30,22 +29,20 @@ const initialTags = [ /** * focus management for the reset button */ -const useResetExample = (visibleTags: typeof initialTags) => { +const useResetExample = (visibleTagsLength: number) => { const resetButtonRef = React.useRef(null); const firstTagRef = React.useRef(null); + const prevVisibleTagsLengthRef = React.useRef(visibleTagsLength); React.useEffect(() => { - if (visibleTags.length === 0) { + if (visibleTagsLength === 0) { resetButtonRef.current?.focus(); - } - }, [visibleTags.length]); - - const prevVisibleTags = usePrevious(visibleTags); - React.useEffect(() => { - if (visibleTags.length && prevVisibleTags?.length === 0) { + } else if (prevVisibleTagsLengthRef.current === 0) { firstTagRef.current?.focus(); } - }, [prevVisibleTags?.length, visibleTags.length]); + + prevVisibleTagsLengthRef.current = visibleTagsLength; + }, [visibleTagsLength]); return { firstTagRef, resetButtonRef }; }; @@ -56,7 +53,7 @@ const DismissWithTags = () => { setVisibleTags([...visibleTags].filter(tag => tag.value !== value)); }; const resetItems = () => setVisibleTags(initialTags); - const { firstTagRef, resetButtonRef } = useResetExample(visibleTags); + const { firstTagRef, resetButtonRef } = useResetExample(visibleTags.length); const styles = useStyles(); @@ -95,7 +92,7 @@ const DismissWithInteractionTags = () => { setVisibleTags([...visibleTags].filter(tag => tag.value !== value)); }; const resetItems = () => setVisibleTags(initialTags); - const { firstTagRef, resetButtonRef } = useResetExample(visibleTags); + const { firstTagRef, resetButtonRef } = useResetExample(visibleTags.length); const styles = useStyles(); From 97e9ee8044d7f93bdbe9fd5501b4a89e681f50d8 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Fri, 22 Sep 2023 14:33:58 +0200 Subject: [PATCH 04/12] crud --- .../stories/InteractionTag/InteractionTagDismiss.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx index 5a7ab1ad938f98..387ce5d09be53a 100644 --- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { Button, makeStyles } from '@fluentui/react-components'; -import { usePrevious } from '@fluentui/react-utilities'; import { InteractionTag, InteractionTagPrimary, From 6b330f8e645155f143393fb79c1ccdbb1c99b182 Mon Sep 17 00:00:00 2001 From: Amber Date: Mon, 25 Sep 2023 11:59:56 +0200 Subject: [PATCH 05/12] Update packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov --- .../stories/InteractionTag/InteractionTagDismiss.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx index 387ce5d09be53a..390db696f51610 100644 --- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx @@ -76,6 +76,7 @@ export const Dismiss = () => { ref={resetButtonRef} disabled={visibleTags.length !== 0} className={styles.resetButton} + size="small" > Reset Dismiss Example From 3e97658acdf0a3aa039adbf8d9c4a40a6a843f87 Mon Sep 17 00:00:00 2001 From: Amber Date: Mon, 25 Sep 2023 12:00:04 +0200 Subject: [PATCH 06/12] Update packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov --- .../stories/InteractionTag/InteractionTagDismiss.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx index 390db696f51610..45a1e15cc3bc79 100644 --- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx @@ -78,7 +78,7 @@ export const Dismiss = () => { className={styles.resetButton} size="small" > - Reset Dismiss Example + Reset the example
); From 9b28b5ac8b6863a56f325d0f0b6531d26bd0c615 Mon Sep 17 00:00:00 2001 From: Amber Date: Mon, 25 Sep 2023 12:00:13 +0200 Subject: [PATCH 07/12] Update packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov --- .../react-tags-preview/stories/Tag/TagDismiss.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx index 18aa1921118a8f..1adb9e8447083e 100644 --- a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx @@ -74,7 +74,7 @@ export const Dismiss = () => { disabled={visibleTags.length !== 0} className={styles.resetButton} > - Reset Dismiss Example + Reset the example ); From fe62f173865d0523f2decadb4d6ebd998d0c0335 Mon Sep 17 00:00:00 2001 From: Amber Date: Mon, 25 Sep 2023 12:00:21 +0200 Subject: [PATCH 08/12] Update packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov --- .../react-tags-preview/stories/Tag/TagDismiss.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx index 1adb9e8447083e..a485c037a5e1a8 100644 --- a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx @@ -73,6 +73,7 @@ export const Dismiss = () => { ref={resetButtonRef} disabled={visibleTags.length !== 0} className={styles.resetButton} + size="small" > Reset the example From f9cef1e25a21df1e2a5d16a76f6acdbaa17ffb40 Mon Sep 17 00:00:00 2001 From: Amber Date: Mon, 25 Sep 2023 12:00:28 +0200 Subject: [PATCH 09/12] Update packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov --- .../stories/TagGroup/TagGroupDismiss.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx index c9c975ebbb70e7..9ce18379b65a84 100644 --- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx @@ -80,7 +80,7 @@ const DismissWithTags = () => { disabled={visibleTags.length !== 0} className={styles.resetButton} > - Reset Dismiss Tag Example + Reset the example ); From 40253f006d53175ab655430fa66948d8d2146aa5 Mon Sep 17 00:00:00 2001 From: Amber Date: Mon, 25 Sep 2023 12:00:35 +0200 Subject: [PATCH 10/12] Update packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov --- .../stories/TagGroup/TagGroupDismiss.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx index 9ce18379b65a84..afcefe8cd814f6 100644 --- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx @@ -116,7 +116,7 @@ const DismissWithInteractionTags = () => { disabled={visibleTags.length !== 0} className={styles.resetButton} > - Reset Dismiss InteractionTag Example + Reset the example ); From a6b240db0cf5835fd8980d93613910f485bc27c4 Mon Sep 17 00:00:00 2001 From: Amber Date: Mon, 25 Sep 2023 12:00:41 +0200 Subject: [PATCH 11/12] Update packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov --- .../stories/TagGroup/TagGroupDismiss.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx index afcefe8cd814f6..a620b30b203558 100644 --- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx @@ -79,6 +79,7 @@ const DismissWithTags = () => { ref={resetButtonRef} disabled={visibleTags.length !== 0} className={styles.resetButton} + size="small" > Reset the example From 9dd4255d12fcff5de8afd7e207c7875914d8e63b Mon Sep 17 00:00:00 2001 From: Amber Date: Mon, 25 Sep 2023 12:00:48 +0200 Subject: [PATCH 12/12] Update packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov --- .../stories/TagGroup/TagGroupDismiss.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx index a620b30b203558..779d9bbe9f11b6 100644 --- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx +++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx @@ -116,6 +116,7 @@ const DismissWithInteractionTags = () => { ref={resetButtonRef} disabled={visibleTags.length !== 0} className={styles.resetButton} + size="small" > Reset the example