[Slider][material-next] Add Slider component with Material You design #37520
Conversation
Netlify deploy preview@mui/material-next: parsed: +0.22% , gzip: +0.19% Bundle size report |
DiegoAndai
added
design: material you
component: slider
DiegoAndai
changed the title
oliviertassinari
added
design: material
There was a problem hiding this comment.
I see that we started to use #29345 for splitting the work into smaller chunks under "Progress", great.
|
|
||
| export { SliderThumb }; | ||
|
|
||
| const StyledSliderValueLabel = styled(SliderValueLabel, { |
There was a problem hiding this comment.
Interesting, did you copy the implementation of Material UI v4 https://github.com/mui/material-ui/blob/v4.x/packages/material-ui/src/Slider/ValueLabel.js#L5 https://v4.mui.com/components/slider/#discrete-sliders or from somewhere else? To see if there aren't things to copy from there.
It seems that with MD v3, they decided to revert the value label of MD v2 https://m2.material.io/components/sliders#usage back to MD v1 https://m1.material.io/components/sliders.html#sliders-discrete-slider 🙃.
There was a problem hiding this comment.
Didn't know MD v1 had the same value label 😅. I copied everything from Material UI v5, and then modified the styles. For the value label, I actually used this Base UI example as a guide as it has the same type of value label.
|
For the proptypes generation, I created #37533. |
| @@ -280,14 +280,17 @@ const customPalette = { | |||
| neutral: { | |||
| '0': '#000000', | |||
| '10': '#201a1c', | |||
| '17': '#2e282a', | |||
There was a problem hiding this comment.
We will need to update the types too. Are these values coming from the specs?
There was a problem hiding this comment.
Updated them here 😊:
Yes, they come from the specs. Here are the values for the MD3 default theme, and here I added them to our palette:
For this experiment file, I noticed that it didn't use the default MD3 colors so I created the tones based on the existing neutral tones, altering the light value as explained in: https://m3.material.io/styles/color/the-color-system/key-colors-tones#a828e350-1551-45e5-8430-eb643e6a7713
These are used for the surfaceContainerHigh and surfaceContainerHighest tokens:
| const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot; | ||
|
|
||
| return ( | ||
| /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */ |
There was a problem hiding this comment.
We likely want to address this in a follow up PR soon after this one is merged :)
Slider issue: #37527
Material You umbrella issue: #29345
Changes
Preview: https://deploy-preview-37520--material-ui.netlify.app/material-ui/react-slider/#experimental-api
Add Slider component implementing Material You style specifications:
materialv5material-nextwhich were required for the SliderTodo
Playground
You can try out the deploy preview playground to see the component.
Screen.Recording.2023-06-05.at.16.59.17.mov