@aleph-alpha/ui-library 1.16.1 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/ui-library",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/system/lib.js",
@@ -71,8 +71,8 @@
     "vitest": "^3.0.0",
     "vue-tsc": "^2.2.12",
     "wait-on": "9.0.3",
-    "@aleph-alpha/prettier-config-frontend": "0.4.0",
     "@aleph-alpha/eslint-config-frontend": "0.5.0",
+    "@aleph-alpha/prettier-config-frontend": "0.4.0",
     "@aleph-alpha/tsconfig-frontend": "0.5.0"
   },
   "peerDependencies": {

package/src/components/UiChip/UiChip.stories.ts

@@ -0,0 +1,239 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+import UiChip from './UiChip.vue';
+import { UiIcon } from '../UiIcon';
+
+const TagIcon = {
+  components: { UiIcon },
+  template: '<UiIcon name="tag" :size="14" />',
+};
+
+const InfoIcon = {
+  components: { UiIcon },
+  template: '<UiIcon name="info" :size="14" />',
+};
+
+const meta: Meta<typeof UiChip> = {
+  title: 'Components/UiChip',
+  component: UiChip,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['static', 'selectable', 'removable'],
+      description: 'Behavior variant of the chip',
+    },
+    selectable: {
+      control: 'boolean',
+      description: 'Enables selection for removable chips',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables interactions',
+    },
+    startIcon: {
+      control: false,
+      description: 'Optional leading icon',
+    },
+    removeLabel: {
+      control: 'text',
+      description: 'Accessible label for remove button',
+    },
+    modelValue: {
+      control: 'boolean',
+      description: 'Selection state for interactive chips',
+    },
+  },
+  args: {
+    variant: 'static',
+    selectable: false,
+    disabled: false,
+    removeLabel: 'Remove chip',
+    modelValue: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiChip>;
+
+/**
+ * Static chips are non-interactive and work as labels/tags.
+ */
+export const Static: Story = {
+  render: () => ({
+    components: { UiChip },
+    setup() {
+      return { TagIcon };
+    },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <UiChip variant="static">Data Analysis</UiChip>
+        <UiChip variant="static" :start-icon="TagIcon">With icon</UiChip>
+        <UiChip variant="static" disabled>Disabled</UiChip>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Selectable chips support hover, focus, selected and disabled states.
+ */
+export const Selectable: Story = {
+  render: () => ({
+    components: { UiChip },
+    setup() {
+      const isSelected = ref(false);
+      const isActive = ref(true);
+      return { isSelected, isActive, InfoIcon };
+    },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <UiChip v-model="isSelected" variant="selectable">Default</UiChip>
+        <UiChip v-model="isActive" variant="selectable" :start-icon="InfoIcon">Active</UiChip>
+        <UiChip variant="selectable" disabled>Disabled</UiChip>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Removable chips include a dismiss action and can also be selectable.
+ */
+export const Removable: Story = {
+  render: () => ({
+    components: { UiChip },
+    setup() {
+      const selectedRemovable = ref(true);
+      const chips = ref(['Data Analysis', 'Report Generation']);
+
+      function removeChip(label: string) {
+        chips.value = chips.value.filter((chip) => chip !== label);
+      }
+
+      return { chips, selectedRemovable, removeChip, TagIcon };
+    },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <UiChip
+          v-for="chip in chips"
+          :key="chip"
+          variant="removable"
+          :start-icon="TagIcon"
+          @remove="removeChip(chip)"
+        >
+          {{ chip }}
+        </UiChip>
+
+        <UiChip
+          v-model="selectedRemovable"
+          variant="removable"
+          selectable
+          :start-icon="TagIcon"
+        >
+          Selectable removable
+        </UiChip>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Chips with and without a leading icon.
+ */
+export const WithAndWithoutLeadingIcon: Story = {
+  render: () => ({
+    components: { UiChip },
+    setup() {
+      const selectableWithoutIcon = ref(true);
+      const selectableWithIcon = ref(false);
+      return { TagIcon, selectableWithoutIcon, selectableWithIcon };
+    },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <UiChip variant="static">No icon</UiChip>
+        <UiChip variant="static" :start-icon="TagIcon">Leading icon</UiChip>
+        <UiChip v-model="selectableWithoutIcon" variant="selectable">Selectable no icon</UiChip>
+        <UiChip v-model="selectableWithIcon" variant="selectable" :start-icon="TagIcon">
+          Selectable with icon
+        </UiChip>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Group usage with keyboard-focusable interactive chips.
+ * Focus order is left-to-right, top-to-bottom across interactive chips and remove buttons.
+ */
+export const Group: Story = {
+  render: () => ({
+    components: { UiChip },
+    setup() {
+      const firstSelected = ref(true);
+      const secondSelected = ref(false);
+      const removableSelected = ref(true);
+
+      return { firstSelected, secondSelected, removableSelected, TagIcon, InfoIcon };
+    },
+    template: `
+      <div class="flex max-w-[620px] flex-col gap-3">
+        <p class="text-sm text-content-on-surface-muted">
+          Interactive group example inspired by the Figma chips group. Use Tab to verify focus order.
+        </p>
+
+        <div class="flex flex-wrap items-center gap-2">
+          <UiChip v-model="firstSelected" variant="selectable" :start-icon="TagIcon">
+            Data Analysis
+          </UiChip>
+
+          <UiChip v-model="secondSelected" variant="selectable">
+            Report Generation
+          </UiChip>
+
+          <UiChip variant="removable" :start-icon="InfoIcon">Workflow Automation</UiChip>
+
+          <UiChip v-model="removableSelected" variant="removable" selectable>
+            Add
+          </UiChip>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Focus order for interactive chips:
+ * selectable chip -> removable chip action -> removable chip dismiss action.
+ */
+export const FocusOrderInteractive: Story = {
+  render: () => ({
+    components: { UiChip },
+    setup() {
+      const first = ref(false);
+      const second = ref(true);
+      return { first, second, TagIcon };
+    },
+    template: `
+      <div class="flex max-w-[620px] flex-col gap-3">
+        <p class="text-sm text-content-on-surface-muted">
+          Press Tab to verify focus order from left to right and top to bottom.
+        </p>
+
+        <div class="flex flex-wrap items-center gap-2">
+          <UiChip v-model="first" variant="selectable" :start-icon="TagIcon">
+            Focus 1
+          </UiChip>
+
+          <UiChip v-model="second" variant="removable" selectable :start-icon="TagIcon">
+            Focus 2 and 3
+          </UiChip>
+
+          <UiChip variant="removable" :start-icon="TagIcon">
+            Focus 4
+          </UiChip>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/components/UiChip/UiChip.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+  import { UiIcon } from '@/components/UiIcon';
+  import type { UiChipProps } from './types';
+
+  defineOptions({
+    name: 'UiChip',
+  });
+
+  const props = withDefaults(defineProps<UiChipProps>(), {
+    variant: 'static',
+    selectable: false,
+    disabled: false,
+    removeLabel: 'Remove chip',
+  });
+
+  const emits = defineEmits<{
+    (e: 'remove'): void;
+  }>();
+
+  const modelValue = defineModel<boolean>({ default: false });
+
+  const isRemovable = computed(() => props.variant === 'removable');
+  const isSelectable = computed(
+    () => props.variant === 'selectable' || (props.variant === 'removable' && props.selectable),
+  );
+  const isSelected = computed(() => isSelectable.value && modelValue.value);
+
+  function toggleSelected() {
+    if (!isSelectable.value || props.disabled) {
+      return;
+    }
+
+    modelValue.value = !modelValue.value;
+  }
+
+  function removeChip(event: MouseEvent) {
+    event.stopPropagation();
+    if (props.disabled) {
+      return;
+    }
+    emits('remove');
+  }
+
+  function handleRemovablePrimaryAction() {
+    if (isSelectable.value) {
+      toggleSelected();
+    }
+  }
+
+  const chipBaseClass = computed(() =>
+    cn(
+      'inline-flex items-center rounded-full border border-border-button-outlined bg-background-surface-secondary text-content-on-accent-soft text-xs font-medium transition-[color,background-color,border-color]',
+      'data-[selected=true]:bg-background-accent-soft data-[selected=true]:border-accent-default',
+      'data-[selected=true]:hover:bg-background-accent-soft data-[selected=true]:hover:border-accent-default',
+      props.disabled && 'opacity-50',
+    ),
+  );
+
+  const standaloneChipClass = computed(() =>
+    cn(
+      chipBaseClass.value,
+      'h-7 gap-1.5 px-3',
+      isSelectable.value &&
+        'cursor-pointer hover:bg-background-surface-secondary hover:border-border-button-outlined focus-visible:outline-none focus-visible:border-border-surface-focus-ring disabled:pointer-events-none',
+    ),
+  );
+
+  const removableChipClass = computed(() =>
+    cn(
+      chipBaseClass.value,
+      'h-7 gap-0.5 pl-3 pr-1',
+      'focus-within:border-border-surface-focus-ring',
+    ),
+  );
+</script>
+
+<template>
+  <span
+    v-if="!isRemovable && !isSelectable"
+    data-slot="chip"
+    :aria-disabled="props.disabled ? 'true' : undefined"
+    :class="standaloneChipClass"
+  >
+    <component :is="props.startIcon" v-if="props.startIcon" class="size-3.5 shrink-0" />
+    <slot />
+  </span>
+
+  <button
+    v-else-if="!isRemovable"
+    data-slot="chip"
+    :data-selected="isSelected"
+    :disabled="props.disabled"
+    :aria-pressed="isSelected ? 'true' : 'false'"
+    type="button"
+    :class="standaloneChipClass"
+    @click="toggleSelected"
+  >
+    <component :is="props.startIcon" v-if="props.startIcon" class="size-3.5 shrink-0" />
+    <slot />
+  </button>
+
+  <div v-else data-slot="chip" :data-selected="isSelected" :class="removableChipClass">
+    <button
+      type="button"
+      class="inline-flex min-w-0 items-center gap-1.5 rounded-full outline-none"
+      :class="isSelectable ? 'cursor-pointer' : 'cursor-default'"
+      :disabled="props.disabled"
+      :aria-pressed="isSelectable ? (isSelected ? 'true' : 'false') : undefined"
+      @click="handleRemovablePrimaryAction"
+    >
+      <component :is="props.startIcon" v-if="props.startIcon" class="size-3.5 shrink-0" />
+      <slot />
+    </button>
+
+    <button
+      data-slot="chip-remove"
+      type="button"
+      class="inline-flex size-5 items-center justify-center rounded-full outline-none hover:bg-hover-default focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none"
+      :aria-label="props.removeLabel"
+      :disabled="props.disabled"
+      @click="removeChip"
+    >
+      <UiIcon name="x" :size="12" class="text-content-on-surface-primary" />
+    </button>
+  </div>
+</template>

package/src/components/UiChip/__tests__/UiChip.test.ts

@@ -0,0 +1,102 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+import { MockIcon } from '@/__tests__/test-utils';
+import UiChip from '../UiChip.vue';
+
+describe('UiChip', () => {
+  test('renders static chip content', () => {
+    const { getByText } = render(UiChip, {
+      props: { variant: 'static' },
+      slots: { default: 'Data Analysis' },
+    });
+
+    expect(getByText('Data Analysis')).toBeInTheDocument();
+  });
+
+  test('renders start icon when provided', () => {
+    const { getByTestId } = render(UiChip, {
+      props: {
+        variant: 'static',
+        startIcon: MockIcon,
+      },
+      slots: { default: 'Chip' },
+    });
+
+    expect(getByTestId('mock-icon')).toBeInTheDocument();
+  });
+
+  test('toggles selected state for selectable chips', async () => {
+    const user = userEvent.setup();
+    const { getByRole } = render(UiChip, {
+      props: { variant: 'selectable' },
+      slots: { default: 'Selectable chip' },
+    });
+
+    const chipButton = getByRole('button');
+
+    expect(chipButton).toHaveAttribute('aria-pressed', 'false');
+    await user.click(chipButton);
+    expect(chipButton).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  test('renders remove button for removable chips', () => {
+    const { getByRole } = render(UiChip, {
+      props: { variant: 'removable' },
+      slots: { default: 'Removable chip' },
+    });
+
+    expect(getByRole('button', { name: 'Removable chip' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Remove chip' })).toBeInTheDocument();
+  });
+
+  test('tabs focus from chip body to remove button for removable chips', async () => {
+    const user = userEvent.setup();
+    const { getByRole } = render(UiChip, {
+      props: { variant: 'removable' },
+      slots: { default: 'Removable chip' },
+    });
+
+    const chipBodyButton = getByRole('button', { name: 'Removable chip' });
+    const removeButton = getByRole('button', { name: 'Remove chip' });
+
+    await user.tab();
+    expect(chipBodyButton).toHaveFocus();
+
+    await user.tab();
+    expect(removeButton).toHaveFocus();
+  });
+
+  test('emits remove when remove button is clicked', async () => {
+    const user = userEvent.setup();
+    const { getByRole, emitted } = render(UiChip, {
+      props: { variant: 'removable' },
+      slots: { default: 'Removable chip' },
+    });
+
+    await user.click(getByRole('button', { name: 'Remove chip' }));
+
+    expect(emitted('remove')).toHaveLength(1);
+  });
+
+  test('disables interactions when disabled', async () => {
+    const user = userEvent.setup();
+    const { getByRole, emitted } = render(UiChip, {
+      props: {
+        variant: 'removable',
+        selectable: true,
+        disabled: true,
+      },
+      slots: { default: 'Disabled chip' },
+    });
+
+    const selectableButton = getByRole('button', { name: 'Disabled chip' });
+    const removeButton = getByRole('button', { name: 'Remove chip' });
+
+    expect(selectableButton).toBeDisabled();
+    expect(removeButton).toBeDisabled();
+
+    await user.click(removeButton);
+    expect(emitted('remove')).toBeUndefined();
+  });
+});

package/src/components/UiChip/index.ts

@@ -0,0 +1,2 @@
+export { default as UiChip } from './UiChip.vue';
+export type * from './types';

package/src/components/UiChip/types.ts

@@ -0,0 +1,50 @@
+import { Component } from 'vue';
+
+export type UiChipVariant = 'static' | 'selectable' | 'removable';
+
+/**
+ * Compact element used to represent a choice, tag, filter, or action.
+ * Static and selectable chips share the same base styling, while removable chips
+ * expose an additional dismiss action.
+ * @category Form Inputs
+ * @useCases filters, selected options, tags, quick actions
+ * @keywords chip, tag, filter, removable, selectable, dismiss
+ * @related UiBadge, UiTagsInput, UiToggle
+ */
+export interface UiChipProps {
+  /**
+   * Chip behavior variant.
+   * @default 'static'
+   */
+  variant?: UiChipVariant;
+
+  /**
+   * Enables selection for the removable variant.
+   * Has no effect for `static` and `selectable` variants.
+   * @default false
+   */
+  selectable?: boolean;
+
+  /**
+   * Controlled selected state for interactive chips.
+   * Use with `v-model`.
+   */
+  modelValue?: boolean;
+
+  /**
+   * Whether the chip is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Optional icon component displayed before the label.
+   */
+  startIcon?: Component;
+
+  /**
+   * Accessible label for the remove button.
+   * @default 'Remove chip'
+   */
+  removeLabel?: string;
+}