@12-apps/ui 6.21.0 → 6.23.0

package/src/components/feedback/Dialog/Dialog.styles.ts

@@ -1,12 +1,28 @@
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 
+import type { DialogBorderRadius, DialogSize, DialogVariant } from './Dialog.base';
+import {
+  DIALOG_BACKDROP,
+  DIALOG_BORDER_WIDTH,
+  DIALOG_GLASS,
+  DIALOG_GLOW,
+  DIALOG_GRADIENT,
+  DIALOG_MARGIN_UNITS,
+  DIALOG_MAX_WIDTH,
+  DIALOG_PULSE,
+  DIALOG_RADIUS_UNITS,
+  DIALOG_WIDTH_PERCENT,
+} from './Dialog.metrics';
+import { shadowCss } from '../../../tokens/shadow';
 import { dynamicViewportHeight } from '../../../utils/viewport';
-import type { DialogProps } from './Dialog.types';
 
 /**
  * Paper/backdrop styling for the Dialog component (FUT-181 gate cleanup):
  * pure helpers so `Dialog.tsx` stays within the size/complexity budget.
+ *
+ * Every number comes from `Dialog.metrics.ts`, which the native renderer reads
+ * too — so a paper cannot be 800px wide on one side and 780 on the other.
  */
 
 // Define pulse animation
@@ -16,7 +32,7 @@ const pulseAnimation = keyframes`
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 20px currentColor;
+    box-shadow: 0 0 0 ${DIALOG_PULSE.spread}px currentColor;
     opacity: 0;
   }
   100% {
@@ -27,9 +43,9 @@ const pulseAnimation = keyframes`
 
 /** Style toggles that shape the dialog paper (extracted so each fn stays small). */
 interface VariantStyleOptions {
-  variant: NonNullable<DialogProps['variant']>;
-  size: NonNullable<DialogProps['size']>;
-  borderRadius: NonNullable<DialogProps['borderRadius']>;
+  variant: DialogVariant;
+  size: DialogSize;
+  borderRadius: DialogBorderRadius;
   glass: boolean;
   gradient: boolean;
   glow: boolean;
@@ -37,33 +53,21 @@ interface VariantStyleOptions {
 }
 
 function borderRadiusOf(theme: Theme, borderRadius: VariantStyleOptions['borderRadius']) {
-  switch (borderRadius) {
-    case 'none': return 0;
-    case 'sm': return theme.spacing(0.5);
-    case 'md': return theme.spacing(1);
-    case 'xl': return theme.spacing(3);
-    case 'lg':
-    default: return theme.spacing(2);
-  }
+  const units = DIALOG_RADIUS_UNITS[borderRadius] ?? DIALOG_RADIUS_UNITS.lg;
+  // `none` is a bare 0 rather than `spacing(0)`, as this has always written it.
+  return units === 0 ? 0 : theme.spacing(units);
 }
 
 function maxWidthOf(size: VariantStyleOptions['size']): number {
-  switch (size) {
-    case 'xs': return 400;
-    case 'sm': return 600;
-    case 'lg': return 1000;
-    case 'xl': return 1200;
-    case 'md':
-    default: return 800;
-  }
+  return DIALOG_MAX_WIDTH[size] ?? DIALOG_MAX_WIDTH.md;
 }
 
 function baseStylesOf(theme: Theme, opts: VariantStyleOptions) {
   return {
     borderRadius: borderRadiusOf(theme, opts.borderRadius),
     maxWidth: maxWidthOf(opts.size),
-    width: '90vw',
-    margin: theme.spacing(2),
+    width: `${DIALOG_WIDTH_PERCENT}vw`,
+    margin: theme.spacing(DIALOG_MARGIN_UNITS),
     transition: theme.transitions.create(
       ['box-shadow', 'background-color', 'backdrop-filter'],
       { duration: theme.transitions.duration.standard },
@@ -72,7 +76,17 @@ function baseStylesOf(theme: Theme, opts: VariantStyleOptions) {
 }
 
 function glowStylesOf(theme: Theme, glow: boolean) {
-  return glow ? { boxShadow: `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}` } : {};
+  return glow
+    ? {
+        boxShadow: shadowCss({
+          offsetX: 0,
+          offsetY: 0,
+          blurRadius: DIALOG_GLOW.blurRadius,
+          spreadDistance: 0,
+          color: alpha(theme.palette.primary.main, DIALOG_GLOW.alpha),
+        }),
+      }
+    : {};
 }
 
 function pulseStylesOf(theme: Theme, pulse: boolean) {
@@ -88,10 +102,10 @@ function pulseStylesOf(theme: Theme, pulse: boolean) {
       bottom: 0,
       borderRadius: 'inherit',
       backgroundColor: theme.palette.primary.main,
-      opacity: 0.3,
-      animation: `${pulseAnimation} 2s infinite`,
+      opacity: DIALOG_PULSE.alpha,
+      animation: `${pulseAnimation} ${DIALOG_PULSE.durationMs / 1000}s infinite`,
       pointerEvents: 'none' as const,
-      zIndex: -1,
+      zIndex: DIALOG_PULSE.zIndex,
     },
   };
 }
@@ -100,17 +114,19 @@ function pulseStylesOf(theme: Theme, pulse: boolean) {
 function defaultVariantStyles(theme: Theme, opts: VariantStyleOptions) {
   const gradientStyles = opts.gradient
     ? {
-        background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
-        backdropFilter: 'blur(10px)',
+        background: `linear-gradient(${DIALOG_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, DIALOG_GRADIENT.stopAlpha)}, ${alpha(theme.palette.secondary.main, DIALOG_GRADIENT.stopAlpha)})`,
+        backdropFilter: `blur(${DIALOG_GRADIENT.blurPx}px)`,
       }
     : {};
   return {
     ...gradientStyles,
     backgroundColor: opts.glass
-      ? alpha(theme.palette.background.paper, 0.1)
+      ? alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha)
       : theme.palette.background.paper,
-    backdropFilter: opts.glass ? 'blur(20px)' : 'none',
-    border: opts.glass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : 'none',
+    backdropFilter: opts.glass ? `blur(${DIALOG_GLASS.blurPx}px)` : 'none',
+    border: opts.glass
+      ? `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`
+      : 'none',
   };
 }
 
@@ -124,10 +140,16 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
       return {
         ...baseStylesOf(theme, opts),
         ...decorations,
-        backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: 'blur(20px)',
-        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
+        backgroundColor: alpha(theme.palette.background.paper, DIALOG_GLASS.backgroundAlpha),
+        backdropFilter: `blur(${DIALOG_GLASS.blurPx}px)`,
+        border: `${DIALOG_BORDER_WIDTH}px solid ${alpha(theme.palette.primary.main, DIALOG_GLASS.borderAlpha)}`,
+        boxShadow: shadowCss({
+          offsetX: 0,
+          offsetY: DIALOG_GLASS.shadow.offsetY,
+          blurRadius: DIALOG_GLASS.shadow.blurRadius,
+          spreadDistance: 0,
+          color: alpha(theme.palette.common.black, DIALOG_GLASS.shadow.alpha),
+        }),
       };
     case 'fullscreen':
       return {
@@ -164,10 +186,10 @@ export function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProp
 
 export function backdropSxOf(theme: Theme, glass: boolean) {
   return {
-    backgroundColor: glass
-      ? alpha(theme.palette.common.black, 0.2)
-      : alpha(theme.palette.common.black, 0.5),
-    backdropFilter: glass ? 'blur(8px)' : 'none',
+    backgroundColor: alpha(
+      theme.palette.common.black,
+      glass ? DIALOG_BACKDROP.alpha.glass : DIALOG_BACKDROP.alpha.plain,
+    ),
+    backdropFilter: glass ? `blur(${DIALOG_BACKDROP.blurPx}px)` : 'none',
   };
 }
-

package/src/components/feedback/Dialog/Dialog.tsx

@@ -11,7 +11,17 @@ import Typography from '@mui/material/Typography/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { hasSpacingSlot, withDialogDefaults } from './Dialog.helpers';
+import {
+  DIALOG_ACTIONS,
+  DIALOG_BODY_PADDING_UNITS,
+  DIALOG_CONTENT_PADDING_UNITS,
+  DIALOG_HEADER_CHILDREN_PADDING_UNITS,
+  DIALOG_TITLE,
+  DIALOG_TITLED_BODY_PADDING_TOP_UNITS,
+} from './Dialog.metrics';
 import { backdropSxOf, variantStylesOf } from './Dialog.styles';
+import { childTestId, resolveTestId, slotTestId, withoutTestIdProps } from '../../../platform/test-id';
 import type {
   DialogActionsProps,
   DialogContentProps,
@@ -19,24 +29,6 @@ import type {
   DialogProps,
 } from './Dialog.types';
 
-/**
- * Does this hand us a spacing slot? Fragments are transparent: `<>` is a way of
- * passing several children, not a child that owns them, and a consumer who
- * groups a `DialogContent` and a `DialogActions` in one has still passed both.
- *
- * Only the slots themselves count, and only at the top. A `DialogContent`
- * genuinely nested inside a `<div>` is that div's content, and the dialog
- * padding the div is right.
- */
-function hasSpacingSlot(children: React.ReactNode): boolean {
-  return React.Children.toArray(children).some((child) => {
-    if (!React.isValidElement(child)) return false;
-    if (child.type === DialogContent || child.type === DialogActions) return true;
-    if (child.type !== React.Fragment) return false;
-    return hasSpacingSlot((child.props as { children?: React.ReactNode }).children);
-  });
-}
-
 /**
  * The padding a dialog gives children that are not managing their own — and the
  * rule that takes it back when it turns out they are.
@@ -60,8 +52,8 @@ function hasSpacingSlot(children: React.ReactNode): boolean {
  * had before, not a broken one.
  */
 const BODY_SX = {
-  px: 3,
-  pb: 2.5,
+  px: DIALOG_BODY_PADDING_UNITS.horizontal,
+  pb: DIALOG_BODY_PADDING_UNITS.bottom,
   '&:has(> .MuiDialogContent-root), &:has(> .MuiDialogActions-root)': {
     display: 'contents',
   },
@@ -74,38 +66,12 @@ const BODY_SX = {
  * spacing.
  */
 function bodyOf(children: React.ReactNode, hasTitle: boolean): React.ReactNode {
-  if (hasSpacingSlot(children)) return children;
-  return <Box sx={{ ...BODY_SX, pt: hasTitle ? 0.5 : 2.5 }}>{children}</Box>;
-}
-
-const DIALOG_DEFAULTS = {
-  variant: 'default',
-  size: 'md',
-  showCloseButton: true,
-  backdrop: true,
-  persistent: false,
-  glass: false,
-  gradient: false,
-  glow: false,
-  pulse: false,
-  borderRadius: 'lg',
-} as const satisfies Partial<DialogProps>;
-
-/** DialogProps with every defaulted field guaranteed present (wide types). */
-type DialogPropsWithDefaults = DialogProps &
-  Required<Pick<DialogProps, keyof typeof DIALOG_DEFAULTS>>;
-
-/**
- * Apply {@link DIALOG_DEFAULTS} exactly like parameter defaults would: only a
- * missing/`undefined` prop falls back (a loop, so the component's cyclomatic
- * complexity doesn't pay one branch per defaulted prop).
- */
-function withDialogDefaults(props: DialogProps): DialogPropsWithDefaults {
-  const merged: Record<string, unknown> = { ...props };
-  for (const [key, value] of Object.entries(DIALOG_DEFAULTS)) {
-    if (merged[key] === undefined) merged[key] = value;
-  }
-  return merged as unknown as DialogPropsWithDefaults;
+  // Read lazily: both slots are declared below this function.
+  if (hasSpacingSlot(children, [DialogContent, DialogActions])) return children;
+  const pt = hasTitle
+    ? DIALOG_BODY_PADDING_UNITS.topUnderTitle
+    : DIALOG_BODY_PADDING_UNITS.top;
+  return <Box sx={{ ...BODY_SX, pt }}>{children}</Box>;
 }
 
 export const Dialog: React.FC<DialogProps> = (rawProps) => {
@@ -125,11 +91,15 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
     borderRadius,
     onClose,
     open,
-    dataTestId,
-    ...props
+    ...others
   } = withDialogDefaults(rawProps);
   const theme = useTheme();
-  const testId = dataTestId || 'dialog';
+  // Every spelling of the test id the shared contract allows, mapped to the one
+  // the DOM reads, and stripped from what is spread — `testID` is React
+  // Native's name for it and is not a DOM attribute. The native `Dialog` does
+  // the same in reverse.
+  const testId = resolveTestId(others, 'dialog');
+  const props = withoutTestIdProps(others);
   const paperSx = variantStylesOf(theme, {
     variant, size, borderRadius, glass, gradient, glow, pulse,
   });
@@ -147,7 +117,7 @@ export const Dialog: React.FC<DialogProps> = (rawProps) => {
       subtitle={description}
       showCloseButton={showCloseButton}
       onClose={onClose}
-      dataTestId={dataTestId}
+      dataTestId={testId}
     />
   ) : null;
   const body = bodyOf(children, Boolean(title));
@@ -191,11 +161,20 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
   subtitle,
   showCloseButton = true,
   onClose,
-  dataTestId,
+  ...others
 }) => {
+  const props = withoutTestIdProps(others);
+
   if (children) {
     return (
-      <Box sx={{ p: 2, borderBottom: '1px solid', borderColor: 'divider' }}>
+      <Box
+        data-testid={slotTestId(others, 'header', 'dialog')}
+        sx={{
+          p: DIALOG_HEADER_CHILDREN_PADDING_UNITS,
+          borderBottom: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
         {children}
       </Box>
     );
@@ -203,20 +182,27 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
 
   return (
     <MuiDialogTitle
-      data-testid={dataTestId ? `${dataTestId}-title` : 'dialog-title'}
+      data-testid={slotTestId(others, 'title', 'dialog')}
       sx={{
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        pb: subtitle ? 1 : 2,
+        pb: subtitle
+          ? DIALOG_TITLE.paddingBottomUnits.withSubtitle
+          : DIALOG_TITLE.paddingBottomUnits.plain,
       }}
+      {...props}
     >
       <Box>
         <Typography variant="h6" component="div">
           {title}
         </Typography>
         {subtitle && (
-          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{ mt: DIALOG_TITLE.subtitleGapUnits }}
+          >
             {subtitle}
           </Typography>
         )}
@@ -225,7 +211,7 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
         <IconButton
           aria-label="close"
           onClick={onClose}
-          data-testid={dataTestId ? `${dataTestId}-close` : 'dialog-close'}
+          data-testid={childTestId(others, 'close', 'dialog')}
           sx={{
             color: 'text.secondary',
             '&:hover': {
@@ -254,7 +240,7 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
  * contributes its bottom padding, so a shrunk label's `translate(…, -9px)` is
  * all that is missing. 12px clears it and leaves the gap visually tight.
  */
-const TITLED_BODY_PADDING_TOP = 1.5;
+const TITLED_BODY_PADDING_TOP = DIALOG_TITLED_BODY_PADDING_TOP_UNITS;
 
 /**
  * `.MuiDialogTitle-root + &` is `(0,2,0)`-specific and a plain `sx` entry is
@@ -268,14 +254,13 @@ export const DialogContent: React.FC<DialogContentProps> = ({
   children,
   dividers = false,
   dense = false,
-  dataTestId,
-  ...props
+  ...others
 }) => (
     <MuiDialogContent
-      data-testid={dataTestId ? `${dataTestId}-content` : 'dialog-content'}
+      data-testid={slotTestId(others, 'content', 'dialog')}
       dividers={dividers}
       sx={{
-        padding: dense ? 1.5 : 3,
+        padding: dense ? DIALOG_CONTENT_PADDING_UNITS.dense : DIALOG_CONTENT_PADDING_UNITS.normal,
         [TITLED_BODY_SELECTOR]: { paddingTop: TITLED_BODY_PADDING_TOP },
         '&.MuiDialogContent-dividers': {
           borderTop: dividers ? '1px solid' : 'none',
@@ -283,7 +268,7 @@ export const DialogContent: React.FC<DialogContentProps> = ({
           borderColor: 'divider',
         },
       }}
-      {...props}
+      {...withoutTestIdProps(others)}
     >
       {children}
     </MuiDialogContent>
@@ -292,9 +277,8 @@ export const DialogContent: React.FC<DialogContentProps> = ({
 export const DialogActions: React.FC<DialogActionsProps> = ({
   children,
   alignment = 'right',
-  spacing = 1,
-  dataTestId,
-  ...props
+  spacing = DIALOG_ACTIONS.defaultSpacingUnits,
+  ...others
 }) => {
   const getJustifyContent = () => {
     switch (alignment) {
@@ -308,13 +292,13 @@ export const DialogActions: React.FC<DialogActionsProps> = ({
 
   return (
     <MuiDialogActions
-      data-testid={dataTestId ? `${dataTestId}-actions` : 'dialog-actions'}
+      data-testid={slotTestId(others, 'actions', 'dialog')}
       sx={{
         justifyContent: getJustifyContent(),
         gap: spacing,
-        p: 2,
+        p: DIALOG_ACTIONS.paddingUnits,
       }}
-      {...props}
+      {...withoutTestIdProps(others)}
     >
       {children}
     </MuiDialogActions>

package/src/components/feedback/Dialog/Dialog.types.native.ts

@@ -0,0 +1,46 @@
+import type { ModalProps, StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import type {
+  DialogActionsBaseProps,
+  DialogBaseProps,
+  DialogContentBaseProps,
+  DialogHeaderBaseProps,
+} from './Dialog.base';
+
+export type {
+  DialogActionsAlignment,
+  DialogActionsBaseProps,
+  DialogBaseProps,
+  DialogBorderRadius,
+  DialogContentBaseProps,
+  DialogHeaderBaseProps,
+  DialogSize,
+  DialogVariant,
+} from './Dialog.base';
+
+/** Everything a native slot takes on top of its shared contract. */
+type NativeSlotProps<Base> = Base & Omit<ViewProps, keyof Base | 'style'> & {
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * The native `Dialog`: the shared contract over React Native's own `Modal`.
+ *
+ * `Modal`'s props come through so a consumer can pick the presentation
+ * (`animationType`, `statusBarTranslucent`, `supportedOrientations`). `visible`
+ * is spoken for — `open` is the shared name — and `onRequestClose` is wired to
+ * `onClose` unless the dialog is `persistent`, which is what makes the Android
+ * back button and the browser's Escape key behave like the web's.
+ *
+ * `style` lands on the PAPER, the box the web styles through `PaperProps.sx`.
+ */
+export type DialogProps = DialogBaseProps &
+  Omit<ModalProps, keyof DialogBaseProps | 'visible' | 'onRequestClose' | 'style'> & {
+    style?: StyleProp<ViewStyle>;
+  };
+
+export type DialogHeaderProps = NativeSlotProps<DialogHeaderBaseProps>;
+
+export type DialogContentProps = NativeSlotProps<DialogContentBaseProps>;
+
+export type DialogActionsProps = NativeSlotProps<DialogActionsBaseProps>;

package/src/components/feedback/Dialog/Dialog.types.ts

@@ -1,47 +1,30 @@
-import type { SizeValue } from '../../../tokens/scales';
 import type { DialogProps as MuiDialogProps } from '@mui/material/Dialog/index.js';
-import type { ReactNode } from 'react';
 
-export type DialogVariant = 'default' | 'glass' | 'fullscreen' | 'drawer';
-export type DialogSize = SizeValue;
+import type {
+  DialogActionsBaseProps,
+  DialogBaseProps,
+  DialogContentBaseProps,
+  DialogHeaderBaseProps,
+} from './Dialog.base';
 
-export interface DialogProps extends Omit<MuiDialogProps, 'variant' | 'title'> {
-  children: ReactNode;
-  variant?: DialogVariant;
-  size?: DialogSize;
-  title?: ReactNode;
-  description?: string;
-  showCloseButton?: boolean;
-  backdrop?: boolean;
-  persistent?: boolean;
-  glass?: boolean;
-  gradient?: boolean;
-  glow?: boolean;
-  pulse?: boolean;
-  borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  onClose?: () => void;
-  dataTestId?: string;
-}
+export type {
+  DialogActionsAlignment,
+  DialogActionsBaseProps,
+  DialogBaseProps,
+  DialogBorderRadius,
+  DialogContentBaseProps,
+  DialogHeaderBaseProps,
+  DialogSize,
+  DialogVariant,
+} from './Dialog.base';
 
-export interface DialogHeaderProps {
-  children?: ReactNode;
-  title?: ReactNode;
-  subtitle?: ReactNode;
-  showCloseButton?: boolean;
-  onClose?: () => void;
-  dataTestId?: string;
-}
+/** The web `Dialog`: the shared contract, plus everything MUI's own `Dialog` takes. */
+export interface DialogProps
+  extends DialogBaseProps,
+    Omit<MuiDialogProps, 'variant' | 'title' | keyof DialogBaseProps> {}
 
-export interface DialogContentProps {
-  children: ReactNode;
-  dividers?: boolean;
-  dense?: boolean;
-  dataTestId?: string;
-}
+export type DialogHeaderProps = DialogHeaderBaseProps;
 
-export interface DialogActionsProps {
-  children: ReactNode;
-  alignment?: 'left' | 'center' | 'right' | 'space-between';
-  spacing?: number;
-  dataTestId?: string;
-}
+export type DialogContentProps = DialogContentBaseProps;
+
+export type DialogActionsProps = DialogActionsBaseProps;