fix: alert dialog styles and remove built-in close button

apps/www/src/components/playground/alert-dialog-examples.tsx

@@ -37,7 +37,7 @@ export function AlertDialogExamples() {
           <AlertDialog.Trigger render={<Button variant='outline' />}>
             Discard Changes
           </AlertDialog.Trigger>
-          <AlertDialog.Content width={400} showCloseButton={false}>
+          <AlertDialog.Content width={400}>
             <AlertDialog.Body>
               <AlertDialog.Title>Unsaved Changes</AlertDialog.Title>
               <AlertDialog.Description>

apps/www/src/content/docs/components/alert-dialog/demo.ts

@@ -7,13 +7,13 @@ export const getCode = (props: { title?: string; description?: string }) => {
       <AlertDialog.Trigger render={<Button color="danger" />}>
         Discard draft
       </AlertDialog.Trigger>
-      <AlertDialog.Content width={400}>
-        <AlertDialog.Body>
+      <AlertDialog.Content>
+        <AlertDialog.Header>
           <AlertDialog.Title>${title}</AlertDialog.Title>
           <AlertDialog.Description>
           ${description}
           </AlertDialog.Description>
-        </AlertDialog.Body>
+        </AlertDialog.Header>
         <AlertDialog.Footer>
           <AlertDialog.Close render={<Button variant="outline" color="neutral">Cancel</Button>} />
           <AlertDialog.Close render={<Button color="danger">Discard</Button>} />
@@ -45,7 +45,7 @@ export const controlledDemo = {
         <AlertDialog.Trigger render={<Button color="danger" />}>
           Delete Account
         </AlertDialog.Trigger>
-        <AlertDialog.Content width={450}>
+        <AlertDialog.Content>
           <AlertDialog.Header>
             <AlertDialog.Title>Delete Account</AlertDialog.Title>
           </AlertDialog.Header>
@@ -88,7 +88,7 @@ export const menuDemo = {
         </Menu>
 
         <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
-          <AlertDialog.Content width={400}>
+          <AlertDialog.Content>
             <AlertDialog.Body>
               <AlertDialog.Title>Delete item?</AlertDialog.Title>
               <AlertDialog.Description>
@@ -113,7 +113,7 @@ export const discardDemo = {
     <AlertDialog.Trigger render={<Button variant="outline" />}>
       Discard Changes
     </AlertDialog.Trigger>
-    <AlertDialog.Content width={400}>
+    <AlertDialog.Content>
       <AlertDialog.Header>
         <AlertDialog.Title>Unsaved Changes</AlertDialog.Title>
       </AlertDialog.Header>
@@ -139,7 +139,7 @@ export const nestedDemo = {
         <AlertDialog.Trigger render={<Button color="danger" />}>
           Delete Workspace
         </AlertDialog.Trigger>
-        <AlertDialog.Content width={450}>
+        <AlertDialog.Content>
           <AlertDialog.Header>
             <AlertDialog.Title>Delete Workspace</AlertDialog.Title>
           </AlertDialog.Header>
@@ -151,7 +151,7 @@ export const nestedDemo = {
               <AlertDialog.Trigger render={<Button color="danger" size="small" />}>
                 Confirm Delete
               </AlertDialog.Trigger>
-              <AlertDialog.Content width={400}>
+              <AlertDialog.Content>
                 <AlertDialog.Body>
                   <AlertDialog.Title>Final Confirmation</AlertDialog.Title>
                   <AlertDialog.Description>

apps/www/src/content/docs/components/alert-dialog/index.mdx

@@ -21,10 +21,9 @@ import { AlertDialog } from '@raystack/apsara'
   <AlertDialog.Content>
     <AlertDialog.Header>
       <AlertDialog.Title />
-    </AlertDialog.Header>
-    <AlertDialog.Body>
       <AlertDialog.Description />
-    </AlertDialog.Body>
+    </AlertDialog.Header>
+    <AlertDialog.Body />
     <AlertDialog.Footer>
       <AlertDialog.Close />
     </AlertDialog.Footer>
@@ -76,12 +75,6 @@ Renders the element that opens the alert dialog.
 
 <auto-type-table path="./props.ts" name="AlertDialogTriggerProps" />
 
-### CloseButton
-
-Renders a button that closes the alert dialog.
-
-<auto-type-table path="./props.ts" name="AlertDialogCloseButtonProps" />
-
 ### Footer
 
 Renders the alert dialog footer section.

apps/www/src/content/docs/components/alert-dialog/props.ts

@@ -10,12 +10,6 @@ export interface AlertDialogContentProps {
   /** Controls alert dialog width */
   width?: string | number;
 
-  /**
-   * Controls whether to show the close button
-   * @default false
-   */
-  showCloseButton?: boolean;
-
   /**
    * Toggle nested dialog animation (scaling and translation)
    * @default true
@@ -73,19 +67,6 @@ export interface AlertDialogTriggerProps {
   className?: string;
 }
 
-export interface AlertDialogCloseButtonProps {
-  /**
-   * Allows rendering as a different element.
-   * Accepts a React element or a function that receives props and returns an element.
-   *
-   * @remarks `ReactElement | function`
-   */
-  render?: React.ReactElement;
-
-  /** Additional CSS class names */
-  className?: string;
-}
-
 export interface AlertDialogFooterProps {
   /** Additional CSS class names */
   className?: string;

packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx

@@ -22,7 +22,7 @@ const BasicAlertDialog = ({
 }) => (
   <AlertDialog open={open} onOpenChange={onOpenChange} {...props}>
     <AlertDialog.Trigger>{TRIGGER_TEXT}</AlertDialog.Trigger>
-    <AlertDialog.Content showCloseButton>
+    <AlertDialog.Content>
       <AlertDialog.Header>
         <AlertDialog.Title>{ALERT_TITLE}</AlertDialog.Title>
       </AlertDialog.Header>
@@ -91,20 +91,6 @@ describe('AlertDialog', () => {
   });
 
   describe('Close Behavior', () => {
-    it('closes when close button is clicked', async () => {
-      renderAndOpenAlertDialog(<BasicAlertDialog />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('alertdialog')).toBeInTheDocument();
-      });
-
-      fireEvent.click(screen.getByRole('button', { name: 'Close dialog' }));
-
-      await waitFor(() => {
-        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
-      });
-    });
-
     it('closes when AlertDialog.Close is clicked', async () => {
       renderAndOpenAlertDialog(<BasicAlertDialog />);
 

packages/raystack/components/alert-dialog/alert-dialog-content.tsx

@@ -3,11 +3,9 @@
 import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
 import styles from '../dialog/dialog.module.css';
-import { CloseButton } from './alert-dialog-misc';
 
 export interface AlertDialogContentProps
   extends AlertDialogPrimitive.Popup.Props {
-  showCloseButton?: boolean;
   overlay?: AlertDialogPrimitive.Backdrop.Props & { blur?: boolean };
   width?: string | number;
   /**
@@ -20,7 +18,6 @@ export interface AlertDialogContentProps
 export const AlertDialogContent = ({
   className,
   children,
-  showCloseButton = false,
   overlay,
   width,
   style,
@@ -48,7 +45,6 @@ export const AlertDialogContent = ({
           {...props}
         >
           {children}
-          {showCloseButton && <CloseButton className={styles.closeButton} />}
         </AlertDialogPrimitive.Popup>
       </AlertDialogPrimitive.Viewport>
     </AlertDialogPrimitive.Portal>

packages/raystack/components/alert-dialog/alert-dialog-misc.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react';
-import { Cross1Icon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
 import styles from '../dialog/dialog.module.css';
@@ -13,9 +12,9 @@ export const AlertDialogHeader = ({
   ...props
 }: ComponentProps<typeof Flex>) => (
   <Flex
-    justify='between'
-    align='center'
-    className={cx(styles.header, className)}
+    direction='column'
+    gap={3}
+    className={cx(styles.header, alertDialogStyles.header, className)}
     {...props}
   />
 );
@@ -43,30 +42,13 @@ export const AlertDialogBody = ({
   <Flex
     direction='column'
     gap={3}
-    className={cx(styles.body, className)}
+    className={cx(styles.body, alertDialogStyles.body, className)}
     {...props}
   />
 );
 
 AlertDialogBody.displayName = 'AlertDialog.Body';
 
-export const CloseButton = ({
-  className,
-  ...props
-}: AlertDialogPrimitive.Close.Props) => {
-  return (
-    <AlertDialogPrimitive.Close
-      className={cx(styles.close, className)}
-      aria-label='Close dialog'
-      {...props}
-    >
-      <Cross1Icon aria-hidden='true' />
-    </AlertDialogPrimitive.Close>
-  );
-};
-
-CloseButton.displayName = 'AlertDialog.CloseButton';
-
 export const AlertDialogTitle = ({
   className,
   ...props

packages/raystack/components/alert-dialog/alert-dialog.module.css

@@ -1,3 +1,20 @@
+.header {
+  padding: var(--rs-space-7);
+  border-bottom: 0;
+}
+
+.header:has(+ .body) {
+  padding-bottom: var(--rs-space-5);
+}
+
+.body {
+  padding: 0 var(--rs-space-7) var(--rs-space-5);
+}
+
+.body:first-child {
+  padding: var(--rs-space-7);
+}
+
 .footer {
   border-top: 0;
 }

packages/raystack/components/alert-dialog/alert-dialog.tsx

@@ -5,8 +5,7 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle,
-  CloseButton
+  AlertDialogTitle
 } from './alert-dialog-misc';
 
 export const AlertDialog = Object.assign(AlertDialogPrimitive.Root, {
@@ -16,7 +15,6 @@ export const AlertDialog = Object.assign(AlertDialogPrimitive.Root, {
   Trigger: AlertDialogPrimitive.Trigger,
   Content: AlertDialogContent,
   Close: AlertDialogPrimitive.Close,
-  CloseButton: CloseButton,
   Title: AlertDialogTitle,
   Description: AlertDialogDescription,
   createHandle: AlertDialogPrimitive.createHandle

packages/raystack/components/dialog/dialog-misc.tsx

@@ -5,6 +5,7 @@ import { Cross1Icon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
 import { Flex } from '../flex';
+import { IconButton } from '../icon-button';
 import styles from './dialog.module.css';
 
 export function DialogHeader({
@@ -55,14 +56,11 @@ export function DialogBody({
 
 DialogBody.displayName = 'Dialog.Body';
 
-export function CloseButton({
-  className,
-  ...props
-}: DialogPrimitive.Close.Props) {
+export function CloseButton(props: DialogPrimitive.Close.Props) {
   return (
     <DialogPrimitive.Close
-      className={cx(styles.close, className)}
       aria-label='Close dialog'
+      render={<IconButton size={3} />}
       {...props}
     >
       <Cross1Icon aria-hidden='true' />

packages/raystack/components/dialog/dialog.module.css

@@ -17,6 +17,7 @@
   box-shadow: var(--rs-shadow-floating);
   max-width: 90vw;
   min-width: 200px;
+  width: 400px;
   min-height: 100px;
   max-height: 85vh;
   padding: 0;
@@ -55,27 +56,12 @@
   transform: translate(-50%, min(160px, calc(50vh - 50%))) scale(0.9);
 }
 
-.close {
-  all: unset;
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--rs-radius-2);
-  padding: var(--rs-space-2);
-  font-weight: var(--rs-font-weight-medium);
-  cursor: pointer;
-}
-
 .closeButton {
   position: absolute;
-  top: var(--rs-space-5);
+  top: 18px;
   right: var(--rs-space-7);
 }
 
-.close:hover {
-  background-color: var(--rs-color-background-base-primary-hover);
-  color: var(--rs-color-foreground-base-primary);
-}
-
 .overlayBlur {
   backdrop-filter: var(--rs-blur-lg);
 }
@@ -93,7 +79,7 @@
   .dialogContent {
     transition:
       opacity 150ms,
-      transform 150ms;
+      transform 150ms ease;
   }
 }
 
@@ -113,7 +99,7 @@
 }
 
 .body {
-  padding: var(--rs-space-7);
+  padding: var(--rs-space-9) var(--rs-space-7);
 }
 
 :where(.body) + .footer {