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

[docs] Create SliderUnstyled docs #31850

Merged
merged 13 commits into from
Mar 29, 2022

Conversation

michaldudak
Copy link
Member

@michaldudak michaldudak commented Mar 17, 2022

Moved the SliderUnstyled docs to Base and created more unstyled demos based on the Material UI ones.

Preview: http://deploy-preview-31850--material-ui.netlify.app/base/react-slider

@michaldudak michaldudak added component: slider This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation labels Mar 17, 2022
@mui-bot
Copy link

mui-bot commented Mar 17, 2022

No bundle size changes

Generated by 🚫 dangerJS against 47aac7f

@michaldudak michaldudak changed the title Slider-unstyled-docs [docs] Create SliderUnstyled docs Mar 17, 2022

<p class="description">Sliders allow users to make selections from a range of values.</p>

Sliders show a range of values along a bar, from which users may select a single value.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Sliders show a range of values along a bar, from which users may select a single value.
Sliders show a range of values along a bar, from which users may select a single value, or a range.

Not sure how to phrase that users can select a range too, for example from the sliders with two thumbs.

import { styled, alpha, Box } from '@mui/system';
import SliderUnstyled from '@mui/base/SliderUnstyled';

const StyledSlider = styled(SliderUnstyled)(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should improve the hover styles:

image

Also, we need a focus visible styles on the thumb, there is not indication that it is focused.

docs/data/base/components/slider/slider.md Show resolved Hide resolved
docs/data/base/components/slider/slider.md Show resolved Hide resolved
docs/data/base/components/slider/slider.md Show resolved Hide resolved
docs/data/base/components/slider/slider.md Show resolved Hide resolved
docs/data/base/components/slider/slider.md Outdated Show resolved Hide resolved
docs/data/base/components/slider/slider.md Outdated Show resolved Hide resolved
docs/data/base/components/slider/slider.md Outdated Show resolved Hide resolved
docs/data/base/components/slider/slider.md Outdated Show resolved Hide resolved
docs/data/base/components/slider/slider.md Outdated Show resolved Hide resolved
docs/data/base/components/slider/slider.md Outdated Show resolved Hide resolved
docs/data/base/components/slider/slider.md Outdated Show resolved Hide resolved
Comment on lines +57 to +58
- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop).
- Each thumb has a user-friendly text for its current value.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does "thumb" refer to here? I don't see this word used anywhere else in the document. Is this the accepted term for the control itself?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point - we haven't introduced this term before. It may be worth having an image explaining the anatomy of a slider, similar to https://material.io/components/sliders#anatomy. Other controls would benefit from it too.
@danilo-leal, would you agree?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Absolutely. Similar to the customization examples, I reckon we could add these in bulk in a separate PR once the first iteration of each component docs is done!

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 24, 2022
@github-actions github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Mar 25, 2022
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.

Looks good, I would recommend in the next pass to change a bit the look of the focus visible and selected styles of the thumbs, as they look a lot like Material Design :)

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 29, 2022
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 29, 2022
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 29, 2022
@michaldudak michaldudak merged commit af00b21 into mui:master Mar 29, 2022
@michaldudak michaldudak deleted the slider-unstyled-docs branch March 29, 2022 12:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: slider This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants