uikit-react-public 0.17.4 → 0.21.9

package/lib/components/Button/Button.stories.tsx

@@ -4,13 +4,13 @@ import Button from './Button';
 import Icon from '../Icon';
 import { theme } from '../../theme';
 
-// Common margin props documentation currently lives here.
 const marginKeys = Object.keys(theme.margin) as Array<
   keyof typeof theme.margin
 >;
 const marginKeysAsString = marginKeys
   .map((key) => `'${key.replace('m', '')}'`)
   .join(', ');
+
 const commonMarginPropsInfo = {
   table: {
     type: {
@@ -18,11 +18,24 @@ const commonMarginPropsInfo = {
       detail: marginKeysAsString,
     },
     defaultValue: { summary: 'undefined' },
-    // Disabled for most <Button> stories by default
     disable: true,
   },
 };
 
+const variants = [
+  'accent',
+  'primary',
+  'secondary',
+  'tertiary',
+  'primary-subtle',
+  'secondary-subtle',
+  'tertiary-no-padding',
+  'primary-destructive',
+  'secondary-destructive',
+  'tertiary-destructive',
+  'primary-warning',
+] as const;
+
 const meta = {
   title: 'Components/Button',
   component: Button,
@@ -31,14 +44,20 @@ const meta = {
   },
   argTypes: {
     variant: {
-      options: ['primary', 'secondary', 'tertiary'],
+      options: variants,
       control: { type: 'select' },
       type: 'string',
     },
     size: {
-      options: ['small', 'default', 'large'],
+      options: ['xsmall', 'small', 'medium', 'large', 'default'],
       control: { type: 'select' },
       type: 'string',
+      table: {
+        type: {
+          summary: 'string',
+          detail: "'xsmall' | 'small' | 'medium' | 'large' | 'default'",
+        },
+      },
     },
     as: {
       options: ['button', 'a'],
@@ -54,6 +73,12 @@ const meta = {
     destructive: {
       control: { type: 'boolean' },
       type: 'boolean',
+      description:
+        'Deprecated. Prefer destructive variants directly (e.g. primary-destructive).',
+    },
+    selected: {
+      control: { type: 'boolean' },
+      type: 'boolean',
     },
     disabled: {
       control: { type: 'boolean' },
@@ -99,7 +124,6 @@ const meta = {
       control: { type: 'text' },
       type: 'string',
     },
-    // Common margin props specified here for 'Common Props' documentation
     m: commonMarginPropsInfo,
     mv: commonMarginPropsInfo,
     mh: commonMarginPropsInfo,
@@ -154,20 +178,25 @@ export const Tertiary: Story = {
   },
 };
 
+export const Accent: Story = {
+  args: {
+    variant: 'accent',
+    children: 'Accent button',
+  },
+};
+
 export const Destructive: Story = {
   name: 'Destructive primary',
   args: {
-    destructive: true,
+    variant: 'primary-destructive',
     children: 'Destructive button',
   },
 };
 
-export const DestructiveSecondary: Story = {
-  name: 'Destructive secondary',
+export const PrimarySubtle: Story = {
   args: {
-    variant: 'secondary',
-    destructive: true,
-    children: 'Destructive secondary button',
+    variant: 'primary-subtle',
+    children: 'Primary subtle button',
   },
 };
 
@@ -187,24 +216,6 @@ export const Large: Story = {
   },
 };
 
-export const SmallSecondary: Story = {
-  name: 'Small secondary',
-  args: {
-    size: 'small',
-    variant: 'secondary',
-    children: 'Small secondary button',
-  },
-};
-
-export const LargeSecondary: Story = {
-  name: 'Large secondary',
-  args: {
-    size: 'large',
-    variant: 'secondary',
-    children: 'Large secondary button',
-  },
-};
-
 export const Disabled: Story = {
   name: 'Primary disabled',
   args: {
@@ -213,24 +224,6 @@ export const Disabled: Story = {
   },
 };
 
-export const DisabledSecondary: Story = {
-  name: 'Secondary disabled',
-  args: {
-    variant: 'secondary',
-    disabled: true,
-    children: 'Disabled secondary button',
-  },
-};
-
-export const DisabledTertiary: Story = {
-  name: 'Tertiary disabled',
-  args: {
-    variant: 'tertiary',
-    disabled: true,
-    children: 'Disabled tertiary button',
-  },
-};
-
 export const WithIcon: Story & {
   argTypes: {
     iconName: {
@@ -255,7 +248,7 @@ export const WithIcon: Story & {
     const [args] = useArgs();
 
     const IconComponent =
-      args.IconName !== 'none'
+      args.iconName !== 'none'
         ? (Icon[args.iconName as keyof typeof Icon] as React.FC)
         : null;
 
@@ -292,7 +285,7 @@ export const IconOnly: Story & {
     const [args] = useArgs();
 
     const IconComponent =
-      args.IconName !== 'none'
+      args.iconName !== 'none'
         ? (Icon[args.iconName as keyof typeof Icon] as React.FC)
         : null;
 
@@ -319,7 +312,7 @@ export const Link: Story = {
     as: 'a',
     href: 'https://www.ucl.ac.uk/',
     target: '_blank',
-    children: "Got to UCL's website",
+    children: "Go to UCL's website",
     disabled: false,
   },
 };

package/lib/components/Button/Button.tsx

@@ -8,22 +8,54 @@ import {
 } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
-import buttonPrimaryStyle from './buttonPrimaryStyle';
-import buttonSecondaryStyle from './buttonSecondaryStyle';
-import buttonTertiaryStyle from './buttonTertiaryStyle';
 import Spinner from '../Spinner/Spinner';
 import Overlay from '../Overlay/Overlay';
 import Tooltip from '../Tooltip/Tooltip';
 import marginsStyle, { MarginProps } from '../common/marginsStyle';
+import buttonAccentStyle from './style/buttonAccentStyle';
+import buttonPrimaryStyle from './style/buttonPrimaryStyle';
+import buttonSecondaryStyle from './style/buttonSecondaryStyle';
+import buttonTertiaryStyle from './style/buttonTertiaryStyle';
+import buttonPrimaryDestructiveStyle from './style/buttonPrimaryDestructiveStyle';
+import buttonSecondaryDestructiveStyle from './style/buttonSecondaryDestructiveStyle';
+import buttonTertiaryDestructiveStyle from './style/buttonTertiaryDestructiveStyle';
+import buttonPrimaryWarningStyle from './style/buttonPrimaryWarningStyle';
+import buttonPrimarySubtleStyle from './style/buttonPrimarySubtleStyle';
+import buttonSecondarySubtleStyle from './style/buttonSecondarySubtleStyle';
+import buttonTertiaryNoPaddingStyle from './style/buttonTertiaryNoPaddingStyle';
 
 export const NAME = 'ucl-uikit-button';
 
 type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref'];
 
+export type ButtonVariant =
+  | 'accent'
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'primary-subtle'
+  | 'secondary-subtle'
+  | 'tertiary-no-padding'
+  | 'primary-destructive'
+  | 'secondary-destructive'
+  | 'tertiary-destructive'
+  | 'primary-warning';
+
+const DESTRUCTIVE_VARIANT_MAP: Partial<Record<ButtonVariant, ButtonVariant>> = {
+  primary: 'primary-destructive',
+  secondary: 'secondary-destructive',
+  tertiary: 'tertiary-destructive',
+};
+
+// Legacy size values from the old Button API
+type LegacySize = 'default';
+
 export interface ButtonBaseProps {
-  variant?: 'primary' | 'secondary' | 'tertiary';
+  variant?: ButtonVariant;
+  /** @deprecated Use variant="primary-destructive" / "secondary-destructive" instead */
   destructive?: boolean;
-  size?: 'large' | 'default' | 'small';
+  size?: 'xsmall' | 'small' | 'medium' | 'large' | LegacySize;
+  selected?: boolean;
   disabled?: boolean;
   icon?: ReactElement;
   iconPosition?: 'left' | 'right';
@@ -41,11 +73,39 @@ export type ButtonProps<C extends ElementType = 'button'> = {
   MarginProps &
   Omit<ComponentPropsWithRef<C>, keyof ButtonBaseProps | 'as'>;
 
+// Maps legacy size "default" to the new equivalent
+const normalizeSizeprop = (
+  size: ButtonBaseProps['size']
+): 'xsmall' | 'small' | 'medium' | 'large' => {
+  if (size === 'default') return 'medium';
+  return size ?? 'medium';
+};
+
+// Maps legacy destructive boolean + base variant to the new variant
+const normalizeVariantProp = (
+  variant: ButtonVariant,
+  destructive: boolean
+): ButtonVariant => {
+  if (!destructive) return variant;
+
+  const destructiveVariant = DESTRUCTIVE_VARIANT_MAP[variant];
+
+  if (!destructiveVariant) {
+    console.warn(
+      `Button variant '${variant}' does not support the destructive prop. Use a destructive variant explicitly, or use one of: primary, secondary, tertiary.`
+    );
+    return variant;
+  }
+
+  return destructiveVariant;
+};
+
 const Button = <C extends ElementType = 'button'>({
   as,
   variant = 'primary',
   destructive = false,
-  size = 'default',
+  size = 'medium',
+  selected = false,
   disabled = false,
   icon,
   iconPosition = 'left',
@@ -60,24 +120,30 @@ const Button = <C extends ElementType = 'button'>({
 }: ButtonProps<C>) => {
   const Component = as || 'button';
 
-  if (variant === 'tertiary' && destructive) {
-    console.warn("Button variant 'tertiary' cannot also be 'destructive'.");
-  }
-
   const internalRef = useRef(null);
   const effectiveRef = ref || internalRef;
   const [isHovered, setIsHovered] = useState(false);
   const [theme] = useTheme();
 
+  const resolvedVariant = normalizeVariantProp(variant, destructive);
+  const resolvedSize = normalizeSizeprop(size);
+
   const baseStyle = css`
+    all: unset;
+    border: 2px solid transparent;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: ${theme.padding.p8};
     position: relative;
     box-sizing: border-box;
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
+    border-radius: ${theme.radius.r4};
+    font-family: ${theme.typography.body.md.fontFamily};
+    font-feature-settings: ${theme.typography.body.md.fontSettings};
+    font-size: 18px;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     outline: none;
     text-decoration: none;
     user-select: none;
@@ -87,26 +153,33 @@ const Button = <C extends ElementType = 'button'>({
     }
   `;
 
+  const iconSize = resolvedSize === 'xsmall' ? 20 : 24;
+  const paddingPx = resolvedSize === 'xsmall' ? 8 : 16;
+
   const iconOnlyStyle = css`
     width: 48px;
     padding: 0;
     justify-content: center;
   `;
 
+  const sizeExtraSmallStyle = css`
+    height: 32px;
+    padding: 0 ${paddingPx}px;
+  `;
+
   const sizeSmallStyle = css`
     height: 40px;
-    padding: 0 ${theme.padding.p16};
+    padding: 0 ${paddingPx}px;
   `;
 
-  const sizeDefaultStyle = css`
+  const sizeMediumStyle = css`
     height: 48px;
-    padding: 0 ${theme.padding.p24};
+    padding: 0 ${paddingPx}px;
   `;
 
   const sizeLargeStyle = css`
     height: 56px;
-    padding: 0 ${theme.padding.p24};
-    font-size: ${theme.font.size.f18};
+    padding: 0 ${paddingPx}px;
   `;
 
   const fullWidthStyle = css`
@@ -114,20 +187,83 @@ const Button = <C extends ElementType = 'button'>({
   `;
 
   const variantStyle = {
-    primary: buttonPrimaryStyle(theme, destructive, disabled, loading),
-    secondary: buttonSecondaryStyle(theme, destructive, disabled, loading),
-    tertiary: buttonTertiaryStyle(theme, disabled, loading),
-  }[variant];
+    accent: buttonAccentStyle(theme, selected, disabled, loading),
+    primary: buttonPrimaryStyle(theme, selected, disabled, loading),
+    secondary: buttonSecondaryStyle(theme, selected, disabled, loading),
+    tertiary: buttonTertiaryStyle(
+      theme,
+      selected,
+      disabled,
+      loading,
+      paddingPx
+    ),
+    'primary-subtle': buttonPrimarySubtleStyle(
+      theme,
+      selected,
+      disabled,
+      loading,
+      paddingPx
+    ),
+    'secondary-subtle': buttonSecondarySubtleStyle(
+      theme,
+      selected,
+      disabled,
+      loading,
+      paddingPx
+    ),
+    'tertiary-no-padding': buttonTertiaryNoPaddingStyle(
+      theme,
+      disabled,
+      loading,
+      paddingPx
+    ),
+    'primary-destructive': buttonPrimaryDestructiveStyle(
+      theme,
+      selected,
+      disabled,
+      loading
+    ),
+    'secondary-destructive': buttonSecondaryDestructiveStyle(
+      theme,
+      selected,
+      disabled,
+      loading
+    ),
+    'tertiary-destructive': buttonTertiaryDestructiveStyle(
+      theme,
+      selected,
+      disabled,
+      loading,
+      paddingPx
+    ),
+    'primary-warning': buttonPrimaryWarningStyle(
+      theme,
+      selected,
+      disabled,
+      loading
+    ),
+  }[resolvedVariant];
+
+  const commonDisabledStyle = css`
+    cursor: not-allowed;
+  `;
+
+  const loadingStyle = css`
+    cursor: wait;
+  `;
 
   const style = cx(
     NAME,
     baseStyle,
     marginsStyle(props, theme),
-    size === 'small' && sizeSmallStyle,
-    size === 'default' && sizeDefaultStyle,
-    size === 'large' && sizeLargeStyle,
+    resolvedSize === 'xsmall' && sizeExtraSmallStyle,
+    resolvedSize === 'small' && sizeSmallStyle,
+    resolvedSize === 'medium' && sizeMediumStyle,
+    resolvedSize === 'large' && sizeLargeStyle,
     fullWidth && fullWidthStyle,
     variantStyle,
+    disabled && commonDisabledStyle,
+    loading && loadingStyle,
     !children && iconOnlyStyle,
     className
   );
@@ -150,7 +286,11 @@ const Button = <C extends ElementType = 'button'>({
         }
       >
         {loading ? (
-          <Spinner />
+          <Spinner
+            size={iconSize}
+            strokeWidth={8}
+            inheritColour
+          />
         ) : (
           <>
             {icon && iconPosition === 'left' && icon}

package/lib/components/Button/__tests__/Button.test.tsx

@@ -6,8 +6,6 @@ import Icon from '../../Icon';
 import { ThemeContextProvider } from '../../../theme/useTheme';
 
 describe('Button', () => {
-  // Snapshot tests
-
   test('snapshot: no props', () => {
     const renderResult = render(
       <ThemeContextProvider>
@@ -20,7 +18,7 @@ describe('Button', () => {
   test('snapshot: variant prop', () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Button variant='secondary' />
+        <Button variant='secondary-subtle' />
       </ThemeContextProvider>
     );
     expect(renderResult.container.firstChild).toMatchSnapshot();
@@ -35,7 +33,7 @@ describe('Button', () => {
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  test("Snapshot: 'as' prop with 'a'", () => {
+  test("snapshot: 'as' prop with 'a'", () => {
     const renderResult = render(
       <ThemeContextProvider>
         <Button
@@ -49,7 +47,7 @@ describe('Button', () => {
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  test('Snapshot: with icon', () => {
+  test('snapshot: with icon', () => {
     const renderResult = render(
       <ThemeContextProvider>
         <Button icon={<Icon.Upload />}>Upload</Button>
@@ -58,7 +56,7 @@ describe('Button', () => {
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  test('Snapshot: with icon & iconPosition right', () => {
+  test('snapshot: with icon and iconPosition right', () => {
     const renderResult = render(
       <ThemeContextProvider>
         <Button
@@ -81,8 +79,6 @@ describe('Button', () => {
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  // Interaction tests
-
   test('test ID: default', () => {
     render(
       <ThemeContextProvider>
@@ -136,7 +132,7 @@ describe('Button', () => {
     expect(testClick).not.toBeCalled();
   });
 
-  test("Can accept anchor tag via 'as' prop", () => {
+  test("can accept anchor tag via 'as' prop", () => {
     const testId = 'anchor-button-123';
     render(
       <ThemeContextProvider>
@@ -156,7 +152,7 @@ describe('Button', () => {
     expect(button.tagName).toBe('A');
   });
 
-  test('When disabled and an anchor, will not redirect', async () => {
+  test('when disabled and an anchor, will not redirect', () => {
     const testId = 'anchor-button-456';
     render(
       <ThemeContextProvider>
@@ -174,7 +170,7 @@ describe('Button', () => {
     expect(button).not.toHaveAttribute('href');
   });
 
-  test("Renders an icon when passed via 'icon' prop", () => {
+  test("renders an icon when passed via 'icon' prop", () => {
     render(
       <ThemeContextProvider>
         <Button icon={<Icon.Upload />}>Upload</Button>
@@ -184,7 +180,7 @@ describe('Button', () => {
     expect(icon).toBeDefined();
   });
 
-  test('Displays a Tooltip when passed a tooltip prop as string', async () => {
+  test('displays a tooltip when passed a tooltip prop as string', async () => {
     const user = userEvent.setup();
     render(
       <ThemeContextProvider>
@@ -198,7 +194,7 @@ describe('Button', () => {
     expect(tooltip).toHaveTextContent('Tooltip text');
   });
 
-  test('Can accept an additional aria-label prop', () => {
+  test('can accept an additional aria-label prop', () => {
     const testId = 'aria-label-button';
     render(
       <ThemeContextProvider>
@@ -212,7 +208,7 @@ describe('Button', () => {
     expect(button).toHaveAttribute('aria-label', 'Test aria label');
   });
 
-  test('Renders a loading spinner when passed via loading prop', () => {
+  test('renders a loading spinner when loading prop is true', () => {
     render(
       <ThemeContextProvider>
         <Button loading>Submit</Button>
@@ -222,7 +218,7 @@ describe('Button', () => {
     expect(spinner).toBeDefined();
   });
 
-  test('Will not accept click events while loading', async () => {
+  test('will not accept click events while loading', async () => {
     const user = userEvent.setup();
     const testClick = vitest.fn();
     const testId = 'loading-button-789';
@@ -241,4 +237,42 @@ describe('Button', () => {
     await user.click(button);
     expect(testClick).not.toBeCalled();
   });
+
+  test('maps legacy destructive prop to destructive variants', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Button destructive>Delete</Button>
+      </ThemeContextProvider>
+    );
+
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('warns when destructive prop is used with unsupported variant', () => {
+    const warnSpy = vitest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(
+      <ThemeContextProvider>
+        <Button
+          variant='accent'
+          destructive
+        >
+          Accent destructive
+        </Button>
+      </ThemeContextProvider>
+    );
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    warnSpy.mockRestore();
+  });
+
+  test('maps legacy size default to medium', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Button size='default'>Legacy default size</Button>
+      </ThemeContextProvider>
+    );
+
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
 });