chore(react-tags-preview): update dismiss and overflow story (#29260)

* overflow * dismiss * cleanup * crud * Update packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * Update packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * Update packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * Update packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * Update packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * Update packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * Update packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * Update packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> --------- Co-authored-by: Oleksandr Fediashov <[email protected]>
microsoft · Sep 25, 2023 · 9512bd6 · 9512bd6
1 parent ccc380c
commit 9512bd6
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 41 deletions.
diff --git a/...ct-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx b/...ct-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-
+import { Button, makeStyles } from '@fluentui/react-components';
 import {
   InteractionTag,
   InteractionTagPrimary,
@@ -8,27 +8,79 @@ 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 = (visibleTagsLength: number) => {
+  const resetButtonRef = React.useRef<HTMLButtonElement>(null);
+  const firstTagRef = React.useRef<HTMLButtonElement>(null);
+
+  const prevVisibleTagsLengthRef = React.useRef<number>(visibleTagsLength);
+  React.useEffect(() => {
+    if (visibleTagsLength === 0) {
+      resetButtonRef.current?.focus();
+    } else if (prevVisibleTagsLengthRef.current === 0) {
+      firstTagRef.current?.focus();
+    }
+
+    prevVisibleTagsLengthRef.current = visibleTagsLength;
+  }, [visibleTagsLength]);
+
+  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.length);
+
+  const styles = useStyles();
 
   return (
-    <TagGroup onDismiss={removeItem} aria-label="Dismiss example">
-      {visibleTags.map(tag => (
-        <InteractionTag value={tag.value} key={tag.value}>
-          <InteractionTagPrimary hasSecondaryAction>{tag.children}</InteractionTagPrimary>
-          <InteractionTagSecondary aria-label="remove" />
-        </InteractionTag>
-      ))}
-    </TagGroup>
+    <div className={styles.container}>
+      {visibleTags.length !== 0 && (
+        <TagGroup onDismiss={removeItem} aria-label="Dismiss example">
+          {visibleTags.map((tag, index) => (
+            <InteractionTag value={tag.value} key={tag.value}>
+              <InteractionTagPrimary hasSecondaryAction ref={index === 0 ? firstTagRef : null}>
+                {tag.children}
+              </InteractionTagPrimary>
+              <InteractionTagSecondary aria-label="remove" />
+            </InteractionTag>
+          ))}
+        </TagGroup>
+      )}
+
+      <Button
+        onClick={resetItems}
+        ref={resetButtonRef}
+        disabled={visibleTags.length !== 0}
+        className={styles.resetButton}
+        size="small"
+      >
+        Reset the example
+      </Button>
+    </div>
   );
 };
 

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
@@ -1,26 +1,83 @@
 import * as React from 'react';
 import { Tag, TagGroup, TagGroupProps } from '@fluentui/react-tags-preview';
+import { Button, makeStyles } from '@fluentui/react-components';
+
+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 = (visibleTagsLength: number) => {
+  const resetButtonRef = React.useRef<HTMLButtonElement>(null);
+  const firstTagRef = React.useRef<HTMLButtonElement>(null);
+
+  const prevVisibleTagsLengthRef = React.useRef<number>(visibleTagsLength);
+  React.useEffect(() => {
+    if (visibleTagsLength === 0) {
+      resetButtonRef.current?.focus();
+    } else if (prevVisibleTagsLengthRef.current === 0) {
+      firstTagRef.current?.focus();
+    }
+
+    prevVisibleTagsLengthRef.current = visibleTagsLength;
+  }, [visibleTagsLength]);
+
+  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.length);
+
+  const styles = useStyles();
 
   return (
-    <TagGroup onDismiss={removeItem} aria-label="Dismiss example">
-      {visibleTags.map(tag => (
-        <Tag dismissible dismissIcon={{ 'aria-label': 'remove' }} value={tag.value} key={tag.value}>
-          {tag.children}
-        </Tag>
-      ))}
-    </TagGroup>
+    <div className={styles.container}>
+      {visibleTags.length !== 0 && (
+        <TagGroup onDismiss={removeItem} aria-label="Dismiss example">
+          {visibleTags.map((tag, index) => (
+            <Tag
+              dismissible
+              dismissIcon={{ 'aria-label': 'remove' }}
+              value={tag.value}
+              key={tag.value}
+              ref={index === 0 ? firstTagRef : null}
+            >
+              {tag.children}
+            </Tag>
+          ))}
+        </TagGroup>
+      )}
+
+      <Button
+        onClick={resetItems}
+        ref={resetButtonRef}
+        disabled={visibleTags.length !== 0}
+        className={styles.resetButton}
+        size="small"
+      >
+        Reset the example
+      </Button>
+    </div>
   );
 };
 

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
@@ -7,28 +7,83 @@ import {
   InteractionTagPrimary,
   InteractionTagSecondary,
 } from '@fluentui/react-tags-preview';
-import { makeStyles } from '@fluentui/react-components';
+import { Button, makeStyles } from '@fluentui/react-components';
+
+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 = (visibleTagsLength: number) => {
+  const resetButtonRef = React.useRef<HTMLButtonElement>(null);
+  const firstTagRef = React.useRef<HTMLButtonElement>(null);
+
+  const prevVisibleTagsLengthRef = React.useRef<number>(visibleTagsLength);
+  React.useEffect(() => {
+    if (visibleTagsLength === 0) {
+      resetButtonRef.current?.focus();
+    } else if (prevVisibleTagsLengthRef.current === 0) {
+      firstTagRef.current?.focus();
+    }
+
+    prevVisibleTagsLengthRef.current = visibleTagsLength;
+  }, [visibleTagsLength]);
+
+  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.length);
+
+  const styles = useStyles();
 
   return (
-    <TagGroup onDismiss={removeItem} aria-label="TagGroup example with dismissible Tags">
-      {visibleTags.map(tag => (
-        <Tag dismissible dismissIcon={{ 'aria-label': 'remove' }} value={tag.value} key={tag.value}>
-          {tag.children}
-        </Tag>
-      ))}
-    </TagGroup>
+    <>
+      {visibleTags.length !== 0 && (
+        <TagGroup onDismiss={removeItem} aria-label="TagGroup example with dismissible Tags">
+          {visibleTags.map((tag, index) => (
+            <Tag
+              dismissible
+              dismissIcon={{ 'aria-label': 'remove' }}
+              value={tag.value}
+              key={tag.value}
+              ref={index === 0 ? firstTagRef : null}
+            >
+              {tag.children}
+            </Tag>
+          ))}
+        </TagGroup>
+      )}
+      <Button
+        onClick={resetItems}
+        ref={resetButtonRef}
+        disabled={visibleTags.length !== 0}
+        className={styles.resetButton}
+        size="small"
+      >
+        Reset the example
+      </Button>
+    </>
   );
 };
 
@@ -37,27 +92,38 @@ const DismissWithInteractionTags = () => {
   const removeItem: TagGroupProps['onDismiss'] = (_e, { value }) => {
     setVisibleTags([...visibleTags].filter(tag => tag.value !== value));
   };
+  const resetItems = () => setVisibleTags(initialTags);
+  const { firstTagRef, resetButtonRef } = useResetExample(visibleTags.length);
+
+  const styles = useStyles();
 
   return (
-    <TagGroup onDismiss={removeItem} aria-label="Dismiss example">
-      {visibleTags.map(tag => (
-        <InteractionTag value={tag.value} key={tag.value}>
-          <InteractionTagPrimary hasSecondaryAction>{tag.children}</InteractionTagPrimary>
-          <InteractionTagSecondary aria-label="remove" />
-        </InteractionTag>
-      ))}
-    </TagGroup>
+    <>
+      {visibleTags.length !== 0 && (
+        <TagGroup onDismiss={removeItem} aria-label="Dismiss example">
+          {visibleTags.map((tag, index) => (
+            <InteractionTag value={tag.value} key={tag.value}>
+              <InteractionTagPrimary hasSecondaryAction ref={index === 0 ? firstTagRef : null}>
+                {tag.children}
+              </InteractionTagPrimary>
+              <InteractionTagSecondary aria-label="remove" />
+            </InteractionTag>
+          ))}
+        </TagGroup>
+      )}
+      <Button
+        onClick={resetItems}
+        ref={resetButtonRef}
+        disabled={visibleTags.length !== 0}
+        className={styles.resetButton}
+        size="small"
+      >
+        Reset the example
+      </Button>
+    </>
   );
 };
 
-const useStyles = makeStyles({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    rowGap: '10px',
-  },
-});
-
 export const Dismiss = () => {
   const styles = useStyles();
   return (

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
@@ -150,7 +150,7 @@ export const WithOverflow = () => {
 
   return (
     <div className={styles.container}>
-      <Overflow minimumVisible={2} padding={30}>
+      <Overflow minimumVisible={2} padding={60}>
         <TagGroup className={styles.tagGroup} aria-label="Overflow example">
           {defaultItems.map(({ value, ...rest }) => (
             <OverflowItem key={value} id={value!}>