@12-apps/ui 6.53.0 → 6.54.1

package/src/components/data-display/AlertDialog/AlertDialog.tsx

@@ -1,22 +1,19 @@
 import Close from '@mui/icons-material/Close';
 import Error from '@mui/icons-material/Error';
 import Info from '@mui/icons-material/Info';
-import type { ButtonProps } from '@mui/material/Button/index.js';
-import Button from '@mui/material/Button/index.js';
-import CircularProgress from '@mui/material/CircularProgress/index.js';
 import Dialog from '@mui/material/Dialog/index.js';
-import DialogActions from '@mui/material/DialogActions/index.js';
 import DialogContent from '@mui/material/DialogContent/index.js';
 import DialogContentText from '@mui/material/DialogContentText/index.js';
 import DialogTitle from '@mui/material/DialogTitle/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';
+import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
 import type { Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import { neutralTones } from '../../../tokens/ink';
 
+import { AlertDialogFooter } from './AlertDialog.parts';
 import type { AlertDialogProps } from './AlertDialog.types';
 import { rem, rems } from '../../../tokens/relative';
 
@@ -140,11 +137,6 @@ const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
   paddingBottom: theme.spacing(2),
 }));
 
-const StyledDialogActions = styled(DialogActions)(({ theme }) => ({
-  padding: theme.spacing(2, 3, 3, 3),
-  gap: theme.spacing(1),
-}));
-
 const CloseButton = styled(IconButton)(({ theme }) => ({
   position: 'absolute',
   right: theme.spacing(1),
@@ -208,11 +200,6 @@ function ariaSlotProps(
   };
 }
 
-/** Both variants render a filled confirm; only the colour distinguishes them. */
-const CONFIRM_BUTTON_VARIANT: ButtonProps['variant'] = 'contained';
-const confirmButtonColor = (variant: AlertDialogProps['variant']): 'error' | 'primary' =>
-  variant === 'destructive' ? 'error' : 'primary';
-
 /** Title row: the variant icon (unless explicitly suppressed with `null`) + the title. */
 function AlertDialogHeader({
   title,
@@ -238,70 +225,6 @@ function AlertDialogHeader({
   );
 }
 
-/** Action row: the optional cancel button and the (variant-coloured) confirm. */
-function AlertDialogFooter({
-  variant,
-  cancelText = 'Cancel',
-  confirmText = 'Confirm',
-  showCancel = true,
-  loading = false,
-  confirmDisabled = false,
-  initialFocus = 'confirm',
-  onCancel,
-  onConfirm,
-  dataTestId,
-}: Pick<
-  AlertDialogProps,
-  | 'variant'
-  | 'cancelText'
-  | 'confirmText'
-  | 'showCancel'
-  | 'loading'
-  | 'confirmDisabled'
-  | 'initialFocus'
-> & {
-  onCancel: () => void;
-  onConfirm: () => void;
-  dataTestId: string;
-}): React.ReactElement {
-  const theme = useTheme();
-  return (
-    <StyledDialogActions data-testid={`${dataTestId}-actions`}>
-      {showCancel && (
-        <Button
-          onClick={onCancel}
-          variant="outlined"
-          color="inherit"
-          disabled={loading}
-          autoFocus={initialFocus === 'cancel'}
-          data-testid={`${dataTestId}-cancel-button`}
-        >
-          {cancelText}
-        </Button>
-      )}
-      <Button
-        onClick={onConfirm}
-        variant={CONFIRM_BUTTON_VARIANT}
-        color={confirmButtonColor(variant)}
-        disabled={confirmDisabled || loading}
-        startIcon={
-          loading ? (
-            <CircularProgress
-              size={rem(theme, 16)}
-              color="inherit"
-              data-testid={`${dataTestId}-loading-spinner`}
-            />
-          ) : undefined
-        }
-        autoFocus={initialFocus !== 'cancel'}
-        data-testid={`${dataTestId}-confirm-button`}
-      >
-        {confirmText}
-      </Button>
-    </StyledDialogActions>
-  );
-}
-
 export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
   ({
     variant = 'default',
@@ -318,6 +241,7 @@ export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
     loading,
     confirmDisabled,
     initialFocus,
+    emphasis,
     children,
     onClose,
     'data-testid': dataTestId = 'alert-dialog',
@@ -348,12 +272,7 @@ export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
           <Close />
         </CloseButton>
 
-        <AlertDialogHeader
-          title={title}
-          icon={icon}
-          variant={variant}
-          dataTestId={dataTestId}
-        />
+        <AlertDialogHeader title={title} icon={icon} variant={variant} dataTestId={dataTestId} />
 
         <StyledDialogContent data-testid={`${dataTestId}-content`}>
           {description && (
@@ -375,6 +294,7 @@ export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
           loading={loading}
           confirmDisabled={confirmDisabled}
           initialFocus={initialFocus}
+          emphasis={emphasis}
           onCancel={handleCancel}
           onConfirm={() => onConfirm?.()}
           dataTestId={dataTestId}

package/src/components/data-display/AlertDialog/AlertDialog.types.ts

@@ -68,12 +68,26 @@ export interface AlertDialogProps extends Omit<MuiDialogProps, 'variant'> {
   confirmDisabled?: boolean;
 
   /**
-   * Which button owns focus when the dialog opens. Defaults to `confirm`, which
-   * is right for an acknowledgement; a destructive dialog should pass `cancel`
-   * so a stray Enter on the trigger cannot complete the action.
+   * Which button owns focus when the dialog opens. Defaults to the emphasised
+   * one — `confirm`, unless `emphasis="cancel"` — which is right for an
+   * acknowledgement; a destructive dialog should pass `cancel` so a stray Enter
+   * on the trigger cannot complete the action.
    */
   initialFocus?: 'confirm' | 'cancel';
 
+  /**
+   * Which button is the filled, primary one. Defaults to `confirm`. Pass
+   * `cancel` when backing out is the action to steer toward — a "discard what
+   * you wrote?" question, where the confirm is the loss: cancel is then filled
+   * and takes the primary slot (right, or on top once the row stacks), and the
+   * confirm steps down to the neutral outline cancel normally wears — primary
+   * and neutral, whatever the variant. The two buttons then grow to share the
+   * row, so once it stacks each takes its full width; focus opens on the cancel
+   * unless `initialFocus` says otherwise. With `showCancel={false}` it has no
+   * effect: the confirm keeps its default, filled look.
+   */
+  emphasis?: 'confirm' | 'cancel';
+
   /**
    * Optional data-testid attribute for testing
    */

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.styles.ts

@@ -34,7 +34,7 @@ export const variantStyles = (theme: Theme, variant?: string): CSSObject => {
   switch (variant) {
     case 'default':
       return {
-        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.92),
+        backgroundColor: neutralTones(theme).inverseSurface,
         color: absoluteInk(theme).white,
         boxShadow: `${rems(theme, 0, 4, 12)} ${shadowInk(theme, 0.3)}`,
       };
@@ -98,6 +98,6 @@ export const arrowColor = (theme: Theme, variant?: string): string => {
     case 'dark':
       return absoluteInk(theme).black;
     default:
-      return alpha(neutralTones(theme).inverseSurface, 0.92);
+      return neutralTones(theme).inverseSurface;
   }
 };

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.tsx

@@ -1,124 +1,127 @@
-import MuiTooltip from '@mui/material/Tooltip/index.js';
-import { styled } from '@mui/material/styles/index.js';
-import React from 'react';
+import MuiTooltip from "@mui/material/Tooltip/index.js";
+import type { CSSObject, Theme } from "@mui/material/styles/index.js";
+import React from "react";
 
-import { resolveTooltipProps, useHoverOpen, usePinnedTooltip } from './InteractiveTooltip.hooks';
+import {
+  resolveTooltipProps,
+  useHoverOpen,
+  usePinnedTooltip,
+} from "./InteractiveTooltip.hooks";
 import {
   arrowColor,
   emphasisStyles,
   getSizeStyles,
   tooltipCap,
   variantStyles,
-} from './InteractiveTooltip.styles';
-import type { InteractiveTooltipProps } from './InteractiveTooltip.types';
-
-const StyledTooltip = styled(MuiTooltip, {
-  shouldForwardProp: (prop) =>
-    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),
-})<{
-  customVariant?: string;
-  customSize?: string;
-  glow?: boolean;
-  pulse?: boolean;
-}>(({ theme, customVariant, customSize, glow, pulse }) => {
-  const sizeStyles = getSizeStyles(customSize);
+} from "./InteractiveTooltip.styles";
+import type { InteractiveTooltipProps } from "./InteractiveTooltip.types";
 
-  return {
-    '& .MuiTooltip-tooltip': {
+/**
+ * The bubble's own look, applied to the BUBBLE (FUT-3093) — see `Tooltip`'s
+ * `bubbleSx`: a `& .MuiTooltip-tooltip` rule on the root never reached the
+ * portalled bubble, so the variants had never been on screen.
+ */
+const bubbleSx =
+  (
+    variant: string | undefined,
+    size: string | undefined,
+    glow: boolean | undefined,
+    pulse: boolean | undefined,
+    maxWidth: number | undefined,
+  ) =>
+  (theme: Theme): CSSObject => {
+    const sizeStyles = getSizeStyles(size);
+    return {
       borderRadius: theme.spacing(1),
       fontSize: sizeStyles.fontSize(theme),
       padding: sizeStyles.padding(theme),
       fontWeight: 500,
-      transition: 'all 0.3s ease',
-      position: 'relative',
-      overflow: 'hidden',
-      ...variantStyles(theme, customVariant),
+      transition: "all 0.3s ease",
+      position: "relative",
+      maxWidth: tooltipCap(maxWidth)(theme),
+      ...variantStyles(theme, variant),
       ...emphasisStyles(theme, glow, pulse),
-    },
-
-    '& .MuiTooltip-arrow': {
-      color: arrowColor(theme, customVariant),
-    },
+    };
   };
-});
 
-export const InteractiveTooltip = React.forwardRef<HTMLDivElement, InteractiveTooltipProps>(
-  (rawProps, ref) => {
-    const {
-      variant,
-      size,
-      glow,
-      pulse,
-      maxWidth,
-      dataTestId,
-      hoverContent,
-      pinnedContent,
-      clickable,
-      onPin,
-      onUnpin,
-      className,
-      children,
-      onOpen,
-      onClose,
-      ...props
-    } = resolveTooltipProps(rawProps);
+export const InteractiveTooltip = React.forwardRef<
+  HTMLDivElement,
+  InteractiveTooltipProps
+>((rawProps, ref) => {
+  const {
+    variant,
+    size,
+    glow,
+    pulse,
+    maxWidth,
+    dataTestId,
+    hoverContent,
+    pinnedContent,
+    clickable,
+    onPin,
+    onUnpin,
+    className,
+    children,
+    onOpen,
+    onClose,
+    ...props
+  } = resolveTooltipProps(rawProps);
 
-    const { isPinned, isControlledOpen, wrapperRef, handleClick } = usePinnedTooltip({
+  const { isPinned, isControlledOpen, wrapperRef, handleClick } =
+    usePinnedTooltip({
       clickable,
       onPin,
       onUnpin,
     });
-    const hover = useHoverOpen(isPinned, onOpen, onClose);
+  const hover = useHoverOpen(isPinned, onOpen, onClose);
 
-    // Determine which content to show
-    const tooltipContent = isPinned ? pinnedContent : hoverContent;
+  // Determine which content to show
+  const tooltipContent = isPinned ? pinnedContent : hoverContent;
 
-    // Child with click handler and ref
-    const childElement = children as React.ReactElement<{
-      onClick?: (e: React.MouseEvent) => void;
-      'data-testid'?: string;
-    }>;
+  // Child with click handler and ref
+  const childElement = children as React.ReactElement<{
+    onClick?: (e: React.MouseEvent) => void;
+    "data-testid"?: string;
+  }>;
 
-    const childWithProps = React.cloneElement(childElement, {
-      onClick: (e: React.MouseEvent) => {
-        handleClick(e);
-        // Call original onClick if it exists
-        childElement.props.onClick?.(e);
-      },
-      'data-testid': dataTestId ? `${dataTestId}-trigger` : undefined,
-    });
+  const childWithProps = React.cloneElement(childElement, {
+    onClick: (e: React.MouseEvent) => {
+      handleClick(e);
+      // Call original onClick if it exists
+      childElement.props.onClick?.(e);
+    },
+    "data-testid": dataTestId ? `${dataTestId}-trigger` : undefined,
+  });
 
-    return (
-      <div ref={wrapperRef} className={className}>
-        <StyledTooltip
-          ref={ref}
-          customVariant={variant}
-          customSize={size}
-          glow={glow}
-          pulse={pulse}
-          title={tooltipContent}
-          open={isPinned ? isControlledOpen : hover.open}
-          onOpen={hover.onOpen}
-          onClose={hover.onClose}
-          enterDelay={isPinned ? 0 : 100}
-          leaveDelay={0}
-          disableHoverListener={isPinned}
-          disableFocusListener={isPinned}
-          disableTouchListener={isPinned}
-          slotProps={{
-            tooltip: {
-              sx: { maxWidth: tooltipCap(maxWidth) },
-              role: 'tooltip',
-              ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),
-            },
-          }}
-          {...props}
-        >
-          {childWithProps}
-        </StyledTooltip>
-      </div>
-    );
-  },
-);
+  return (
+    <div ref={wrapperRef} className={className}>
+      <MuiTooltip
+        ref={ref}
+        title={tooltipContent}
+        open={isPinned ? isControlledOpen : hover.open}
+        onOpen={hover.onOpen}
+        onClose={hover.onClose}
+        enterDelay={isPinned ? 0 : 100}
+        leaveDelay={0}
+        disableHoverListener={isPinned}
+        disableFocusListener={isPinned}
+        disableTouchListener={isPinned}
+        slotProps={{
+          tooltip: {
+            sx: bubbleSx(variant, size, glow, pulse, maxWidth),
+            role: "tooltip",
+            ...(dataTestId && { "data-testid": `${dataTestId}-content` }),
+          },
+          arrow: {
+            sx: (theme: Theme) => ({ color: arrowColor(theme, variant) }),
+          },
+        }}
+        {...props}
+      >
+        {childWithProps}
+      </MuiTooltip>
+    </div>
+  );
+});
 
-InteractiveTooltip.displayName = 'InteractiveTooltip';
+InteractiveTooltip.displayName = "InteractiveTooltip";

package/src/components/data-display/Tooltip/Tooltip.tsx

@@ -1,11 +1,11 @@
-import MuiTooltip from '@mui/material/Tooltip/index.js';
-import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
-import type { CSSObject, Theme } from '@mui/material/styles/index.js';
-import React from 'react';
+import MuiTooltip from "@mui/material/Tooltip/index.js";
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+import type { CSSObject, Theme } from "@mui/material/styles/index.js";
+import React from "react";
 
-import type { TooltipProps } from './Tooltip.types';
-import { absoluteInk, neutralTones } from '../../../tokens/ink';
-import { rem, rems, sxRem } from '../../../tokens/relative';
+import type { TooltipProps } from "./Tooltip.types";
+import { absoluteInk, neutralTones } from "../../../tokens/ink";
+import { rem, rems, sxRem } from "../../../tokens/relative";
 
 // Define pulse animation
 const pulseAnimation = keyframes`
@@ -36,24 +36,24 @@ const getSizeStyles = (
 
 const variantStyles = (theme: Theme, variant?: string): CSSObject => {
   switch (variant) {
-    case 'default':
+    case "default":
       return {
-        backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.9),
+        backgroundColor: neutralTones(theme).inverseSurface,
         color: absoluteInk(theme).white,
       };
-    case 'dark':
+    case "dark":
       return {
         backgroundColor: neutralTones(theme).inverseSurface,
         color: absoluteInk(theme).white,
       };
-    case 'light':
+    case "light":
       return {
         backgroundColor: absoluteInk(theme).white,
         color: theme.palette.text.primary,
         border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
         boxShadow: theme.shadows[4],
       };
-    case 'glass':
+    case "glass":
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: `blur(${rem(theme, 20)})`,
@@ -67,10 +67,14 @@ const variantStyles = (theme: Theme, variant?: string): CSSObject => {
 
 // glow and pulse are independent flags. The three combinations used to be spelled
 // out one by one, but each is just the union of whichever flags are set.
-const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({
+const emphasisStyles = (
+  theme: Theme,
+  glow?: boolean,
+  pulse?: boolean,
+): CSSObject => ({
   ...(glow && {
     boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,
-    filter: 'brightness(1.05)',
+    filter: "brightness(1.05)",
   }),
   ...(pulse && {
     animation: `${pulseAnimation} 2s infinite`,
@@ -79,46 +83,48 @@ const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObjec
 
 const arrowColor = (theme: Theme, variant?: string): string => {
   switch (variant) {
-    case 'light':
+    case "light":
       return absoluteInk(theme).white;
-    case 'glass':
+    case "glass":
       return alpha(theme.palette.background.paper, 0.1);
-    case 'dark':
+    case "dark":
       return neutralTones(theme).inverseSurface;
     default:
-      return alpha(neutralTones(theme).inverseSurface, 0.9);
+      return neutralTones(theme).inverseSurface;
   }
 };
 
-const StyledTooltip = styled(MuiTooltip, {
-  shouldForwardProp: (prop) =>
-    !['customVariant', 'customSize', 'glow', 'pulse'].includes(prop as string),
-})<{
-  customVariant?: string;
-  customSize?: string;
-  glow?: boolean;
-  pulse?: boolean;
-}>(({ theme, customVariant, customSize, glow, pulse }) => {
-  const sizeStyles = getSizeStyles(customSize);
-
-  return {
-    '& .MuiTooltip-tooltip': {
+/**
+ * The bubble's own look, applied to the BUBBLE (FUT-3093).
+ *
+ * It used to sit on a `styled(MuiTooltip)` root as `& .MuiTooltip-tooltip`, but
+ * MUI renders the bubble in a portal, outside that root — so none of it ever
+ * reached the screen, and every tooltip wore MUI's see-through grey instead of
+ * the variant it asked for. `slotProps.tooltip.sx` lands on the bubble itself.
+ * No `overflow: hidden`: now that it applies, it would clip an `arrow`.
+ */
+const bubbleSx =
+  (
+    variant: string,
+    size: string,
+    glow: boolean,
+    pulse: boolean,
+    maxWidth: number | undefined,
+  ) =>
+  (theme: Theme): CSSObject => {
+    const sizeStyles = getSizeStyles(size);
+    return {
       borderRadius: theme.spacing(1),
       fontSize: sizeStyles.fontSize(theme),
       padding: sizeStyles.padding(theme),
       fontWeight: 500,
-      transition: 'all 0.3s ease',
-      position: 'relative',
-      overflow: 'hidden',
-      ...variantStyles(theme, customVariant),
+      transition: "all 0.3s ease",
+      position: "relative",
+      maxWidth: tooltipCap(maxWidth)(theme),
+      ...variantStyles(theme, variant),
       ...emphasisStyles(theme, glow, pulse),
-    },
-
-    '& .MuiTooltip-arrow': {
-      color: arrowColor(theme, customVariant),
-    },
+    };
   };
-});
 
 /**
  * The tooltip's cap: 300 design px unless the caller says otherwise. `sx` has
@@ -134,8 +140,8 @@ const tooltipCap =
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   (
     {
-      variant = 'default',
-      size = 'md',
+      variant = "default",
+      size = "md",
       glow = false,
       pulse = false,
       maxWidth,
@@ -146,18 +152,17 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
     ref,
   ) => {
     const childWithTestId = dataTestId
-      ? React.cloneElement(children as React.ReactElement<{ 'data-testid'?: string }>, {
-          'data-testid': `${dataTestId}-trigger`,
-        })
+      ? React.cloneElement(
+          children as React.ReactElement<{ "data-testid"?: string }>,
+          {
+            "data-testid": `${dataTestId}-trigger`,
+          },
+        )
       : children;
 
     return (
-      <StyledTooltip
+      <MuiTooltip
         ref={ref}
-        customVariant={variant}
-        customSize={size}
-        glow={glow}
-        pulse={pulse}
         enterDelay={0}
         leaveDelay={0}
         disableHoverListener={false}
@@ -165,17 +170,20 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
         disableTouchListener={false}
         slotProps={{
           tooltip: {
-            sx: { maxWidth: tooltipCap(maxWidth) },
-            role: 'tooltip',
-            ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),
+            sx: bubbleSx(variant, size, glow, pulse, maxWidth),
+            role: "tooltip",
+            ...(dataTestId && { "data-testid": `${dataTestId}-content` }),
+          },
+          arrow: {
+            sx: (theme: Theme) => ({ color: arrowColor(theme, variant) }),
           },
         }}
         {...props}
       >
         {childWithTestId}
-      </StyledTooltip>
+      </MuiTooltip>
     );
   },
 );
 
-Tooltip.displayName = 'Tooltip';
+Tooltip.displayName = "Tooltip";