DS 2.0: Chip component - #87
Open
librowski wants to merge 8 commits into
Open
Conversation
librowski
force-pushed
the
ds2-chips
branch
2 times, most recently
from
August 20, 2026 22:33
b1054f4 to
b5b44d1
Compare
Compact tag in the DS 2.0 solid and outline treatments, four sizes, optional prefix icon and close affordance. Sized and colored per the Chips and Tag component set in the DS 2.0 Figma file; the chip tokens and wb/radius/50 live in _provisional.css until the token export ships them. The outline background is two stacked fills by design: the brand surface under a translucent theme overlay.
The local .tag treatment is replaced by the UI Chip component; the class keeps only its layout margins and the tag background variable goes away with it.
Example, usage snippet, and generated props table. The component defines no ax-public-* variables (deprecated contract), so the CSS variables section renders the standard empty state.
The dark outline overlay aliased gray-900-75, whose exported value is the documented pre-2.0 bug (50% alpha instead of 75) - mixed from gray-900 directly, like the light theme already does. The close button gets the standard focus-visible ring. Variant and Size are renamed to ChipVariant/ChipSize and exported - the bare names shadowed two existing public types and rendered misleadingly in the generated props table. Chip now forwards its ref and native span attributes, and the close affordance takes an overridable closeLabel. The outline stroke is an inset ring instead of a border so outline and solid chips render the same width. Spacing metrics bind the space/size primitives from the provisional set.
The label doc records why it is a string (it feeds the close affordance's accessible name) and size gets a description - its TSDoc was only a default tag, which the generated props table does not surface, leaving an empty cell.
The Figma component strokes with strokeAlign OUTSIDE; the inset ring came from an unverified review claim of an inside stroke and ate one pixel of the chip's padding.
Version labels in prose age badly; prop docs carry only defaults and the close-affordance contract, and the two CSS notes state their invariant without narrating the source.
The token names carry the layering (inset under overlay) and the outer box-shadow ring is a standard idiom.
librowski
marked this pull request as ready for review
August 21, 2026 08:03
librowski
requested review from
lukasz-jazwa,
piotrblaszczyk and
szymon-t-sc
as code owners
August 21, 2026 08:03
| return ( | ||
| <span ref={ref} {...rest} className={clsx(styles['chip'], styles[variant], styles[size], className)}> | ||
| {prefixIcon && <span className={styles['icon']}>{prefixIcon}</span>} | ||
| <span className="wb-text-label-s">{label}</span> |
Contributor
There was a problem hiding this comment.
The typography page added in #84 recommends label-l-emphasized for "Buttons and chips", but Chip renders its label with wb-text-label-s (10px, weight 400) across all sizes, including xl. One of the two seems off. If the "Chips and Tag" component set in Figma really specifies Label/S Regular for every chip size, could we adjust the recommendation table in typography.mdx (or scope it to buttons only) so the docs don't contradict the component? And if not, should the chip label scale with size?
piotrblaszczyk
approved these changes
Aug 21, 2026
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.
Adds the
Chipcomponent and swaps the first consumer onto it.Chipin@workflowbuilder/ui: solid and outline treatments, sizess–xl, optional prefix icon and close affordance, per the DS 2.0 "Chips and Tag" component set.--wb-radius-50land in_provisional.cssuntil the token export ships them; the light-theme outline overlay is acolor-mix()becausegray-100-85does not exist in the exported palette.Chip; the local.tagtreatment and its background variable go away.Chipdefines noax-public-*variables (deprecated contract), so the CSS variables section renders the standard empty state.Not swapped here:
branch-card.module.cssuses accent (acc2) chip colors this token factory does not cover; it migrates with the token pipeline switch.Component-layer checklist (template for the remaining DS 2.0 layers)
_provisional.css, aliased to--ax-*per themecomponentEntriesand the root barrelCOMPONENTSentry inui-components.mjsuiminor (new component),sdkpatch (visual swap)build:lib, docs build, stylelint, typecheck, tests green