Add Chip atom component

- Interactive tag for filtering, selection, and dismissible labels
- Wraps MUI Chip with FA tokens: 12 component tokens (height, padding, font, icon sizes)
- Two variants (filled/outlined) × two colours (default/primary) × two sizes (sm/md)
- Custom `selected` prop promotes to brand colour with warm bg (outlined)
- MUI theme overrides: soft tonal fills, branded outlines, hover/focus states
- 10 Storybook stories including interactive filter and removable tag demos
- Preflight passed all 5 checks

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-25 16:45:24 +11:00
parent 1188eef96e
commit 21877ce4e6
10 changed files with 631 additions and 2 deletions

View File

@@ -225,3 +225,22 @@ the correct token for any design property.
| badge.iconSize.md | 14px | Badge | Medium badge icon |
| badge.iconGap.default | → spacing.1 (4px) | Badge | Icon-to-text gap |
| badge.borderRadius.default | → borderRadius.full (9999px) | Badge | Pill shape |
### Chip
`tokens/component/chip.json`
| Token path | Value / Reference | Used by | Description |
|-----------|-----------|---------|-------------|
| chip.height.sm | 28px | Chip | Small chip height |
| chip.height.md | 32px | Chip | Medium chip height (default) |
| chip.paddingX.sm | → spacing.2 (8px) | Chip | Small horizontal padding |
| chip.paddingX.md | → spacing.3 (12px) | Chip | Medium horizontal padding |
| chip.fontSize.sm | → fontSize.xs (12px) | Chip | Small chip text |
| chip.fontSize.md | → fontSize.sm (14px) | Chip | Medium chip text |
| chip.iconSize.sm | 16px | Chip | Small chip leading icon |
| chip.iconSize.md | 18px | Chip | Medium chip leading icon |
| chip.deleteIconSize.sm | 14px | Chip | Small chip delete icon |
| chip.deleteIconSize.md | 16px | Chip | Medium chip delete icon |
| chip.iconGap.default | → spacing.1 (4px) | Chip | Icon-to-text gap |
| chip.borderRadius.default | → borderRadius.full (9999px) | Chip | Pill shape |