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:
@@ -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 |
|
||||
|
||||
Reference in New Issue
Block a user