Skip to content

feat: restyle KvChip to the 2026 spec - #900

Merged
eddieferrer merged 2 commits into
mainfrom
CIT-4883_chip_new_design
Sep 9, 2026
Merged

eddieferrer merged 2 commits into
mainfrom
CIT-4883_chip_new_design

Conversation

@eddieferrer

@eddieferrer eddieferrer commented Sep 9, 2026 •

Copy link
Copy Markdown
Collaborator

Ticket: https://kiva.atlassian.net/browse/CIT-4883

Figma

Summary

  • KvChip is now outlined by default and fills on hover, rather than filled by default.
    Verified against the Figma spec by measuring the rendered element rather than reading
    class names: #ffffff surface, #edf4f1 hover, #223829 text and icon, 1px #c4c4c4
    border, 8px radius, 16x8 padding, 8px gap, 16/22 type at weight 300. Every value
    matches.
  • Colors are fixed rather than themable, per design: a chip looks the same on every
    surface. Every value in the spec has an exact static token, so no hardcoded hex was
    needed — tw-bg-white, hover:tw-bg-eco-green-1, tw-text-eco-green-4,
    tw-border-gray-300. The Themes story renders the chip inside all five theme
    providers to show it does not vary.
  • The wrapper div is gone, so the root is the button itself. It also gains
    type="button", which it was missing.
  • First tests this component has had: the fixed styling, a guard that no themable color
    class creeps back in, the emit, the button-as-root structure, jest-axe, and a
    regression test for an undeclared @click still falling through — FilterChips in
    cms-page-server relies on that.

The second commit reverses the first on the themable question. The first version used
themable tokens because every spec value happens to land on one; design then confirmed
the chip should be fixed. Worth knowing the themable version also had a real bug that the
Themes story caught: border-tertiary resolves to #FFFFFF in the marigold and stone
themes, so the chip would have had no visible outline on those surfaces. Fixed colors
retire that problem entirely.

Not an API break

click-chip is unchanged and a consumer's plain @click still fires, so this is a minor.
The visual change is large though, and Chromatic diffs on every chip are the point rather
than noise.

Consumer follow-ups

Three live call sites exist, all of which get simpler:

  • CIT-4889 (cms-page-server) — FilterChips has :deep(button) forcing
    tw-bg-gray-200 and border-radius: 8px, plus :deep(button > div) shrinking the label
    to 14px. All three are now dead: 8px is the spec, the grey approximated a neutral chip,
    and the slot's wrapper div no longer exists. EmailDomainInput wraps its label in
    <h4 class="tw-text-upper">. Consumers should not be overriding the chip's text size, so
    those come out and both call sites take the spec's 16px.
  • CIT-4888 (ui) — not a version bump. ui never used this component. It has a local
    KvChipClassic used once in LoanSearchFilters, and a local KvChip that nothing
    imports at all. That ticket is a migration plus deleting dead code, and note
    KvChipClassic emits click where the library emits click-chip.

Outlined by default, filling on hover, rather than filled by default. Surface
and text are themable, since every value in the spec lands on a token, but the
border is a static gray-300: border-tertiary resolves to white in the marigold
and stone themes, which would leave the chip with no visible outline.

The wrapper div is gone so the root is the button, which also gains a type
attribute and the first tests this component has had.
@eddieferrer
eddieferrer marked this pull request as ready for review September 9, 2026 19:12
Design confirmed a chip should look the same on every surface. Every value in
the spec has an exact static token, so the surface, text and hover fill move
to white, eco-green-4 and eco-green-1.

This also retires the border-tertiary problem: that token resolves to white in
the marigold and stone themes, so a themable border had no consistent value.
@eddieferrer

Copy link
Copy Markdown
Collaborator Author

Design confirmed the chip should not be themeable here: https://www.figma.com/design/TPmBUB4olYPMF6glEhBGDG/Ecosystem-2026--WIP-?node-id=20961-22768#1919728053

@eddieferrer
eddieferrer merged commit d306b83 into main Sep 9, 2026
3 of 5 checks passed
@eddieferrer
eddieferrer deleted the CIT-4883_chip_new_design branch September 9, 2026 20:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants