🚀 feat(stepper): add custom color for stepper #673
Conversation
Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>
Co-authored-by: codacy-production[bot] <61871480+codacy-production[bot]@users.noreply.github.com>
Co-authored-by: Luan Lorenzo <luanlorenzo23@gmail.com>
![codacy-production[bot]](https://avatars.githubusercontent.com/in/56611?s=60&v=4){kind=small}
| `, | ||
| return css` | ||
| width: 95px; | ||
| margin-top: 10px; |
There was a problem hiding this comment.
Codacy has a fix for the issue: Delete ··
| margin-top: 10px; | |
| margin-top: 10px; |
| text-align: center; | ||
| `, | ||
| return css` | ||
| width: 95px; |
There was a problem hiding this comment.
Codacy has a fix for the issue: Delete ··
| width: 95px; | |
| width: 95px; |
| : stepper.label.color.inactive}; | ||
| font-size: ${stepper.label.font.size}px; | ||
| text-align: center; | ||
| `; |
There was a problem hiding this comment.
Codacy has a fix for the issue: Replace ···· with ··
| `; | |
| `; |
| margin-top: 10px; | ||
| margin-left: -40px; | ||
| }) => { | ||
| const state = secondary ? 'secondary' : 'active'; |
There was a problem hiding this comment.
Codacy has a fix for the issue: Delete ··
| const state = secondary ? 'secondary' : 'active'; | |
| const state = secondary ? 'secondary' : 'active'; |
| font-size: ${stepper.label.font.size}px; | ||
| text-align: center; | ||
| `, | ||
| return css` |
There was a problem hiding this comment.
Codacy has a fix for the issue: Delete ··
| return css` | |
| return css` |
| ? stepper.label.color[state] | ||
| : stepper.label.color.inactive}; | ||
| font-size: ${stepper.label.font.size}px; | ||
| text-align: center; |
There was a problem hiding this comment.
Codacy has a fix for the issue: Delete ··
| text-align: center; | |
| text-align: center; |
| ); | ||
|
|
||
| const Label = styled(Text.Bold)( | ||
| ({ | ||
| active, | ||
| secondary, |
There was a problem hiding this comment.
Codacy has a fix for the issue: Replace ···· with ··
| secondary, | |
| secondary, |
| margin-left: -40px; | ||
| color: ${active | ||
| ? stepper.label.color[state] | ||
| : stepper.label.color.inactive}; |
There was a problem hiding this comment.
Codacy has a fix for the issue: Replace ········ with ······
| : stepper.label.color.inactive}; | |
| : stepper.label.color.inactive}; |
| width: 95px; | ||
| margin-top: 10px; | ||
| margin-left: -40px; | ||
| color: ${active |
There was a problem hiding this comment.
Codacy has a fix for the issue: Delete ··
| color: ${active | |
| color: ${active |
| width: 95px; | ||
| margin-top: 10px; | ||
| margin-left: -40px; | ||
| }) => { |
There was a problem hiding this comment.
Codacy has a fix for the issue: Delete ··
| }) => { | |
| }) => { |
| return css` | ||
| width: 95px; | ||
| margin-top: 10px; | ||
| margin-left: -40px; |
There was a problem hiding this comment.
Codacy has a fix for the issue: Delete ··
| margin-left: -40px; | |
| margin-left: -40px; |
| color: ${active | ||
| ? stepper.label.color[state] | ||
| : stepper.label.color.inactive}; | ||
| font-size: ${stepper.label.font.size}px; |
There was a problem hiding this comment.
Codacy has a fix for the issue: Delete ··
| font-size: ${stepper.label.font.size}px; | |
| font-size: ${stepper.label.font.size}px; |
| margin-top: 10px; | ||
| margin-left: -40px; | ||
| color: ${active | ||
| ? stepper.label.color[state] |
There was a problem hiding this comment.
Codacy has a fix for the issue: Delete ··
| ? stepper.label.color[state] | |
| ? stepper.label.color[state] |
Description 📄
We add a prop for Stepper receive a custom color.
Platforms 📲
Type of change 🔍
How Has This Been Tested? 🧪
use a stepper component with color prop.
Unit Test
Snapshot Test
Checklist: 🔍
Screenshots 📸