From dac89648d1150f0b36aeadc6b840f02319e9d618 Mon Sep 17 00:00:00 2001
From: "hrynevych.romann" <hrynevych.romann@gmail.com>
Date: Wed, 17 Jan 2024 21:59:45 +0200
Subject: [PATCH] feat(dialog-with-scroll-body): add demos with body scroll for
 Dialog component

---
 apps/www/__registry__/index.ts                | 14 ++++++
 .../src/content/docs/components/command.md    |  2 +-
 .../www/src/content/docs/components/dialog.md |  4 ++
 .../example/DialogScrollContentDemo.vue       | 44 +++++++++++++++++++
 .../example/DialogScrollContentDemo.vue       | 44 +++++++++++++++++++
 5 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 apps/www/src/lib/registry/default/example/DialogScrollContentDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/DialogScrollContentDemo.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 08289ff8..668de866 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -380,6 +380,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/DialogDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/DialogDemo.vue'],
     },
+    DialogScrollContentDemo: {
+      name: 'DialogScrollContentDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'dialog', 'input', 'label'],
+      component: () => import('../src/lib/registry/default/example/DialogScrollContentDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DialogScrollContentDemo.vue'],
+    },
     DropdownMenuDemo: {
       name: 'DropdownMenuDemo',
       type: 'components:example',
@@ -1264,6 +1271,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/DialogDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/DialogDemo.vue'],
     },
+    DialogScrollContentDemo: {
+      name: 'DialogScrollContentDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'dialog', 'input', 'label'],
+      component: () => import('../src/lib/registry/new-york/example/DialogScrollContentDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DialogScrollContentDemo.vue'],
+    },
     DropdownMenuDemo: {
       name: 'DropdownMenuDemo',
       type: 'components:example',
diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md
index 77ac9045..eb77f9b6 100644
--- a/apps/www/src/content/docs/components/command.md
+++ b/apps/www/src/content/docs/components/command.md
@@ -140,4 +140,4 @@ watch(CmdJ, (v) => {
 
 ### Combobox
 
-You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
\ No newline at end of file
+You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md
index e948079d..4c1b9f6d 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -55,6 +55,10 @@ import {
 
 <ComponentPreview name="DialogCustomCloseButton" /> 
 
+### Dialog with Scroll Content
+
+<ComponentPreview name="DialogScrollContentDemo" />
+
 ## Notes
 
 To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or `Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836).
diff --git a/apps/www/src/lib/registry/default/example/DialogScrollContentDemo.vue b/apps/www/src/lib/registry/default/example/DialogScrollContentDemo.vue
new file mode 100644
index 00000000..c3d12c3c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/DialogScrollContentDemo.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/default/ui/dialog'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline">
+        Edit Profile
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]">
+      <DialogHeader class="p-6 pb-0">
+        <DialogTitle>Edit profile</DialogTitle>
+        <DialogDescription>
+          Make changes to your profile here. Click save when you're done.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="grid gap-4 py-4 overflow-y-auto px-6">
+        <div class="flex flex-col justify-between h-[300dvh]">
+          <p>
+            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.
+          </p>
+
+          <p>This content should appear at the bottom after you scroll.</p>
+        </div>
+      </div>
+      <DialogFooter class="p-6 pt-0">
+        <Button type="submit">
+          Save changes
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/DialogScrollContentDemo.vue b/apps/www/src/lib/registry/new-york/example/DialogScrollContentDemo.vue
new file mode 100644
index 00000000..e1529a24
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/DialogScrollContentDemo.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/new-york/ui/dialog'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline">
+        Edit Profile
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]">
+      <DialogHeader class="p-6 pb-0">
+        <DialogTitle>Edit profile</DialogTitle>
+        <DialogDescription>
+          Make changes to your profile here. Click save when you're done.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="grid gap-4 py-4 overflow-y-auto px-6">
+        <div class="flex flex-col justify-between h-[300dvh]">
+          <p>
+            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.
+          </p>
+
+          <p>This content should appear at the bottom after you scroll.</p>
+        </div>
+      </div>
+      <DialogFooter class="p-6 pt-0">
+        <Button type="submit">
+          Save changes
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>