From 45bdecd60b88b7f44973cafaf7b9be649632b171 Mon Sep 17 00:00:00 2001 From: Gab Date: Tue, 11 Aug 2026 15:02:33 -0300 Subject: [PATCH 1/9] feat(webkit)!: give chip three kinds and hand presence to the consumer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .specs/chip.md | 67 ++++--- .../components/inputs/chip/Chip.stories.js | 51 +++++- .../table-applied-filters.vue | 16 +- .../src/components/inputs/chip/chip.test.ts | 164 ++++++++++++++---- .../src/components/inputs/chip/chip.vue | 124 ++++++------- 5 files changed, 302 insertions(+), 120 deletions(-) diff --git a/.specs/chip.md b/.specs/chip.md index b1b522cc2..ecfc12f8b 100644 --- a/.specs/chip.md +++ b/.specs/chip.md @@ -7,20 +7,30 @@ spec_version: 1 figma: url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=476-948 node_id: 476:948 -checksum: fae500ac2489e389141cd94e93fdaa715f2b5ed73221b1a70231a407b97fb57f +checksum: aa9ca91fe16be0c61abc721d182cdf9b822887ebac041be5d0e11236e4b89ac1 created: 2026-06-23 -last_updated: 2026-07-02 +last_updated: 2026-08-11 --- # Chip — Component Spec ## Purpose -A Chip is a compact, self-contained token that labels a discrete value the user has applied — most often a removable filter on a data view. Unlike `tag` (a read-only status/category badge with severity color coding), a Chip carries no severity and exposes an optional trailing remove control: when `removable` is set, it renders a real `