uikit-react-public 0.50.5 → 0.50.7

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

@@ -2,9 +2,10 @@ import { beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ToggleGroup from '../ToggleGroup';
-import ToggleGroupItem from '../subcomponents/Item';
 import { ThemeContextProvider } from '../../../theme/useTheme';
 
+const ToggleGroupItem = ToggleGroup.Item;
+
 const mockMatchMedia = (matchesDesktop: boolean) => {
   globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
     matches: query.includes('min-width') ? matchesDesktop : false,
@@ -44,7 +45,10 @@ describe('ToggleGroup', () => {
       </ToggleGroup>
     );
 
-    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+    expect(screen.getByRole('radiogroup')).toHaveClass(
+      'ucl-uikit-toggle-group'
+    );
+    expect(screen.getByTestId('ucl-uikit-toggle-group')).toBeInTheDocument();
     expect(screen.getByRole('radio', { name: 'Option 1' })).toHaveAttribute(
       'aria-checked',
       'true'
@@ -187,6 +191,90 @@ describe('ToggleGroup', () => {
     expect(option3).toHaveAttribute('aria-checked', 'true');
   });
 
+  test('moves focus and selection with vertical arrow keys', () => {
+    wrap(
+      <ToggleGroup defaultValue='option-1'>
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+        />
+        <ToggleGroupItem
+          value='option-2'
+          label='Option 2'
+        />
+      </ToggleGroup>
+    );
+
+    const option1 = screen.getByRole('radio', { name: 'Option 1' });
+    const option2 = screen.getByRole('radio', { name: 'Option 2' });
+
+    option1.focus();
+    fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowDown' });
+
+    expect(option2).toHaveFocus();
+    expect(option2).toHaveAttribute('aria-checked', 'true');
+
+    fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowUp' });
+
+    expect(option1).toHaveFocus();
+    expect(option1).toHaveAttribute('aria-checked', 'true');
+  });
+
+  test('makes the first enabled item tabbable when no item is selected', () => {
+    wrap(
+      <ToggleGroup>
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+          disabled
+        />
+        <ToggleGroupItem
+          value='option-2'
+          label='Option 2'
+        />
+      </ToggleGroup>
+    );
+
+    expect(screen.getByRole('radio', { name: 'Option 1' })).toHaveAttribute(
+      'tabindex',
+      '-1'
+    );
+    expect(screen.getByRole('radio', { name: 'Option 2' })).toHaveAttribute(
+      'tabindex',
+      '0'
+    );
+  });
+
+  test('forwards HTML attributes and composes onKeyDown', () => {
+    const onKeyDown = vi.fn();
+
+    wrap(
+      <ToggleGroup
+        aria-label='View'
+        className='custom-toggle-group'
+        defaultValue='option-1'
+        onKeyDown={onKeyDown}
+        testId='toggle-group'
+      >
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+        />
+        <ToggleGroupItem
+          value='option-2'
+          label='Option 2'
+        />
+      </ToggleGroup>
+    );
+
+    const group = screen.getByTestId('toggle-group');
+    fireEvent.keyDown(group, { key: 'a' });
+
+    expect(group).toHaveAccessibleName('View');
+    expect(group).toHaveClass('ucl-uikit-toggle-group', 'custom-toggle-group');
+    expect(onKeyDown).toHaveBeenCalledOnce();
+  });
+
   test('skips disabled items when navigating with arrow keys', () => {
     wrap(
       <ToggleGroup defaultValue='option-1'>
@@ -272,7 +360,11 @@ describe('ToggleGroup mobile select fallback', () => {
 
   test('renders a Select instead of the radiogroup once item count exceeds the threshold', () => {
     wrap(
-      <ToggleGroup defaultValue='option-1'>
+      <ToggleGroup
+        className='custom-toggle-group'
+        defaultValue='option-1'
+        testId='responsive-toggle-group'
+      >
         <ToggleGroupItem
           value='option-1'
           label='Option 1'
@@ -289,7 +381,14 @@ describe('ToggleGroup mobile select fallback', () => {
     );
 
     expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'data-testid',
+      'responsive-toggle-group'
+    );
+    expect(screen.getByRole('combobox')).toHaveClass(
+      'ucl-uikit-toggle-group',
+      'custom-toggle-group'
+    );
   });
 
   test('counts items nested in fragments toward the mobile select threshold', async () => {
@@ -418,7 +517,7 @@ describe('ToggleGroup mobile select fallback', () => {
     );
 
     const select = screen.getByTestId(
-      'ucl-uikit-select--native'
+      'ucl-uikit-toggle-group'
     ) as HTMLSelectElement;
 
     expect(select.tagName).toBe('SELECT');
@@ -458,7 +557,7 @@ describe('ToggleGroup mobile select fallback', () => {
       </ToggleGroup>
     );
 
-    fireEvent.change(screen.getByTestId('ucl-uikit-select--native'), {
+    fireEvent.change(screen.getByTestId('ucl-uikit-toggle-group'), {
       target: { value: 'option-2' },
     });
 

package/lib/components/ToggleGroup/index.ts

@@ -1,4 +1,3 @@
 export { default } from './ToggleGroup';
 export type { ToggleGroupProps } from './ToggleGroup';
-export { default as Item } from './subcomponents/Item';
-export type { ItemProps } from './subcomponents/Item';
+export type { ToggleGroupItemProps } from './subcomponents/ToggleGroupItem';

package/lib/components/ToggleGroup/subcomponents/{Item.stories.tsx → ToggleGroupItem.stories.tsx}

@@ -1,23 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import ToggleGroup from '../ToggleGroup';
-import Item from './Item';
 
 const meta = {
   title: 'Components/ToggleGroup/Item',
-  component: Item,
+  component: ToggleGroup.Item,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <ToggleGroup defaultValue='option-1'>
+      <ToggleGroup
+        defaultValue='option-1'
+        style={{ width: 507 }}
+      >
         <Story />
       </ToggleGroup>
     ),
   ],
-} satisfies Meta<typeof Item>;
+} satisfies Meta<typeof ToggleGroup.Item>;
 
 export default meta;
 

package/lib/components/ToggleGroup/subcomponents/{Item.tsx → ToggleGroupItem.tsx}

@@ -1,37 +1,60 @@
-import type { InputHTMLAttributes } from 'react';
+import type React from 'react';
 import { css, cx } from '@emotion/css';
 
 import useTheme from '../../../theme/useTheme';
-import Text from '../../Text';
 import Icon from '../../Icon';
 import type { SpecificIconsType } from '../../Icon/Icon';
+import Text from '../../Text';
 import { useToggleGroupContext } from '../ToggleGroupContext';
 
-export interface ItemProps extends InputHTMLAttributes<HTMLInputElement> {
+export const NAME = 'ucl-uikit-toggle-group__item';
+
+const LABEL_CLASS_NAME = `${NAME}-label`;
+
+export interface ToggleGroupItemProps extends React.InputHTMLAttributes<HTMLInputElement> {
   value: string;
   label: string;
   icon?: keyof SpecificIconsType;
   disabled?: boolean;
   sublabel?: string;
+  testId?: string;
 }
 
-const Item = ({
+const ToggleGroupItem = ({
   value,
   label,
   sublabel,
   icon,
   disabled = false,
-}: ItemProps) => {
+  className,
+  onChange,
+  testId = NAME,
+  ...inputProps
+}: ToggleGroupItemProps) => {
   const [theme] = useTheme();
-  const { value: selectedValue, setValue, name } = useToggleGroupContext();
+  const {
+    value: selectedValue,
+    setValue,
+    name,
+    tabbableValue,
+    hasSublabel,
+  } = useToggleGroupContext();
   const selected = selectedValue === value;
+  const sublabelLineHeight =
+    theme.typography.body.xs.fontSize *
+    (theme.typography.body.xs.lineHeight / 100);
 
   const toggleGroupItemContainerStyle = css`
     box-sizing: border-box;
     position: relative;
     display: flex;
-    flex: 1 0 auto;
-    height: ${theme.height.h40};
+    flex: 1 1 0;
+    min-width: max-content;
+    height: ${
+      hasSublabel
+        ? `calc(${theme.height.h40} + ${theme.padding.p8})`
+        : theme.height.h40
+    };
     padding: ${theme.padding.p8};
     align-items: center;
     justify-content: center;
@@ -55,6 +78,10 @@ const Item = ({
         :hover {
           background-color: ${theme.colour.fill.brandSubtle};
         }
+
+        :hover .${LABEL_CLASS_NAME} {
+          font-weight: ${theme.typography.body.smSemibold.fontWeight};
+        }
       `
     }
 
@@ -82,6 +109,17 @@ const Item = ({
     gap: ${theme.padding.p8};
   `;
 
+  const toggleGroupItemContentStyle = css`
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    display: flex;
+    padding: ${theme.padding.p8};
+    align-items: center;
+    justify-content: ${sublabel ? 'space-between' : 'center'};
+    gap: ${theme.padding.p8};
+  `;
+
   const toggleGroupItemSizerStyle = cx(
     flexRowStyle,
     css`
@@ -89,24 +127,8 @@ const Item = ({
     `
   );
 
-  const toggleGroupItemContentStyle = cx(
-    flexRowStyle,
-    css`
-      box-sizing: border-box;
-      position: absolute;
-      inset: 0;
-      justify-content: ${sublabel && icon ? 'space-between' : 'center'};
-      padding: ${theme.padding.p8};
-    `
-  );
-
-  const toggleGroupItemLabelBaseStyle = css`
-    text-align: ${sublabel && icon ? 'left' : 'center'};
-  `;
-
   const toggleGroupItemLabelSelectedStyle = css`
     color: ${theme.colour.text.brand};
-    font-weight: ${theme.typography.body.smSemibold.fontWeight};
   `;
 
   const toggleGroupItemLabelDisabledStyle = css`
@@ -114,7 +136,6 @@ const Item = ({
   `;
 
   const toggleGroupItemLabelStyle = cx(
-    toggleGroupItemLabelBaseStyle,
     selected && !disabled && toggleGroupItemLabelSelectedStyle,
     disabled && toggleGroupItemLabelDisabledStyle
   );
@@ -140,8 +161,31 @@ const Item = ({
   );
 
   const toggleGroupItemTextStyle = css`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-bottom: ${sublabel ? `${sublabelLineHeight}px` : 0};
+    text-align: left;
+  `;
+
+  const toggleGroupItemReservedTextStyle = css`
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
+  `;
+
+  const toggleGroupItemLabelSizerStyle = css`
+    display: inline-grid;
+    white-space: nowrap;
+
+    > * {
+      grid-area: 1 / 1;
+    }
+  `;
+
+  const toggleGroupItemReservedLabelStyle = css`
+    visibility: hidden;
   `;
 
   const toggleGroupItemSublabelBaseStyle = css`
@@ -157,32 +201,58 @@ const Item = ({
     disabled && toggleGroupItemSublabelDisabledStyle
   );
 
-  const toggleGroupItemLabelGroupStyle = flexRowStyle;
+  const toggleGroupItemPositionedSublabelStyle = css`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    white-space: nowrap;
+  `;
 
   const toggleGroupItemCheckIconStyle = css`
     color: ${theme.colour.icon.brand};
+    visibility: ${selected ? 'visible' : 'hidden'};
   `;
 
   const IconComponent = icon ? Icon[icon] : undefined;
 
-  const labelContent = (
-    <div className={toggleGroupItemLabelGroupStyle}>
+  const renderLabelContent = (reserved = false) => (
+    <div className={flexRowStyle}>
       {IconComponent && (
         <span className={toggleGroupItemIconStyle}>
           <IconComponent size={16} />
         </span>
       )}
-      <div className={toggleGroupItemTextStyle}>
-        <Text
-          level='sm'
-          className={toggleGroupItemLabelStyle}
-        >
-          {label}
-        </Text>
+      <div
+        className={
+          reserved ? toggleGroupItemReservedTextStyle : toggleGroupItemTextStyle
+        }
+      >
+        {reserved ? (
+          <Text level='sm-semibold'>{label}</Text>
+        ) : (
+          <span className={toggleGroupItemLabelSizerStyle}>
+            <Text
+              level={selected && !disabled ? 'sm-semibold' : 'sm'}
+              className={cx(LABEL_CLASS_NAME, toggleGroupItemLabelStyle)}
+            >
+              {label}
+            </Text>
+            <Text
+              aria-hidden
+              level='sm-semibold'
+              className={toggleGroupItemReservedLabelStyle}
+            >
+              {label}
+            </Text>
+          </span>
+        )}
         {sublabel && (
           <Text
             level='xs'
-            className={toggleGroupItemSublabelStyle}
+            className={cx(
+              toggleGroupItemSublabelStyle,
+              !reserved && toggleGroupItemPositionedSublabelStyle
+            )}
           >
             {sublabel}
           </Text>
@@ -191,43 +261,47 @@ const Item = ({
     </div>
   );
 
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+
+    setValue(value);
+    onChange?.(event);
+  };
+
   return (
     <label className={toggleGroupItemContainerStyle}>
       <input
+        {...inputProps}
         type='radio'
-        className={toggleGroupItemInputStyle}
+        className={cx(NAME, toggleGroupItemInputStyle, className)}
         role='radio'
         aria-checked={selected}
         checked={selected}
         disabled={disabled}
         name={name}
         value={value}
-        tabIndex={selected ? 0 : -1}
+        tabIndex={tabbableValue === value ? 0 : -1}
         data-ucl-toggle-group-value={value}
-        onChange={() => {
-          if (disabled) return;
-          setValue(value);
-        }}
+        data-testid={testId}
+        onChange={handleChange}
       />
       <div
         aria-hidden
         className={toggleGroupItemSizerStyle}
       >
-        {labelContent}
+        {renderLabelContent(true)}
         <Icon.Check size={16} />
       </div>
       <div className={toggleGroupItemContentStyle}>
-        {labelContent}
-        {selected && (
-          <Icon.Check
-            aria-hidden
-            className={toggleGroupItemCheckIconStyle}
-            size={16}
-          />
-        )}
+        {renderLabelContent()}
+        <Icon.Check
+          aria-hidden
+          className={toggleGroupItemCheckIconStyle}
+          size={16}
+        />
       </div>
     </label>
   );
 };
 
-export default Item;
+export default ToggleGroupItem;

package/lib/components/ToggleGroup/subcomponents/__tests__/{Item.test.tsx → ToggleGroupItem.test.tsx}

@@ -1,9 +1,10 @@
 import { describe, expect, test, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import ToggleGroup from '../../ToggleGroup';
-import ToggleGroupItem from '../Item';
 import { ThemeContextProvider } from '../../../../theme/useTheme';
 
+const ToggleGroupItem = ToggleGroup.Item;
+
 const wrap = (ui: React.ReactElement) =>
   render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
 
@@ -20,8 +21,10 @@ describe('ToggleGroupItem', () => {
 
     const item = screen.getByRole('radio', { name: 'Option 1' });
 
+    expect(item).toHaveAttribute('data-testid', 'ucl-uikit-toggle-group__item');
+    expect(item).toHaveClass('ucl-uikit-toggle-group__item');
     expect(item).toHaveAttribute('aria-checked', 'false');
-    expect(item).toHaveAttribute('tabindex', '-1');
+    expect(item).toHaveAttribute('tabindex', '0');
   });
 
   test('reflects selection state from the surrounding ToggleGroup', () => {
@@ -54,6 +57,7 @@ describe('ToggleGroupItem', () => {
 
   test('calls setValue via the ToggleGroup on click', () => {
     const onValueChange = vi.fn();
+    const onChange = vi.fn();
 
     wrap(
       <ToggleGroup
@@ -67,13 +71,23 @@ describe('ToggleGroupItem', () => {
         <ToggleGroupItem
           value='option-2'
           label='Option 2'
+          className='custom-toggle-group-item'
+          onChange={onChange}
+          testId='option-2'
         />
       </ToggleGroup>
     );
 
-    fireEvent.click(screen.getByRole('radio', { name: 'Option 2' }));
+    const option2 = screen.getByRole('radio', { name: 'Option 2' });
+    fireEvent.click(option2);
 
+    expect(option2).toHaveAttribute('data-testid', 'option-2');
+    expect(option2).toHaveClass(
+      'ucl-uikit-toggle-group__item',
+      'custom-toggle-group-item'
+    );
     expect(onValueChange).toHaveBeenCalledWith('option-2');
+    expect(onChange).toHaveBeenCalledOnce();
   });
 
   test('does not select or fire onValueChange when disabled', () => {
@@ -168,7 +182,7 @@ describe('ToggleGroupItem', () => {
     ).toBeInTheDocument();
   });
 
-  test('only shows a visible checkmark once selected, without changing when it is reserved', () => {
+  test('reserves checkmark space without showing it on unselected items', () => {
     wrap(
       <ToggleGroup defaultValue='option-1'>
         <ToggleGroupItem
@@ -189,7 +203,37 @@ describe('ToggleGroupItem', () => {
       .getByRole('radio', { name: 'Option 2' })
       .closest('label');
 
-    expect(selected!.querySelectorAll('svg').length).toBe(2);
-    expect(unselected!.querySelectorAll('svg').length).toBe(1);
+    const selectedCheckmark = selected!.lastElementChild!.querySelector('svg')!;
+    const unselectedCheckmark =
+      unselected!.lastElementChild!.querySelector('svg')!;
+
+    expect(selected!.querySelectorAll('svg')).toHaveLength(2);
+    expect(unselected!.querySelectorAll('svg')).toHaveLength(2);
+    expect(selectedCheckmark).toHaveStyle({ visibility: 'visible' });
+    expect(unselectedCheckmark).toHaveStyle({ visibility: 'hidden' });
+    expect(selected!.lastElementChild).toHaveStyle({
+      justifyContent: 'center',
+    });
+  });
+
+  test('aligns sublabel content between the item edges', () => {
+    wrap(
+      <ToggleGroup defaultValue='option-1'>
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+          sublabel='Sublabel 1'
+          icon='BookOpen'
+        />
+      </ToggleGroup>
+    );
+
+    const item = screen
+      .getByRole('radio', { name: 'Option 1 Sublabel 1' })
+      .closest('label');
+
+    expect(item!.lastElementChild).toHaveStyle({
+      justifyContent: 'space-between',
+    });
   });
 });

package/lib/components/index.ts

@@ -142,7 +142,7 @@ export { default as Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
 
 export { default as ToggleGroup } from './ToggleGroup';
-export type { ToggleGroupProps, ItemProps } from './ToggleGroup';
+export type { ToggleGroupItemProps, ToggleGroupProps } from './ToggleGroup';
 
 export { default as Chip } from './Chip';
 export type { ChipProps } from './Chip';

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.50.5",
+  "version": "0.50.7",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/ToggleGroup/subcomponents/Item.d.ts

@@ -1,11 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-import { SpecificIconsType } from '../../Icon/Icon';
-export interface ItemProps extends InputHTMLAttributes<HTMLInputElement> {
-    value: string;
-    label: string;
-    icon?: keyof SpecificIconsType;
-    disabled?: boolean;
-    sublabel?: string;
-}
-declare const Item: ({ value, label, sublabel, icon, disabled, }: ItemProps) => import("react").JSX.Element;
-export default Item;