@arbor-education/design-system.components 0.21.1 → 0.23.0

package/src/components/table/cellRenderers/ComboboxCellRenderer.test.tsx

@@ -1,11 +1,11 @@
-import { describe, expect, test, vi, afterEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { SuppressKeyboardEventParams } from 'ag-grid-community';
 import type { CustomCellRendererProps } from 'ag-grid-react';
-import { ComboboxCellRenderer } from './ComboboxCellRenderer.js';
 import type { ComboboxOption, ComboboxProps } from 'Components/combobox/types';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { ComboboxCellRenderer } from './ComboboxCellRenderer.js';
 
 const options: ComboboxOption[] = [
   { value: 'opt1', label: 'Option 1' },
@@ -104,6 +104,23 @@ describe('ComboboxCellRenderer', () => {
     expect(screen.getByRole('combobox')).toBeInTheDocument();
   });
 
+  test('renders selected tags for multiple button-trigger values', () => {
+    const { container } = render(
+      <ComboboxCellRenderer
+        {...createMockProps({
+          'value': ['opt1', 'opt2'],
+          'multiple': true,
+          'triggerVariant': 'button',
+          'aria-label': 'Choose tags',
+        })}
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: 'Choose tags' })).toBeInTheDocument();
+    expect(container.querySelector('.ds-combobox__button-tags-viewport .ds-tag-list')).toBeInTheDocument();
+    expect(container.querySelectorAll('.ds-combobox__button-tags-viewport .ds-tag')).toHaveLength(2);
+  });
+
   test('registers cellKeyDown listener on mount', () => {
     const addEventListener = vi.fn();
     const removeEventListener = vi.fn();

package/src/components/tag/Tag.stories.tsx

@@ -1,17 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Controls,
   Heading as DocHeading,
-  Markdown,
   Primary as DocPrimary,
+  Markdown,
   Stories,
   Subtitle,
   Title,
 } from '@storybook/addon-docs/blocks';
-import { useState } from 'react';
-import { fn } from 'storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Dot } from 'Components/dot/Dot';
 import { Icon } from 'Components/icon/Icon';
+import { useState } from 'react';
+import { fn } from 'storybook/test';
 import { Tag, type TagColor } from './Tag.js';
 
 // ---------------------------------------------------------------------------

package/src/components/tag/Tag.test.tsx

@@ -108,8 +108,48 @@ describe('Tag', () => {
     });
   });
 
+  describe('onClick', () => {
+    test('renders a primary action button when onClick is provided', () => {
+      render(<Tag onClick={() => {}}>Clickable</Tag>);
+      expect(screen.getByRole('button', { name: 'Clickable' })).toBeInTheDocument();
+    });
+
+    test('uses a custom action label when provided', () => {
+      render(<Tag onClick={() => {}} actionLabel="Open filter for Alice Johnson">Alice Johnson</Tag>);
+      expect(screen.getByRole('button', { name: 'Open filter for Alice Johnson' })).toBeInTheDocument();
+    });
+
+    test('allows composite parents to remove the primary action from the tab order', () => {
+      render(
+        <Tag onClick={() => {}} actionButtonTabIndex={-1}>
+          Clickable
+        </Tag>,
+      );
+      expect(screen.getByRole('button', { name: 'Clickable' })).toHaveAttribute('tabindex', '-1');
+    });
+
+    test('fires onClick callback when the primary action is clicked', async () => {
+      const onClick = vi.fn();
+      render(<Tag onClick={onClick}>Clickable</Tag>);
+
+      await userEvent.click(screen.getByRole('button', { name: 'Clickable' }));
+      expect(onClick).toHaveBeenCalledOnce();
+    });
+
+    test('forwards aria-controls and aria-expanded to the primary action button', () => {
+      render(
+        <Tag onClick={() => {}} ariaControls="filter-modal" ariaExpanded={true}>
+          Clickable
+        </Tag>,
+      );
+
+      expect(screen.getByRole('button', { name: 'Clickable' })).toHaveAttribute('aria-controls', 'filter-modal');
+      expect(screen.getByRole('button', { name: 'Clickable' })).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+
   describe('combined slots', () => {
-    test('renders slotStart, children, slotEnd, and remove button in correct order', () => {
+    test('renders non-clickable removable tags through the shared content wrapper', () => {
       const { container } = render(
         <Tag
           slotStart={<span>S</span>}
@@ -122,10 +162,27 @@ describe('Tag', () => {
 
       const tag = container.querySelector('.ds-tag')!;
       const children = Array.from(tag.children);
-      expect(children[0]).toHaveClass('ds-tag__slot-start');
-      expect(children[1]).toHaveClass('ds-tag__label');
-      expect(children[2]).toHaveClass('ds-tag__slot-end');
-      expect(children[3]).toHaveClass('ds-tag__remove');
+      expect(children[0]).toHaveClass('ds-tag__content');
+      expect(children[1]).toHaveClass('ds-tag__remove');
+
+      const contentChildren = Array.from(children[0]!.children);
+      expect(contentChildren[0]).toHaveClass('ds-tag__slot-start');
+      expect(contentChildren[1]).toHaveClass('ds-tag__label');
+      expect(contentChildren[2]).toHaveClass('ds-tag__slot-end');
+    });
+
+    test('renders clickable tags through the same shared content wrapper', () => {
+      const { container } = render(
+        <Tag
+          slotStart={<span>S</span>}
+          slotEnd={<span>E</span>}
+          onClick={() => {}}
+        >
+          Label
+        </Tag>,
+      );
+
+      expect(container.querySelector('.ds-tag__content.ds-tag__action')).toBeInTheDocument();
     });
   });
 });

package/src/components/tag/Tag.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { Icon } from 'Components/icon/Icon';
+import type { ButtonHTMLAttributes } from 'react';
 
 export type TagColor = 'neutral'
   | 'orange'
@@ -16,9 +17,21 @@ export type TagProps = {
   selected?: boolean;
   slotStart?: React.ReactNode;
   slotEnd?: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+  onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+  actionLabel?: string;
+  actionButtonTabIndex?: 0 | -1;
+  actionRef?: React.Ref<HTMLButtonElement>;
   onRemove?: () => void;
   removeLabel?: string;
+  onRemoveKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+  onRemoveFocus?: React.FocusEventHandler<HTMLButtonElement>;
   removeButtonTabIndex?: 0 | -1;
+  removeButtonRef?: React.Ref<HTMLButtonElement>;
+  disabled?: boolean;
+  ariaControls?: string;
+  ariaExpanded?: ButtonHTMLAttributes<HTMLButtonElement>['aria-expanded'];
 };
 
 export const Tag = ({
@@ -27,18 +40,59 @@ export const Tag = ({
   selected = false,
   slotStart,
   slotEnd,
+  onClick,
+  onKeyDown,
+  onFocus,
+  actionLabel,
+  actionButtonTabIndex = 0,
+  actionRef,
   onRemove,
   removeLabel = 'Remove',
+  onRemoveKeyDown,
+  onRemoveFocus,
   removeButtonTabIndex = 0,
+  removeButtonRef,
+  disabled = false,
+  ariaControls,
+  ariaExpanded,
 }: TagProps): React.JSX.Element => {
+  const tagContent = onClick
+    ? (
+        <button
+          type="button"
+          className="ds-tag__content ds-tag__action"
+          aria-label={actionLabel}
+          aria-controls={ariaControls}
+          aria-expanded={ariaExpanded}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          onFocus={onFocus}
+          tabIndex={actionButtonTabIndex}
+          ref={actionRef}
+          disabled={disabled}
+        >
+          {slotStart && <span className="ds-tag__slot-start">{slotStart}</span>}
+          <span className="ds-tag__label">{children}</span>
+          {slotEnd && <span className="ds-tag__slot-end">{slotEnd}</span>}
+        </button>
+      )
+    : (
+        <span className="ds-tag__content">
+          {slotStart && <span className="ds-tag__slot-start">{slotStart}</span>}
+          <span className="ds-tag__label">{children}</span>
+          {slotEnd && <span className="ds-tag__slot-end">{slotEnd}</span>}
+        </span>
+      );
+
   return (
     <span className={classNames('ds-tag', `ds-tag--${color}`, {
       'ds-tag--selected': selected,
+      'ds-tag--interactive': Boolean(onClick),
+      'ds-tag--removable': Boolean(onRemove),
+      'ds-tag--disabled': disabled,
     })}
     >
-      {slotStart && <span className="ds-tag__slot-start">{slotStart}</span>}
-      <span className="ds-tag__label">{children}</span>
-      {slotEnd && <span className="ds-tag__slot-end">{slotEnd}</span>}
+      {tagContent}
       {onRemove && (
         <button
           type="button"
@@ -48,7 +102,11 @@ export const Tag = ({
             e.stopPropagation();
             onRemove();
           }}
+          onKeyDown={onRemoveKeyDown}
+          onFocus={onRemoveFocus}
           tabIndex={removeButtonTabIndex}
+          ref={removeButtonRef}
+          disabled={disabled}
         >
           <Icon name="x" size={12} />
         </button>

package/src/components/tag/tag.scss

@@ -1,6 +1,5 @@
 .ds-tag {
   display: inline-flex;
-  padding: 0 var(--tag-spacing-horizontal);
   align-items: center;
   gap: var(--tag-spacing-gap-horizontal);
   border-radius: var(--tag-radius);
@@ -13,6 +12,7 @@
   height: var(--tag-height);
   font-style: normal;
   line-height: 150%;
+  overflow: visible;
 
   &--neutral {
     color: var(--tag-neutral-color-text);
@@ -60,6 +60,68 @@
     border-color: var(--tag-selected-color-border);
   }
 
+  .ds-tag__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+  }
+}
+
+.ds-tag__content {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--tag-spacing-horizontal);
+  border-radius: inherit;
+  box-sizing: border-box;
+}
+
+.ds-tag__action {
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    background-color: var(--color-grey-100);
+  }
+
+  &:hover {
+    background-color: var(--color-grey-100);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.ds-tag--removable {
+  gap: 0;
+
+  .ds-tag__label {
+    padding: 0 var(--tag-spacing-horizontal) 0 0;
+  }
+
+  .ds-tag__content {
+    gap: var(--tag-spacing-horizontal);
+    padding-right: 0;
+  }
+}
+
+.ds-tag:has(.ds-tag__action:focus-visible) {
+  outline: var(--focus-border) solid var(--focus-color-focus);
+  outline-offset: 2px;
 }
 
 .ds-tag__slot-start {
@@ -68,11 +130,6 @@
   flex-shrink: 0;
 }
 
-.ds-tag__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .ds-tag__slot-end {
   display: flex;
   align-items: center;
@@ -80,19 +137,33 @@
 }
 
 .ds-tag__remove {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
   background: transparent;
+  align-self: stretch;
+  min-width: calc(var(--tag-height) - (var(--border-weight) * 2));
   padding: 0;
   cursor: pointer;
   color: inherit;
-  border-radius: 50%;
+  border-radius: var(--tag-radius);
   flex-shrink: 0;
+  line-height: 0;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--focus-border) solid var(--focus-color-focus);
+    outline-offset: 2px;
+    border-radius: var(--tag-radius);
+    background-color: var(--color-grey-100);
+  }
 
   &:hover {
-    background-color: var(--color-grey-200);
+    background-color: var(--color-grey-100);
   }
 
   &:disabled {