Flagsmith / Flagsmith/flagsmith
Consolidate badge and status pills onto Chip
- Dominant language
- Python
- Stars
- 6.6k
- Forks
- 567
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 121
Description
Four components draw the same small labelled pill by hand, and three of them hardcode their colours.
| | where | uses | colours |
|---|---|---|---|
| `.unread` | `web/styles/project/_utils.scss:68` | 19 | `#7b51fb` / `#fff`, no dark mode |
| `.counter-value` | `web/styles/components/_tabs.scss:89` | 1 | `$danger` |
| `StatusBadge` | `web/components/experiments/StatusBadge` | 2 | tokens |
| `ds-chip` | `web/components/base/Chip` | the DS one | tokens |
`.unread` is the widely used one and it has no dark-mode override at all, so `#7b51fb` on white is identical in both themes.
Where it hurts most is `LifecycleSidebar`, which fights the class to get a neutral pill:
```tsx
className={classNames('ms-1 px-2 unread rounded d-inline', {
'bg-light300 text-muted': activeSection !== s.key,
})}
```
Three of `.unread`'s five visual decisions overridden at the call site.
## What to do
Chip already is this component. It needs:
- the four status variants (`success`, `warning`, `info`, `muted`), each pairing an existing `bg-surface-*` with its `text-*` utility
- `pill` for fully rounded ends
- `ChipDot` in `currentColor`, so the dot follows the variant with nothing to wire
- a **strong** emphasis alongside the subtle one. `ReviewStep__badge` is solid `surface-action` with white text, the lifecycle active count is solid `#7b51fb` with white, and `MetricsComparisonTable__type-badge` uses `surface-action-muted` at 16%, where Chip's `accent` is 8%. Three call sites want a fill Chip does not have.
## Migration order
1. `StatusBadge` (already token-based, like-for-like)
2. `ReviewStep`'s two badges, `MetricsComparisonTable__type-badge` (needs the strong variant)
3. `LifecycleSidebar` count (**a design decision**: solid purple + white today, `accent` is subtle purple + purple text)
4. `.unread`'s 19 sites, `.counter-value`
## Out of scope
Step numbers are not chips. `wizard-step__circle` (32px) and the onboarding rollout quest's step number (24px) are fixed circles holding an ordinal; Chip is sized by padding and grows with its content. Tried it, and forcing the shape means overriding width and height and fighting the padding scale. Two call sites, own component if it ever earns one.
Also skip the geometry: `RolloutSlider`, `DistributionBar`, and the tracks/dots in `results.scss`. Round, but not labels.
## Note
`Chip.tsx` currently says `Count badges are out of scope`. This reverses that deliberately.
Contributor guide
Research direction
Start by reading web/components/base/Chip/Chip.tsx and compare it with StatusBadge, ReviewStep, MetricsComparisonTable, LifecycleSidebar, and the listed SCSS call sites. Done means Chip supports the requested status, pill, dot, and strong variants, the migration order is completed, the lifecycle emphasis decision is resolved, and excluded step-number and geometry components remain unchanged.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, sass, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100