Feat/atom slider fullwidth #2441
Conversation
javiauso
requested review from
andresin87,
arnau-rius,
kikoruiz,
rmoralp and
sui-bot
as code owners
|
| [firstMarkKey]: {label: marks[firstMarkKey], style: {transform: 'inherit'}}, | ||
| [lastMarkKey]: { | ||
| label: marks[lastMarkKey], | ||
| style: {transform: 'inherit', left: 'auto', right: '0'} | ||
| } |
There was a problem hiding this comment.
do you think we could achieve implement this in a pure CSS way?
just as an idea, could we style first-child and last-child markers accordingly if the component has the fullWidth prop set to true?
IMHO it'd be cleaner... what do you think?
There was a problem hiding this comment.
Yes! I'm with you with the approach, but here we're using rc-slider and is managing this styles with inline mode, so we only do that in CSS using !important declaration, instead them provide this style prop for each markers. For me, we could do an exception using !important, but It looks a bit tricky.
There was a problem hiding this comment.
oh... if the only alternative we have here is using !important, I think your original implementation is cleaner then
components/atom/slider/src/index.js
Outdated
| defaultValue, | ||
| invertColors | ||
| invertColors, | ||
| fullWidth |
There was a problem hiding this comment.
Boolean prop... isWhatever or hasWhatever
|
andresin87
added
hacktoberfest-accepted
3 participants
Atom/Slider
🔍 ShowTASK:
Types of changes
Description, Motivation and Context
In MA we need a full width design of AtomSlider, to show custom marks inside a modal.
Screenshots - Animations