feat(icons): add stale, pr-dequeued and lock-outline by talissoncosta · Pull Request #8687 · Flagsmith/flagsmith

talissoncosta · 2026-10-06T14:20:59Z

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

2/4, splitting #8613. Stacked on #8686.

Adds stale, pr-dequeued and lock-outline, and gives pr-draft the colour it was missing. These are the icons the system tags and the permanent padlock need in #8689.

Nothing consumes them yet.

How did you test this code?

Typecheck at main's baseline, 916 errors both sides.

Visual check:

npm run storybook
Open Components → Icons
stale, pr-dequeued and lock-outline render, and pr-draft is no longer colourless, in light and dark

vercel · 2026-10-06T14:22:58Z

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

Project	Deployment	Actions	Updated
flagsmith-frontend-preview	Ready	Preview	Oct 7, 2026 1:38pm UTC
flagsmith-frontend-staging	Ready	Preview	Oct 7, 2026 1:38pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
docs	Ignored	Preview	Oct 7, 2026 1:38pm UTC

coderabbitai · 2026-10-06T14:23:01Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Advanced
Run ID: 221e9525-c7d2-495f-80be-dbe69149abef

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

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

github-actions · 2026-10-06T14:23:15Z

Docker builds report

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

github-actions · 2026-10-06T14:26:56Z

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

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

4 passed

Details

4 tests across 4 suites
59.2 seconds
9557ffe
🔄 Run: #21308 (attempt 1)

🗂️ Previous results

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

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

4 passed

Details

4 tests across 4 suites
1 minute
9557ffe
🔄 Run: #21308 (attempt 1)

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

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

1 passed

Details

1 test across 1 suite
31.5 seconds
9557ffe
🔄 Run: #21308 (attempt 1)

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

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

1 passed

Details

1 test across 1 suite
11.7 seconds
9557ffe
🔄 Run: #21308 (attempt 1)

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

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

2 passed

Details

2 tests across 2 suites
1 minute, 9 seconds
1335119
🔄 Run: #21264 (attempt 1)

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

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

3 passed

Details

3 tests across 3 suites
32.7 seconds
1335119
🔄 Run: #21264 (attempt 1)

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

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

1 passed

Details

1 test across 1 suite
36 seconds
1335119
🔄 Run: #21264 (attempt 1)

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

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

1 passed

Details

1 test across 1 suite
31.2 seconds
1335119
🔄 Run: #21264 (attempt 1)

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

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

2 passed

Details

2 tests across 2 suites
1 minute, 5 seconds
1439254
🔄 Run: #21253 (attempt 1)

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

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

3 passed

Details

3 tests across 3 suites
57.6 seconds
1439254
🔄 Run: #21253 (attempt 1)

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

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

1 passed

Details

1 test across 1 suite
38.2 seconds
1439254
🔄 Run: #21253 (attempt 1)

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

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

19 passed
1 skipped

Details

20 tests across 13 suites
1 minute, 6 seconds
1439254
🔄 Run: #21253 (attempt 1)

Skipped tests

firefox › tests/onboarding-tests.pw.ts › Onboarding › New user connects via the single-page onboarding flow @oss

github-actions · 2026-10-06T14:28:26Z

Visual Regression

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

talissoncosta · 2026-10-06T14:32:19Z

@themis-blindfold review

themis-blindfold · 2026-10-06T14:44:17Z

+          height={height || width || '16'}
+          viewBox='0 0 16 16'
+          fill='none'
+          stroke={fill || colorIconWarning}


🟠 Major · ⚡ Quick win

The stale status icon does not meet the light-theme contrast target.

Observed: without fill, this resolves to #ff9f43; against the default light surface (#ffffff) it is 2.04:1. The icon is intended to carry the stale state on a plain system tag. Predicted: that use would miss the 3:1 non-text contrast requirement. Default it to a contrast-safe warning token (the light colorTextWarning value is #9f5208) while preserving fill overrides.

Confirmed, and it is worse than this. The stroke is colorIconWarning, not a literal, and that token is #ff9f43 in both themes:

on white on dark surface

today #ff9f43 2.04:1 FAIL 8.82:1 PASS

in #8594 #ffbc05 1.69:1 FAIL 10.66:1 PASS

So #8594 moves it further from 3:1, and there are four consumers, three of them predating this PR: this icon, TabMenu/TabButton, CohortCsvSync and the warning toast.

Not fixing it here. Swapping one icon to colorTextWarning would paper over a token that fails everywhere it is used, and a text token on an icon is the wrong semantic even though the numbers work. The fix is to make --color-icon-warning theme-aware the way --color-text-warning already is. That belongs in #8594, which owns the colour system, and I will raise it there.

Confirmed. stale uses the shared icon token at frontend/web/components/icons/Icon.tsx:1337, and that token remains var(--orange-500) at frontend/web/styles/_tokens.scss:159. Keep this open until #8594 makes --color-icon-warning theme-aware and this branch includes that change; colorTextWarning is not an appropriate local substitute.

themis-blindfold · 2026-10-06T14:44:18Z

⚖️ Themis review: 🟠 Fix before merge

The new stale icon would miss the 3:1 non-text contrast target on the light surface when used with its default colour. The visual catalogue also masks the new default colours, leaving that behaviour without regression coverage despite the passing CI suite.

Area	Score
🎯 Correctness	3/5
🧪 Test coverage	2/5
📐 Code quality	4/5
🚀 Product impact	3/5

🟠 Majors

frontend/web/components/icons/Icon.tsx:1337 — stale icon's default warning colour misses non-text contrast on light surfaces.
frontend/documentation/components/Icons.stories.tsx — Observed: the only catalogue fixture always supplies fill='currentColor', overriding the new pr-draft and stale defaults; it therefore cannot catch a regression in the light/dark default colours. Add a fixture that renders the default-colour variants without a fill override.

📝 Walkthrough

Icon - adds stale, dequeued-PR, and outline-lock SVG variants, and gives draft PRs a theme-aware default colour.
Icons Storybook catalogue - registers the new variants for visual discovery and Chromatic snapshots.

🧪 How to verify

Render <Icon name='stale' /> on the default light surface and confirm its stroke has at least 3:1 contrast.
In Storybook, render stale and pr-draft without fill in both themes, then confirm explicit fill props still override their defaults.
Run cd frontend && npx eslint web/components/icons/Icon.tsx documentation/components/Icons.stories.tsx.
Run the unit and Chromatic suites after adding the default-colour visual coverage.
Automate: add a visual fixture that leaves fill unset for the self-coloured icon defaults.

Product take: This is a small UI building block, but it feeds the tag-accessibility work directly.
The stale default should meet the same accessibility bar before downstream tag work starts using it.

🧭 Assumptions & unverified claims

No unverified assumptions or claims.

A tiny icon, a not-so-tiny contrast ratio · reviewed at bdb5b3a

…raft The icons the system tags and the permanent padlock need. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

talissoncosta requested a review from a team as a code owner October 6, 2026 14:21

talissoncosta requested review from kyle-ssg and removed request for a team October 6, 2026 14:21

flagsmith-engineering Bot assigned kyle-ssg Oct 6, 2026

talissoncosta mentioned this pull request Oct 6, 2026

feat(chip): let a caller supply the colour, and ring it when selected #8688

Closed

3 of 4 tasks

github-actions Bot added front-end Issue related to the React Front End Dashboard feature New feature or request labels Oct 6, 2026

talissoncosta mentioned this pull request Oct 6, 2026

fix(tags): make tags and their picker accessible #8613

Closed

3 of 4 tasks

talissoncosta force-pushed the 02-tag-palette-tokens branch from 55fec31 to 801c8a8 Compare October 6, 2026 14:39

talissoncosta requested a review from a team as a code owner October 6, 2026 14:39

talissoncosta force-pushed the 03-tag-icons branch from bdb5b3a to 1439254 Compare October 6, 2026 14:39

vercel Bot deployed to Preview – flagsmith-frontend-preview October 6, 2026 14:40 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels Oct 6, 2026

vercel Bot deployed to Preview – flagsmith-frontend-staging October 6, 2026 14:40 View deployment

themis-blindfold Bot reviewed Oct 6, 2026

View reviewed changes

talissoncosta force-pushed the 02-tag-palette-tokens branch from 801c8a8 to 2f6fb21 Compare October 7, 2026 00:57

talissoncosta force-pushed the 03-tag-icons branch from 1439254 to 1335119 Compare October 7, 2026 00:57

vercel Bot deployed to Preview – flagsmith-frontend-preview October 7, 2026 00:57 View deployment

github-actions Bot removed the feature New feature or request label Oct 7, 2026

vercel Bot deployed to Preview – flagsmith-frontend-staging October 7, 2026 00:58 View deployment

github-actions Bot added the feature New feature or request label Oct 7, 2026

talissoncosta mentioned this pull request Oct 7, 2026

refactor(tags): build tag on chip and look its colour up #8689

Open

3 of 4 tasks

feat(icons): add stale, pr-dequeued and lock-outline, and colour pr-d…

9557ffe

…raft The icons the system tags and the permanent padlock need. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

talissoncosta force-pushed the 02-tag-palette-tokens branch from 2f6fb21 to a09bf6d Compare October 7, 2026 13:37

talissoncosta force-pushed the 03-tag-icons branch from 1335119 to 9557ffe Compare October 7, 2026 13:37

github-actions Bot added feature New feature or request and removed feature New feature or request labels Oct 7, 2026

vercel Bot deployed to Preview – flagsmith-frontend-staging October 7, 2026 13:37 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview October 7, 2026 13:38 View deployment

	on white	on dark surface
today `#ff9f43`	2.04:1 FAIL	8.82:1 PASS
in #8594 `#ffbc05`	1.69:1 FAIL	10.66:1 PASS

Conversation

talissoncosta commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

How did you test this code?

Uh oh!

vercel Bot commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions Bot commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docker builds report

Uh oh!

github-actions Bot commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

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

Details

Uh oh!

github-actions Bot commented Oct 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Visual Regression

Uh oh!

talissoncosta commented Oct 6, 2026

Uh oh!

themis-blindfold Bot Oct 6, 2026

Choose a reason for hiding this comment

Uh oh!

talissoncosta Oct 6, 2026

Choose a reason for hiding this comment

Uh oh!

themis-blindfold Bot Oct 6, 2026

Choose a reason for hiding this comment

Uh oh!

themis-blindfold Bot commented Oct 6, 2026

⚖️ Themis review: 🟠 Fix before merge

🟠 Majors

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

talissoncosta commented Oct 6, 2026 •

edited

Loading

vercel Bot commented Oct 6, 2026 •

edited

Loading

coderabbitai Bot commented Oct 6, 2026 •

edited

Loading

github-actions Bot commented Oct 6, 2026 •

edited

Loading

github-actions Bot commented Oct 6, 2026 •

edited

Loading

github-actions Bot commented Oct 6, 2026 •

edited

Loading