Skip to content

feat: expose icon glyph and progress circle styles to IconButton#606

Open
sverg-cb wants to merge 19 commits intomasterfrom
sverg/icon-button-font-styles
Open

feat: expose icon glyph and progress circle styles to IconButton#606
sverg-cb wants to merge 19 commits intomasterfrom
sverg/icon-button-font-styles

Conversation

@sverg-cb
Copy link
Copy Markdown
Contributor

@sverg-cb sverg-cb commented Apr 9, 2026

What changed? Why?

Adds styles.icon and styles.progressCircle to IconButton on both mobile and web (plus classNames.icon and classNames.progressCircle on web), forwarding them to the inner Icon and ProgressCircle components so consumers can customize icon glyph and spinner appearance (e.g. color, font size).

Fixes CDS-1134

Root cause (required for bugfixes)

UI changes

Mobile Storybook Web Storybook Docs
Screenshot 2026-05-04 at 2 12 53 PM Screenshot 2026-05-04 at 1 57 38 PM Screenshot 2026-05-04 at 1 58 57 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

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

…props

Adds `styles.icon` (and `classNames.icon` on web) to IconButton on both
mobile and web, forwarding them to the inner Icon component so consumers
can customize icon glyph appearance (e.g. color, font size).

Fixes CDS-1134

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@linear
Copy link
Copy Markdown

linear Bot commented Apr 9, 2026

@cb-heimdall
Copy link
Copy Markdown
Collaborator

cb-heimdall commented Apr 9, 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 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
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 9, 2026

…lass in Storybook

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…d docs styles tab

- Introduce iconButtonClassNames with root and icon selectors
- Replace manual styles/classNames types with StylesAndClassNames utility
- Apply static class names to Pressable root and Icon glyph
- Add static classNames test
- Add _webStyles.mdx and _mobileStyles.mdx doc pages
- Wire styles tabs into index.mdx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…tory

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Comment thread packages/mobile/src/buttons/IconButton.tsx
sverg-cb and others added 2 commits May 4, 2026 13:51
…conButton

Adds styles.root to mobile IconButton for consistency with other mobile
components, and exposes a progressCircle styles/classNames slot on both
web and mobile so consumers can customize the loading spinner appearance.

Co-authored-by: Cursor <cursoragent@cursor.com>
@sverg-cb sverg-cb force-pushed the sverg/icon-button-font-styles branch from 8ac0f8c to 41bfcb2 Compare May 4, 2026 20:55
@sverg-cb sverg-cb changed the title feat: expose icon glyph styles via styles and classNames feat: expose icon glyph and progress circle styles to IconButton May 4, 2026
@sverg-cb sverg-cb marked this pull request as ready for review May 4, 2026 21:14
@sverg-cb sverg-cb requested a review from hcopp May 4, 2026 21:14
Use top-level style and className props on ProgressCircle instead of
going through the styles/classNames root objects, and update changelogs.

Co-authored-by: Cursor <cursoragent@cursor.com>
@sverg-cb sverg-cb deployed to production May 4, 2026 21:24 — with GitHub Actions Active
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