docs(react-drawer): improve drawer stories examples (#28283)

microsoft · Jun 22, 2023 · 3a08754 · 3a08754
1 parent e968c73
commit 3a08754
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 51 deletions.
diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerCustomSize.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerCustomSize.stories.tsx
@@ -54,7 +54,7 @@ export const CustomSize = () => {
 
       <div className={styles.main}>
         <Button appearance="primary" onClick={() => setOpen(true)}>
-          Toggle Drawer
+          Open Drawer
         </Button>
 
         <div className={styles.field}>

diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerInline.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerInline.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DrawerBody, DrawerHeader, DrawerHeaderTitle, DrawerInline } from '@fluentui/react-drawer';
-import { Button, makeStyles, shorthands } from '@fluentui/react-components';
+import { Button, makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import { Dismiss24Regular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
@@ -18,6 +18,7 @@ const useStyles = makeStyles({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'flex-start',
+    columnGap: tokens.spacingHorizontalXS,
   },
 });
 

diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerOverlay.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerOverlay.stories.tsx
@@ -30,7 +30,7 @@ export const Overlay = () => {
       </DrawerOverlay>
 
       <Button appearance="primary" onClick={() => setIsOpen(true)}>
-        Toggle
+        Open Drawer
       </Button>
     </div>
   );

diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerOverlayNoModal.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerOverlayNoModal.stories.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { DrawerBody, DrawerHeader, DrawerHeaderTitle, DrawerOverlay } from '@fluentui/react-drawer';
+import { Button } from '@fluentui/react-components';
+import { Dismiss24Regular } from '@fluentui/react-icons';
+
+export const OverlayNoModal = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div>
+      <DrawerOverlay modalType="non-modal" open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
+        <DrawerHeader>
+          <DrawerHeaderTitle
+            action={
+              <Button
+                appearance="subtle"
+                aria-label="Close"
+                icon={<Dismiss24Regular />}
+                onClick={() => setIsOpen(false)}
+              />
+            }
+          >
+            Overlay Drawer
+          </DrawerHeaderTitle>
+        </DrawerHeader>
+
+        <DrawerBody>
+          <p>Drawer content</p>
+        </DrawerBody>
+      </DrawerOverlay>
+
+      <Button appearance="primary" onClick={() => setIsOpen(!isOpen)}>
+        Toggle
+      </Button>
+    </div>
+  );
+};
diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerPosition.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerPosition.stories.tsx
@@ -1,27 +1,48 @@
 import * as React from 'react';
-import { DrawerBody, DrawerHeader, DrawerHeaderTitle, DrawerOverlay } from '@fluentui/react-drawer';
-import { Button } from '@fluentui/react-components';
+import { DrawerBody, DrawerHeader, DrawerHeaderTitle, DrawerOverlay, DrawerProps } from '@fluentui/react-drawer';
+import { Button, makeStyles, tokens } from '@fluentui/react-components';
 import { Dismiss24Regular } from '@fluentui/react-icons';
 
+const useStyles = makeStyles({
+  content: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    columnGap: tokens.spacingHorizontalXS,
+  },
+});
+
 export const Position = () => {
-  const [leftOpen, setLeftOpen] = React.useState(false);
-  const [rightOpen, setRightOpen] = React.useState(false);
+  const styles = useStyles();
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [position, setPosition] = React.useState<DrawerProps['position']>('left');
+
+  const onClickLeftButton = React.useCallback(() => {
+    setPosition('left');
+    setIsOpen(true);
+  }, []);
+
+  const onClickRightButton = React.useCallback(() => {
+    setPosition('right');
+    setIsOpen(true);
+  }, []);
 
   return (
     <div>
-      <DrawerOverlay position="left" open={leftOpen} onOpenChange={(_, { open }) => setLeftOpen(open)}>
+      <DrawerOverlay position={position} open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
         <DrawerHeader>
           <DrawerHeaderTitle
             action={
               <Button
                 appearance="subtle"
                 aria-label="Close"
                 icon={<Dismiss24Regular />}
-                onClick={() => setLeftOpen(false)}
+                onClick={() => setIsOpen(false)}
               />
             }
           >
-            Left Drawer
+            {position === 'left' ? 'Left' : 'Right'} Drawer
           </DrawerHeaderTitle>
         </DrawerHeader>
 
@@ -30,34 +51,15 @@ export const Position = () => {
         </DrawerBody>
       </DrawerOverlay>
 
-      <Button appearance="primary" onClick={() => setLeftOpen(true)}>
-        Toggle left
-      </Button>
-
-      <Button appearance="primary" onClick={() => setRightOpen(true)}>
-        Toggle right
-      </Button>
-
-      <DrawerOverlay position="right" open={rightOpen} onOpenChange={(_, { open }) => setRightOpen(open)}>
-        <DrawerHeader>
-          <DrawerHeaderTitle
-            action={
-              <Button
-                appearance="subtle"
-                aria-label="Close"
-                icon={<Dismiss24Regular />}
-                onClick={() => setRightOpen(false)}
-              />
-            }
-          >
-            Right Drawer
-          </DrawerHeaderTitle>
-        </DrawerHeader>
+      <div className={styles.content}>
+        <Button appearance="primary" onClick={onClickLeftButton}>
+          Open left
+        </Button>
 
-        <DrawerBody>
-          <p>Drawer content</p>
-        </DrawerBody>
-      </DrawerOverlay>
+        <Button appearance="primary" onClick={onClickRightButton}>
+          Open right
+        </Button>
+      </div>
     </div>
   );
 };
diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerPreventClose.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerPreventClose.stories.tsx
@@ -30,7 +30,7 @@ export const PreventClose = () => {
       </DrawerOverlay>
 
       <Button appearance="primary" onClick={() => setOpen(true)}>
-        Toggle
+        Open Drawer
       </Button>
     </div>
   );

diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerResizable.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerResizable.stories.tsx
@@ -63,6 +63,7 @@ export const Resizable = () => {
   React.useEffect(() => {
     window.addEventListener('mousemove', resize);
     window.addEventListener('mouseup', stopResizing);
+
     return () => {
       window.removeEventListener('mousemove', resize);
       window.removeEventListener('mouseup', stopResizing);

diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerResponsive.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerResponsive.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { DrawerBody, DrawerHeader, DrawerHeaderTitle, Drawer, DrawerProps } from '@fluentui/react-drawer';
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { Button, makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { Dismiss24Regular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
   root: {
@@ -15,6 +16,8 @@ const useStyles = makeStyles({
   content: {
     ...shorthands.margin(tokens.spacingVerticalXL, tokens.spacingHorizontalXL),
     ...shorthands.flex(1),
+
+    gridRowGap: tokens.spacingVerticalXXL,
   },
 });
 
@@ -26,29 +29,50 @@ export const Responsive = () => {
   const [isOpen, setIsOpen] = React.useState(true);
   const [type, setType] = React.useState<DrawerType>('inline');
 
+  const onMediaQueryChange = React.useCallback(({ matches }) => setType(matches ? 'overlay' : 'inline'), [setType]);
+
   React.useEffect(() => {
     const match = window.matchMedia('(max-width: 720px)');
 
     if (match.matches) {
       setType('overlay');
     }
 
-    match.addEventListener('change', ({ matches }) => setType(matches ? 'overlay' : 'inline'));
-  }, []);
+    match.addEventListener('change', onMediaQueryChange);
+
+    return () => match.removeEventListener('change', onMediaQueryChange);
+  }, [onMediaQueryChange]);
 
   return (
     <div className={styles.root}>
-      <p className={styles.content}>Resize the window to see the change</p>
-
-      <Drawer type={type} separator position="right" open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
+      <Drawer type={type} separator position="left" open={isOpen} onOpenChange={(_, { open }) => setIsOpen(open)}>
         <DrawerHeader>
-          <DrawerHeaderTitle>Responsive Drawer</DrawerHeaderTitle>
+          <DrawerHeaderTitle
+            action={
+              <Button
+                appearance="subtle"
+                aria-label="Close"
+                icon={<Dismiss24Regular />}
+                onClick={() => setIsOpen(false)}
+              />
+            }
+          >
+            Responsive Drawer
+          </DrawerHeaderTitle>
         </DrawerHeader>
 
         <DrawerBody>
           <p>Drawer content</p>
         </DrawerBody>
       </Drawer>
+
+      <div className={styles.content}>
+        <Button appearance="primary" onClick={() => setIsOpen(!isOpen)}>
+          Toggle
+        </Button>
+
+        <p>Resize the window to see the change</p>
+      </div>
     </div>
   );
 };
diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerSeparator.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerSeparator.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DrawerBody, DrawerHeader, DrawerHeaderTitle, DrawerInline } from '@fluentui/react-drawer';
-import { Button, makeStyles, shorthands } from '@fluentui/react-components';
+import { Button, makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import { Dismiss24Regular } from '@fluentui/react-icons';
 
 const useStyles = makeStyles({
@@ -18,6 +18,7 @@ const useStyles = makeStyles({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'flex-start',
+    columnGap: tokens.spacingHorizontalXS,
   },
 });
 
@@ -29,7 +30,7 @@ export const Separator = () => {
 
   return (
     <div className={styles.root}>
-      <DrawerInline position="right" open={leftOpen}>
+      <DrawerInline position="left" open={leftOpen}>
         <DrawerHeader>
           <DrawerHeaderTitle
             action={

diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerSize.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerSize.stories.tsx
@@ -57,7 +57,7 @@ export const Size = () => {
 
       <div className={styles.main}>
         <Button appearance="primary" onClick={() => setOpen(true)}>
-          Toggle Drawer
+          Open Drawer
         </Button>
 
         <div className={styles.field}>

diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerWithNavigation.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/DrawerWithNavigation.stories.tsx
@@ -53,7 +53,7 @@ export const WithNavigation = () => {
       </DrawerOverlay>
 
       <Button appearance="primary" onClick={() => setIsOpen(true)}>
-        Toggle
+        Open Drawer
       </Button>
     </div>
   );

diff --git a/packages/react-components/react-drawer/stories/Drawer/index.stories.tsx b/packages/react-components/react-drawer/stories/Drawer/index.stories.tsx
@@ -13,15 +13,16 @@ import previewMd from './DrawerPreview.md';
 
 export { Default } from './DrawerDefault.stories';
 export { Overlay } from './DrawerOverlay.stories';
+export { OverlayNoModal } from './DrawerOverlayNoModal.stories';
 export { Inline } from './DrawerInline.stories';
 export { Position } from './DrawerPosition.stories';
 export { Size } from './DrawerSize.stories';
 export { CustomSize } from './DrawerCustomSize.stories';
 export { Separator } from './DrawerSeparator.stories';
-export { AlwaysOpen } from './DrawerAlwaysOpen.stories';
-export { PreventClose } from './DrawerPreventClose.stories';
 export { WithNavigation } from './DrawerWithNavigation.stories';
 export { WithScroll } from './DrawerWithScroll.stories';
+export { AlwaysOpen } from './DrawerAlwaysOpen.stories';
+export { PreventClose } from './DrawerPreventClose.stories';
 export { Responsive } from './DrawerResponsive.stories';
 export { Resizable } from './DrawerResizable.stories';