Conversation

snowystinger

Closes

Noticed it was possible to change the color of an icon inside a Button. This is not a feature we want to support as the color is specifically meant to meet contrast and align with the text color.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

@rspbot

@rspbot

@@ -43,7 +43,7 @@ export const focusRing = () => ({

interface IconStyle {
size?: 'XS' | 'S' | 'M' | 'L' |'XL',
color?: 'white' | 'black' | 'accent' | 'neutral' | 'negative' | 'informative' | 'positive' | 'notice' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',
color?: 'white' | 'black' | 'accent' | 'neutral' | 'negative' | 'informative' | 'positive' | 'notice' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver' | 'currentColor',
Copy link
Member

Choose a reason for hiding this comment

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

do we care that currentColor will now show up in color's typescript autocomplete for icons?

Copy link
Member

Choose a reason for hiding this comment

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

perhaps a bit odd since since that means users will be able to have their workflow icons essentially inherit from an arbitrary color that a parent has? Unless I'm misunderstanding how this would get propagated

Copy link
Member

@LFDanLu LFDanLu Jun 4, 2025

Choose a reason for hiding this comment

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

yeah, looks like something like this is possible now:

      <div
        style={{
          color: 'blue',
          border: '1px dashed currentcolor'
        }}>
        <Alert {...args} styles={iconStyle({color: 'currentColor', size: 'XL'})} />
        <_3DAsset styles={iconStyle({color: 'currentColor', size: 'XL'})} />
      </div>

resulting in
image

Could we export a version of iconStyle that doesn't have currentColor and have an internal one that does support it for our internal usage?

Copy link
Member Author

Choose a reason for hiding this comment

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

hmmm it's a good question, but i'd prefer that we don't have something separate, if we can build a component others should be able to build it, and an important and common use case is icons that match text color

Copy link
Member

Choose a reason for hiding this comment

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

thats fair, just not sure how much we want to lock it down since having a subset of supported colors feels like the original intent was to only support that subset.

# Conflicts:
#	packages/@react-spectrum/s2/src/TreeView.tsx
@rspbot

Sign up for free to join this conversation on . Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.