@dxos/react-ui 0.8.4-main.c85a9c8dae → 0.8.4-main.d05539e30a

package/src/components/Dialog/AlertDialog.tsx

@@ -2,33 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import {
-  AlertDialogAction as AlertDialogActionPrimitive,
-  type AlertDialogActionProps as AlertDialogActionPrimitiveProps,
-  AlertDialogCancel as AlertDialogCancelPrimitive,
-  type AlertDialogCancelProps as AlertDialogCancelPrimitiveProps,
-  AlertDialogContent as AlertDialogContentPrimitive,
-  type AlertDialogContentProps as AlertDialogContentPrimitiveProps,
-  AlertDialogDescription as AlertDialogDescriptionPrimitive,
-  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
-  AlertDialogOverlay as AlertDialogOverlayPrimitive,
-  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,
-  AlertDialogPortal as AlertDialogPortalPrimitive,
-  type AlertDialogPortalProps as AlertDialogPortalPrimitiveProps,
-  Root as AlertDialogRootPrimitive,
-  type AlertDialogProps as AlertDialogRootPrimitiveProps,
-  AlertDialogTitle as AlertDialogTitlePrimitive,
-  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
-  AlertDialogTrigger as AlertDialogTriggerPrimitive,
-  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
-} from '@radix-ui/react-alert-dialog';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { createContext } from '@radix-ui/react-context';
-import React, {
-  type ForwardRefExoticComponent,
-  type FunctionComponent,
-  type PropsWithChildren,
-  forwardRef,
-} from 'react';
+import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
 
 import { type DialogSize } from '@dxos/ui-theme';
 
@@ -36,16 +12,23 @@ import { useThemeContext } from '../../hooks';
 import { Column } from '../../primitives';
 import { type ThemedClassName } from '../../util';
 import { ElevationProvider } from '../ElevationProvider';
+import {
+  Dialog,
+  type DialogHeaderProps,
+  type DialogBodyProps,
+  type DialogActionBarProps,
+  type DialogCloseIconButtonProps,
+} from './Dialog';
 
 //
 // Root
 //
 
-type AlertDialogRootProps = AlertDialogRootPrimitiveProps;
+type AlertDialogRootProps = AlertDialogPrimitive.AlertDialogProps;
 
 const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
   <ElevationProvider elevation='dialog'>
-    <AlertDialogRootPrimitive {...props} />
+    <AlertDialogPrimitive.Root {...props} />
   </ElevationProvider>
 );
 
@@ -53,95 +36,55 @@ const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
 // Trigger
 //
 
-type AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;
+type AlertDialogTriggerProps = AlertDialogPrimitive.AlertDialogTriggerProps;
 
-const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDialogTriggerPrimitive;
+const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDialogPrimitive.Trigger;
 
 //
 // Portal
 //
 
-type AlertDialogPortalProps = AlertDialogPortalPrimitiveProps;
+type AlertDialogPortalProps = AlertDialogPrimitive.AlertDialogPortalProps;
 
-const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialogPortalPrimitive;
+const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialogPrimitive.Portal;
 
 //
 // Cancel
 //
 
-type AlertDialogCancelProps = AlertDialogCancelPrimitiveProps;
+type AlertDialogCancelProps = AlertDialogPrimitive.AlertDialogCancelProps;
 
-const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialogCancelPrimitive;
+const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialogPrimitive.Cancel;
 
 //
 // Action
 //
 
-type AlertDialogActionProps = AlertDialogActionPrimitiveProps;
+type AlertDialogActionProps = AlertDialogPrimitive.AlertDialogActionProps;
 
-const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialogActionPrimitive;
+const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialogPrimitive.Action;
 
 //
-// Title
-//
-
-type AlertDialogTitleProps = ThemedClassName<AlertDialogTitlePrimitiveProps> & { srOnly?: boolean };
-
-const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
-  HTMLHeadingElement,
-  AlertDialogTitleProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <AlertDialogTitlePrimitive {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
-  );
-});
-
-//
-// Description
+// Context
 //
 
-type AlertDialogDescriptionProps = ThemedClassName<AlertDialogDescriptionPrimitiveProps> & { srOnly?: boolean };
-
-const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
-  HTMLParagraphElement,
-  AlertDialogDescriptionProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <AlertDialogDescriptionPrimitive
-      {...props}
-      className={tx('dialog.description', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
-
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 
-//
-// Context
-//
-
 const ALERT_DIALOG_OVERLAY_NAME = 'AlertDialogOverlay';
 const ALERT_DIALOG_CONTENT_NAME = 'AlertDialogContent';
-const ALERT_DIALOG_BODY_NAME = 'AlertDialogBody';
-const ALERT_DIALOG_ACTIONBAR_NAME = 'AlertDialogActionBar';
 
 const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
   ALERT_DIALOG_OVERLAY_NAME,
-  {
-    inOverlayLayout: false,
-  },
+  { inOverlayLayout: false },
 );
 
 //
 // Overlay
 //
 
-type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps> & {
-  blockAlign?: 'center' | 'start' | 'end';
-};
+type AlertDialogOverlayProps = ThemedClassName<
+  AlertDialogPrimitive.AlertDialogOverlayProps & { blockAlign?: 'center' | 'start' | 'end' }
+>;
 
 const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = forwardRef<
   HTMLDivElement,
@@ -149,22 +92,14 @@ const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = f
 >(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <AlertDialogOverlayPrimitive
+    <AlertDialogPrimitive.Overlay
       {...props}
       data-block-align={blockAlign}
-      className={tx(
-        'dialog.overlay',
-        {},
-        classNames,
-        // TODO(burdon): Move to dialog.ts.
-        'data-[h-align=start]:justify-center',
-        'data-[h-align=start]:items-start',
-        'data-[h-align=center]:place-content-center',
-      )}
+      className={tx('dialog.overlay', {}, classNames)}
       ref={forwardedRef}
     >
       <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
-    </AlertDialogOverlayPrimitive>
+    </AlertDialogPrimitive.Overlay>
   );
 });
 
@@ -174,7 +109,7 @@ AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
 // Content
 //
 
-type AlertDialogContentProps = ThemedClassName<AlertDialogContentPrimitiveProps> & { size?: DialogSize };
+type AlertDialogContentProps = ThemedClassName<AlertDialogPrimitive.AlertDialogContentProps> & { size?: DialogSize };
 
 const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = forwardRef<
   HTMLDivElement,
@@ -183,62 +118,61 @@ const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = f
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(ALERT_DIALOG_CONTENT_NAME);
   return (
-    <AlertDialogContentPrimitive
+    <AlertDialogPrimitive.Content
       {...props}
       className={tx('dialog.content', { inOverlayLayout, size }, classNames)}
+      // NOTE: Radix warning unless set to undefined.
+      // https://www.radix-ui.com/primitives/docs/components/dialog#description
+      aria-describedby={undefined}
       ref={forwardedRef}
     >
-      <Column.Root>{children}</Column.Root>
-    </AlertDialogContentPrimitive>
+      <Column.Root classNames='dx-expander' gutter='sm'>
+        {children}
+      </Column.Root>
+    </AlertDialogPrimitive.Content>
   );
 });
 
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
 
 //
-// Body
+// Title
 //
 
-type AlertDialogBodyProps = PropsWithChildren;
+type AlertDialogTitleProps = ThemedClassName<AlertDialogPrimitive.AlertDialogTitleProps> & { srOnly?: boolean };
 
-const AlertDialogBody: ForwardRefExoticComponent<AlertDialogBodyProps> = forwardRef<
-  HTMLDivElement,
-  AlertDialogBodyProps
->(({ children, ...props }, forwardedRef) => {
+const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
+  HTMLHeadingElement,
+  AlertDialogTitleProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <Column.Segment asChild>
-      <div role='none' {...props} className={tx('dialog.body')} ref={forwardedRef}>
-        {children}
-      </div>
-    </Column.Segment>
+    <AlertDialogPrimitive.Title {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
   );
 });
 
-AlertDialogBody.displayName = ALERT_DIALOG_BODY_NAME;
-
 //
-// ActionBar
+// Description
 //
 
-type AlertDialogActionBarProps = ThemedClassName<PropsWithChildren>;
+type AlertDialogDescriptionProps = ThemedClassName<AlertDialogPrimitive.AlertDialogDescriptionProps> & {
+  srOnly?: boolean;
+};
 
-const AlertDialogActionBar: ForwardRefExoticComponent<AlertDialogActionBarProps> = forwardRef<
-  HTMLDivElement,
-  AlertDialogActionBarProps
->(({ children, classNames, ...props }, forwardedRef) => {
+const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogDescriptionProps> = forwardRef<
+  HTMLParagraphElement,
+  AlertDialogDescriptionProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <Column.Segment asChild>
-      <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
-        {children}
-      </div>
-    </Column.Segment>
+    <AlertDialogPrimitive.Description
+      {...props}
+      className={tx('dialog.description', { srOnly }, classNames)}
+      ref={forwardedRef}
+    />
   );
 });
 
-AlertDialogActionBar.displayName = ALERT_DIALOG_ACTIONBAR_NAME;
-
 //
 // AlertDialog
 //
@@ -249,10 +183,14 @@ export const AlertDialog = {
   Portal: AlertDialogPortal,
   Overlay: AlertDialogOverlay,
   Content: AlertDialogContent,
-  Body: AlertDialogBody,
+  // Shared with Dialog.
+  Header: Dialog.Header,
+  Body: Dialog.Body,
   Title: AlertDialogTitle,
   Description: AlertDialogDescription,
-  ActionBar: AlertDialogActionBar,
+  ActionBar: Dialog.ActionBar,
+  CloseIconButton: Dialog.CloseIconButton,
+  // AlertDialog-specific dismissal.
   Cancel: AlertDialogCancel,
   Action: AlertDialogAction,
 };
@@ -263,10 +201,13 @@ export type {
   AlertDialogPortalProps,
   AlertDialogOverlayProps,
   AlertDialogContentProps,
-  AlertDialogBodyProps,
   AlertDialogTitleProps,
   AlertDialogDescriptionProps,
-  AlertDialogActionBarProps,
   AlertDialogCancelProps,
   AlertDialogActionProps,
+  // Re-export shared types.
+  DialogHeaderProps as AlertDialogHeaderProps,
+  DialogBodyProps as AlertDialogBodyProps,
+  DialogActionBarProps as AlertDialogActionBarProps,
+  DialogCloseIconButtonProps as AlertDialogCloseIconButtonProps,
 };

package/src/components/Dialog/Dialog.stories.tsx

@@ -5,15 +5,15 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
 import { Input } from '../Input';
-
+import { ScrollArea } from '../ScrollArea';
 import { Dialog, type DialogContentProps } from './Dialog';
 
-type StoryProps = Pick<DialogContentProps, 'size'> &
+type DefaultStoryProps = Pick<DialogContentProps, 'size'> &
   Partial<{
     title: string;
     description: string;
@@ -22,7 +22,11 @@ type StoryProps = Pick<DialogContentProps, 'size'> &
     blockAlign: 'start' | 'center';
   }>;
 
-const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: StoryProps) => {
+/**
+ * Standard Dialog with non-scrolling content in Dialog.Body.
+ * Dialog.Body propagates the Column grid via subgrid. Children auto-center via --dx-col.
+ */
+const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: DefaultStoryProps) => {
   return (
     <Dialog.Root defaultOpen modal>
       <Dialog.Trigger asChild>
@@ -56,6 +60,45 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
   );
 };
 
+/**
+ * Dialog with a ScrollArea child inside Dialog.Body.
+ * The ScrollArea breaks out of Body's gutter padding via `--gutter`
+ * and applies its own asymmetric padding (accounting for scrollbar width).
+ */
+const ScrollingStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: DefaultStoryProps) => {
+  return (
+    <Dialog.Root defaultOpen modal>
+      <Dialog.Trigger asChild>
+        <Button>{openTrigger}</Button>
+      </Dialog.Trigger>
+      <Dialog.Overlay blockAlign={blockAlign}>
+        <Dialog.Content size={size}>
+          <Dialog.Header>
+            <Dialog.Title>{title}</Dialog.Title>
+            {closeTrigger && (
+              <Dialog.Close asChild>
+                <Dialog.CloseIconButton />
+              </Dialog.Close>
+            )}
+          </Dialog.Header>
+          <Dialog.Body>
+            <ScrollArea.Root orientation='vertical' padding thin>
+              <ScrollArea.Viewport>
+                <Dialog.Description>{description}</Dialog.Description>
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+          </Dialog.Body>
+          <Dialog.ActionBar>
+            <Dialog.Close asChild>
+              <Button variant='primary'>{closeTrigger}</Button>
+            </Dialog.Close>
+          </Dialog.ActionBar>
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
 const meta = {
   title: 'ui/react-ui-core/components/Dialog',
   component: Dialog as any,
@@ -70,7 +113,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(1),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open',
     closeTrigger: 'Close',
     blockAlign: 'start',
@@ -80,7 +123,7 @@ export const Default: Story = {
 export const Small: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(1),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open',
     closeTrigger: 'Close',
     blockAlign: 'center',
@@ -91,7 +134,7 @@ export const Small: Story = {
 export const Medium: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(1),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open',
     closeTrigger: 'Close',
     blockAlign: 'center',
@@ -102,7 +145,7 @@ export const Medium: Story = {
 export const Large: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(2),
+    description: random.lorem.paragraph(2),
     openTrigger: 'Open Dialog',
     closeTrigger: 'Close',
     blockAlign: 'center',
@@ -113,10 +156,22 @@ export const Large: Story = {
 export const ExtraLarge: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(2),
+    description: random.lorem.paragraph(2),
     openTrigger: 'Open Dialog',
     closeTrigger: 'Close',
     blockAlign: 'center',
     size: 'xl',
   },
 };
+
+export const Scrolling: Story = {
+  render: ScrollingStory,
+  args: {
+    title: 'Dialog title',
+    description: random.lorem.paragraph(20),
+    openTrigger: 'Open Dialog',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'md',
+  },
+};