-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
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
[SliderUnstyled] Improved logic for displaying the value label #35805
[SliderUnstyled] Improved logic for displaying the value label #35805
Conversation
… SliderUnstyled/remove-SliderValueLabel-and-impove-logic-for-valueLabelDisplay-prop
Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
… SliderUnstyled/remove-SliderValueLabel-and-impove-logic-for-valueLabelDisplay-prop
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.
I will push a fix for the different prop, it comes from one of the comments from the review on the previous PR.
Co-authored-by: Marija Najdova <mnajdova@gmail.com> Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Co-authored-by: Marija Najdova <mnajdova@gmail.com> Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
…-impove-logic-for-valueLabelDisplay-prop
@mnajdova It's ready for further review. |
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.
One last comment, the text in the new demo seems to be a bit off too:
Apart from that it looks good. Great work @ZeeshanTamboli cc @samuelsycamore can you check the copy writing?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.
Content looks good, just a couple tiny style things here.
Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
…-impove-logic-for-valueLabelDisplay-prop
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.
Great work @ZeeshanTamboli I don't have anything else to add.
Breaking Changes for MUI Base:
valueLabelDisplay
prop is removed fromSliderUnstyled
. The prop was not working as intended inSliderUnstyled
(See [docs] Customize valueLabel in SliderUnstyled with tailwind #35398). You can instead provide avalueLabel
slot with theslots
prop API to show the value label:The following demo shows how to show a value label when it is hovered over with the thumb: https://deploy-preview-35805--material-ui.netlify.app/base/react-slider/#value-label
sliderUnstyledClasses
since they are not needed for the value label:In the custom value label component, you can define your own classNames and target them with CSS.
The
SliderValueLabelUnstyled
component is removed from SliderUnstyled. You should provide your own custom component for the value label.To avoid using
React.cloneElement
API in value label, the component hierarchy structure of the value label is changed. The value label is now inside the Thumb slot -Thumb
->Input
,ValueLabel
.Remove the SliderLabelValueUnstyled component from MUI Base and show the value label by simply hovering on the thumb in SliderUnstyled. Add a demo to showcase it (preview below).
Docs Preview: https://deploy-preview-35805--material-ui.netlify.app/base/react-slider/#value-label
Closes #35398