fix(react-drawer): InlineDrawer example fixes (microsoft#33192)

Co-authored-by: Marcos Moura <[email protected]>
marcosmoura · Nov 7, 2024 · 0e1377f · 0e1377f
1 parent 0436b78
commit 0e1377f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 25 deletions.
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerBestPractices.md b/packages/react-components/react-drawer/stories/src/Drawer/DrawerBestPractices.md
@@ -13,4 +13,4 @@
 - `OverlayDrawer`: <br>Please refer to the Dialog component to understand the accessibility recommendations and implications.
 - `InlineDrawer`: <br>
   **Semantics**: Renders a plain div and do not imply any accessibility semantics by default. It accepts all aria attributes and it should be customized depending on its context within a page. Consider using `role="region"` for large page-level drawers. <br><br>
-  **Focus**: If the `InlineDrawer` has a trigger and can be closed, use the `useRestoreFocusTarget` and `useRestoreFocusSource` hooks to handle focus restoration as shown in our Default and Inline examples.
+  **Focus**: If the `InlineDrawer` has a trigger and can be closed, use the `useRestoreFocusTarget` and `useRestoreFocusSource` hooks to handle focus restoration as shown in our Default and Inline examples. Additionally, the `InlineDrawer` does not take focus by default when it is opened; if this functionality is needed, it should be handled manually.
diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.stories.tsx
@@ -14,6 +14,7 @@ import {
   useId,
   useRestoreFocusSource,
   useRestoreFocusTarget,
+  ToggleButton,
 } from '@fluentui/react-components';
 import { Dismiss24Regular } from '@fluentui/react-icons';
 
@@ -87,9 +88,20 @@ export const Default = () => {
       </Drawer>
 
       <div className={styles.content}>
-        <Button {...restoreFocusTargetAttributes} appearance="primary" onClick={() => setIsOpen(!isOpen)}>
-          {type === 'inline' ? 'Toggle' : 'Open'}
-        </Button>
+        {type === 'inline' ? (
+          <ToggleButton
+            {...restoreFocusTargetAttributes}
+            appearance="primary"
+            onClick={() => setIsOpen(!isOpen)}
+            checked={isOpen}
+          >
+            Toggle
+          </ToggleButton>
+        ) : (
+          <Button {...restoreFocusTargetAttributes} appearance="primary" onClick={() => setIsOpen(!isOpen)}>
+            Open
+          </Button>
+        )}
 
         <div className={styles.field}>
           <Label id={labelId}>Type</Label>

diff --git a/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx b/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx
@@ -11,6 +11,7 @@ import {
   mergeClasses,
   useRestoreFocusSource,
   useRestoreFocusTarget,
+  ToggleButton,
 } from '@fluentui/react-components';
 import { Dismiss24Regular } from '@fluentui/react-icons';
 
@@ -60,16 +61,6 @@ type DrawerInlineExampleProps = InlineDrawerProps & {
 
 const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
-const getButtonText = (open: boolean, position: Required<InlineDrawerProps>['position']) => {
-  const buttonText = open ? 'Close' : 'Open';
-
-  if (['start', 'end', 'bottom'].includes(position)) {
-    return `${buttonText} ${position}`;
-  }
-
-  return `${buttonText} drawer`;
-};
-
 const DrawerInlineExample: React.FC<DrawerInlineExampleProps> = ({ setOpen, ...props }) => {
   const restoreFocusSourceAttributes = useRestoreFocusSource();
 
@@ -108,17 +99,32 @@ export const Inline = () => {
 
         <div className={styles.content}>
           <div className={styles.buttons}>
-            <Button {...restoreFocusTargetAttributes} appearance="primary" onClick={() => setStartOpen(!startOpen)}>
-              {getButtonText(startOpen, 'start')}
-            </Button>
-
-            <Button {...restoreFocusTargetAttributes} appearance="primary" onClick={() => setEndOpen(!endOpen)}>
-              {getButtonText(endOpen, 'end')}
-            </Button>
-
-            <Button {...restoreFocusTargetAttributes} appearance="primary" onClick={() => setBottomOpen(!bottomOpen)}>
-              {getButtonText(bottomOpen, 'bottom')}
-            </Button>
+            <ToggleButton
+              {...restoreFocusTargetAttributes}
+              appearance="primary"
+              onClick={() => setStartOpen(!startOpen)}
+              checked={startOpen}
+            >
+              Toggle start
+            </ToggleButton>
+
+            <ToggleButton
+              {...restoreFocusTargetAttributes}
+              appearance="primary"
+              onClick={() => setEndOpen(!endOpen)}
+              checked={endOpen}
+            >
+              Toggle end
+            </ToggleButton>
+
+            <ToggleButton
+              {...restoreFocusTargetAttributes}
+              appearance="primary"
+              onClick={() => setBottomOpen(!bottomOpen)}
+              checked={bottomOpen}
+            >
+              Toggle bottom
+            </ToggleButton>
           </div>
 
           {Array.from({ length: 100 }, (_, i) => (