feat: Add size to various components, deprecating compact by cb-ekuersch · Pull Request #809 · coinbase/cds

cb-ekuersch · 2026-07-24T20:15:36Z

What changed? Why?

Summary

Rolls out the cross-platform t-shirt size prop across CDS components, deprecating the legacy compact boolean in favor of the new sizing API. Each component's per-size styles are derived from its Figma component set and applied consistently across web and mobile. Backward compatibility is preserved throughout: compact keeps working exactly as before (size wins when both are set), no fixed heights are introduced (except Slide Button, which is inherently fixed-height by design sign-off), and no public exports are renamed or dropped. compact is deprecated with @deprecationExpectedRemoval v10.

Component(s)	Issue
Button	CDS-2168
Icon Button	CDS-2445
Search Input	CDS-2450
Select (alpha)	CDS-2449
Slide Button	CDS-2448
Date Picker (+ DateInput)	CDS-2451
Input Chip · Select Chip · TabbedChips	CDS-2223 · CDS-2224 · CDS-2173

Linear Issues

Next steps

Intentionally deferred from this PR to keep scope focused on the size API + component/stories work:

Docs site (apps/docs): Update component examples to document the new size prop and remove/replace deprecated compact examples for each rolled-out component.
Figma Code Connect (__figma__ templates): Refresh Code Connect mappings to include the new size variant property for each rolled-out component.

UI changes

iOS Old	iOS New
old screenshot	new screenshot

Android Old	Android New
old screenshot	new screenshot

Web Old	Web New
old screenshot	new screenshot

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Required if this PR changes files under packages/illustrations/** or packages/icons/**

verified visreg changes with Terran (include link to visreg run/approval)
all illustration/icons names have been reviewed by Dom and/or Terran

Change management

type=routine
risk=low
impact=sev5

automerge=false

cb-heimdall · 2026-07-24T20:15:40Z

🟡 Heimdall Review Status

Requirement Status More Info

Reviews

🟡 0/1

Denominator calculation

Show calculation

1 if user is bot 0

1 if user is external 0

2 if repo is sensitive 0

From .codeflow.yml 1

Additional review requirements

Show calculation

Max	0

0

From CODEOWNERS 1

Global minimum 0

Max 1

1

1 if commit is unverified 0

Sum 1

CODEOWNERS 🟡 See below

🟡 `CODEOWNERS`

Code Owner Status Calculation

ui-systems-eng-team

🟡 0/1

Denominator calculation

Additional CODEOWNERS Requirement

Show calculation

Sum	0

0

From CODEOWNERS 1

Sum 1

github-actions · 2026-07-27T23:35:21Z

https://percy.io/d424b72f/web/Coinbase-Design-System-CDS-/builds/52276408

Add cross-platform `size` (xs/s/m/l, default l) via a local size-config map; deprecate `compact` in favor of `size` (size wins; compact-only maps to s). Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

Add xs/s/m/l size prop (web + mobile), deprecate compact, preserving today's geometry. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

Add size prop (s/m/l, default l) deprecating compact via a per-size config map. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

Add a size prop (xs | s, default s) to the shared Chip base and deprecate compact, mapping it to size="xs" across web, mobile, and the common media-chip spacing helper. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

Forward size (xs|s, default s) through to the base Chip and deprecate compact in favor of size="xs". Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

Thread a size prop (xs | s, default s) through to tab chips and deprecate compact. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

Add size ('s'|'m'|'l', default 'l') driving vertical density on web and mobile TextInput; deprecate compact in favor of size="s". Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

Thread size through to TextInput, deprecate compact (maps to size s), and drop the fixed-height lever. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

Add a minimal size (s|m|l) prop to alpha Select on web and mobile, deprecating compact, driving only the field vertical padding on the existing inputStackStyles. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

Thread a size ('s'|'m'|'l', default 'l') prop through DateInput and DatePicker to TextInput and deprecate compact in favor of size="s". Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

Add SizeComposition stories (web + mobile) demonstrating the t-shirt `size` prop across inputs, chips, and buttons together (brought back from the original rollout branch). Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

Refinements on top of the t-shirt size rollout for the input family: - Select: multi-select value chips now use the compact xs size at every size, with per-size vertical padding tuned so single- and multi-select heights match (42/50/58). - Inside labels are decoupled from size: horizontal in the start slot at s/m, and vertically stacked only at l (single and multi), all landing on the same field height an outside label produces. - Mobile: floor the native input to `padding + line-height token` via minHeight so fields reach their intended height instead of the font's shorter natural metric, and vertically center single-line text in the extra space (multiline excluded). Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

- Align mobile SelectChip control-prop spread order with web (chip-level props win; drop the unnecessary compact strip) - Rename Select label-placement flags to mirror TextInput semantics (insideVerticalLabel / insideHorizontalLabel / wantsInsideLabel / isCompactLabel) and multiSelectValueChipSize, web + mobile - Limit per-size padding-value unit tests to TextInput and Select (alpha); drop them from SearchInput, Chip, MediaChip, and SelectChip (both packages) - Group simple per-size stories into a single "Sizes" example for TextInput, SearchInput, Button, and SlideButton (web + mobile) Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

…mpact Combobox composes Select, so it already inherits `size` and the deprecated `compact` via SelectBaseProps and threads them through to the underlying select control on both platforms. Lock this in and demonstrate it: - Add a grouped "Sizes" story (s/m/l + deprecated compact) to the web and mobile Combobox stories - Add a wiring test verifying `size` and `compact` reach the select control (web + mobile) — no padding-value assertions Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

… audited usage of deprecated compact internally

adrienzheng-cb · 2026-07-29T14:14:50Z


-export type SlideButtonHandleCheckedProps = Pick<SlideButtonBaseProps, 'variant' | 'compact'> & {
+export type SlideButtonHandleCheckedProps = Pick<SlideButtonBaseProps, 'variant'> & {
+  size: SlideButtonSize;


is it safe to make this prop required?

probably not since someone may be using a custom slide handle component - if this is the case, we should make it optional for now and just render the default size if undefeind

adrienzheng-cb · 2026-07-29T15:24:31Z

+  xs: { padding: 1, iconSize: 's', borderRadius: 1000, feedback: 'light' },
+  s: { padding: 1.5, iconSize: 's', borderRadius: 1000, feedback: 'light' },
+  m: { padding: 1.5, iconSize: 'm', borderRadius: 1000, feedback: 'normal' },
+  l: { padding: 2, iconSize: 'm', borderRadius: 1000, feedback: 'normal' },


nit: should we keep borderRadius out since it is 1000 all the way

yes, remove borderRadius and apply prop directly in render for all conditions

cb-ekuersch · 2026-07-29T14:49:45Z

 import { isSelectOptionGroup } from './Select';
+import { defaultSelectSize } from './types';
+
+const selectSizeVerticalSpace: Record<SelectSize, 1 | 1.5 | 2> = { s: 1, m: 1.5, l: 2 };


use theme var space type

cb-ekuersch · 2026-07-29T14:56:23Z

            font={labelFont}
+            // A horizontal inline label shares its row with the value, so keep it to a single line —
+            // otherwise a long label wraps and stretches the field past its size.
+            numberOfLines={insideHorizontalLabel ? 1 : undefined}


do we want to limit to one line for vetically stacked inside label - it looks like tihs node is used for that case as well

for consistency it may be nice to just force a single line label for any inside label regardless if its stacked vertically or horizontally

cb-ekuersch · 2026-07-29T14:57:18Z

-        paddingTop: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
-        paddingBottom: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
+    const inputStackStyles: StyleProp<ViewStyle> = useMemo(() => {
+      let verticalSpace: 0.25 | 0.5 | 0.75 | 1 | 1.5 | 2;


use theme var space stype

cb-ekuersch · 2026-07-29T20:12:30Z


-export type SlideButtonHandleCheckedProps = Pick<SlideButtonBaseProps, 'variant' | 'compact'> & {
+export type SlideButtonHandleCheckedProps = Pick<SlideButtonBaseProps, 'variant'> & {
+  size: SlideButtonSize;


probably not since someone may be using a custom slide handle component - if this is the case, we should make it optional for now and just render the default size if undefeind

cb-ekuersch · 2026-07-29T20:13:50Z

+  xs: { padding: 1, iconSize: 's', borderRadius: 1000, feedback: 'light' },
+  s: { padding: 1.5, iconSize: 's', borderRadius: 1000, feedback: 'light' },
+  m: { padding: 1.5, iconSize: 'm', borderRadius: 1000, feedback: 'normal' },
+  l: { padding: 2, iconSize: 'm', borderRadius: 1000, feedback: 'normal' },


yes, remove borderRadius and apply prop directly in render for all conditions

…se chip xs/compact height and resolve some overlapping type conflicts

github-actions Bot added packages:common packages:web packages:mobile labels Jul 24, 2026

cb-ekuersch mentioned this pull request Jul 27, 2026

feat: adopt t-shirt size prop across components #796

Closed

github-actions Bot added the apps:expo-app label Jul 27, 2026

cb-ekuersch changed the title ~~Tshirts2~~ feat: Add size to various components, deprecating compact Jul 27, 2026

cb-ekuersch marked this pull request as ready for review July 27, 2026 23:19

cb-ekuersch and others added 17 commits July 28, 2026 18:42

feat(CDS-2168): adopt t-shirt size prop for Button

a18dc24

Add cross-platform `size` (xs/s/m/l, default l) via a local size-config map; deprecate `compact` in favor of `size` (size wins; compact-only maps to s). Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

feat(CDS-2445): adopt t-shirt size prop for Icon Button

15c4a2c

Add xs/s/m/l size prop (web + mobile), deprecate compact, preserving today's geometry. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

feat(CDS-2448): adopt t-shirt size prop for Slide Button

4109b23

Add size prop (s/m/l, default l) deprecating compact via a per-size config map. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

feat(CDS-2224): adopt t-shirt size prop for Select Chip (alpha)

8cf73a7

Forward size (xs|s, default s) through to the base Chip and deprecate compact in favor of size="xs". Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

feat(CDS-2173): adopt t-shirt size prop for TabbedChips (alpha)

31eb5c3

Thread a size prop (xs | s, default s) through to tab chips and deprecate compact. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

feat: add t-shirt size prop to TextInput foundation

d0e6268

Add size ('s'|'m'|'l', default 'l') driving vertical density on web and mobile TextInput; deprecate compact in favor of size="s". Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

feat(CDS-2450): adopt t-shirt size prop for Search Input

298ba1b

Thread size through to TextInput, deprecate compact (maps to size s), and drop the fixed-height lever. Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

feat(CDS-2451): adopt t-shirt size prop for Date Picker

1fc6361

Thread a size ('s'|'m'|'l', default 'l') prop through DateInput and DatePicker to TextInput and deprecate compact in favor of size="s". Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

add/update siz composition stories

2d0f995

adjust paddles size for TabbedChips sizes

570f833

Improve gap spacing between inside label and text input element

c597753

cb-ekuersch force-pushed the tshirts2 branch from cadddd3 to 3dbdb4e Compare July 28, 2026 23:52

github-actions Bot added the packages:migrator label Jul 28, 2026

cb-ekuersch added 2 commits July 29, 2026 09:04

improve organization/convention of web stories

cce3fe3

WIP - migrator for compact deprecation

42fd59d

cb-ekuersch force-pushed the tshirts2 branch from 3dbdb4e to 3a58c90 Compare July 29, 2026 14:05

adrienzheng-cb reviewed Jul 29, 2026

View reviewed changes

Comment thread packages/common/src/chips/getMediaChipSpacingProps.ts

adrienzheng-cb reviewed Jul 29, 2026

View reviewed changes

Comment thread packages/common/src/chips/getMediaChipSpacingProps.ts

WIP - fix some issues the agent found while building the migrator and…

bb322de

… audited usage of deprecated compact internally

cb-ekuersch force-pushed the tshirts2 branch from 3a58c90 to bb322de Compare July 29, 2026 14:11

adrienzheng-cb reviewed Jul 29, 2026

View reviewed changes

Comment thread packages/web/src/alpha/select/DefaultSelectControl.tsx

cb-ekuersch commented Jul 29, 2026

View reviewed changes

fix: remove references to deprecated compact props internally, fix ba…

5e72fa6

…se chip xs/compact height and resolve some overlapping type conflicts

cb-ekuersch mentioned this pull request Jul 29, 2026

feat: add migrator transform for upcoming depcreation of compact #816

Open

7 tasks

Uh oh!

Conversation

cb-ekuersch commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed? Why?

Summary

Linear Issues

Next steps

UI changes

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Change management

Uh oh!

cb-heimdall commented Jul 24, 2026

🟡 Heimdall Review Status

🟡 CODEOWNERS

Uh oh!

github-actions Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

cb-ekuersch commented Jul 24, 2026 •

edited

Loading

🟡 `CODEOWNERS`

github-actions Bot commented Jul 27, 2026 •

edited

Loading