fix!: rename DialogContent to DialogPopup and remove its padding

Author: lepture

docs/content/components/dialog.md

@@ -4,3 +4,5 @@ description: Modal dialog window displayed above the page.
 ---
 
 <Example name="dialog/Overview.vue" />
+
+<Example name="alert/Overview.vue" />

docs/examples/alert/Overview.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import {
+  Button,
+  AlertDialogRoot,
+  AlertDialogTrigger,
+  AlertDialogPopup,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from '#components'
+</script>
+
+<template>
+  <AlertDialogRoot>
+    <Button color="red" :as="AlertDialogTrigger">Revoke access</Button>
+    <AlertDialogPopup>
+      <AlertDialogTitle>Revoke access</AlertDialogTitle>
+      <AlertDialogDescription>
+        Are you sure? This application will no longer be accessible and any existing sessions will be expired.
+      </AlertDialogDescription>
+      <div class="flex mt-8 justify-end gap-3">
+        <Button variant="soft" color="gray" :as="AlertDialogCancel">Cancel</Button>
+        <Button color="red" :as="AlertDialogAction">Revoke access</Button>
+      </div>
+    </AlertDialogPopup>
+  </AlertDialogRoot>
+</template>

docs/examples/dialog/Overview.vue

@@ -3,7 +3,7 @@ import {
   Button,
   DialogRoot,
   DialogTrigger,
-  DialogContent,
+  DialogPopup,
   DialogTitle,
   DialogDescription,
   DialogClose,
@@ -14,10 +14,12 @@ import {
 <template>
   <DialogRoot>
     <Button :as="DialogTrigger">Edit profile</Button>
-    <DialogContent max-width="450px">
-      <DialogTitle>Edit profile</DialogTitle>
-      <DialogDescription>Make changes to your profile.</DialogDescription>
-      <div class="flex flex-col gap-3 mt-4">
+    <DialogPopup>
+      <div class="p-4">
+        <DialogTitle>Edit profile</DialogTitle>
+        <DialogDescription>Make changes to your profile.</DialogDescription>
+      </div>
+      <div class="flex flex-col gap-3 p-4 pb-8">
         <label>
           <span class="block text-sm font-semibold mb-1">Name</span>
           <TextField model-value="Freja Johnsen" placeholder="Enter your full name" />
@@ -27,16 +29,10 @@ import {
           <TextField model-value="freja@example.com" placeholder="Enter your email" />
         </label>
       </div>
-      <div class="flex mt-4 justify-end gap-3">
-        <DialogClose as-child>
-          <Button variant="soft" color="gray">
-            Cancel
-          </Button>
-        </DialogClose>
-        <DialogClose as-child>
-          <Button>Save</Button>
-        </DialogClose>
+      <div class="flex p-4 justify-end gap-3 bg-gray-3">
+        <Button variant="classic" color="gray" :as="DialogClose">Cancel</Button>
+        <Button>Save</Button>
       </div>
-    </DialogContent>
+    </DialogPopup>
   </DialogRoot>
 </template>

src/components/alert/AlertDialogContent.vue renamed to src/components/alert/AlertDialogPopup.vue

@@ -1,19 +1,12 @@
 <script lang="ts">
 import type {
-  AlertDialogContentProps as _DialogContentProps,
+  AlertDialogContentProps,
   AlertDialogContentEmits,
 } from 'reka-ui'
 import ThemeWrapper from '../provider/ThemeWrapper.vue'
 
-export interface AlertDialogContentProps extends _DialogContentProps {
+export interface AlertDialogPopupProps extends AlertDialogContentProps {
   to?: string | HTMLElement
-  size?: '1' | '2' | '3' | '4'
-  width?: string
-  minWidth?: string
-  maxWidth?: string
-  height?: string
-  minHeight?: string
-  maxHeight?: string
 }
 </script>
 
@@ -29,17 +22,10 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<AlertDialogContentProps>(), {
-  size: '3',
-  maxWidth: '450px',
-})
+const props = defineProps<AlertDialogPopupProps>()
 const emits = defineEmits<AlertDialogContentEmits>()
 
-const forwarded = useForwardPropsEmits(props, emits, [
-  'to', 'align', 'class', 'size',
-  'width', 'minWidth', 'maxWidth',
-  'height', 'minHeight', 'maxHeight',
-])
+const forwarded = useForwardPropsEmits(props, emits, ['to', 'align', 'size'])
 </script>
 
 <template>
@@ -49,20 +35,11 @@ const forwarded = useForwardPropsEmits(props, emits, [
         <div class="ui-DialogWrapper">
           <div class="ui-DialogContainer">
             <AlertDialogContent
-              class="ui-DialogContent"
-              :class="`r-size-${props.size}`"
+              class="ui-DialogPopup ui-AlertPopup"
               v-bind="{
                 ...$attrs,
                 ...forwarded,
               }"
-              :style="{
-                width: props.width,
-                height: props.height,
-                minWidth: props.minWidth,
-                maxWidth: props.maxWidth,
-                minHeight: props.minHeight,
-                maxHeight: props.maxHeight,
-              }"
             >
               <slot></slot>
             </AlertDialogContent>
@@ -72,3 +49,11 @@ const forwarded = useForwardPropsEmits(props, emits, [
     </ThemeWrapper>
   </AlertDialogPortal>
 </template>
+
+<style>
+.ui-AlertPopup {
+  --dialog-popup-radius: var(--radius-4);
+  --dialog-popup-max-width: 450px;
+  padding: var(--space-5);
+}
+</style>

src/components/alert/index.ts

@@ -15,6 +15,6 @@ export {
 } from '../dialog'
 
 export {
-  default as AlertDialogContent,
-  type AlertDialogContentProps,
-} from './AlertDialogContent.vue'
+  default as AlertDialogPopup,
+  type AlertDialogPopupProps,
+} from './AlertDialogPopup.vue'