uikit-react-public 0.50.0 → 0.50.1

package/lib/components/Button/Button.mdx

@@ -13,6 +13,8 @@ export const usage = {
   default: `<Button>Default Button</Button>`,
   secondary: `<Button variant='secondary'>Secondary Button</Button>`,
   destructive: `<Button variant='primary-destructive'>Destructive Button</Button>`,
+  destructiveNoPadding: `<Button variant='tertiary-destructive-no-padding'>Destructive Action</Button>`,
+  onDark: `<Button variant='secondary' onLight={false}>Secondary Button</Button>`,
   withIcon: `<Button icon={<Icon.AlertTriangle />}>Button</Button>`,
   loading: `<Button loading>Loading Button</Button>`,
   link: `<Button as='a' href='https://www.ucl.ac.uk' target='_blank'>Go to UCL&#39;s website</Button>`,
@@ -41,6 +43,16 @@ Use `variant` to control hierarchy and emphasis.
 <Canvas of={ButtonStories.Accent} />
 <Canvas of={ButtonStories.PrimarySubtle} />
 <Canvas of={ButtonStories.Destructive} source={{ code: usage.destructive }} />
+<Canvas
+  of={ButtonStories.DestructiveTertiaryNoPadding}
+  source={{ code: usage.destructiveNoPadding }}
+/>
+
+## Dark backgrounds
+
+Set `onLight={false}` when a supported inverse variant is placed directly on a dark background.
+
+<Canvas of={ButtonStories.OnDark} source={{ code: usage.onDark }} />
 
 ## Sizes
 

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

@@ -33,6 +33,7 @@ const variants = [
   'primary-destructive',
   'secondary-destructive',
   'tertiary-destructive',
+  'tertiary-destructive-no-padding',
   'primary-warning',
 ] as const;
 
@@ -80,6 +81,12 @@ const meta = {
       control: { type: 'boolean' },
       type: 'boolean',
     },
+    onLight: {
+      control: { type: 'boolean' },
+      type: 'boolean',
+      description:
+        'Set to false for supported inverse variants rendered on a dark background.',
+    },
     disabled: {
       control: { type: 'boolean' },
       type: 'boolean',
@@ -193,6 +200,45 @@ export const Destructive: Story = {
   },
 };
 
+export const DestructiveTertiaryNoPadding: Story = {
+  name: 'Destructive tertiary without padding',
+  args: {
+    variant: 'tertiary-destructive-no-padding',
+    children: 'Destructive action',
+  },
+};
+
+export const OnDark: Story = {
+  name: 'Inverse variants on dark',
+  args: {
+    onLight: false,
+  },
+  render: () => (
+    <div
+      style={{
+        alignItems: 'center',
+        background: theme.colour.bg.inversePrimary,
+        display: 'flex',
+        gap: theme.padding.p24,
+        padding: theme.padding.p32,
+      }}
+    >
+      <Button
+        onLight={false}
+        variant='secondary'
+      >
+        Secondary action
+      </Button>
+      <Button
+        onLight={false}
+        variant='tertiary-no-padding'
+      >
+        Tertiary action
+      </Button>
+    </div>
+  ),
+};
+
 export const PrimarySubtle: Story = {
   args: {
     variant: 'primary-subtle',

package/lib/components/Button/Button.tsx

@@ -4,6 +4,7 @@ import {
   ReactElement,
   ElementType,
   ComponentPropsWithRef,
+  cloneElement,
   memo,
 } from 'react';
 import { css, cx } from '@emotion/css';
@@ -19,6 +20,7 @@ import buttonTertiaryStyle from './style/buttonTertiaryStyle';
 import buttonPrimaryDestructiveStyle from './style/buttonPrimaryDestructiveStyle';
 import buttonSecondaryDestructiveStyle from './style/buttonSecondaryDestructiveStyle';
 import buttonTertiaryDestructiveStyle from './style/buttonTertiaryDestructiveStyle';
+import buttonTertiaryDestructiveNoPaddingStyle from './style/buttonTertiaryDestructiveNoPaddingStyle';
 import buttonPrimaryWarningStyle from './style/buttonPrimaryWarningStyle';
 import buttonPrimarySubtleStyle from './style/buttonPrimarySubtleStyle';
 import buttonSecondarySubtleStyle from './style/buttonSecondarySubtleStyle';
@@ -39,12 +41,14 @@ export type ButtonVariant =
   | 'primary-destructive'
   | 'secondary-destructive'
   | 'tertiary-destructive'
+  | 'tertiary-destructive-no-padding'
   | 'primary-warning';
 
 const DESTRUCTIVE_VARIANT_MAP: Partial<Record<ButtonVariant, ButtonVariant>> = {
   primary: 'primary-destructive',
   secondary: 'secondary-destructive',
   tertiary: 'tertiary-destructive',
+  'tertiary-no-padding': 'tertiary-destructive-no-padding',
 };
 
 // Legacy size values from the old Button API
@@ -52,12 +56,14 @@ type LegacySize = 'default';
 
 export interface ButtonBaseProps {
   variant?: ButtonVariant;
-  /** @deprecated Use variant="primary-destructive" / "secondary-destructive" instead */
+  /** @deprecated Use a destructive variant directly */
   destructive?: boolean;
   size?: 'xsmall' | 'small' | 'medium' | 'large' | LegacySize;
+  /** Whether the button is rendered on a light background */
+  onLight?: boolean;
   selected?: boolean;
   disabled?: boolean;
-  icon?: ReactElement;
+  icon?: ReactElement<{ className?: string }>;
   iconPosition?: 'left' | 'right';
   tooltip?: string;
   loading?: boolean;
@@ -92,7 +98,7 @@ const normalizeVariantProp = (
 
   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.`
+      `Button variant '${variant}' does not support the destructive prop. Use a destructive variant explicitly, or use one of: primary, secondary, tertiary, tertiary-no-padding.`
     );
     return variant;
   }
@@ -102,9 +108,10 @@ const normalizeVariantProp = (
 
 const Button = <C extends ElementType = 'button'>({
   as,
-  variant = 'accent',
+  variant,
   destructive = false,
   size = 'medium',
+  onLight = true,
   selected = false,
   disabled = false,
   icon,
@@ -125,7 +132,10 @@ const Button = <C extends ElementType = 'button'>({
   const [isHovered, setIsHovered] = useState(false);
   const [theme] = useTheme();
 
-  const resolvedVariant = normalizeVariantProp(variant, destructive);
+  const resolvedVariant = normalizeVariantProp(
+    variant ?? (destructive ? 'primary' : 'accent'),
+    destructive
+  );
   const resolvedSize = normalizeSizeprop(size);
   const buttonTypography = {
     xsmall: theme.typography.body.smMedium,
@@ -136,7 +146,7 @@ const Button = <C extends ElementType = 'button'>({
 
   const baseStyle = css`
     all: unset;
-    border: 2px solid transparent;
+    border: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -160,14 +170,26 @@ const Button = <C extends ElementType = 'button'>({
     }
   `;
 
-  const iconSize = resolvedSize === 'xsmall' ? 20 : 24;
+  const contentIconSize = {
+    xsmall: 16,
+    small: 20,
+    medium: 24,
+    large: 24,
+  }[resolvedSize];
+  const iconOnlySize = resolvedSize === 'xsmall' ? 20 : 24;
+  const spinnerSize = resolvedSize === 'xsmall' ? 20 : 24;
   const paddingPx = resolvedSize === 'xsmall' ? 8 : 16;
 
-  const iconOnlyStyle = css`
-    width: 48px;
-    padding: 0;
-    justify-content: center;
+  const iconStyle = css`
+    color: var(--ucl-uikit-button-icon-colour, currentColor);
+    width: ${children ? contentIconSize : iconOnlySize}px;
+    height: ${children ? contentIconSize : iconOnlySize}px;
   `;
+  const styledIcon = icon
+    ? cloneElement(icon, {
+        className: cx(icon.props.className, iconStyle),
+      })
+    : undefined;
 
   const sizeExtraSmallStyle = css`
     height: 32px;
@@ -196,33 +218,31 @@ const Button = <C extends ElementType = 'button'>({
   const variantStyle = {
     accent: buttonAccentStyle(theme, selected, disabled, loading),
     primary: buttonPrimaryStyle(theme, selected, disabled, loading),
-    secondary: buttonSecondaryStyle(theme, selected, disabled, loading),
-    tertiary: buttonTertiaryStyle(
+    secondary: buttonSecondaryStyle(
       theme,
       selected,
       disabled,
       loading,
-      paddingPx
+      onLight
     ),
+    tertiary: buttonTertiaryStyle(theme, selected, disabled, loading),
     'primary-subtle': buttonPrimarySubtleStyle(
       theme,
       selected,
       disabled,
-      loading,
-      paddingPx
+      loading
     ),
     'secondary-subtle': buttonSecondarySubtleStyle(
       theme,
       selected,
       disabled,
-      loading,
-      paddingPx
+      loading
     ),
     'tertiary-no-padding': buttonTertiaryNoPaddingStyle(
       theme,
       disabled,
       loading,
-      paddingPx
+      onLight
     ),
     'primary-destructive': buttonPrimaryDestructiveStyle(
       theme,
@@ -240,8 +260,12 @@ const Button = <C extends ElementType = 'button'>({
       theme,
       selected,
       disabled,
-      loading,
-      paddingPx
+      loading
+    ),
+    'tertiary-destructive-no-padding': buttonTertiaryDestructiveNoPaddingStyle(
+      theme,
+      disabled,
+      loading
     ),
     'primary-warning': buttonPrimaryWarningStyle(
       theme,
@@ -271,7 +295,6 @@ const Button = <C extends ElementType = 'button'>({
     variantStyle,
     disabled && commonDisabledStyle,
     loading && loadingStyle,
-    !children && iconOnlyStyle,
     className
   );
 
@@ -294,15 +317,15 @@ const Button = <C extends ElementType = 'button'>({
       >
         {loading ? (
           <Spinner
-            size={iconSize}
+            size={spinnerSize}
             strokeWidth={8}
             inheritColour
           />
         ) : (
           <>
-            {icon && iconPosition === 'left' && icon}
+            {styledIcon && iconPosition === 'left' && styledIcon}
             {children}
-            {icon && iconPosition === 'right' && icon}
+            {styledIcon && iconPosition === 'right' && styledIcon}
           </>
         )}
       </Component>

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

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Button from '../Button';
 import Icon from '../../Icon';
-import { darkTheme, ThemeContextProvider } from '../../../theme';
+import { darkTheme, theme, ThemeContextProvider } from '../../../theme';
 
 const hexToRgb = (hex: string) => {
   const value = hex.replace('#', '');
@@ -255,6 +255,26 @@ describe('Button', () => {
     );
 
     expect(renderResult.container.firstChild).toMatchSnapshot();
+    expect(getComputedStyle(screen.getByRole('button')).backgroundColor).toBe(
+      hexToRgb(theme.colour.fill.critical)
+    );
+  });
+
+  test('maps legacy destructive prop for the no-padding variant', () => {
+    render(
+      <ThemeContextProvider>
+        <Button
+          variant='tertiary-no-padding'
+          destructive
+        >
+          Delete
+        </Button>
+      </ThemeContextProvider>
+    );
+
+    expect(getComputedStyle(screen.getByRole('button')).color).toBe(
+      hexToRgb(theme.colour.text.critical)
+    );
   });
 
   test('warns when destructive prop is used with unsupported variant', () => {
@@ -320,4 +340,103 @@ describe('Button', () => {
       `box-shadow:${expectedFocusShadow.replace(/\s/g, '')}`
     );
   });
+
+  test.each([
+    ['xsmall', '32px', '16px'],
+    ['small', '40px', '20px'],
+    ['medium', '48px', '24px'],
+    ['large', '56px', '24px'],
+  ] as const)(
+    'matches the Figma dimensions for the %s size',
+    (size, expectedHeight, expectedIconSize) => {
+      render(
+        <ThemeContextProvider>
+          <Button
+            icon={<Icon.ChevronRight />}
+            size={size}
+          >
+            Action
+          </Button>
+        </ThemeContextProvider>
+      );
+
+      expect(getComputedStyle(screen.getByRole('button')).height).toBe(
+        expectedHeight
+      );
+      expect(getComputedStyle(screen.getByTestId('ucl-uikit-icon')).width).toBe(
+        expectedIconSize
+      );
+    }
+  );
+
+  test('uses the larger extra-small icon when the button is icon-only', () => {
+    render(
+      <ThemeContextProvider>
+        <Button
+          aria-label='Next'
+          icon={<Icon.ChevronRight />}
+          size='xsmall'
+        />
+      </ThemeContextProvider>
+    );
+
+    expect(getComputedStyle(screen.getByTestId('ucl-uikit-icon')).width).toBe(
+      '20px'
+    );
+  });
+
+  test('styles a non-SVG icon through its className contract', () => {
+    render(
+      <ThemeContextProvider>
+        <Button
+          icon={
+            <span
+              className='custom-icon'
+              data-testid='custom-icon'
+            />
+          }
+          size='xsmall'
+        >
+          Action
+        </Button>
+      </ThemeContextProvider>
+    );
+
+    const icon = screen.getByTestId('custom-icon');
+    expect(icon).toHaveClass('custom-icon');
+    expect(getComputedStyle(icon).width).toBe('16px');
+    expect(getComputedStyle(icon).height).toBe('16px');
+  });
+
+  test.each([
+    'tertiary-no-padding',
+    'tertiary-destructive-no-padding',
+  ] as const)('removes padding from the %s variant', (variant) => {
+    render(
+      <ThemeContextProvider>
+        <Button variant={variant}>Action</Button>
+      </ThemeContextProvider>
+    );
+
+    expect(getComputedStyle(screen.getByRole('button')).padding).toBe('0px');
+  });
+
+  test('uses inverse secondary tokens on a dark background', () => {
+    render(
+      <ThemeContextProvider>
+        <Button
+          onLight={false}
+          variant='secondary'
+        >
+          Action
+        </Button>
+      </ThemeContextProvider>
+    );
+
+    const style = getComputedStyle(screen.getByRole('button'));
+    expect(style.color).toBe(hexToRgb(theme.colour.text.brandInverse));
+    expect(document.head.textContent?.replace(/\s/g, '')).toContain(
+      `outline:${theme.border.b2}solid${theme.colour.border.brandInverse}`
+    );
+  });
 });

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

@@ -3,7 +3,7 @@
 exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-ijdex1"
+  class="ucl-uikit-button css-usvl64"
   data-testid="ucl-uikit-button"
 >
   Delete
@@ -13,7 +13,7 @@ exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
 exports[`Button > maps legacy size default to medium 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-ijdex1"
+  class="ucl-uikit-button css-1wtmaoy"
   data-testid="ucl-uikit-button"
 >
   Legacy default size
@@ -23,7 +23,7 @@ exports[`Button > maps legacy size default to medium 1`] = `
 exports[`Button > snapshot: 'as' prop with 'a' 1`] = `
 <a
   aria-disabled="false"
-  class="ucl-uikit-button css-ijdex1"
+  class="ucl-uikit-button css-1wtmaoy"
   data-testid="ucl-uikit-button"
   href="https://ucl.ac.uk"
 >
@@ -34,7 +34,7 @@ exports[`Button > snapshot: 'as' prop with 'a' 1`] = `
 exports[`Button > snapshot: loading 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-1ram5ew"
+  class="ucl-uikit-button css-gbx8ga"
   data-testid="ucl-uikit-button"
   disabled=""
 >
@@ -67,7 +67,7 @@ exports[`Button > snapshot: loading 1`] = `
 exports[`Button > snapshot: no props 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-1v2bqw7"
+  class="ucl-uikit-button css-1wtmaoy"
   data-testid="ucl-uikit-button"
 />
 `;
@@ -75,7 +75,7 @@ exports[`Button > snapshot: no props 1`] = `
 exports[`Button > snapshot: testId prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-1v2bqw7"
+  class="ucl-uikit-button css-1wtmaoy"
   data-testid="test123"
 />
 `;
@@ -83,7 +83,7 @@ exports[`Button > snapshot: testId prop 1`] = `
 exports[`Button > snapshot: variant prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-25bhrl"
+  class="ucl-uikit-button css-1wqhdg8"
   data-testid="ucl-uikit-button"
 />
 `;
@@ -91,11 +91,11 @@ exports[`Button > snapshot: variant prop 1`] = `
 exports[`Button > snapshot: with icon 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-ijdex1"
+  class="ucl-uikit-button css-1wtmaoy"
   data-testid="ucl-uikit-button"
 >
   <svg
-    class="ucl-uikit-icon css-f962ig"
+    class="ucl-uikit-icon css-qo09cr"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"
@@ -119,12 +119,12 @@ exports[`Button > snapshot: with icon 1`] = `
 exports[`Button > snapshot: with icon and iconPosition right 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-ijdex1"
+  class="ucl-uikit-button css-1wtmaoy"
   data-testid="ucl-uikit-button"
 >
   Download
   <svg
-    class="ucl-uikit-icon css-f962ig"
+    class="ucl-uikit-icon css-qo09cr"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"

package/lib/components/Button/style/buttonAccentStyle.ts

@@ -17,6 +17,7 @@ const buttonAccentStyle = (
   const bgActiveColour = fill.brandPressed;
 
   const baseStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.inverse};
     background-color: ${bgColour};
     color: ${theme.colour.text.inverse};
   `;
@@ -38,6 +39,7 @@ const buttonAccentStyle = (
   `;
 
   const disabledStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.disabledOnBgFill};
     background-color: ${theme.colour.fill.disabled};
     color: ${theme.colour.text.onBgFillDisabled};
   `;

package/lib/components/Button/style/buttonPrimaryDestructiveStyle.ts

@@ -18,6 +18,7 @@ const buttonPrimaryDestructiveStyle = (
   const bgSelectedColour = fill.criticalHover;
 
   const baseStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.inverse};
     background-color: ${bgColour};
     color: ${theme.colour.text.inverse};
   `;
@@ -39,6 +40,7 @@ const buttonPrimaryDestructiveStyle = (
   `;
 
   const disabledStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.disabledOnBgFill};
     border-color: ${theme.colour.fill.disabled};
     background-color: ${theme.colour.fill.disabled};
     color: ${theme.colour.text.onBgFillDisabled};

package/lib/components/Button/style/buttonPrimaryStyle.ts

@@ -17,6 +17,7 @@ const buttonPrimaryStyle = (
   const bgActiveColour = fill.brandPressed;
 
   const baseStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.brandInverse};
     background-color: ${bgColour};
     color: ${theme.colour.text.brandInverse};
   `;
@@ -38,6 +39,7 @@ const buttonPrimaryStyle = (
   `;
 
   const disabledStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.disabledOnBgFill};
     background-color: ${theme.colour.fill.disabled};
     color: ${theme.colour.text.onBgFillDisabled};
   `;

package/lib/components/Button/style/buttonPrimarySubtleStyle.ts

@@ -6,14 +6,12 @@ const buttonPrimarySubtleStyle = (
   theme: ThemeType,
   selected: ButtonBaseProps['selected'],
   disabled: ButtonBaseProps['disabled'],
-  loading: ButtonBaseProps['loading'],
-  paddingPx: number
+  loading: ButtonBaseProps['loading']
 ) => {
   const {
-    colour: { border, fill, text },
+    colour: { border, fill, icon, text },
   } = theme;
 
-  const bgColour = fill.inverse;
   const borderColour = border.subtle;
   const bgHoverColour = fill.brandSubtleHover;
   const bgActiveColour = fill.brandSubtleSelected;
@@ -21,18 +19,18 @@ const buttonPrimarySubtleStyle = (
   const selectedBorderColour = border.brand;
   const selectedTextColour = text.brandHover;
 
-  const adjustedPaddingPx = paddingPx + 1;
-
   const baseStyle = css`
-    background-color: ${bgColour};
-    border: 1px solid ${borderColour};
+    --ucl-uikit-button-icon-colour: ${icon.default};
+    background-color: transparent;
+    outline: ${theme.border.b1} solid ${borderColour};
+    outline-offset: -${theme.border.b1};
     color: ${theme.colour.text.default};
-    padding: 0 ${adjustedPaddingPx}px;
   `;
 
   const selectedStyle = css`
+    --ucl-uikit-button-icon-colour: ${icon.brandSelectedOnBgFill};
     background-color: ${selectedFillColour};
-    border-color: ${selectedBorderColour};
+    outline-color: ${selectedBorderColour};
     color: ${selectedTextColour};
   `;
 
@@ -49,7 +47,8 @@ const buttonPrimarySubtleStyle = (
   `;
 
   const disabledStyle = css`
-    border-color: ${border.disabled};
+    --ucl-uikit-button-icon-colour: ${icon.disabled};
+    outline-color: ${border.disabled};
     color: ${text.disabled};
   `;
 

package/lib/components/Button/style/buttonPrimaryWarningStyle.ts

@@ -19,6 +19,7 @@ const buttonPrimaryWarningStyle = (
   const selectedBgColour = fill.cautionSelected;
 
   const baseStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.caution};
     background-color: ${bgColour};
     color: ${textColour};
   `;
@@ -40,6 +41,7 @@ const buttonPrimaryWarningStyle = (
   `;
 
   const disabledStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.disabledOnBgFill};
     border-color: ${theme.colour.fill.disabled};
     background-color: ${theme.colour.fill.disabled};
     color: ${theme.colour.text.onBgFillDisabled};