Skip to content

feat: Updating the active states for chips + bgTertiary Light Mode#585

Open
chrislkaufman wants to merge 4 commits intocoinbase:masterfrom
chrislkaufman:chris/chip-active-state-update
Open

feat: Updating the active states for chips + bgTertiary Light Mode#585
chrislkaufman wants to merge 4 commits intocoinbase:masterfrom
chrislkaufman:chris/chip-active-state-update

Conversation

@chrislkaufman
Copy link
Copy Markdown

@chrislkaufman chrislkaufman commented Apr 3, 2026

What changed? Why?

Request from Andy Montgomery to change the active state of chips because they were too visually heavy in the UI. So, the active state was updated to bgTertiary instead of bgInverse. Additionally, the bgTertiary dark mode value was updated to gray 30 instead of gray 20.

This change is only for the defaultTheme and coinbaseTheme.

Root cause (required for bugfixes)

UI changes

iOS Old iOS New
old screenshot new screenshot
Going to get pictures!
Android Old Android New
old screenshot new screenshot
Web Old Light mode Web New Light Mode
Screenshot 2026-04-03 at 11 33 16 AM Screenshot 2026-04-03 at 11 33 35 AM
Web Old Dark Mode Web New Dark Mode
Screenshot 2026-04-03 at 11 33 12 AM Screenshot 2026-04-03 at 11 33 36 AM

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

Try clicking on select chip or tabbed chip to see the value change

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

…ead of bgInverse. Also updated bgTertiary dark mode value to use gray30
@cb-heimdall
Copy link
Copy Markdown
Collaborator

cb-heimdall commented Apr 3, 2026

🟡 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 1
Sum 2
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

Resolve changelog and package.json version conflicts: keep 8.65.0 and interleave upstream 8.64.x entries.

Made-with: Cursor
accessibilityState={{ selected: isActive }}
invertColorScheme={isActive}
background={isActive ? 'bgTertiary' : 'bgSecondary'}
invertColorScheme={false}
Copy link
Copy Markdown
Contributor

@hcopp hcopp Apr 15, 2026

Choose a reason for hiding this comment

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

Can you ask Cursor to "remove invertColorScheme={false} (and double check that it is safe to do so)"? Looks good to me to remove

children = value,
accessibilityLabel = typeof children === 'string' ? `Remove ${children}` : 'Remove option',
invertColorScheme = true,
invertColorScheme = false,
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.

nit: can you ask Cursor to "drop the destructuring of this invertColorScheme prop"

)
}
inverted={active}
inverted={false}
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.

Can you also remove this inverted? It defaults to false for MediaChip so we don't need to explicitly set it to false.

accessibilityState={{ selected: isActive }}
inverted={isActive}
background={isActive ? 'bgTertiary' : 'bgSecondary'}
inverted={false}
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.

Same here

aria-selected={isActive}
invertColorScheme={isActive}
background={isActive ? 'bgTertiary' : 'bgSecondary'}
invertColorScheme={false}
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.

Lets ask Cursor to "check this in all places, including removing the destructuring invertColorScheme" where no longer necessary.

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