docs: dialog example

Author: segunadebayo

apps/compositions/src/examples/dialog-with-responsive-size.tsx

@@ -0,0 +1,38 @@
+import { Button, CloseButton, Dialog, Portal } from "@chakra-ui/react"
+
+export const DialogWithResponsiveSize = () => {
+  return (
+    <Dialog.Root size={{ mdDown: "full", md: "lg" }}>
+      <Dialog.Trigger asChild>
+        <Button variant="outline" size="sm">
+          Open Dialog
+        </Button>
+      </Dialog.Trigger>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Dialog Title</Dialog.Title>
+            </Dialog.Header>
+            <Dialog.Body>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              </p>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.ActionTrigger asChild>
+                <Button variant="outline">Cancel</Button>
+              </Dialog.ActionTrigger>
+              <Button>Save</Button>
+            </Dialog.Footer>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="sm" />
+            </Dialog.CloseTrigger>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  )
+}

apps/www/content/docs/components/dialog.mdx

@@ -55,6 +55,24 @@ screen.
 
 <ExampleTabs name="dialog-with-fullscreen" />
 
+### Responsive Size
+
+Use responsive values for the `size` prop to make the dialog adapt to different
+screen sizes.
+
+We recommend using exact breakpoints values instead of using a `base` to ensure
+styles are properly contained.
+
+```tsx
+// ❌ Might cause a style leak between the breakpoints
+<Dialog.Root size={{ base: "full", md: "lg" }}>{/* ... */}</Dialog.Root>
+
+// Works ✅
+<Dialog.Root size={{ mdDown: "full", md: "lg" }}>{/* ... */}</Dialog.Root>
+```
+
+<ExampleTabs name="dialog-with-responsive-size" />
+
 ### Placement
 
 Use the `placement` prop to change the placement of the dialog component.

packages/react/__stories__/dialog.stories.tsx

@@ -26,6 +26,7 @@ export { DialogWithInitialFocus as InitialFocus } from "compositions/examples/di
 export { DialogWithInsideScroll as InsideScroll } from "compositions/examples/dialog-with-inside-scroll"
 export { DialogWithOutsideScroll as OutsideScroll } from "compositions/examples/dialog-with-outside-scroll"
 export { DialogWithPlacement as Placement } from "compositions/examples/dialog-with-placement"
+export { DialogWithResponsiveSize as ResponsiveSize } from "compositions/examples/dialog-with-responsive-size"
 export { DialogWithRole as Role } from "compositions/examples/dialog-with-role"
 export { DialogWithSizes as Sizes } from "compositions/examples/dialog-with-sizes"
 export { DialogWithStore as Store } from "compositions/examples/dialog-with-store"