[Chip] Support ref as prop, add color options, and fix dismiss icon
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 70
- Forks
- 13
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 8
Description
Summary
Improvements to the Chip component to fix accessibility issues and align with design system patterns.
Improvements
1. No ref prop support
The component doesn't accept ref as a prop, inconsistent with the rest of the design system.
4. Inline SVG for dismiss icon
The dismiss button renders an inline SVG path. Same pattern as Callout — should use a shared icon component.
5. children is required but shouldn't be
The type mandates children: ReactNode but a chip could be icon-only.
6. Limited color options
Only 2 colors (neutral, accent). Consider adding danger, success, warning for status chips.
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
- Accessibility baseline (#673)
- Forward HTML attributes (#674)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Chip component and compare its dismiss icon implementation with the Callout component's shared icon pattern. Check how other design-system components handle refs, optional children, and color variants. Done means Chip supports refs, icon-only usage, the requested status colors, and a shared dismiss icon without regressing accessibility.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100