Flagsmith / Flagsmith/flagsmith

Consolidate badge and status pills onto Chip

Open
#8,292 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.