fix(react): #4515 inherit theme colour in slotted SVGs - #4629
Conversation
GCHQ-Developer-530
left a comment
There was a problem hiding this comment.
I don't think this is quite working as expected because currentColor would make the svgs the link blue colour instead of black/white.
Also in order to get this running in storybook I had to change the Icon story for breadcrumb to use SlottedSVG, so while making the change to SlottedSVG is probably the correct thing to do, in order to test it you'll need to make those changes too on lines 164, 177, and 190 of ic-breadcrumb-group.stories.jsx in packages/react
923f9cd to
a8b47fb
Compare
|
Updated. SlottedSVG now defaults to the theme-aware neutral foreground token rather than currentColor, so breadcrumb icons use the appropriate light/dark foreground instead of inheriting the link colour. I also updated the Breadcrumb Icon Storybook example to use SlottedSVG and tightened the Cypress regression to assert the resolved light and dark fill colours. The branch has also been rebuilt cleanly on current develop. |
57214a8 to
3caeb87
Compare
3caeb87 to
0b1cbba
Compare
GCHQ-Developer-299
left a comment
There was a problem hiding this comment.
Tested locally with the updated story with/without the change to slottedSVG and confirmed that this works :)
Summary of the changes
Make React
SlottedSVGicons inherit theme-aware component colours when no explicit fill is supplied.currentColor.fillvalues.IcBreadcrumbpattern.IcThemechanges from light to dark.Related issue
Closes #4515
Validation
develop: two intended React files only.Checklist
General
Testing
Accessibility
Testing content extremes