feat(chip): add semantic variants and a status dot

[talissoncosta]

• I have read the Contributing Guide.
• I have added information to docs/ if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

Contributes to #8465. Split out of #8569 so the tags work can be reviewed as a contrast change on
its own. Independent of #8613, either can merge first.

Chip gains the five status colours, the solid fill, and ChipDot, a leading dot in
currentColor so it follows the variant with nothing to wire.

StatusBadge then composes it and drops its own stylesheet, 51 lines of hand-written colour pairs
that the semantic tokens already cover.

One visible change: experiment status badges go from fully rounded to 6px, matching the design
system's chip shape. It is the only thing here you will see in the app.

What this does not do

The chip frame
specifies three styles and two sizes. We have seven variants and three sizes, and the values do not
line up:

	Frame	Here
Sizes	Default 32px, Small 24px	default, sm, xs
Padding	8px / 6px	10px / 8px / 6px
Gap	8px default, 4px small	4px throughout
Font	12px, both sizes	13px / 12px / 11px
Styles	Primary, Secondary, Outline	neutral, accent, + five statuses

solid is the frame's Primary and matches its value. accent is close to Secondary and neutral
to Outline, but neither matches: Secondary is a solid #f5f0ff with an #e7e1f4 border where
accent is an 8% alpha with an --color-border-action border, and the frame's dark values
(#1a0a78 / #4f28d8 / #d4beff) have no counterpart in our tokens.

The five status colours are not in the frame at all. StatusBadge needs them, so they are an
extension we are making rather than something specified.

Bringing Chip onto the frame means renaming variants, dropping a size and changing paddings
across ~15 call sites. That is its own PR, and this one deliberately stays out of its way.

How did you test this code?

Storybook in both themes: Chip for the new variants, the solid and the dot, StatusBadge on the
Experiments list for the shape. Unit suite passes, tsc unchanged against main.

To check manually: the Experiments list, for the badge shape and colours.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
flagsmith-frontend-preview	Ready	Preview	Sep 29, 2026 4:29pm UTC
flagsmith-frontend-staging	Ready	Preview	Sep 29, 2026 4:29pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
docs	Ignored	Preview	Sep 29, 2026 4:29pm UTC

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Advanced

Run ID: 91f37ac6-fe38-4e0f-af71-7a66e96af6b8

📥 Commits

Reviewing files that changed from the base of the PR and between 2b571b4 and 00fd156.

📒 Files selected for processing (7)

• frontend/documentation/components/Chip.stories.tsx
• frontend/web/components/base/Chip/Chip.scss
• frontend/web/components/base/Chip/Chip.tsx
• frontend/web/components/base/Chip/ChipDot.tsx
• frontend/web/components/base/Chip/index.ts
• frontend/web/components/experiments/StatusBadge/StatusBadge.scss
• frontend/web/components/experiments/StatusBadge/StatusBadge.tsx

💤 Files with no reviewable changes (1)

• frontend/web/components/experiments/StatusBadge/StatusBadge.scss

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

Chip adds status and display variants, a decorative dot, and documentation stories for the variants. StatusBadge now uses Chip and ChipDot, mapping experiment statuses to Chip variants. Its previous stylesheet is removed.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~12 minutes

Merge Risk: ⚪ Minimal · up to 00fd1

Status badges now share Chip styling while retaining their semantic colors. The inspected experiment views show no concrete layout disruption, leaving no identified merge-blocking issue.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 00fd1

The change affects shared presentation components, but the reviewed experiment-status path uses fixed labels and colours and does not introduce a new action or authorization path. Some broader coverage remains unverified.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The identified experiment views inherit the changed status presentation through StatusBadge; the inspected path does not add an action or privileged sink.

Security Findings and Attack Paths

• inferred — No new attacker-controlled content-to-privileged-action path was identified in the inspected badge flow: status selects fixed lookup values, and the badge supplies no Chip event handlers.

Trust Boundaries and Controls

• observed — The badge’s presentation boundary uses explicit status-to-variant and status-to-label tables rather than rendering the status value itself as a label or class.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Docker builds report

Image	Build Status	Security report
ghcr.io/flagsmith/flagsmith-e2e:pr-8612	Finished ✅	Skipped
ghcr.io/flagsmith/flagsmith-api-test:pr-8612	Finished ✅	Skipped
ghcr.io/flagsmith/flagsmith-api:pr-8612	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith:pr-8612	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-8612	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-8612	Finished ✅	Results ✅

[github-actions]

✅ private-cloud · depot-ubuntu-latest-arm-16 — run #20915 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

 1 passed

Details

 1 test across 1 suite
 1 minute, 3 seconds
 00fd156
 🔄 Run: #20915 (attempt 1)

🗂️ Previous results

✅ oss · depot-ubuntu-latest-arm-16 — run #20915 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

 2 passed

Details

 2 tests across 2 suites
 53.6 seconds
 00fd156
 🔄 Run: #20915 (attempt 1)

✅ private-cloud · depot-ubuntu-latest-16 — run #20915 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

 3 passed

Details

 3 tests across 3 suites
 33.3 seconds
 00fd156
 🔄 Run: #20915 (attempt 1)

✅ oss · depot-ubuntu-latest-16 — run #20915 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

 1 passed

Details

 1 test across 1 suite
 34.6 seconds
 00fd156
 🔄 Run: #20915 (attempt 1)

[github-actions]

Visual Regression

19 screenshots compared. See report for details.
View full report

[talissoncosta]

Postponing until the new colour system lands.

Nothing needs this yet: StatusBadge works on main with its own stylesheet, the tags stack (#8613) is independent of it, and danger and solid have no consumers. Shipping it now means adding seven variants to a component the chip frame says should have three styles, then renaming them shortly after. The badge shape change would land twice.

Branch feat/chip-variants-statusbadge stays. Its three pieces fold into the conformance work: solid is the frame's Primary, accent is near Secondary, neutral near Outline, and the five status colours get decided as a deliberate extension rather than arriving as a side effect of a tags PR.