fix: TabbedChips working activeColor & activeBackground by cb-ekuersch · Pull Request #766 · coinbase/cds

cb-ekuersch · 2026-06-22T21:30:17Z

What changed? Why?

Introduces working activeBackground and activeColor props to the alpha TabbedChips component on both web and mobile, and fixes a pre-existing mobile bug where invertColorScheme was applied unconditionally.

What was happening before this PR

activeColor was appearing in the docsite props table for TabbedChips — but this was entirely accidental. TabbedChipsBaseProps extends Omit<TabsBaseProps, ...> and only omitted activeBackground from TabsBaseProps, so activeColor (which Tabs uses for tab label text color, typed as ResponsiveProp<ThemeVars.Color>) leaked through into TabbedChipsProps via type inheritance. It was never declared on TabbedChipProps, never destructured in DefaultTabComponent, and never wired to any chip behavior — it silently fell into ...tabProps and was spread as an unknown prop onto MediaChip where it had no effect.

What this PR does

Introduces activeBackground (chip background color, per-chip on TabbedChipProps)
A new, intentionally defined prop that applies a custom background color to a chip when it is the active tab. When set, it takes precedence over the default invertColorScheme behavior. Typed as MediaChipBaseProps['background'] since the value is forwarded directly to MediaChip's background prop.

Introduces activeColor (chip label text color, per-chip on TabbedChipProps)
A new, intentionally defined prop that applies a custom foreground color to a chip's label text when it is the active tab. Typed as MediaChipBaseProps['color'] since the value is forwarded directly to MediaChip's color prop.

Closes the type-inheritance bleed-through
Adds activeColor to the Omit list in TabbedChipsBaseProps (alongside activeBackground), preventing the accidental Tabs-level activeColor from leaking into the TabbedChips type surface.

Fixes mobile invertColorScheme unconditional application
Before this PR, invertColorScheme={isActive} was hardcoded unconditionally in mobile's DefaultTabComponent. This meant the chip always inverted its color scheme when active regardless of any other props. The fix makes it conditional: invertColorScheme={isActive && !activeBackground}.

Adds web feature parity
activeBackground and activeColor handling in DefaultTabComponent was added to web, matching the mobile implementation.

Root cause summary

Issue	Cause
`activeColor` in docsite with no effect	Leaked from `TabsBaseProps` via incomplete `Omit` list; never declared or destructured in `TabbedChipProps`
Mobile chip always inverted when active	`invertColorScheme={isActive}` was hardcoded unconditionally
Web had no custom active chip color support	`activeBackground`/`activeColor` were never implemented on web

Linear: https://linear.app/coinbase/issue/CDS-2211/tabbedchips-fix-activecolor-bug-on-mobile-and-add-feature-parity-on

UI changes

web	mobile

Testing

How has it been tested?

Testing instructions

Open the alpha/TabbedChips story in Storybook (web) or the AlphaTabbedChips screen in the Expo app (mobile)
Find the "With activeBackground" example — the active chip should show a bgPositive (green) background instead of the default inverted color scheme
Find the "With activeColor" example — the active chip label text should render in fgPositive while the chip still uses invertColorScheme for its background
Click/tap different tabs in each example to verify the active state applies correctly and inactive tabs revert to default styling
Verify the "Default" examples still apply invertColorScheme correctly when neither prop is set

Illustrations/Icons Checklist

N/A — no changes to illustrations or icons.

Change management

type=routine
risk=low
impact=sev5

automerge=false

cb-heimdall · 2026-06-22T21:30:20Z

✅ Heimdall Review Status

Requirement Status More Info

Reviews

✅ 1/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

✅ 1/1

Denominator calculation

Additional CODEOWNERS Requirement

Show calculation

Sum	0

0

From CODEOWNERS 1

Sum 1

linear · 2026-06-22T21:30:21Z

CDS-2211

github-actions · 2026-06-22T21:48:57Z

https://percy.io/d424b72f/web/cds-mobile-visreg-03c97426/builds/51149205

…g on mobile and add feature parity on web bug Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

…ure parity on web - Mobile: destructure activeColor from DefaultTabComponent props to prevent it from leaking into ...tabProps and spreading as an unknown prop onto MediaChip; apply background={isActive && activeColor ? activeColor : undefined} and invertColorScheme={isActive && !activeColor} instead of unconditional inversion - Mobile: add activeColor?: BoxProps['background'] to TabbedChipProps type - Web: add activeColor?: ThemeVars.Color to TabbedChipProps type (feature parity) - Web: apply same background/invertColorScheme logic in DefaultTabComponent - Add story examples demonstrating activeColor usage on both platforms - Add unit tests verifying activeColor tabs render correctly and maintain selection state Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

…d mobile Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

… for label color on web and mobile - Renamed activeColor → activeBackground (chip background) to align with Tabs semantics - Added activeColor as a separate per-chip prop for label text color, typed from MediaChipBaseProps['color'] - Omit activeColor from TabbedChipsBaseProps Omit list to prevent container-level bleed-through from TabsBaseProps - Updated stories, tests, and demos to cover both props with valid theme tokens Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

…r in TabbedChips Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

hcopp

Code looks good, will try to watch CI as well

github-actions Bot added packages:web packages:mobile labels Jun 22, 2026

cb-ekuersch changed the title ~~fix(alpha): TabbedChips activeColor bug on mobile + feature parity on web~~ fix: TabbedChips activeColor bug on mobile + feature parity on web Jun 22, 2026

cb-ekuersch commented Jun 23, 2026

View reviewed changes

Comment thread packages/mobile/src/alpha/tabbed-chips/TabbedChips.tsx Outdated

Comment thread packages/web/src/alpha/tabbed-chips/TabbedChips.tsx Outdated

github-actions Bot added packages:common packages:mcp-server labels Jun 23, 2026

cb-ekuersch and others added 5 commits June 23, 2026 12:22

story(cds2211): add story reproducing TabbedChips: Fix activeColor bu…

9480c0a

…g on mobile and add feature parity on web bug Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

fix(cds2211): type activeColor from MediaChipBaseProps on both web an…

18997c0

…d mobile Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

remove separate web story

8a6ff03

release

1b7fe42

cb-ekuersch force-pushed the erichkuerschner/cds-2211-tabbedchips-fix-activecolor branch from b70e1ce to 1b7fe42 Compare June 23, 2026 17:24

stacysun-cb previously approved these changes Jun 23, 2026

View reviewed changes

hcopp reviewed Jun 23, 2026

View reviewed changes

Comment thread packages/mobile/src/alpha/tabbed-chips/TabbedChips.tsx Outdated

hcopp reviewed Jun 23, 2026

View reviewed changes

Comment thread packages/mobile/src/alpha/tabbed-chips/TabbedChips.tsx Outdated

cb-ekuersch changed the title ~~fix: TabbedChips activeColor bug on mobile + feature parity on web~~ fix: TabbedChips working activeColor & activeBackground Jun 23, 2026

cb-ekuersch dismissed stacysun-cb’s stale review via 3094878 June 23, 2026 18:04

chore(cds2211): update changelogs for activeBackground and activeColo…

6db93d9

…r in TabbedChips Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

hcopp reviewed Jun 23, 2026

View reviewed changes

Comment thread packages/mobile/CHANGELOG.md Outdated

hcopp reviewed Jun 23, 2026

View reviewed changes

Comment thread packages/web/src/alpha/tabbed-chips/__stories__/TabbedChips.stories.tsx

chore(cds2211): update changelogs for activeBackground and activeColo…

0e52842

…r in TabbedChips Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>

hcopp approved these changes Jun 23, 2026

View reviewed changes

cb-ekuersch merged commit 8728ace into master Jun 23, 2026
32 of 33 checks passed

cb-ekuersch deleted the erichkuerschner/cds-2211-tabbedchips-fix-activecolor branch June 23, 2026 18:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: TabbedChips working activeColor & activeBackground#766

fix: TabbedChips working activeColor & activeBackground#766
cb-ekuersch merged 8 commits into
masterfrom
erichkuerschner/cds-2211-tabbedchips-fix-activecolor

cb-ekuersch commented Jun 22, 2026 •

edited

Loading

Uh oh!

cb-heimdall commented Jun 22, 2026 •

edited

Loading

Uh oh!

linear Bot commented Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hcopp left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

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

Uh oh!

What changed? Why?

What was happening before this PR

What this PR does

Root cause summary

UI changes

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Change management

Uh oh!

cb-heimdall commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Heimdall Review Status

✅ CODEOWNERS

Uh oh!

linear Bot commented Jun 22, 2026

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hcopp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

cb-ekuersch commented Jun 22, 2026 •

edited

Loading

cb-heimdall commented Jun 22, 2026 •

edited

Loading

✅ `CODEOWNERS`

github-actions Bot commented Jun 22, 2026 •

edited

Loading