@moderneinc/design-system-components 7.7.0-next.19b91c → 7.7.0-next.6ace41

package/dist/Button/Button.d.ts

@@ -1,5 +1,6 @@
-import ButtonBase from '@mui/material/ButtonBase';
-import React, { type ElementType, type ReactNode } from 'react';
+import type ButtonBase from '@mui/material/ButtonBase';
+import type React from 'react';
+import { type ElementType, type ReactNode } from 'react';
 declare module '@mui/material/ButtonBase' {
     interface ButtonBasePropsVariantOverrides {
         primary: true;
@@ -22,7 +23,8 @@ type ModButtonOwnProps = {
      */
     size?: ButtonSize;
     /**
-     * Show loading spinner instead of children
+     * Show a loading spinner in place of `startIcon` (or `endIcon`), or over the label when
+     * there is no icon. The button keeps its width either way.
      * @default false
      */
     loading?: boolean;
@@ -47,9 +49,9 @@ export type ModButtonProps<C extends ElementType = typeof ButtonBase> = ModButto
     component?: C;
 };
 /**
- * ModButton - Text button component based on MUI ButtonBase
+ * ModButton - Text button component based on MUI Button
  */
-export declare function ModButton<C extends ElementType = typeof ButtonBase>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: ModButtonProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare function ModButton<C extends ElementType = typeof ButtonBase>({ variant, size, loading, children, startIcon, endIcon, ...rest }: ModButtonProps<C>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ModButton {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -523,7 +523,8 @@ type ModButtonOwnProps = {
      */
     size?: ButtonSize;
     /**
-     * Show loading spinner instead of children
+     * Show a loading spinner in place of `startIcon` (or `endIcon`), or over the label when
+     * there is no icon. The button keeps its width either way.
      * @default false
      */
     loading?: boolean;
@@ -548,9 +549,9 @@ type ModButtonProps<C extends ElementType = typeof ButtonBase> = ModButtonOwnPro
     component?: C;
 };
 /**
- * ModButton - Text button component based on MUI ButtonBase
+ * ModButton - Text button component based on MUI Button
  */
-declare function ModButton<C extends ElementType = typeof ButtonBase>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: ModButtonProps<C>): react_jsx_runtime.JSX.Element;
+declare function ModButton<C extends ElementType = typeof ButtonBase>({ variant, size, loading, children, startIcon, endIcon, ...rest }: ModButtonProps<C>): react_jsx_runtime.JSX.Element;
 declare namespace ModButton {
     var displayName: string;
 }

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { semanticColors, spacing, typography, borderRadius, shadows, colors, semanticColorsDark, semanticTypography, iconSize, height } from '@moderneinc/design-system-tokens';
+import { semanticColors, spacing, typography, borderRadius, shadows, iconSize, colors, semanticColorsDark, semanticTypography, height } from '@moderneinc/design-system-tokens';
 import Box from '@mui/material/Box';
 import { styled, useTheme, alpha } from '@mui/material/styles';
 import Chip, { chipClasses } from '@mui/material/Chip';
@@ -9,9 +9,10 @@ import Alert, { alertClasses } from '@mui/material/Alert';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
 import { Info, WifiOff, TriangleAlert, CircleAlert, CircleCheckBig, X, ChevronRight, Square, SquareCheck, SquareMinus, Search, ChevronDown, Plus, Trash2, ArrowUp, ArrowDown, ChevronsUpDown, Columns3, ListFilter, HelpCircle, CalendarDays, Minus, ChevronLeft, AlertCircle, ChevronUp } from 'lucide-react';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
-import React, { useState, useRef, useCallback, useMemo, forwardRef, useEffect, createContext, useContext, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
+import { useState, useId, useRef, useCallback, useMemo, forwardRef, useEffect, createContext, useContext, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
 import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
+import Button, { buttonClasses } from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import MuiToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
 import MuiToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
@@ -19,7 +20,6 @@ import MuiCard from '@mui/material/Card';
 import Checkbox, { checkboxClasses } from '@mui/material/Checkbox';
 import { gridClasses, useGridApiContext, useGridSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, GridFilterPanel, GridPanel, gridPanelClasses, ColumnsPanelTrigger, ToolbarButton, gridFilterModelSelector, FilterPanelTrigger, gridPaginationModelSelector, gridRowCountSelector, gridRowSelectionCountSelector, GridActionsCell, QuickFilter, QuickFilterControl, QuickFilterClear, Toolbar } from '@mui/x-data-grid';
 import { useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro';
-import Button, { buttonClasses } from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import InputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdornment';
 import InputBase, { inputBaseClasses } from '@mui/material/InputBase';
@@ -740,39 +740,34 @@ function ModBreadcrumbs({ children, className }) {
     return (jsx(StyledBreadcrumbs, { separator: jsx(ChevronRight, { size: 10.67, color: semanticColors.color.icon.utility }), className: className, "aria-label": "breadcrumb", children: children }));
 }
 
-// Props that should not be forwarded to ButtonBase (Button-specific props that ButtonBase doesn't support)
-const buttonOnlyProps = [
-    'variant',
-    'size',
-    'loading',
-    'startIcon',
-    'endIcon',
-    'fullWidth',
-    'disableElevation',
-];
-const StyledButtonBase$1 = styled(ButtonBase, {
-    shouldForwardProp: prop => !buttonOnlyProps.includes(prop),
-})(({ theme, variant = 'primary', size = 'medium', loading = false }) => {
+const StyledButton = styled(Button, {
+    shouldForwardProp: prop => prop !== 'buttonVariant' && prop !== 'buttonSize',
+})(({ theme, buttonVariant: variant, buttonSize: size }) => {
     // Size configurations
     const sizeConfig = {
         small: {
             height: 32,
-            padding: `0 ${spacing.spacing_1_1_2}px`,
+            paddingX: spacing.spacing_1_1_2,
             fontSize: theme.typography.pxToRem(14),
         },
         medium: {
             height: spacing.spacing_5,
-            padding: `0 ${spacing.spacing_2}px`,
+            paddingX: spacing.spacing_2,
             fontSize: theme.typography.pxToRem(14),
         },
     };
     const sizeStyles = sizeConfig[size];
+    const paddingX = variant === 'tertiary' ? 0 : sizeStyles.paddingX;
+    const spinnerSize = size === 'small' ? iconSize.md : iconSize.xl;
+    const disabled = `&.${buttonClasses.disabled}:not(.${buttonClasses.loading})`;
     // Base styles shared by all variants
     const baseStyles = {
         height: sizeStyles.height,
-        padding: sizeStyles.padding,
+        padding: `0 ${paddingX}px`,
+        fontFamily: 'inherit',
         fontSize: sizeStyles.fontSize,
         fontWeight: typography.fontWeight.semiBold,
+        letterSpacing: 'inherit',
         lineHeight: '1.25rem',
         borderRadius: borderRadius.button,
         textTransform: 'none',
@@ -782,13 +777,48 @@ const StyledButtonBase$1 = styled(ButtonBase, {
         position: 'relative',
         minWidth: 'fit-content',
         gap: spacing.spacing_1,
+        // `gap` spaces the icons; MUI's slot margins would add to it
+        [`& .${buttonClasses.startIcon}, & .${buttonClasses.endIcon}`]: {
+            margin: 0,
+        },
+        // MUI sets font-size on the icon slot's first child; IconSlot takes it so 1em icons keep the label's size
+        [`& .${buttonClasses.startIcon} > *:nth-of-type(1), & .${buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+            fontSize: 'inherit',
+        },
+        // MUI's indicator is a sibling of the icon; anchoring sizes and places it on the icon
+        [`&.${buttonClasses.loadingPositionStart} .${buttonClasses.startIcon}, &.${buttonClasses.loadingPositionEnd} .${buttonClasses.endIcon}`]: {
+            anchorName: '--mod-button-icon',
+            // MUI fades the icon out while the spinner appears at full opacity
+            transition: 'none',
+        },
+        [`&.${buttonClasses.loadingPositionStart} .${buttonClasses.loadingIndicator}, &.${buttonClasses.loadingPositionEnd} .${buttonClasses.loadingIndicator}`]: {
+            // MUI switches it to relative for fullWidth
+            position: 'absolute',
+            positionAnchor: '--mod-button-icon',
+            inset: 'anchor(top) anchor(right) anchor(bottom) anchor(left)',
+        },
+        // Without anchor positioning, the spinner takes the standard icon size at the icon's edge
+        '@supports not (anchor-name: --a)': {
+            [`&.${buttonClasses.loadingPositionStart} .${buttonClasses.loadingIndicator}`]: {
+                inset: 'auto',
+                left: paddingX,
+                width: spinnerSize,
+                height: spinnerSize,
+            },
+            [`&.${buttonClasses.loadingPositionEnd} .${buttonClasses.loadingIndicator}`]: {
+                inset: 'auto',
+                right: paddingX,
+                width: spinnerSize,
+                height: spinnerSize,
+            },
+        },
         // Disabled state (always show cursor)
-        [`&.${buttonBaseClasses.disabled}`]: {
+        [`&.${buttonClasses.disabled}`]: {
             cursor: 'not-allowed',
             pointerEvents: 'auto',
         },
         // Focus visible for keyboard navigation
-        [`&.${buttonBaseClasses.focusVisible}`]: {
+        [`&.${buttonClasses.focusVisible}`]: {
             outline: `2px solid ${semanticColors.color.border.focus}`,
             outlineOffset: 2,
         },
@@ -805,14 +835,10 @@ const StyledButtonBase$1 = styled(ButtonBase, {
             '&:active': {
                 backgroundColor: semanticColors.button.primary.bgPressed,
             },
-            ...(loading
-                ? {}
-                : {
-                    [`&.${buttonBaseClasses.disabled}`]: {
-                        backgroundColor: semanticColors.button.primary.bgDisabled,
-                        color: semanticColors.button.fgDisabled,
-                    },
-                }),
+            [disabled]: {
+                backgroundColor: semanticColors.button.primary.bgDisabled,
+                color: semanticColors.button.fgDisabled,
+            },
         },
         secondary: {
             backgroundColor: semanticColors.button.secondary.bg,
@@ -824,15 +850,11 @@ const StyledButtonBase$1 = styled(ButtonBase, {
             '&:active': {
                 backgroundColor: semanticColors.button.secondary.bgPressed,
             },
-            ...(loading
-                ? {}
-                : {
-                    [`&.${buttonBaseClasses.disabled}`]: {
-                        backgroundColor: semanticColors.button.secondary.bgDisabled,
-                        borderColor: semanticColors.color.border.primary,
-                        color: semanticColors.button.fgDisabled,
-                    },
-                }),
+            [disabled]: {
+                backgroundColor: semanticColors.button.secondary.bgDisabled,
+                borderColor: semanticColors.color.border.primary,
+                color: semanticColors.button.fgDisabled,
+            },
         },
         destructive: {
             backgroundColor: semanticColors.button.destructive.bg,
@@ -845,20 +867,15 @@ const StyledButtonBase$1 = styled(ButtonBase, {
                 backgroundColor: semanticColors.color.status.error.fg,
                 filter: 'brightness(0.9)',
             },
-            ...(loading
-                ? {}
-                : {
-                    [`&.${buttonBaseClasses.disabled}`]: {
-                        backgroundColor: semanticColors.button.primary.bgDisabled,
-                        color: semanticColors.button.fgDisabled,
-                    },
-                }),
+            [disabled]: {
+                backgroundColor: semanticColors.button.primary.bgDisabled,
+                color: semanticColors.button.fgDisabled,
+            },
         },
         tertiary: {
             backgroundColor: 'transparent',
             color: semanticColors.color.text.input,
             border: 'none',
-            padding: 0,
             lineHeight: 1,
             '&:hover': {
                 backgroundColor: 'transparent',
@@ -867,24 +884,26 @@ const StyledButtonBase$1 = styled(ButtonBase, {
             '&:active': {
                 color: semanticColors.button.tertiary.fgPressed,
             },
-            ...(loading
-                ? {}
-                : {
-                    [`&.${buttonBaseClasses.disabled}`]: {
-                        backgroundColor: 'transparent',
-                        color: semanticColors.button.tertiary.fgDisabled,
-                    },
-                }),
+            [disabled]: {
+                backgroundColor: 'transparent',
+                color: semanticColors.button.tertiary.fgDisabled,
+            },
         },
     };
+    // MUI greys a loading button as disabled; keep the label in the variant's colour
+    const { color } = variantStyles[variant];
     return {
         ...baseStyles,
         ...variantStyles[variant],
+        [`&.${buttonClasses.loadingPositionStart}, &.${buttonClasses.loadingPositionEnd}`]: { color },
     };
 });
+const IconSlot = styled('span')({
+    display: 'contents',
+});
 const LoadingSpinner = styled(CircularProgress, {
-    shouldForwardProp: prop => prop !== '$variant',
-})(({ $variant }) => {
+    shouldForwardProp: prop => prop !== 'buttonVariant',
+})(({ buttonVariant }) => {
     // Use appropriate spinner color for each variant to ensure visibility
     const spinnerColors = {
         primary: semanticColors.color.surface.raised,
@@ -893,14 +912,22 @@ const LoadingSpinner = styled(CircularProgress, {
         tertiary: semanticColors.button.tertiary.fg,
     };
     return {
-        color: spinnerColors[$variant],
+        color: spinnerColors[buttonVariant],
     };
 });
 /**
- * ModButton - Text button component based on MUI ButtonBase
+ * ModButton - Text button component based on MUI Button
  */
-function ModButton({ variant = 'primary', size = 'medium', loading = false, children, disabled, startIcon, endIcon, ...rest }) {
-    return (jsx(StyledButtonBase$1, { variant: variant, size: size, loading: loading, disabled: disabled || loading, ...rest, children: loading ? (jsx(LoadingSpinner, { "$variant": variant, size: size === 'small' ? 16 : 20 })) : (jsxs(React.Fragment, { children: [startIcon, children, endIcon] })) }));
+function ModButton({ variant = 'primary', size = 'medium', loading = false, children, startIcon, endIcon, ...rest }) {
+    const loadingPosition = startIcon ? 'start' : endIcon ? 'end' : 'center';
+    // Mirrors MUI: the spinner is named by the button, which gets an id while loading
+    const generatedId = useId();
+    const id = rest.id ?? (loading ? generatedId : undefined);
+    return (jsx(StyledButton, { buttonVariant: variant, buttonSize: size, 
+        // Pinned so theme defaultProps or a ButtonGroup can't restyle it; ButtonBase had no focus ripple
+        variant: "text", size: "medium", color: "primary", disableFocusRipple: true, loading: loading, loadingPosition: loadingPosition, loadingIndicator: jsx(LoadingSpinner, { buttonVariant: variant, 
+            // With an icon, the anchored indicator is the icon's size and the spinner fills it
+            size: loadingPosition === 'center' ? (size === 'small' ? iconSize.md : iconSize.xl) : '100%', "aria-labelledby": id }), startIcon: startIcon && jsx(IconSlot, { children: startIcon }), endIcon: endIcon && jsx(IconSlot, { children: endIcon }), "aria-busy": loading || undefined, ...rest, id: id, children: children }));
 }
 ModButton.displayName = 'ModButton';