-
-
Notifications
You must be signed in to change notification settings - Fork 114
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
feat: adding new badge variants and examples #1744
Conversation
FeaturesContributors@hportales2000, @TahimiLeonBravo Commit-Lint commandsYou can trigger Commit-Lint actions by commenting on this PR:
|
@@ -50,6 +50,24 @@ const StyledContainer = attchThemeAttrs(styled.span).attrs(props => { | |||
color: ${props.palette.getContrastText(props.inverse)}; | |||
background-color: ${props.inverse}; | |||
`}; | |||
${props => |
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.
Similar blocks of code found in 4 locations. Consider refactoring.
color: ${props.palette.getContrastText(props.palette.warning.main)}; | ||
background-color: ${props.palette.warning.main}; | ||
`}; | ||
${props => |
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.
Similar blocks of code found in 4 locations. Consider refactoring.
color: ${props.palette.getContrastText(props.palette.success.main)}; | ||
background-color: ${props.palette.success.main}; | ||
`}; | ||
${props => |
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.
Similar blocks of code found in 4 locations. Consider refactoring.
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.
👍🏻
src/components/Badge/readme.md
Outdated
className="rainbow-m-around_medium" | ||
label="Signal Badge" | ||
title="the badge title" | ||
style={{'color': 'white', 'backgroundColor': 'forestgreen', 'boxShadow': 'inset 0 0 0 1px'}} |
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.
we should not add the styles inline instead create a const
src/components/Badge/readme.md
Outdated
className="rainbow-m-around_medium" | ||
label="Floating Badge" | ||
title="the badge title" | ||
style={{'color': 'white', 'backgroundColor': 'lightsalmon', 'borderColor': 'darksalmon', 'boxShadow': 'gray 0 6px 16px -6px'}} |
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.
^^
src/components/Badge/readme.md
Outdated
className="rainbow-m-around_medium" | ||
label="Desert Badge" | ||
title="the badge title" | ||
style={{'color': 'peru', 'backgroundColor': 'bisque',}} |
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.
^^
'warning', | ||
'success', | ||
'error', |
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.
You need to add this props in the declarations file (index.d.ts)
Code Climate has analyzed commit 299437f and detected 4 issues on this pull request. Here's the issue category breakdown:
View more on Code Climate. |
fix: #1741
Changes proposed in this PR:
add new variants to the Badge
add custom badge examples
I have followed (at least) the PR section of the contributing guide.
@nexxtway/react-rainbow