Skip to content
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

Conversation

ZeeshanTamboli
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli commented Jan 12, 2023

Breaking Changes for MUI Base:

-<SliderUnstyled valueLabelDisplay="on" />
+<SliderUnstyled slots={{ valueLabel: SliderValueLabel }} /> 

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

  • The following classes are removed from sliderUnstyledClasses since they are not needed for the value label:
-valueLabel
-valueLabelOpen
-valueLabelCircle
-valueLabelLabel

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

@ZeeshanTamboli ZeeshanTamboli added bug 🐛 Something doesn't work docs Improvements or additions to the documentation breaking change labels Jan 12, 2023
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 16, 2023
Copy link
Member

@mnajdova mnajdova left a 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.

@ZeeshanTamboli
Copy link
Member Author

ZeeshanTamboli commented Jan 19, 2023

@mnajdova It's ready for further review.

Copy link
Member

@mnajdova mnajdova left a 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?

Copy link
Member

@samuelsycamore samuelsycamore left a 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.

docs/data/base/components/slider/slider.md Outdated Show resolved Hide resolved
docs/data/base/components/slider/slider.md Outdated Show resolved Hide resolved
ZeeshanTamboli and others added 4 commits January 20, 2023 16:05
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>
@ZeeshanTamboli
Copy link
Member Author

One last comment, the text in the new demo seems to be a bit off too:

@mnajdova Fixed in commit b439971.

Copy link
Member

@mnajdova mnajdova left a 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.

@ZeeshanTamboli ZeeshanTamboli merged commit 6311da5 into mui:master Jan 23, 2023
@ZeeshanTamboli ZeeshanTamboli deleted the SliderUnstyled/remove-SliderValueLabel-and-impove-logic-for-valueLabelDisplay-prop branch January 23, 2023 12:48
@ZeeshanTamboli ZeeshanTamboli mentioned this pull request Jan 23, 2023
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change bug 🐛 Something doesn't work component: slider This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation package: base-ui Specific to @mui/base
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[docs] Customize valueLabel in SliderUnstyled with tailwind
5 participants