feat(webkit)!: give chip three kinds and hand presence to the consumer - #883
Open
gabriel-lisboa-azion wants to merge 8 commits into
Open
feat(webkit)!: give chip three kinds and hand presence to the consumer#883gabriel-lisboa-azion wants to merge 8 commits into
gabriel-lisboa-azion wants to merge 8 commits into
Conversation
Adds kind: filled | outlined | dashed, fixes the two sizes at 24/32px, and
names the remove control after what it removes ("Remove $label") with a
tooltip carrying the same string and a 24x24 target.
The remove event now fires immediately and the chip stays mounted, so a
chip can survive its own removal (a filter chip that empties but remains).
The exit motion moves to table-applied-filters, which owns the
TransitionGroup that actually destroys chips.
Enter/Space now dispatch a real DOM click so a Chip works as a
Popover.Trigger child from the keyboard.
BREAKING CHANGE: remove no longer waits for a fade before emitting, and the
chip no longer unmounts itself — the consumer owns presence. Both sizes
changed to fixed heights (24px small, 32px medium) and medium now uses
text-label-sm.
Naming the remove control after what it removes brought Tooltip in as a dependency, and chip had no size-limit row to catch that. It measures 4.27 KB gzipped; the budget is 5 KB.
The Motion table named tooltip's animate-popup-scale-in/out utilities, and the authoring ratchet reads that table per FILE — so it required classes in chip.vue that belong to the component chip composes. The row now names the owner and points at its spec instead of quoting its utilities, which is the truer statement anyway: those tokens and their reduced-motion fallback are tooltip's contract.
The chip's appearance changed on purpose — fixed 24/32px heights instead of padding-driven, a pill radius, and text-label-sm at medium — so all six modes diverged by 1.6-2.9%. Adds the snapshots for the new Types and Clickable stories.
`filled` specified `bg-(--bg-surface-raised )` — with a stray space inside the paren shorthand. The space terminates the Tailwind candidate, so the utility compiled to no CSS at all and every `filled` chip has been fully transparent in both themes, distinguishable from an `outlined` one only by its shadow. The token would not have carried the distinction anyway: `--bg-surface-raised` resolves to the same value as `--bg-surface` in the light theme, so the applied/available contrast it was meant to express existed in dark only. So all three kinds now share one fill (`--bg-surface`) and one border (`--border-default`), per Figma, and differ only in elevation — `filled` keeps `--shadow-sm`, which is the job it was already doing alone. The remove glyph drops to `--text-muted` at rest and rises to `--text-default` on hover: at rest it is punctuation after a label, on hover it is what is being aimed at. Measured in Chromium against the Figma frames, both themes: fill #0a0a0a, border #ffffff1a, 32px tall, 12px sides (4px trailing when removable), 24px remove control.
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
1 participant
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.
What
Chipgains akindaxis covering the three jobs it actually does in a filter surface, so a consumer never has to restyle the component to get one of them:kindfilled(default)outlineddashedThe breaking part: presence is the consumer's
removeused to fade the chip toopacity: 0and only then emit, so the chip decided its own disappearance. That could serve exactly one case — where removing a value also destroys the chip. A filter bar where a removed value stays on screen as anoutlinedoffer was impossible: the instance stayed invisible forever.removenow fires immediately and the chip stays mounted. Exit motion, where wanted, belongs to whatever owns the list — sotable-applied-filtersgains theTransitionGroupthat actually destroys chips. That is why it ships in this PR: split apart, one half double-animates removal and the other un-animates it.The inline
style="transition: …"the old fade needed is gone too — an inline transition beats everytransition-*class a consumer puts on the same element (see #881).Also
aria-label="Remove Production", with aTooltipcarrying the same string, and a 24×24 target atmedium(WCAG 2.5.8). A row of chips whose every button says "Remove" is unusable by voice or screen reader.Enter/Spacedispatch a real DOM click, so aChipworks as aPopover.Trigger/Dropdown.Triggerchild from the keyboard..size-limit.jsonrow — chip now carriesTooltip, and nothing was measuring that. 4.27 KB gzipped against a 5 KB budget.BREAKING CHANGE
removeno longer waits for a fade before emitting, and the chip no longer unmounts itself. A consumer relying on self-dismissal must now drop the chip from its own collection.smallis a fixed 24px (was 20px) andmediuma fixed 32px (was ~30px from padding);mediumusestext-label-sm.Verification
33 chip tests pass, including the two that pin the new contract — "stays mounted after remove" and "declares no inline transition on the root". Catalog regenerated on this branch (not carried), so
catalog:checkis clean.