fix: Dialog story, proper use of Dialog and DialogTrigger

traefik · Dec 10, 2021 · e31bf0d · e31bf0d
1 parent 4f9d0e1
commit e31bf0d
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/components/Dialog/Dialog.stories.tsx b/components/Dialog/Dialog.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Dialog, DialogContent } from './Dialog';
+import { Dialog, DialogContent, DialogTrigger, DialogClose } from './Dialog';
 import { Text } from '../Text';
 import { useState } from 'react';
 import { Button } from '../Button';
@@ -39,8 +39,10 @@ export const Basic: ComponentStory<any> = (args) => {
   const [open, setOpen] = useState(false);
 
   return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open dialog</Button>
+    <Dialog open={open} onOpenChange={(isOpen) => setOpen(isOpen)}>
+      <DialogTrigger asChild>
+        <Button onClick={() => setOpen(true)}>Open dialog</Button>
+      </DialogTrigger>
 
       <Box>
         {[...Array(10)].map((_, i) => (
@@ -55,11 +57,9 @@ export const Basic: ComponentStory<any> = (args) => {
         ))}
       </Box>
 
-      <Dialog open={open} onOpenChange={(isOpen) => setOpen(isOpen)}>
-        <DialogContent>
-          <Content />
-        </DialogContent>
-      </Dialog>
-    </>
+      <DialogContent>
+        <Content />
+      </DialogContent>
+    </Dialog>
   );
 };