Fix stories

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

docs-ui/src/content/components/dialog.mdx

@@ -13,6 +13,7 @@ import {
   dialogDefaultSnippet,
   dialogScrollableSnippet,
   dialogWithFormSnippet,
+  dialogWithNoTriggerSnippet,
 } from './dialog.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
@@ -81,7 +82,7 @@ Dialog with a fixed height body that scrolls when content overflows.
 <Snippet
   align="center"
   py={4}
-  preview={<DialogSnippet story="Scrollable" />}
+  preview={<DialogSnippet story="PreviewScrollable" />}
   code={dialogScrollableSnippet}
 />
 
@@ -92,10 +93,16 @@ Dialog containing form elements for user input.
 <Snippet
   align="center"
   py={4}
-  preview={<DialogSnippet story="WithForm" />}
+  preview={<DialogSnippet story="PreviewWithForm" />}
   code={dialogWithFormSnippet}
 />
 
+### Dialog with no trigger and controlled by props
+
+You can also control the dialog using your own states.
+
+<CodeBlock code={dialogWithNoTriggerSnippet} />
+
 <Theming component="Dialog" />
 
 <ChangelogComponent component="dialog" />

docs-ui/src/content/components/dialog.props.ts

@@ -137,3 +137,18 @@ export const dialogWithFormSnippet = `<DialogTrigger>
     </DialogFooter>
   </Dialog>
 </DialogTrigger>`;
+
+export const dialogWithNoTriggerSnippet = `const [isOpen, setIsOpen] = useState(false);
+
+<Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
+  <DialogHeader>Create New User</DialogHeader>
+  <DialogBody>
+    Your content
+  </DialogBody>
+  <DialogFooter>
+    <Flex gap="2" justify="end">
+      <DialogClose>Cancel</DialogClose>
+      <DialogClose variant="primary">Create User</DialogClose>
+    </Flex>
+  </DialogFooter>
+</Dialog>`;