-
Notifications
You must be signed in to change notification settings - Fork 793
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: re-enable color prop for the badge component #648
Conversation
src/components/badge.component.js
Outdated
@@ -25,6 +25,7 @@ const BadgeContainer = styled.View` | |||
const BadgeText = styled.Text` | |||
${{ ...fonts.fontPrimaryBold }}; | |||
background-color: transparent; | |||
${({ color }) => `color: ${color || colors.black};`}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It reminds me a question that, what's the differences between this way with color: ${({color}) => (color || color.black)};
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Both styles are OK. But the one I mentioned is more similar with styled-components official documents.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@chinesedfan just had the time to test, it's exactly the same.
I switched to the syntax you proposed as it's clearer.
I guess the difference between the two syntaxes, is that with the one I originally used, you can choose to output no style at all based on tests, which is not possible with the other one:
${({ foo }) => foo ? `color: '#FFCC00'` : ''};
You could also output more styles in the condition
Screenshots
Description
#535 seems to have lost the
color
prop for the badge text, making it always black (the default).This fixed the style be reading from that prop again when it's available.