You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
Using the themeColor util when setting the color prop on an Icon results in a console error: Invalid value for prop color on <span> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior
To Reproduce
Steps to reproduce the behavior:
Put an Icon component inside your React app and use themeColor to set the color: <Icon size={14} color={themeColor('tint', 'level5')}>
Expected behavior
The color of the icon should be set without any problem (as described in the storybook docs)
Desktop (please complete the following information):
OS: OSX
Browser: Chrome
Additional context
The color prop does not show in the DOM. It seems that themeColor the function does not parse correctly to a string, so the value of the prop is invalid. It is fixable by fetching the styled-components theme context, wrap it in an object and call the themeColor function like const themeContext = { theme: useContext(ThemeContext) as Theme.ThemeInterface };
and then <Icon size={14} color={themeColor('tint', 'level5')(themeContext)} />
The text was updated successfully, but these errors were encountered:
Describe the bug
Using the themeColor util when setting the color prop on an Icon results in a console error:
Invalid value for prop
coloron <span> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior
To Reproduce
Steps to reproduce the behavior:
<Icon size={14} color={themeColor('tint', 'level5')}>
Expected behavior
The color of the icon should be set without any problem (as described in the storybook docs)
Desktop (please complete the following information):
Additional context
The color prop does not show in the DOM. It seems that themeColor the function does not parse correctly to a string, so the value of the prop is invalid. It is fixable by fetching the styled-components theme context, wrap it in an object and call the themeColor function like
const themeContext = { theme: useContext(ThemeContext) as Theme.ThemeInterface };
and then
<Icon size={14} color={themeColor('tint', 'level5')(themeContext)} />
The text was updated successfully, but these errors were encountered: