uikit-react-public 0.50.0 → 0.50.2

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,7 +20,9 @@ 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 buttonPrimarySuccessStyle from './style/buttonPrimarySuccessStyle';
 import buttonPrimarySubtleStyle from './style/buttonPrimarySubtleStyle';
 import buttonSecondarySubtleStyle from './style/buttonSecondarySubtleStyle';
 import buttonTertiaryNoPaddingStyle from './style/buttonTertiaryNoPaddingStyle';
@@ -39,12 +42,15 @@ export type ButtonVariant =
   | 'primary-destructive'
   | 'secondary-destructive'
   | 'tertiary-destructive'
-  | 'primary-warning';
+  | 'tertiary-destructive-no-padding'
+  | 'primary-warning'
+  | 'primary-success';
 
 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,13 +58,17 @@ 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';
+  leftIcon?: ReactElement<{ className?: string }>;
+  rightIcon?: ReactElement<{ className?: string }>;
   tooltip?: string;
   loading?: boolean;
   fullWidth?: boolean;
@@ -92,7 +102,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,13 +112,16 @@ const normalizeVariantProp = (
 
 const Button = <C extends ElementType = 'button'>({
   as,
-  variant = 'accent',
+  variant,
   destructive = false,
   size = 'medium',
+  onLight = true,
   selected = false,
   disabled = false,
   icon,
   iconPosition = 'left',
+  leftIcon,
+  rightIcon,
   tooltip,
   loading = false,
   fullWidth = false,
@@ -125,7 +138,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 +152,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 +176,33 @@ 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 styleIcon = (iconElement?: ReactElement<{ className?: string }>) =>
+    iconElement
+      ? cloneElement(iconElement, {
+          className: cx(iconElement.props.className, iconStyle),
+        })
+      : undefined;
+  const styledLeftIcon = styleIcon(
+    leftIcon ?? (iconPosition === 'left' ? icon : undefined)
+  );
+  const styledRightIcon = styleIcon(
+    rightIcon ?? (iconPosition === 'right' ? icon : undefined)
+  );
 
   const sizeExtraSmallStyle = css`
     height: 32px;
@@ -196,33 +231,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 +273,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,
@@ -249,6 +286,12 @@ const Button = <C extends ElementType = 'button'>({
       disabled,
       loading
     ),
+    'primary-success': buttonPrimarySuccessStyle(
+      theme,
+      selected,
+      disabled,
+      loading
+    ),
   }[resolvedVariant];
 
   const commonDisabledStyle = css`
@@ -271,7 +314,6 @@ const Button = <C extends ElementType = 'button'>({
     variantStyle,
     disabled && commonDisabledStyle,
     loading && loadingStyle,
-    !children && iconOnlyStyle,
     className
   );
 
@@ -294,15 +336,15 @@ const Button = <C extends ElementType = 'button'>({
       >
         {loading ? (
           <Spinner
-            size={iconSize}
+            size={spinnerSize}
             strokeWidth={8}
             inheritColour
           />
         ) : (
           <>
-            {icon && iconPosition === 'left' && icon}
+            {styledLeftIcon}
             {children}
-            {icon && iconPosition === 'right' && icon}
+            {styledRightIcon}
           </>
         )}
       </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('#', '');
@@ -79,6 +79,25 @@ describe('Button', () => {
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
+  test('renders icons on both sides of the label', () => {
+    render(
+      <ThemeContextProvider>
+        <Button
+          leftIcon={<Icon.ChevronRight />}
+          rightIcon={<Icon.ChevronRight />}
+          size='xsmall'
+        >
+          Action
+        </Button>
+      </ThemeContextProvider>
+    );
+
+    const icons = screen.getAllByTestId('ucl-uikit-icon');
+    expect(icons).toHaveLength(2);
+    expect(icons[0]).toHaveStyle({ width: '16px', height: '16px' });
+    expect(icons[1]).toHaveStyle({ width: '16px', height: '16px' });
+  });
+
   test('snapshot: loading', () => {
     const renderResult = render(
       <ThemeContextProvider>
@@ -255,6 +274,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', () => {
@@ -289,6 +328,7 @@ describe('Button', () => {
     ['accent', darkTheme.colour.text.inverse],
     ['primary-destructive', darkTheme.colour.text.inverse],
     ['primary-warning', darkTheme.colour.text.caution],
+    ['primary-success', darkTheme.colour.text.inverse],
   ] as const)(
     'uses readable semantic text colour for dark %s variant',
     (variant, expectedColour) => {
@@ -320,4 +360,122 @@ describe('Button', () => {
       `box-shadow:${expectedFocusShadow.replace(/\s/g, '')}`
     );
   });
+
+  test('uses the inverse icon colour for the success variant', () => {
+    render(
+      <ThemeContextProvider>
+        <Button
+          variant='primary-success'
+          icon={<Icon.ChevronRight />}
+        >
+          Success
+        </Button>
+      </ThemeContextProvider>
+    );
+
+    expect(
+      getComputedStyle(screen.getByRole('button'))
+        .getPropertyValue('--ucl-uikit-button-icon-colour')
+        .trim()
+    ).toBe(theme.colour.icon.inverse);
+  });
+
+  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/buttonPrimarySuccessStyle.ts

@@ -0,0 +1,39 @@
+import { css, cx } from '@emotion/css';
+import { ThemeType } from '../../../theme';
+import { ButtonBaseProps } from '../Button';
+
+const buttonPrimarySuccessStyle = (
+  theme: ThemeType,
+  selected: ButtonBaseProps['selected'],
+  disabled: ButtonBaseProps['disabled'],
+  loading: ButtonBaseProps['loading']
+) => {
+  const baseStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.inverse};
+    background-color: ${theme.colour.fill.success};
+    color: ${theme.colour.text.inverse};
+  `;
+
+  const interactiveStyle = css`
+    cursor: pointer;
+  `;
+
+  const selectedStyle = css`
+    background-color: ${theme.colour.fill.success};
+  `;
+
+  const disabledStyle = css`
+    --ucl-uikit-button-icon-colour: ${theme.colour.icon.disabledOnBgFill};
+    background-color: ${theme.colour.fill.disabled};
+    color: ${theme.colour.text.onBgFillDisabled};
+  `;
+
+  return cx(
+    baseStyle,
+    selected && selectedStyle,
+    !disabled && !loading && interactiveStyle,
+    disabled && disabledStyle
+  );
+};
+
+export default buttonPrimarySuccessStyle;

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};