Skip to content

feat: introduce canonical active prop to Chip component family - #843

Open
cb-ekuersch wants to merge 6 commits into
masterfrom
chip-prepare
Open

feat: introduce canonical active prop to Chip component family#843
cb-ekuersch wants to merge 6 commits into
masterfrom
chip-prepare

Conversation

@cb-ekuersch

@cb-ekuersch cb-ekuersch commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

What changed? Why?

Replaces Chip's invertColorScheme / inverted emphasis with a canonical active state API across web and mobile.

  • Add active, activeBackground, and activeColor to Chip, InputChip, and SelectChip (web + mobile).
  • Keep inverted-scheme compatibility while active is the public emphasis path; InputChip remains active by default (active={false} for the quieter look).
  • Derive SelectChip's active state via shared getSelectChipActive and tighten SelectChip/SelectChipControl prop types with light refactor/reorganization of types.
  • Update TabbedChips, stories, Code Connect, docs, and Legend examples to the new active API.
  • Further expand the example customer-component-config playground with new components: SelectChip, InputChip, TabbedChips, CheckboxCell and RadioCell

N/A

UI changes

select chip docs input chip docs chip docs
Screenshot 2026-08-13 at 2 22 29 PM Screenshot 2026-08-13 at 2 21 28 PM Screenshot 2026-08-13 at 2 21 08 PM

Example utilizing active colors in component config:

select chip active select chip inactive
Screenshot 2026-08-13 at 2 17 44 PM Screenshot 2026-08-13 at 2 17 36 PM

Testing

How has it been tested?

  • Unit tests
  • Interaction tests
  • Pseudo State tests
  • Manual - Web
  • Manual - Android (Emulator / Device)
  • Manual - iOS (Emulator / Device)

Testing instructions

  • Spot-check Chip, InputChip, MediaChip, and SelectChip stories for default vs active (and activeBackground / activeColor overrides).
  • Confirm InputChip still looks active by default and quieter with active={false}.
  • Open the expo playground Customer Component Config screen: toggle individual Configured switches and Toggle all, and verify Chip/InputChip/SelectChip/TabbedChips configured styles.
  • Run unit tests for Chip, InputChip, SelectChip, and getSelectChipActive.

Illustrations/Icons Checklist

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

N/A

Change management

type=routine
risk=low
impact=sev5

automerge=false

@cb-heimdall

cb-heimdall commented Aug 13, 2026

Copy link
Copy Markdown
Collaborator

🟡 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

Introduce active/activeBackground/activeColor on Chip, InputChip, and SelectChip, and update docs, Code Connect, and the expo config playground.

Co-Authored-By: Claude <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@cb-ekuersch cb-ekuersch changed the title feat: customer component config playground and component customization affordances feat: introduce canonical active prop to Chip component family Aug 13, 2026
@cb-ekuersch
cb-ekuersch marked this pull request as ready for review August 13, 2026 20:04
Comment thread packages/common/src/chips/getSelectChipActive.ts Outdated
@github-actions

github-actions Bot commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

Comment thread packages/web/src/alpha/select-chip/SelectChipControl.tsx Outdated
Comment thread packages/web/src/chips/Chip.tsx
const WrappedSelectChipControl = useMemo(
() =>
createSelectChipControlWrapper<Type, SelectOptionValue>({
active,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm concerned that active flipping now remounts the select control. createSelectChipControlWrapper is memoized on the chip props, and active is now one of them, so the first selection (and clearing back to empty) produces a new component type for SelectControlComponent. React unmounts/remounts the whole control: the trigger button loses focus and AnimatedCaret restarts. Previously the deps were effectively static. A stable wrapper that reads chip props from a ref/context (or passing chip props through Select) avoids this.

Comment thread packages/mobile/src/alpha/select-chip/SelectChip.tsx
cb-ekuersch and others added 2 commits August 13, 2026 16:31
The default caret now follows color/activeColor instead of always using fg, and SelectChip value typing is tightened off unknown.

Co-Authored-By: Claude <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Selected tabs need to paint activeBackground/activeColor from tab props and only invert when there is no custom background, now via active instead of invertColorScheme.

Co-Authored-By: Claude <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

3 participants