Repository navigation
refactor(tags): build tag on chip and look its colour up - #8689
Open
talissoncosta wants to merge 4 commits into
Open
talissoncosta wants to merge 4 commits into
talissoncosta wants to merge 4 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configuration
You can disable this status message by setting the Use the checkbox below for a quick retry:
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. Comment |
github-actions
Bot
added
front-end
Contributor
Docker builds report
|
Contributor
✅ private-cloud · depot-ubuntu-latest-16 — run #21394 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
🗂️ Previous results✅ private-cloud · depot-ubuntu-latest-arm-16 — run #21394 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-16 — run #21394 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
✅ oss · depot-ubuntu-latest-arm-16 — run #21394 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
✅ private-cloud · depot-ubuntu-latest-16 — run #21392 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #21392 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-16 — run #21392 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
✅ oss · depot-ubuntu-latest-arm-16 — run #21392 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #21390 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #21388 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
✅ private-cloud · depot-ubuntu-latest-16 — run #21390 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
✅ private-cloud · depot-ubuntu-latest-16 — run #21388 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
|
Contributor
Visual Regression20 screenshots compared. See report for details. |
This was referenced Oct 6, 2026
Contributor
Author
|
@themis-blindfold review |
3 of 4 tasks
talissoncosta
force-pushed
the
04-chip-colour-and-selected
branch
from
October 6, 2026 14:39
5b1c7ce to
3fd55c0
Compare
talissoncosta
force-pushed
the
05-tag-on-chip
branch
from
October 6, 2026 14:39
c8ad1aa to
be7aa85
Compare
talissoncosta
force-pushed
the
05-tag-on-chip
branch
from
October 6, 2026 14:46
be7aa85 to
35f6535
Compare
talissoncosta
force-pushed
the
05-tag-on-chip
branch
from
October 6, 2026 14:48
35f6535 to
a043d72
Compare
talissoncosta
force-pushed
the
05-tag-on-chip
branch
from
October 7, 2026 01:16
9753b2b to
4105212
Compare
talissoncosta
changed the base branch from
04-chip-colour-and-selected
to
03-tag-icons
October 7, 2026 01:16
talissoncosta
force-pushed
the
05-tag-on-chip
branch
from
October 7, 2026 01:23
4105212 to
f3b4f10
Compare
talissoncosta
force-pushed
the
05-tag-on-chip
branch
from
October 7, 2026 01:26
f3b4f10 to
59ced3d
Compare
talissoncosta
force-pushed
the
05-tag-on-chip
branch
from
October 7, 2026 01:44
59ced3d to
f7d583b
Compare
3 of 4 tasks
Three things the tag rework needs, with nothing consuming them yet. tagSwatch maps a stored hex onto a palette swatch, carrying a table of the colours tags already hold so none of them migrates. systemTag says whether a tag was applied by us rather than picked. tagChipHtml renders the same chip as a string, for the tooltip that cannot take JSX. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
A 'none' variant, where the colour comes in through className rather than from the variant table: a tag's colour is a user's decorative choice, not a semantic role. The border reads from a custom property so that colour can carry it too. This stylesheet is injected at runtime, after the token utilities, so a directly set border would beat whatever a utility puts on the element. aria-label, for a chip whose content cannot name it, such as a bare colour swatch. ColorSwatch takes an optional colour for the same reason: a partial tag may not have one. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Tag took the hex stored on the record and computed a fill and a text colour from it, so contrast was a function of whichever hue a user picked. It now looks the hex up in the palette and applies the utility that carries fill and ink together. TagContent loses the same maths, and ToggleChip, which was doing the computing, goes with its last consumer. Tag moves to its own folder, and its consumers move to the new signature here so none is left half-migrated. Utils gains tagVisible beside tagDisabled: Tag no longer reads feature flags to decide what it may be, and the unhealthy rule is written once rather than three times. TagType gains GITHUB and GITLAB, mirroring the API. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The banner colour is not a tag, but the picker rendered one, so its thirteen colours went through the swatch lookup and collapsed onto nine: four pairs became indistinguishable, and picking either of a pair looked the same. It draws a ColorSwatch inside a BareButton instead, so each colour renders as itself. The tick takes whichever of the ink or the pale tint reads on that colour, since neither clears 3:1 against all thirteen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
docs/if required so people know about the feature.Changes
Contributes to #8465
3/3, splitting #8613. Stacked on #8687.
A tag's colour was computed from the hex on the record: an 8% tint for the fill, the same hue darkened for the text. Contrast was therefore a function of whichever colour a user picked, and most of the palette failed AA.
A tag now looks its colour up. The stored hex maps onto a Content swatch, and the matching
tag-<hue>utility carries the fill and the ink together so the two cannot drift. Every colour a tag can already hold maps onto a swatch, so nothing migrates.Also here:
Chipgains acolourprop. A chip takes its colour fromvariantor fromcolour, never both, and a union enforces it:variantis a pairing the design system chose,colouris a hue the data picked. It also gainsaria-labelandaria-pressed, so a chip with no text is named and a filter chip announces whether it is on.Utils.tagVisiblejoinstagDisabled, so the unhealthy rule is written once rather than three times. That closes a gap whereTagFiltershowed unhealthy tags to organisations without Feature Health.Tagmoves to its own folder with the helpers underutils.ToggleChipwas doing the computing, so it goes with its last consumer.TagTypegainsGITHUBandGITLAB, mirroringapi/projects/tags/models.py.The tag picker and the panel are deliberately not in this stack: their container is one of the eleven
InlineModalsites due to be rebuilt on the floating layer, so reworking them now means doing it twice.Four commits, each compiling on its own: the helpers, the
Chipadditions, themigration, then the environment banner picker, which rendered a
Tagto show acolour and so collapsed its thirteen options onto nine swatches.
How did you test this code?
Typecheck 884 against main's 890, none added.
npm run test:unitpasses:tagSwatch.test.tspins every colour a tag can hold to its swatch,tagSwatches.test.tsasserts every tint clears AA.npm run bundlecompiles — worth running, since the diff deletesToggleChipand movesTag.tsx, andtscdoes not resolve.scssimports.In the app, in light and dark: