From 1ad8f6e6d14391cdabf4bd991080ee185cfe16cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Teixeira?= <joao@indielayer.com>
Date: Thu, 9 May 2024 17:00:28 +0100
Subject: [PATCH] chore(modal): update examples and default size (#72)

---
 .changeset/violet-kids-explode.md                 |  5 +++++
 .../ui/docs/pages/component/modal/composed.vue    |  1 +
 packages/ui/docs/pages/component/modal/usage.vue  | 15 +++++++++------
 packages/ui/src/components/modal/Modal.vue        |  5 ++++-
 .../components/modal/theme/Modal.base.theme.ts    |  3 ++-
 .../components/modal/theme/Modal.carbon.theme.ts  |  1 +
 6 files changed, 22 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/violet-kids-explode.md

diff --git a/.changeset/violet-kids-explode.md b/.changeset/violet-kids-explode.md
new file mode 100644
index 00000000..a51f9d0f
--- /dev/null
+++ b/.changeset/violet-kids-explode.md
@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+chore(modal): update examples and default size
diff --git a/packages/ui/docs/pages/component/modal/composed.vue b/packages/ui/docs/pages/component/modal/composed.vue
index a9094f92..ea64d8f0 100644
--- a/packages/ui/docs/pages/component/modal/composed.vue
+++ b/packages/ui/docs/pages/component/modal/composed.vue
@@ -33,6 +33,7 @@ function onSubmit(isValid: boolean) {
     show-close
     backdrop
     is-form
+    size="full"
     title="Modal title"
     label="Modal label"
     description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente, fugit."
diff --git a/packages/ui/docs/pages/component/modal/usage.vue b/packages/ui/docs/pages/component/modal/usage.vue
index 6e78179e..ef1e9045 100644
--- a/packages/ui/docs/pages/component/modal/usage.vue
+++ b/packages/ui/docs/pages/component/modal/usage.vue
@@ -7,13 +7,16 @@ const show3 = ref(false)
 </script>
 
 <template>
-  <x-modal v-model="show" show-close backdrop>
+  <x-modal
+    v-model="show"
+    title="Header"
+    show-close
+    backdrop
+    size="sm"
+  >
     <template #image>
       <x-image src="https://images.unsplash.com/photo-1543352634-99a5d50ae78e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80" alt=""/>
     </template>
-    <template #header>
-      Modal Header
-    </template>
 
     <div>
       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
@@ -21,7 +24,7 @@ const show3 = ref(false)
 
     <template #actions>
       <div class="text-right space-x-4">
-        <x-button>Cancel</x-button>
+        <x-button @click="show = false">Cancel</x-button>
         <x-button color="success">Confirm</x-button>
       </div>
     </template>
@@ -46,7 +49,7 @@ const show3 = ref(false)
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure praesentium non id dolores vitae. Nam ratione veritatis ab cumque voluptas porro illum, voluptate perferendis ducimus dolorem optio magni assumenda dolore! Doloremque facere aliquid facilis distinctio accusamus, dolorum eligendi consequuntur molestias sapiente non rem vero sed eos minus itaque sunt officiis iste ea repellendus possimus earum maiores? Quo laudantium fuga odit tenetur sint fugit deleniti dolores placeat, accusamus magni consectetur unde totam sunt labore dolor rem consequatur quaerat! Iure temporibus voluptatem cumque, dolore maiores rerum neque vero, iusto veritatis repellat eligendi amet! Molestiae cumque officiis eius harum iste, fuga corporis molestias.
 
     <template #actions>
-      <x-button>Cancel</x-button>
+      <x-button @click="show2 = false">Cancel</x-button>
       <x-button color="success">Confirm</x-button>
     </template>
   </x-modal>
diff --git a/packages/ui/src/components/modal/Modal.vue b/packages/ui/src/components/modal/Modal.vue
index efff8a1a..86742dde 100644
--- a/packages/ui/src/components/modal/Modal.vue
+++ b/packages/ui/src/components/modal/Modal.vue
@@ -4,7 +4,7 @@ const modalPosition = ['top', 'center', 'bottom'] as const
 const modalProps = {
   size: {
     type: String as PropType<ModalSize>,
-    default: 'xl',
+    default: 'lg',
   },
   position: {
     type: String as PropType<ModalPosition>,
@@ -214,6 +214,9 @@ defineExpose({ open, close })
           <x-scroll
             v-if="$slots.default"
             :scrollbar="false"
+            :class="{
+              'h-full': size === 'full',
+            }"
             vertical
           >
             <div :class="classes.content">
diff --git a/packages/ui/src/components/modal/theme/Modal.base.theme.ts b/packages/ui/src/components/modal/theme/Modal.base.theme.ts
index d1a61e81..68ce51a4 100644
--- a/packages/ui/src/components/modal/theme/Modal.base.theme.ts
+++ b/packages/ui/src/components/modal/theme/Modal.base.theme.ts
@@ -14,7 +14,7 @@ const theme: ModalTheme = {
     },
 
     modalWrapper: ({ props }) => {
-      const classes = ['flex justify-center p-4 sm:p-8 md:py-20 h-screen']
+      const classes = ['flex justify-center p-4 sm:p-8 h-screen']
 
       if (props.position === 'top') classes.push('items-start')
       else if (props.position === 'bottom') classes.push('items-end')
@@ -34,6 +34,7 @@ const theme: ModalTheme = {
       else if (props.size === 'md') classes.push('sm:max-w-lg')
       else if (props.size === 'lg') classes.push('sm:max-w-3xl')
       else if (props.size === 'xl') classes.push('sm:max-w-6xl')
+      else if (props.size === 'full') classes.push('h-full')
 
       return classes
     },
diff --git a/packages/ui/src/components/modal/theme/Modal.carbon.theme.ts b/packages/ui/src/components/modal/theme/Modal.carbon.theme.ts
index 58751bc8..85278143 100644
--- a/packages/ui/src/components/modal/theme/Modal.carbon.theme.ts
+++ b/packages/ui/src/components/modal/theme/Modal.carbon.theme.ts
@@ -24,6 +24,7 @@ const theme: ModalTheme = {
       else if (props.size === 'md') classes.push('sm:max-w-lg')
       else if (props.size === 'lg') classes.push('sm:max-w-3xl')
       else if (props.size === 'xl') classes.push('sm:max-w-6xl')
+      else if (props.size === 'full') classes.push('h-full')
 
       return classes
     },