From 54f7c6dabdd821a4e7b47a7ef0b28ba1ca256179 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Wed, 16 Mar 2022 11:33:35 +0100 Subject: [PATCH 1/8] Move existing SliderUnstyled docs --- .../components/slider/UnstyledSlider.js | 0 .../components/slider/UnstyledSlider.tsx | 0 .../slider/UnstyledSlider.tsx.preview | 0 docs/data/base/components/slider/slider.md | 24 +++++++++++++++++++ docs/data/base/pages.ts | 5 +++- .../data/material/components/slider/slider.md | 18 ++------------ docs/pages/base/api/slider-unstyled.json | 2 +- docs/pages/base/react-slider.js | 11 +++++++++ 8 files changed, 42 insertions(+), 18 deletions(-) rename docs/data/{material => base}/components/slider/UnstyledSlider.js (100%) rename docs/data/{material => base}/components/slider/UnstyledSlider.tsx (100%) rename docs/data/{material => base}/components/slider/UnstyledSlider.tsx.preview (100%) create mode 100644 docs/data/base/components/slider/slider.md create mode 100644 docs/pages/base/react-slider.js diff --git a/docs/data/material/components/slider/UnstyledSlider.js b/docs/data/base/components/slider/UnstyledSlider.js similarity index 100% rename from docs/data/material/components/slider/UnstyledSlider.js rename to docs/data/base/components/slider/UnstyledSlider.js diff --git a/docs/data/material/components/slider/UnstyledSlider.tsx b/docs/data/base/components/slider/UnstyledSlider.tsx similarity index 100% rename from docs/data/material/components/slider/UnstyledSlider.tsx rename to docs/data/base/components/slider/UnstyledSlider.tsx diff --git a/docs/data/material/components/slider/UnstyledSlider.tsx.preview b/docs/data/base/components/slider/UnstyledSlider.tsx.preview similarity index 100% rename from docs/data/material/components/slider/UnstyledSlider.tsx.preview rename to docs/data/base/components/slider/UnstyledSlider.tsx.preview diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md new file mode 100644 index 00000000000000..739c2ec1f9856b --- /dev/null +++ b/docs/data/base/components/slider/slider.md @@ -0,0 +1,24 @@ +--- +product: base +title: React Slider unstyled component and hook +components: SliderUnstyled +githubLabel: 'component: slider' +waiAria: https://www.w3.org/TR/wai-aria-practices/#slider +packageName: '@mui/base' +--- + +# Slider + +

Sliders allow users to make selections from a range of values.

+ +Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. + +- 📦 [5.6 kB gzipped](https://bundlephobia.com/package/@mui/base@latest) + +{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} + +```js +import SliderUnstyled from '@mui/base/SliderUnstyled'; +``` + +{{"demo": "UnstyledSlider.js"}} diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts index 633c849de3744b..dfd44a6e8708c4 100644 --- a/docs/data/base/pages.ts +++ b/docs/data/base/pages.ts @@ -14,7 +14,10 @@ const pages = [ { pathname: '/base/components/inputs', subheader: 'inputs', - children: [{ pathname: '/base/react-button', title: 'Button' }], + children: [ + { pathname: '/base/react-button', title: 'Button' }, + { pathname: '/base/react-slider', title: 'Slider' }, + ], }, { pathname: '/base/components/navigation', diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index efe9205b79159f..cc3ef260436069 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -1,10 +1,11 @@ --- product: material-ui title: React Slider component -components: Slider, SliderUnstyled +components: Slider githubLabel: 'component: slider' materialDesign: https://material.io/components/sliders waiAria: https://www.w3.org/TR/wai-aria-practices/#slider +unstyled: /base/react-slider/ --- # Slider @@ -132,21 +133,6 @@ Increasing _x_ by one increases the represented value by factor _2_. {{"demo": "NonLinearSlider.js"}} -## Unstyled - - - -- 📦 [5.6 kB gzipped](https://bundlephobia.com/package/@mui/base@latest) - -The slider also comes with an unstyled version. -It's ideal for doing heavy customizations and minimizing bundle size. - -```js -import SliderUnstyled from '@mui/base/SliderUnstyled'; -``` - -{{"demo": "UnstyledSlider.js"}} - ## Accessibility (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider) diff --git a/docs/pages/base/api/slider-unstyled.json b/docs/pages/base/api/slider-unstyled.json index b389675e06a67d..d865d6e7eb5dba 100644 --- a/docs/pages/base/api/slider-unstyled.json +++ b/docs/pages/base/api/slider-unstyled.json @@ -117,6 +117,6 @@ "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/base/react-slider.js b/docs/pages/base/react-slider.js new file mode 100644 index 00000000000000..8af3db31d4872c --- /dev/null +++ b/docs/pages/base/react-slider.js @@ -0,0 +1,11 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import { + demos, + docs, + demoComponents, +} from 'docs/data/base/components/slider/slider.md?@mui/markdown'; + +export default function Page() { + return ; +} From 8f56327b69df3ed5b99a959cd449317beb1c5a4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Thu, 17 Mar 2022 09:28:41 +0100 Subject: [PATCH 2/8] Add more demos --- .../base/components/slider/DiscreteSlider.js | 115 +++++++++++++++ .../base/components/slider/DiscreteSlider.tsx | 115 +++++++++++++++ .../slider/DiscreteSlider.tsx.preview | 10 ++ .../components/slider/DiscreteSliderMarks.js | 131 +++++++++++++++++ .../components/slider/DiscreteSliderMarks.tsx | 131 +++++++++++++++++ .../slider/DiscreteSliderMarks.tsx.preview | 6 + .../components/slider/DiscreteSliderValues.js | 132 ++++++++++++++++++ .../slider/DiscreteSliderValues.tsx | 132 ++++++++++++++++++ .../slider/DiscreteSliderValues.tsx.preview | 7 + .../base/components/slider/RangeSlider.js | 128 +++++++++++++++++ .../base/components/slider/RangeSlider.tsx | 128 +++++++++++++++++ docs/data/base/components/slider/slider.md | 44 +++++- 12 files changed, 1075 insertions(+), 4 deletions(-) create mode 100644 docs/data/base/components/slider/DiscreteSlider.js create mode 100644 docs/data/base/components/slider/DiscreteSlider.tsx create mode 100644 docs/data/base/components/slider/DiscreteSlider.tsx.preview create mode 100644 docs/data/base/components/slider/DiscreteSliderMarks.js create mode 100644 docs/data/base/components/slider/DiscreteSliderMarks.tsx create mode 100644 docs/data/base/components/slider/DiscreteSliderMarks.tsx.preview create mode 100644 docs/data/base/components/slider/DiscreteSliderValues.js create mode 100644 docs/data/base/components/slider/DiscreteSliderValues.tsx create mode 100644 docs/data/base/components/slider/DiscreteSliderValues.tsx.preview create mode 100644 docs/data/base/components/slider/RangeSlider.js create mode 100644 docs/data/base/components/slider/RangeSlider.tsx diff --git a/docs/data/base/components/slider/DiscreteSlider.js b/docs/data/base/components/slider/DiscreteSlider.js new file mode 100644 index 00000000000000..fab834715dcde5 --- /dev/null +++ b/docs/data/base/components/slider/DiscreteSlider.js @@ -0,0 +1,115 @@ +import * as React from 'react'; +import { styled, alpha, Box } from '@mui/system'; +import SliderUnstyled from '@mui/base/SliderUnstyled'; + +const StyledSlider = styled(SliderUnstyled)( + ({ theme }) => ` + color: ${theme.palette.mode === 'light' ? '#1976d2' : '#90caf9'}; + height: 4px; + width: 100%; + padding: 13px 0; + display: inline-block; + position: relative; + cursor: pointer; + touch-action: none; + -webkit-tap-highlight-color: transparent; + opacity: 0.75; + + &:hover { + opacity: 1; + } + + & .MuiSlider-rail { + display: block; + position: absolute; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: currentColor; + opacity: 0.38; + } + + & .MuiSlider-track { + display: block; + position: absolute; + height: 4px; + border-radius: 2px; + background-color: currentColor; + } + + & .MuiSlider-thumb { + position: absolute; + width: 14px; + height: 14px; + margin-left: -6px; + margin-top: -5px; + box-sizing: border-box; + border-radius: 50%; + outline: 0; + border: 2px solid currentColor; + background-color: #fff; + } + + & .MuiSlider-mark { + position: absolute; + width: 4px; + height: 4px; + border-radius: 2px; + background-color: currentColor; + top: 50%; + opacity: 0.7; + transform: translateX(-50%); + } + + & .MuiSlider-markActive { + background-color: #fff; + } + + & .MuiSlider-valueLabel { + font-family: IBM Plex Sans; + font-size: 14px; + display: block; + position: relative; + top: -1.6em; + text-align: center; + transform: translateX(-50%); + + } + + :hover, + &.Mui-focusVisible { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.Mui-active { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } +`, +); + +function valuetext(value) { + return `${value}°C`; +} + +export default function DiscreteSlider() { + return ( + + + + ); +} diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx new file mode 100644 index 00000000000000..ec17d6b9758013 --- /dev/null +++ b/docs/data/base/components/slider/DiscreteSlider.tsx @@ -0,0 +1,115 @@ +import * as React from 'react'; +import { styled, alpha, Box } from '@mui/system'; +import SliderUnstyled from '@mui/base/SliderUnstyled'; + +const StyledSlider = styled(SliderUnstyled)( + ({ theme }) => ` + color: ${theme.palette.mode === 'light' ? '#1976d2' : '#90caf9'}; + height: 4px; + width: 100%; + padding: 13px 0; + display: inline-block; + position: relative; + cursor: pointer; + touch-action: none; + -webkit-tap-highlight-color: transparent; + opacity: 0.75; + + &:hover { + opacity: 1; + } + + & .MuiSlider-rail { + display: block; + position: absolute; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: currentColor; + opacity: 0.38; + } + + & .MuiSlider-track { + display: block; + position: absolute; + height: 4px; + border-radius: 2px; + background-color: currentColor; + } + + & .MuiSlider-thumb { + position: absolute; + width: 14px; + height: 14px; + margin-left: -6px; + margin-top: -5px; + box-sizing: border-box; + border-radius: 50%; + outline: 0; + border: 2px solid currentColor; + background-color: #fff; + } + + & .MuiSlider-mark { + position: absolute; + width: 4px; + height: 4px; + border-radius: 2px; + background-color: currentColor; + top: 50%; + opacity: 0.7; + transform: translateX(-50%); + } + + & .MuiSlider-markActive { + background-color: #fff; + } + + & .MuiSlider-valueLabel { + font-family: IBM Plex Sans; + font-size: 14px; + display: block; + position: relative; + top: -1.6em; + text-align: center; + transform: translateX(-50%); + + } + + :hover, + &.Mui-focusVisible { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.Mui-active { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } +`, +); + +function valuetext(value: number) { + return `${value}°C`; +} + +export default function DiscreteSlider() { + return ( + + + + ); +} diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx.preview b/docs/data/base/components/slider/DiscreteSlider.tsx.preview new file mode 100644 index 00000000000000..1555bdaf8cfe40 --- /dev/null +++ b/docs/data/base/components/slider/DiscreteSlider.tsx.preview @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js new file mode 100644 index 00000000000000..447ad55c657c8d --- /dev/null +++ b/docs/data/base/components/slider/DiscreteSliderMarks.js @@ -0,0 +1,131 @@ +import * as React from 'react'; +import { styled, alpha, Box } from '@mui/system'; +import SliderUnstyled from '@mui/base/SliderUnstyled'; + +const StyledSlider = styled(SliderUnstyled)( + ({ theme }) => ` + color: ${theme.palette.mode === 'light' ? '#1976d2' : '#90caf9'}; + height: 4px; + width: 100%; + padding: 13px 0; + display: inline-block; + position: relative; + cursor: pointer; + touch-action: none; + -webkit-tap-highlight-color: transparent; + opacity: 0.75; + + &:hover { + opacity: 1; + } + + & .MuiSlider-rail { + display: block; + position: absolute; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: currentColor; + opacity: 0.38; + } + + & .MuiSlider-track { + display: block; + position: absolute; + height: 4px; + border-radius: 2px; + background-color: currentColor; + } + + & .MuiSlider-thumb { + position: absolute; + width: 14px; + height: 14px; + margin-left: -6px; + margin-top: -5px; + box-sizing: border-box; + border-radius: 50%; + outline: 0; + border: 2px solid currentColor; + background-color: #fff; + } + + & .MuiSlider-mark { + position: absolute; + width: 4px; + height: 4px; + border-radius: 2px; + background-color: currentColor; + top: 50%; + opacity: 0.7; + transform: translateX(-50%); + } + + & .MuiSlider-markActive { + background-color: #fff; + } + + & .MuiSlider-markLabel { + font-family: IBM Plex Sans; + font-size: 14px; + position: absolute; + white-space: nowrap; + top: 30px; + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + } + + :hover, + &.Mui-focusVisible { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.Mui-active { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } +`, +); + +const marks = [ + { + value: 0, + label: '0°C', + }, + { + value: 20, + label: '20°C', + }, + { + value: 37, + label: '37°C', + }, + { + value: 100, + label: '100°C', + }, +]; + +function valuetext(value) { + return `${value}°C`; +} + +export default function DiscreteSliderMarks() { + return ( + + + + ); +} diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx new file mode 100644 index 00000000000000..daa0234cf5c442 --- /dev/null +++ b/docs/data/base/components/slider/DiscreteSliderMarks.tsx @@ -0,0 +1,131 @@ +import * as React from 'react'; +import { styled, alpha, Box } from '@mui/system'; +import SliderUnstyled from '@mui/base/SliderUnstyled'; + +const StyledSlider = styled(SliderUnstyled)( + ({ theme }) => ` + color: ${theme.palette.mode === 'light' ? '#1976d2' : '#90caf9'}; + height: 4px; + width: 100%; + padding: 13px 0; + display: inline-block; + position: relative; + cursor: pointer; + touch-action: none; + -webkit-tap-highlight-color: transparent; + opacity: 0.75; + + &:hover { + opacity: 1; + } + + & .MuiSlider-rail { + display: block; + position: absolute; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: currentColor; + opacity: 0.38; + } + + & .MuiSlider-track { + display: block; + position: absolute; + height: 4px; + border-radius: 2px; + background-color: currentColor; + } + + & .MuiSlider-thumb { + position: absolute; + width: 14px; + height: 14px; + margin-left: -6px; + margin-top: -5px; + box-sizing: border-box; + border-radius: 50%; + outline: 0; + border: 2px solid currentColor; + background-color: #fff; + } + + & .MuiSlider-mark { + position: absolute; + width: 4px; + height: 4px; + border-radius: 2px; + background-color: currentColor; + top: 50%; + opacity: 0.7; + transform: translateX(-50%); + } + + & .MuiSlider-markActive { + background-color: #fff; + } + + & .MuiSlider-markLabel { + font-family: IBM Plex Sans; + font-size: 14px; + position: absolute; + white-space: nowrap; + top: 30px; + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + } + + :hover, + &.Mui-focusVisible { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.Mui-active { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } +`, +); + +const marks = [ + { + value: 0, + label: '0°C', + }, + { + value: 20, + label: '20°C', + }, + { + value: 37, + label: '37°C', + }, + { + value: 100, + label: '100°C', + }, +]; + +function valuetext(value: number) { + return `${value}°C`; +} + +export default function DiscreteSliderMarks() { + return ( + + + + ); +} diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx.preview b/docs/data/base/components/slider/DiscreteSliderMarks.tsx.preview new file mode 100644 index 00000000000000..3ac66f37d33610 --- /dev/null +++ b/docs/data/base/components/slider/DiscreteSliderMarks.tsx.preview @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js new file mode 100644 index 00000000000000..62cf5241b1f34d --- /dev/null +++ b/docs/data/base/components/slider/DiscreteSliderValues.js @@ -0,0 +1,132 @@ +import * as React from 'react'; +import { styled, alpha, Box } from '@mui/system'; +import SliderUnstyled from '@mui/base/SliderUnstyled'; + +const StyledSlider = styled(SliderUnstyled)( + ({ theme }) => ` + color: ${theme.palette.mode === 'light' ? '#1976d2' : '#90caf9'}; + height: 4px; + width: 100%; + padding: 13px 0; + display: inline-block; + position: relative; + cursor: pointer; + touch-action: none; + -webkit-tap-highlight-color: transparent; + opacity: 0.75; + + &:hover { + opacity: 1; + } + + & .MuiSlider-rail { + display: block; + position: absolute; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: currentColor; + opacity: 0.38; + } + + & .MuiSlider-track { + display: block; + position: absolute; + height: 4px; + border-radius: 2px; + background-color: currentColor; + } + + & .MuiSlider-thumb { + position: absolute; + width: 14px; + height: 14px; + margin-left: -6px; + margin-top: -5px; + box-sizing: border-box; + border-radius: 50%; + outline: 0; + border: 2px solid currentColor; + background-color: #fff; + } + + & .MuiSlider-mark { + position: absolute; + width: 4px; + height: 4px; + border-radius: 2px; + background-color: currentColor; + top: 50%; + opacity: 0.7; + transform: translateX(-50%); + } + + & .MuiSlider-markActive { + background-color: #fff; + } + + & .MuiSlider-markLabel { + font-family: IBM Plex Sans; + font-size: 14px; + position: absolute; + white-space: nowrap; + top: 30px; + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + } + + :hover, + &.Mui-focusVisible { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.Mui-active { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } +`, +); + +const marks = [ + { + value: 0, + label: '0°C', + }, + { + value: 20, + label: '20°C', + }, + { + value: 37, + label: '37°C', + }, + { + value: 100, + label: '100°C', + }, +]; + +function valuetext(value) { + return `${value}°C`; +} + +export default function DiscreteSliderValues() { + return ( + + + + ); +} diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx new file mode 100644 index 00000000000000..59b3a5fd751230 --- /dev/null +++ b/docs/data/base/components/slider/DiscreteSliderValues.tsx @@ -0,0 +1,132 @@ +import * as React from 'react'; +import { styled, alpha, Box } from '@mui/system'; +import SliderUnstyled from '@mui/base/SliderUnstyled'; + +const StyledSlider = styled(SliderUnstyled)( + ({ theme }) => ` + color: ${theme.palette.mode === 'light' ? '#1976d2' : '#90caf9'}; + height: 4px; + width: 100%; + padding: 13px 0; + display: inline-block; + position: relative; + cursor: pointer; + touch-action: none; + -webkit-tap-highlight-color: transparent; + opacity: 0.75; + + &:hover { + opacity: 1; + } + + & .MuiSlider-rail { + display: block; + position: absolute; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: currentColor; + opacity: 0.38; + } + + & .MuiSlider-track { + display: block; + position: absolute; + height: 4px; + border-radius: 2px; + background-color: currentColor; + } + + & .MuiSlider-thumb { + position: absolute; + width: 14px; + height: 14px; + margin-left: -6px; + margin-top: -5px; + box-sizing: border-box; + border-radius: 50%; + outline: 0; + border: 2px solid currentColor; + background-color: #fff; + } + + & .MuiSlider-mark { + position: absolute; + width: 4px; + height: 4px; + border-radius: 2px; + background-color: currentColor; + top: 50%; + opacity: 0.7; + transform: translateX(-50%); + } + + & .MuiSlider-markActive { + background-color: #fff; + } + + & .MuiSlider-markLabel { + font-family: IBM Plex Sans; + font-size: 14px; + position: absolute; + white-space: nowrap; + top: 30px; + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + } + + :hover, + &.Mui-focusVisible { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.Mui-active { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } +`, +); + +const marks = [ + { + value: 0, + label: '0°C', + }, + { + value: 20, + label: '20°C', + }, + { + value: 37, + label: '37°C', + }, + { + value: 100, + label: '100°C', + }, +]; + +function valuetext(value: number) { + return `${value}°C`; +} + +export default function DiscreteSliderValues() { + return ( + + + + ); +} diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx.preview b/docs/data/base/components/slider/DiscreteSliderValues.tsx.preview new file mode 100644 index 00000000000000..a8de136dfa93ca --- /dev/null +++ b/docs/data/base/components/slider/DiscreteSliderValues.tsx.preview @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/docs/data/base/components/slider/RangeSlider.js b/docs/data/base/components/slider/RangeSlider.js new file mode 100644 index 00000000000000..664f67268482bb --- /dev/null +++ b/docs/data/base/components/slider/RangeSlider.js @@ -0,0 +1,128 @@ +import * as React from 'react'; +import { styled, alpha, Box } from '@mui/system'; +import SliderUnstyled from '@mui/base/SliderUnstyled'; + +const StyledSlider = styled(SliderUnstyled)( + ({ theme }) => ` + color: ${theme.palette.mode === 'light' ? '#1976d2' : '#90caf9'}; + height: 4px; + width: 100%; + padding: 13px 0; + display: inline-block; + position: relative; + cursor: pointer; + touch-action: none; + -webkit-tap-highlight-color: transparent; + opacity: 0.75; + + &:hover { + opacity: 1; + } + + & .MuiSlider-rail { + display: block; + position: absolute; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: currentColor; + opacity: 0.38; + } + + & .MuiSlider-track { + display: block; + position: absolute; + height: 4px; + border-radius: 2px; + background-color: currentColor; + } + + & .MuiSlider-thumb { + position: absolute; + width: 14px; + height: 14px; + margin-left: -6px; + margin-top: -5px; + box-sizing: border-box; + border-radius: 50%; + outline: 0; + border: 2px solid currentColor; + background-color: #fff; + } + + & .MuiSlider-mark { + position: absolute; + width: 4px; + height: 4px; + border-radius: 2px; + background-color: currentColor; + top: 50%; + opacity: 0.7; + transform: translateX(-50%); + } + + & .MuiSlider-markActive { + background-color: #fff; + } + + & .MuiSlider-valueLabel { + font-family: IBM Plex Sans; + font-size: 14px; + display: block; + position: relative; + top: -1.6em; + text-align: center; + transform: translateX(-50%); + + } + + :hover, + &.Mui-focusVisible { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.Mui-active { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } +`, +); + +function valuetext(value) { + return `${value}°C`; +} + +export default function RangeSlider() { + const [value, setValue] = React.useState([20, 37]); + + const handleChange = (event, newValue) => { + setValue(newValue); + }; + + return ( + + {/* controlled: */} + 'Temperature range'} + getAriaValueText={valuetext} + min={0} + max={100} + /> + {/* uncontrolled: */} + 'Temperature range'} + getAriaValueText={valuetext} + min={0} + max={100} + /> + + ); +} diff --git a/docs/data/base/components/slider/RangeSlider.tsx b/docs/data/base/components/slider/RangeSlider.tsx new file mode 100644 index 00000000000000..3da064815581f7 --- /dev/null +++ b/docs/data/base/components/slider/RangeSlider.tsx @@ -0,0 +1,128 @@ +import * as React from 'react'; +import { styled, alpha, Box } from '@mui/system'; +import SliderUnstyled from '@mui/base/SliderUnstyled'; + +const StyledSlider = styled(SliderUnstyled)( + ({ theme }) => ` + color: ${theme.palette.mode === 'light' ? '#1976d2' : '#90caf9'}; + height: 4px; + width: 100%; + padding: 13px 0; + display: inline-block; + position: relative; + cursor: pointer; + touch-action: none; + -webkit-tap-highlight-color: transparent; + opacity: 0.75; + + &:hover { + opacity: 1; + } + + & .MuiSlider-rail { + display: block; + position: absolute; + width: 100%; + height: 4px; + border-radius: 2px; + background-color: currentColor; + opacity: 0.38; + } + + & .MuiSlider-track { + display: block; + position: absolute; + height: 4px; + border-radius: 2px; + background-color: currentColor; + } + + & .MuiSlider-thumb { + position: absolute; + width: 14px; + height: 14px; + margin-left: -6px; + margin-top: -5px; + box-sizing: border-box; + border-radius: 50%; + outline: 0; + border: 2px solid currentColor; + background-color: #fff; + } + + & .MuiSlider-mark { + position: absolute; + width: 4px; + height: 4px; + border-radius: 2px; + background-color: currentColor; + top: 50%; + opacity: 0.7; + transform: translateX(-50%); + } + + & .MuiSlider-markActive { + background-color: #fff; + } + + & .MuiSlider-valueLabel { + font-family: IBM Plex Sans; + font-size: 14px; + display: block; + position: relative; + top: -1.6em; + text-align: center; + transform: translateX(-50%); + + } + + :hover, + &.Mui-focusVisible { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.Mui-active { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } +`, +); + +function valuetext(value: number) { + return `${value}°C`; +} + +export default function RangeSlider() { + const [value, setValue] = React.useState([20, 37]); + + const handleChange = (event: Event, newValue: number | number[]) => { + setValue(newValue as number[]); + }; + + return ( + + {/* controlled: */} + 'Temperature range'} + getAriaValueText={valuetext} + min={0} + max={100} + /> + {/* uncontrolled: */} + 'Temperature range'} + getAriaValueText={valuetext} + min={0} + max={100} + /> + + ); +} diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md index 739c2ec1f9856b..aa38dfcdcc870c 100644 --- a/docs/data/base/components/slider/slider.md +++ b/docs/data/base/components/slider/slider.md @@ -11,9 +11,8 @@ packageName: '@mui/base'

Sliders allow users to make selections from a range of values.

-Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. - -- 📦 [5.6 kB gzipped](https://bundlephobia.com/package/@mui/base@latest) +Sliders show a range of values along a bar, from which users may select a single value. +They are ideal for adjusting settings such as volume, brightness, or applying image filters. {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} @@ -21,4 +20,41 @@ Sliders reflect a range of values along a bar, from which users may select a sin import SliderUnstyled from '@mui/base/SliderUnstyled'; ``` -{{"demo": "UnstyledSlider.js"}} +{{"demo": "UnstyledSlider.js", "defaultCodeOpen": false}} + +## Discrete sliders + +Discrete sliders snap to the nearest step. +You can generate a mark for each step with `marks={true}`. + +{{"demo": "DiscreteSlider.js"}} + +### Custom marks + +You can have custom marks by providing a rich array to the `marks` prop. + +{{"demo": "DiscreteSliderMarks.js"}} + +### Restricted values + +You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. + +{{"demo": "DiscreteSliderValues.js"}} + +## Range slider + +The slider can be used to set the start and end of a range by supplying an array of values to the `value` or `defaultValue` prop. + +{{"demo": "RangeSlider.js"}} + +## Accessibility + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider) + +The component handles most of the work necessary to make it accessible. +However, you need to make sure that: + +- 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. + This is not required if the value matches the semantics of the label. + You can change the name with the `getAriaValueText` or `aria-valuetext` prop. From ebe6c3b9dc8eaf295d9173c23ba521794b2fc2a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Mon, 21 Mar 2022 11:44:58 +0100 Subject: [PATCH 3/8] Apply suggestions from code review Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> --- docs/data/base/components/slider/slider.md | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md index aa38dfcdcc870c..7760d95f49fe2c 100644 --- a/docs/data/base/components/slider/slider.md +++ b/docs/data/base/components/slider/slider.md @@ -9,10 +9,10 @@ packageName: '@mui/base' # Slider -

Sliders allow users to make selections from a range of values.

+

The 'SliderUnstyled' component lets users make selections from a range of values along a horizontal or vertical bar.

-Sliders show a range of values along a bar, from which users may select a single value. -They are ideal for adjusting settings such as volume, brightness, or applying image filters. +Users may need to select a single value or a range of values on a slider. +They are ideal for interface controls that benefit from a visual representation of adjustable content, such as volume or brightness settings, or for applying image filters. {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} @@ -24,26 +24,29 @@ import SliderUnstyled from '@mui/base/SliderUnstyled'; ## Discrete sliders -Discrete sliders snap to the nearest step. -You can generate a mark for each step with `marks={true}`. +The most basic slider is _continuous_, which means it does not have pre-defined (_discrete_) values for the user to select from. +This is suitable for situations in which an approximate value is good enough for the user, such as brightness or volume. + +But if your users need more precise options, you can create a discrete slider that snaps to pre-defined stops along the bar. +To generate a mark for each stop, use `marks={true}`: {{"demo": "DiscreteSlider.js"}} ### Custom marks -You can have custom marks by providing a rich array to the `marks` prop. +You can create custom marks by providing a rich array to the `marks` prop: {{"demo": "DiscreteSliderMarks.js"}} ### Restricted values -You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. +If the user should only be able to select from the values provided with the `marks` prop, add `step={null}` to disable all other options: {{"demo": "DiscreteSliderValues.js"}} ## Range slider -The slider can be used to set the start and end of a range by supplying an array of values to the `value` or `defaultValue` prop. +To let users set the start and end of a range on a slider, provide an array of values to the `value` or `defaultValue` prop: {{"demo": "RangeSlider.js"}} From ad896065cdbfe052709ea9d6bce3dbcb38c1c186 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Mon, 21 Mar 2022 12:57:21 +0100 Subject: [PATCH 4/8] Update demos' styles --- .../base/components/slider/DiscreteSlider.js | 53 ++++++++-------- .../base/components/slider/DiscreteSlider.tsx | 53 ++++++++-------- .../components/slider/DiscreteSliderMarks.js | 60 ++++++++++--------- .../components/slider/DiscreteSliderMarks.tsx | 60 ++++++++++--------- .../components/slider/DiscreteSliderValues.js | 60 ++++++++++--------- .../slider/DiscreteSliderValues.tsx | 60 ++++++++++--------- .../base/components/slider/RangeSlider.js | 51 +++++++++------- .../base/components/slider/RangeSlider.tsx | 51 +++++++++------- .../base/components/slider/UnstyledSlider.js | 20 +++++-- .../base/components/slider/UnstyledSlider.tsx | 20 +++++-- .../slider/UnstyledSlider.tsx.preview | 3 +- docs/data/base/components/slider/slider.md | 2 +- 12 files changed, 273 insertions(+), 220 deletions(-) diff --git a/docs/data/base/components/slider/DiscreteSlider.js b/docs/data/base/components/slider/DiscreteSlider.js index fab834715dcde5..9c623702899cc8 100644 --- a/docs/data/base/components/slider/DiscreteSlider.js +++ b/docs/data/base/components/slider/DiscreteSlider.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; -import SliderUnstyled from '@mui/base/SliderUnstyled'; +import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; const StyledSlider = styled(SliderUnstyled)( ({ theme }) => ` @@ -19,7 +19,13 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 1; } - & .MuiSlider-rail { + &.${sliderUnstyledClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.grey[400]}; + } + + & .${sliderUnstyledClasses.rail} { display: block; position: absolute; width: 100%; @@ -29,7 +35,7 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 0.38; } - & .MuiSlider-track { + & .${sliderUnstyledClasses.track} { display: block; position: absolute; height: 4px; @@ -37,7 +43,7 @@ const StyledSlider = styled(SliderUnstyled)( background-color: currentColor; } - & .MuiSlider-thumb { + & .${sliderUnstyledClasses.thumb} { position: absolute; width: 14px; height: 14px; @@ -48,9 +54,24 @@ const StyledSlider = styled(SliderUnstyled)( outline: 0; border: 2px solid currentColor; background-color: #fff; + + :hover, + &.${sliderUnstyledClasses.focusVisible} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.${sliderUnstyledClasses.active} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } } - & .MuiSlider-mark { + & .${sliderUnstyledClasses.mark} { position: absolute; width: 4px; height: 4px; @@ -61,11 +82,11 @@ const StyledSlider = styled(SliderUnstyled)( transform: translateX(-50%); } - & .MuiSlider-markActive { + & .${sliderUnstyledClasses.markActive} { background-color: #fff; } - & .MuiSlider-valueLabel { + & .${sliderUnstyledClasses.valueLabel} { font-family: IBM Plex Sans; font-size: 14px; display: block; @@ -73,24 +94,8 @@ const StyledSlider = styled(SliderUnstyled)( top: -1.6em; text-align: center; transform: translateX(-50%); - - } - - :hover, - &.Mui-focusVisible { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.15, - )}; - } - - &.Mui-active { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.3, - )}; } -`, + `, ); function valuetext(value) { diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx index ec17d6b9758013..0430a9266c09d1 100644 --- a/docs/data/base/components/slider/DiscreteSlider.tsx +++ b/docs/data/base/components/slider/DiscreteSlider.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; -import SliderUnstyled from '@mui/base/SliderUnstyled'; +import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; const StyledSlider = styled(SliderUnstyled)( ({ theme }) => ` @@ -19,7 +19,13 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 1; } - & .MuiSlider-rail { + &.${sliderUnstyledClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.grey[400]}; + } + + & .${sliderUnstyledClasses.rail} { display: block; position: absolute; width: 100%; @@ -29,7 +35,7 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 0.38; } - & .MuiSlider-track { + & .${sliderUnstyledClasses.track} { display: block; position: absolute; height: 4px; @@ -37,7 +43,7 @@ const StyledSlider = styled(SliderUnstyled)( background-color: currentColor; } - & .MuiSlider-thumb { + & .${sliderUnstyledClasses.thumb} { position: absolute; width: 14px; height: 14px; @@ -48,9 +54,24 @@ const StyledSlider = styled(SliderUnstyled)( outline: 0; border: 2px solid currentColor; background-color: #fff; + + :hover, + &.${sliderUnstyledClasses.focusVisible} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.${sliderUnstyledClasses.active} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } } - & .MuiSlider-mark { + & .${sliderUnstyledClasses.mark} { position: absolute; width: 4px; height: 4px; @@ -61,11 +82,11 @@ const StyledSlider = styled(SliderUnstyled)( transform: translateX(-50%); } - & .MuiSlider-markActive { + & .${sliderUnstyledClasses.markActive} { background-color: #fff; } - & .MuiSlider-valueLabel { + & .${sliderUnstyledClasses.valueLabel} { font-family: IBM Plex Sans; font-size: 14px; display: block; @@ -73,24 +94,8 @@ const StyledSlider = styled(SliderUnstyled)( top: -1.6em; text-align: center; transform: translateX(-50%); - - } - - :hover, - &.Mui-focusVisible { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.15, - )}; - } - - &.Mui-active { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.3, - )}; } -`, + `, ); function valuetext(value: number) { diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js index 447ad55c657c8d..4f59131402a5c1 100644 --- a/docs/data/base/components/slider/DiscreteSliderMarks.js +++ b/docs/data/base/components/slider/DiscreteSliderMarks.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; -import SliderUnstyled from '@mui/base/SliderUnstyled'; +import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; const StyledSlider = styled(SliderUnstyled)( ({ theme }) => ` @@ -19,7 +19,13 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 1; } - & .MuiSlider-rail { + &.${sliderUnstyledClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.grey[400]}; + } + + & .${sliderUnstyledClasses.rail} { display: block; position: absolute; width: 100%; @@ -29,7 +35,7 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 0.38; } - & .MuiSlider-track { + & .${sliderUnstyledClasses.track} { display: block; position: absolute; height: 4px; @@ -37,7 +43,7 @@ const StyledSlider = styled(SliderUnstyled)( background-color: currentColor; } - & .MuiSlider-thumb { + & .${sliderUnstyledClasses.thumb} { position: absolute; width: 14px; height: 14px; @@ -48,9 +54,24 @@ const StyledSlider = styled(SliderUnstyled)( outline: 0; border: 2px solid currentColor; background-color: #fff; + + :hover, + &.${sliderUnstyledClasses.focusVisible} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.${sliderUnstyledClasses.active} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } } - & .MuiSlider-mark { + & .${sliderUnstyledClasses.mark} { position: absolute; width: 4px; height: 4px; @@ -61,36 +82,19 @@ const StyledSlider = styled(SliderUnstyled)( transform: translateX(-50%); } - & .MuiSlider-markActive { + & .${sliderUnstyledClasses.markActive} { background-color: #fff; } - & .MuiSlider-markLabel { + & .${sliderUnstyledClasses.valueLabel} { font-family: IBM Plex Sans; font-size: 14px; - position: absolute; - white-space: nowrap; - top: 30px; - -webkit-transform: translateX(-50%); - -moz-transform: translateX(-50%); - -ms-transform: translateX(-50%); + display: block; + position: relative; + top: -1.6em; + text-align: center; transform: translateX(-50%); } - - :hover, - &.Mui-focusVisible { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.15, - )}; - } - - &.Mui-active { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.3, - )}; - } `, ); diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx index daa0234cf5c442..a5b89fdf6df0cf 100644 --- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx +++ b/docs/data/base/components/slider/DiscreteSliderMarks.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; -import SliderUnstyled from '@mui/base/SliderUnstyled'; +import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; const StyledSlider = styled(SliderUnstyled)( ({ theme }) => ` @@ -19,7 +19,13 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 1; } - & .MuiSlider-rail { + &.${sliderUnstyledClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.grey[400]}; + } + + & .${sliderUnstyledClasses.rail} { display: block; position: absolute; width: 100%; @@ -29,7 +35,7 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 0.38; } - & .MuiSlider-track { + & .${sliderUnstyledClasses.track} { display: block; position: absolute; height: 4px; @@ -37,7 +43,7 @@ const StyledSlider = styled(SliderUnstyled)( background-color: currentColor; } - & .MuiSlider-thumb { + & .${sliderUnstyledClasses.thumb} { position: absolute; width: 14px; height: 14px; @@ -48,9 +54,24 @@ const StyledSlider = styled(SliderUnstyled)( outline: 0; border: 2px solid currentColor; background-color: #fff; + + :hover, + &.${sliderUnstyledClasses.focusVisible} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.${sliderUnstyledClasses.active} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } } - & .MuiSlider-mark { + & .${sliderUnstyledClasses.mark} { position: absolute; width: 4px; height: 4px; @@ -61,36 +82,19 @@ const StyledSlider = styled(SliderUnstyled)( transform: translateX(-50%); } - & .MuiSlider-markActive { + & .${sliderUnstyledClasses.markActive} { background-color: #fff; } - & .MuiSlider-markLabel { + & .${sliderUnstyledClasses.valueLabel} { font-family: IBM Plex Sans; font-size: 14px; - position: absolute; - white-space: nowrap; - top: 30px; - -webkit-transform: translateX(-50%); - -moz-transform: translateX(-50%); - -ms-transform: translateX(-50%); + display: block; + position: relative; + top: -1.6em; + text-align: center; transform: translateX(-50%); } - - :hover, - &.Mui-focusVisible { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.15, - )}; - } - - &.Mui-active { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.3, - )}; - } `, ); diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js index 62cf5241b1f34d..689289fb9c679f 100644 --- a/docs/data/base/components/slider/DiscreteSliderValues.js +++ b/docs/data/base/components/slider/DiscreteSliderValues.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; -import SliderUnstyled from '@mui/base/SliderUnstyled'; +import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; const StyledSlider = styled(SliderUnstyled)( ({ theme }) => ` @@ -19,7 +19,13 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 1; } - & .MuiSlider-rail { + &.${sliderUnstyledClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.grey[400]}; + } + + & .${sliderUnstyledClasses.rail} { display: block; position: absolute; width: 100%; @@ -29,7 +35,7 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 0.38; } - & .MuiSlider-track { + & .${sliderUnstyledClasses.track} { display: block; position: absolute; height: 4px; @@ -37,7 +43,7 @@ const StyledSlider = styled(SliderUnstyled)( background-color: currentColor; } - & .MuiSlider-thumb { + & .${sliderUnstyledClasses.thumb} { position: absolute; width: 14px; height: 14px; @@ -48,9 +54,24 @@ const StyledSlider = styled(SliderUnstyled)( outline: 0; border: 2px solid currentColor; background-color: #fff; + + :hover, + &.${sliderUnstyledClasses.focusVisible} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.${sliderUnstyledClasses.active} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } } - & .MuiSlider-mark { + & .${sliderUnstyledClasses.mark} { position: absolute; width: 4px; height: 4px; @@ -61,36 +82,19 @@ const StyledSlider = styled(SliderUnstyled)( transform: translateX(-50%); } - & .MuiSlider-markActive { + & .${sliderUnstyledClasses.markActive} { background-color: #fff; } - & .MuiSlider-markLabel { + & .${sliderUnstyledClasses.valueLabel} { font-family: IBM Plex Sans; font-size: 14px; - position: absolute; - white-space: nowrap; - top: 30px; - -webkit-transform: translateX(-50%); - -moz-transform: translateX(-50%); - -ms-transform: translateX(-50%); + display: block; + position: relative; + top: -1.6em; + text-align: center; transform: translateX(-50%); } - - :hover, - &.Mui-focusVisible { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.15, - )}; - } - - &.Mui-active { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.3, - )}; - } `, ); diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx index 59b3a5fd751230..7902849e2f7012 100644 --- a/docs/data/base/components/slider/DiscreteSliderValues.tsx +++ b/docs/data/base/components/slider/DiscreteSliderValues.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; -import SliderUnstyled from '@mui/base/SliderUnstyled'; +import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; const StyledSlider = styled(SliderUnstyled)( ({ theme }) => ` @@ -19,7 +19,13 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 1; } - & .MuiSlider-rail { + &.${sliderUnstyledClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.grey[400]}; + } + + & .${sliderUnstyledClasses.rail} { display: block; position: absolute; width: 100%; @@ -29,7 +35,7 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 0.38; } - & .MuiSlider-track { + & .${sliderUnstyledClasses.track} { display: block; position: absolute; height: 4px; @@ -37,7 +43,7 @@ const StyledSlider = styled(SliderUnstyled)( background-color: currentColor; } - & .MuiSlider-thumb { + & .${sliderUnstyledClasses.thumb} { position: absolute; width: 14px; height: 14px; @@ -48,9 +54,24 @@ const StyledSlider = styled(SliderUnstyled)( outline: 0; border: 2px solid currentColor; background-color: #fff; + + :hover, + &.${sliderUnstyledClasses.focusVisible} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.${sliderUnstyledClasses.active} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } } - & .MuiSlider-mark { + & .${sliderUnstyledClasses.mark} { position: absolute; width: 4px; height: 4px; @@ -61,36 +82,19 @@ const StyledSlider = styled(SliderUnstyled)( transform: translateX(-50%); } - & .MuiSlider-markActive { + & .${sliderUnstyledClasses.markActive} { background-color: #fff; } - & .MuiSlider-markLabel { + & .${sliderUnstyledClasses.valueLabel} { font-family: IBM Plex Sans; font-size: 14px; - position: absolute; - white-space: nowrap; - top: 30px; - -webkit-transform: translateX(-50%); - -moz-transform: translateX(-50%); - -ms-transform: translateX(-50%); + display: block; + position: relative; + top: -1.6em; + text-align: center; transform: translateX(-50%); } - - :hover, - &.Mui-focusVisible { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.15, - )}; - } - - &.Mui-active { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.3, - )}; - } `, ); diff --git a/docs/data/base/components/slider/RangeSlider.js b/docs/data/base/components/slider/RangeSlider.js index 664f67268482bb..d178529bb1aa35 100644 --- a/docs/data/base/components/slider/RangeSlider.js +++ b/docs/data/base/components/slider/RangeSlider.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; -import SliderUnstyled from '@mui/base/SliderUnstyled'; +import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; const StyledSlider = styled(SliderUnstyled)( ({ theme }) => ` @@ -19,7 +19,13 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 1; } - & .MuiSlider-rail { + &.${sliderUnstyledClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.grey[400]}; + } + + & .${sliderUnstyledClasses.rail} { display: block; position: absolute; width: 100%; @@ -29,7 +35,7 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 0.38; } - & .MuiSlider-track { + & .${sliderUnstyledClasses.track} { display: block; position: absolute; height: 4px; @@ -37,7 +43,7 @@ const StyledSlider = styled(SliderUnstyled)( background-color: currentColor; } - & .MuiSlider-thumb { + & .${sliderUnstyledClasses.thumb} { position: absolute; width: 14px; height: 14px; @@ -48,9 +54,24 @@ const StyledSlider = styled(SliderUnstyled)( outline: 0; border: 2px solid currentColor; background-color: #fff; + + :hover, + &.${sliderUnstyledClasses.focusVisible} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.${sliderUnstyledClasses.active} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } } - & .MuiSlider-mark { + & .${sliderUnstyledClasses.mark} { position: absolute; width: 4px; height: 4px; @@ -61,11 +82,11 @@ const StyledSlider = styled(SliderUnstyled)( transform: translateX(-50%); } - & .MuiSlider-markActive { + & .${sliderUnstyledClasses.markActive} { background-color: #fff; } - & .MuiSlider-valueLabel { + & .${sliderUnstyledClasses.valueLabel} { font-family: IBM Plex Sans; font-size: 14px; display: block; @@ -73,22 +94,6 @@ const StyledSlider = styled(SliderUnstyled)( top: -1.6em; text-align: center; transform: translateX(-50%); - - } - - :hover, - &.Mui-focusVisible { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.15, - )}; - } - - &.Mui-active { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.3, - )}; } `, ); diff --git a/docs/data/base/components/slider/RangeSlider.tsx b/docs/data/base/components/slider/RangeSlider.tsx index 3da064815581f7..f83e3e648f6c14 100644 --- a/docs/data/base/components/slider/RangeSlider.tsx +++ b/docs/data/base/components/slider/RangeSlider.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; -import SliderUnstyled from '@mui/base/SliderUnstyled'; +import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; const StyledSlider = styled(SliderUnstyled)( ({ theme }) => ` @@ -19,7 +19,13 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 1; } - & .MuiSlider-rail { + &.${sliderUnstyledClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.grey[400]}; + } + + & .${sliderUnstyledClasses.rail} { display: block; position: absolute; width: 100%; @@ -29,7 +35,7 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 0.38; } - & .MuiSlider-track { + & .${sliderUnstyledClasses.track} { display: block; position: absolute; height: 4px; @@ -37,7 +43,7 @@ const StyledSlider = styled(SliderUnstyled)( background-color: currentColor; } - & .MuiSlider-thumb { + & .${sliderUnstyledClasses.thumb} { position: absolute; width: 14px; height: 14px; @@ -48,9 +54,24 @@ const StyledSlider = styled(SliderUnstyled)( outline: 0; border: 2px solid currentColor; background-color: #fff; + + :hover, + &.${sliderUnstyledClasses.focusVisible} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.15, + )}; + } + + &.${sliderUnstyledClasses.active} { + box-shadow: 0 0 0 0.25rem ${alpha( + theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', + 0.3, + )}; + } } - & .MuiSlider-mark { + & .${sliderUnstyledClasses.mark} { position: absolute; width: 4px; height: 4px; @@ -61,11 +82,11 @@ const StyledSlider = styled(SliderUnstyled)( transform: translateX(-50%); } - & .MuiSlider-markActive { + & .${sliderUnstyledClasses.markActive} { background-color: #fff; } - & .MuiSlider-valueLabel { + & .${sliderUnstyledClasses.valueLabel} { font-family: IBM Plex Sans; font-size: 14px; display: block; @@ -73,22 +94,6 @@ const StyledSlider = styled(SliderUnstyled)( top: -1.6em; text-align: center; transform: translateX(-50%); - - } - - :hover, - &.Mui-focusVisible { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.15, - )}; - } - - &.Mui-active { - box-shadow: 0 0 0 0.25rem ${alpha( - theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', - 0.3, - )}; } `, ); diff --git a/docs/data/base/components/slider/UnstyledSlider.js b/docs/data/base/components/slider/UnstyledSlider.js index 2a06fdb9568aac..76cc0e8ff05e46 100644 --- a/docs/data/base/components/slider/UnstyledSlider.js +++ b/docs/data/base/components/slider/UnstyledSlider.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; -import SliderUnstyled from '@mui/base/SliderUnstyled'; +import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; const StyledSlider = styled(SliderUnstyled)( ({ theme }) => ` @@ -14,11 +14,18 @@ const StyledSlider = styled(SliderUnstyled)( touch-action: none; -webkit-tap-highlight-color: transparent; opacity: 0.75; + &:hover { opacity: 1; } - & .MuiSlider-rail { + &.${sliderUnstyledClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.grey[400]}; + } + + & .${sliderUnstyledClasses.rail} { display: block; position: absolute; width: 100%; @@ -28,7 +35,7 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 0.38; } - & .MuiSlider-track { + & .${sliderUnstyledClasses.track} { display: block; position: absolute; height: 4px; @@ -36,7 +43,7 @@ const StyledSlider = styled(SliderUnstyled)( background-color: currentColor; } - & .MuiSlider-thumb { + & .${sliderUnstyledClasses.thumb} { position: absolute; width: 14px; height: 14px; @@ -49,14 +56,14 @@ const StyledSlider = styled(SliderUnstyled)( background-color: #fff; :hover, - &.Mui-focusVisible { + &.${sliderUnstyledClasses.focusVisible} { box-shadow: 0 0 0 0.25rem ${alpha( theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', 0.15, )}; } - &.Mui-active { + &.${sliderUnstyledClasses.active} { box-shadow: 0 0 0 0.25rem ${alpha( theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', 0.3, @@ -70,6 +77,7 @@ export default function UnstyledSlider() { return ( + ); } diff --git a/docs/data/base/components/slider/UnstyledSlider.tsx b/docs/data/base/components/slider/UnstyledSlider.tsx index 2a06fdb9568aac..76cc0e8ff05e46 100644 --- a/docs/data/base/components/slider/UnstyledSlider.tsx +++ b/docs/data/base/components/slider/UnstyledSlider.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled, alpha, Box } from '@mui/system'; -import SliderUnstyled from '@mui/base/SliderUnstyled'; +import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; const StyledSlider = styled(SliderUnstyled)( ({ theme }) => ` @@ -14,11 +14,18 @@ const StyledSlider = styled(SliderUnstyled)( touch-action: none; -webkit-tap-highlight-color: transparent; opacity: 0.75; + &:hover { opacity: 1; } - & .MuiSlider-rail { + &.${sliderUnstyledClasses.disabled} { + pointer-events: none; + cursor: default; + color: ${theme.palette.grey[400]}; + } + + & .${sliderUnstyledClasses.rail} { display: block; position: absolute; width: 100%; @@ -28,7 +35,7 @@ const StyledSlider = styled(SliderUnstyled)( opacity: 0.38; } - & .MuiSlider-track { + & .${sliderUnstyledClasses.track} { display: block; position: absolute; height: 4px; @@ -36,7 +43,7 @@ const StyledSlider = styled(SliderUnstyled)( background-color: currentColor; } - & .MuiSlider-thumb { + & .${sliderUnstyledClasses.thumb} { position: absolute; width: 14px; height: 14px; @@ -49,14 +56,14 @@ const StyledSlider = styled(SliderUnstyled)( background-color: #fff; :hover, - &.Mui-focusVisible { + &.${sliderUnstyledClasses.focusVisible} { box-shadow: 0 0 0 0.25rem ${alpha( theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', 0.15, )}; } - &.Mui-active { + &.${sliderUnstyledClasses.active} { box-shadow: 0 0 0 0.25rem ${alpha( theme.palette.mode === 'light' ? '#1976d2' : '#90caf9', 0.3, @@ -70,6 +77,7 @@ export default function UnstyledSlider() { return ( + ); } diff --git a/docs/data/base/components/slider/UnstyledSlider.tsx.preview b/docs/data/base/components/slider/UnstyledSlider.tsx.preview index 9280bf10ade5d0..d326ff94b11db6 100644 --- a/docs/data/base/components/slider/UnstyledSlider.tsx.preview +++ b/docs/data/base/components/slider/UnstyledSlider.tsx.preview @@ -1 +1,2 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md index 7760d95f49fe2c..ac011d62403321 100644 --- a/docs/data/base/components/slider/slider.md +++ b/docs/data/base/components/slider/slider.md @@ -9,7 +9,7 @@ packageName: '@mui/base' # Slider -

The 'SliderUnstyled' component lets users make selections from a range of values along a horizontal or vertical bar.

+

The SliderUnstyled component lets users make selections from a range of values along a horizontal or vertical bar.

Users may need to select a single value or a range of values on a slider. They are ideal for interface controls that benefit from a visual representation of adjustable content, such as volume or brightness settings, or for applying image filters. From 3dde137e7ba86e5ba32e15fec7817134fc68f62f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Tue, 22 Mar 2022 12:59:59 +0100 Subject: [PATCH 5/8] Fix generated links --- docs/pages/api-docs/slider-unstyled.js | 23 ---- docs/pages/api-docs/slider-unstyled.json | 122 ------------------ docs/pages/base/api/slider-unstyled.json | 2 +- docs/scripts/buildApiUtils.ts | 1 + docs/src/pagesApi.js | 1 - .../src/SliderUnstyled/SliderUnstyled.d.ts | 5 +- 6 files changed, 5 insertions(+), 149 deletions(-) delete mode 100644 docs/pages/api-docs/slider-unstyled.js delete mode 100644 docs/pages/api-docs/slider-unstyled.json diff --git a/docs/pages/api-docs/slider-unstyled.js b/docs/pages/api-docs/slider-unstyled.js deleted file mode 100644 index 5c255387f8e51f..00000000000000 --- a/docs/pages/api-docs/slider-unstyled.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './slider-unstyled.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context( - 'docs/translations/api-docs/slider-unstyled', - false, - /slider-unstyled.*.json$/, - ); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/api-docs/slider-unstyled.json b/docs/pages/api-docs/slider-unstyled.json deleted file mode 100644 index aefda45f07d4c3..00000000000000 --- a/docs/pages/api-docs/slider-unstyled.json +++ /dev/null @@ -1,122 +0,0 @@ -{ - "props": { - "aria-label": { "type": { "name": "custom", "description": "string" } }, - "aria-labelledby": { "type": { "name": "string" } }, - "aria-valuetext": { "type": { "name": "custom", "description": "string" } }, - "classes": { "type": { "name": "object" } }, - "component": { "type": { "name": "elementType" } }, - "components": { - "type": { - "name": "shape", - "description": "{ Input?: elementType, Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }" - }, - "default": "{}" - }, - "componentsProps": { - "type": { - "name": "shape", - "description": "{ input?: object, mark?: object, markLabel?: object, rail?: object, root?: object, thumb?: object, track?: object, valueLabel?: { className?: string, components?: { Root?: elementType }, style?: object, value?: Array<number>
| number, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }" - }, - "default": "{}" - }, - "defaultValue": { - "type": { "name": "union", "description": "Array<number>
| number" } - }, - "disabled": { "type": { "name": "bool" } }, - "disableSwap": { "type": { "name": "bool" } }, - "getAriaLabel": { "type": { "name": "func" } }, - "getAriaValueText": { "type": { "name": "func" } }, - "isRtl": { "type": { "name": "bool" } }, - "marks": { - "type": { - "name": "union", - "description": "Array<{ label?: node, value: number }>
| bool" - }, - "default": "false" - }, - "max": { "type": { "name": "number" }, "default": "100" }, - "min": { "type": { "name": "number" }, "default": "0" }, - "name": { "type": { "name": "string" } }, - "onChange": { "type": { "name": "func" } }, - "onChangeCommitted": { "type": { "name": "func" } }, - "orientation": { - "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" }, - "default": "'horizontal'" - }, - "scale": { "type": { "name": "func" }, "default": "(x) => x" }, - "step": { "type": { "name": "number" }, "default": "1" }, - "tabIndex": { "type": { "name": "number" } }, - "track": { - "type": { - "name": "enum", - "description": "'inverted'
| 'normal'
| false" - }, - "default": "'normal'" - }, - "value": { - "type": { "name": "union", "description": "Array<number>
| number" } - }, - "valueLabelDisplay": { - "type": { "name": "enum", "description": "'auto'
| 'off'
| 'on'" }, - "default": "'off'" - }, - "valueLabelFormat": { - "type": { "name": "union", "description": "func
| string" }, - "default": "(x) => x" - } - }, - "name": "SliderUnstyled", - "styles": { - "classes": [ - "root", - "marked", - "vertical", - "disabled", - "dragging", - "rail", - "track", - "trackFalse", - "trackInverted", - "thumb", - "active", - "focusVisible", - "valueLabel", - "valueLabelOpen", - "valueLabelCircle", - "valueLabelLabel", - "mark", - "markActive", - "markLabel", - "markLabelActive" - ], - "globalClasses": { - "root": "MuiSlider-root", - "marked": "MuiSlider-marked", - "vertical": "MuiSlider-vertical", - "disabled": "Mui-disabled", - "dragging": "MuiSlider-dragging", - "rail": "MuiSlider-rail", - "track": "MuiSlider-track", - "trackFalse": "MuiSlider-trackFalse", - "trackInverted": "MuiSlider-trackInverted", - "thumb": "MuiSlider-thumb", - "active": "Mui-active", - "focusVisible": "Mui-focusVisible", - "valueLabel": "MuiSlider-valueLabel", - "valueLabelOpen": "MuiSlider-valueLabelOpen", - "valueLabelCircle": "MuiSlider-valueLabelCircle", - "valueLabelLabel": "MuiSlider-valueLabelLabel", - "mark": "MuiSlider-mark", - "markActive": "MuiSlider-markActive", - "markLabel": "MuiSlider-markLabel", - "markLabelActive": "MuiSlider-markLabelActive" - }, - "name": null - }, - "spread": true, - "forwardsRefTo": "HTMLSpanElement", - "filename": "/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js", - "inheritance": null, - "demos": "", - "cssComponent": false -} diff --git a/docs/pages/base/api/slider-unstyled.json b/docs/pages/base/api/slider-unstyled.json index d865d6e7eb5dba..b4fc11ac6b9c36 100644 --- a/docs/pages/base/api/slider-unstyled.json +++ b/docs/pages/base/api/slider-unstyled.json @@ -117,6 +117,6 @@ "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/scripts/buildApiUtils.ts b/docs/scripts/buildApiUtils.ts index 6a086995b5357a..519a1b5b44983e 100644 --- a/docs/scripts/buildApiUtils.ts +++ b/docs/scripts/buildApiUtils.ts @@ -107,6 +107,7 @@ const migratedBaseComponents = [ 'ButtonUnstyled', 'MenuUnstyled', 'MenuItemUnstyled', + 'SliderUnstyled', ]; export const getGenericComponentInfo = (filename: string): ComponentInfo => { diff --git a/docs/src/pagesApi.js b/docs/src/pagesApi.js index e7ed22b11a6a5b..b37371e87920b5 100644 --- a/docs/src/pagesApi.js +++ b/docs/src/pagesApi.js @@ -118,7 +118,6 @@ module.exports = [ { pathname: '/api-docs/skeleton' }, { pathname: '/api-docs/slide' }, { pathname: '/api-docs/slider' }, - { pathname: '/api-docs/slider-unstyled' }, { pathname: '/api-docs/snackbar' }, { pathname: '/api-docs/snackbar-content' }, { pathname: '/api-docs/speed-dial' }, diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.d.ts index ffd3d1bd17fe06..3634b809e1260e 100644 --- a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.d.ts @@ -5,11 +5,12 @@ import { SliderUnstyledTypeMap } from './SliderUnstyledProps'; * * Demos: * - * - [Slider](https://mui.com/components/slider/) + * - [Slider](https://mui.com/base/react-slider/) + * - [Slider](https://mui.com/material/react-slider/) * * API: * - * - [SliderUnstyled API](https://mui.com/api/slider-unstyled/) + * - [SliderUnstyled API](https://mui.com/base/api/slider-unstyled/) */ declare const SliderUnstyled: OverridableComponent; From 8ef06ac8e902b12cccc63dda3f177c6b70200089 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Tue, 22 Mar 2022 14:28:40 +0100 Subject: [PATCH 6/8] Correct mark labels' styles --- docs/data/base/components/slider/DiscreteSliderMarks.js | 8 ++++++++ docs/data/base/components/slider/DiscreteSliderMarks.tsx | 8 ++++++++ docs/data/base/components/slider/DiscreteSliderValues.js | 8 ++++++++ docs/data/base/components/slider/DiscreteSliderValues.tsx | 8 ++++++++ 4 files changed, 32 insertions(+) diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js index 4f59131402a5c1..a0fdb577aa6bd2 100644 --- a/docs/data/base/components/slider/DiscreteSliderMarks.js +++ b/docs/data/base/components/slider/DiscreteSliderMarks.js @@ -95,6 +95,14 @@ const StyledSlider = styled(SliderUnstyled)( text-align: center; transform: translateX(-50%); } + + & .${sliderUnstyledClasses.markLabel} { + font-family: IBM Plex Sans; + font-size: 12px; + position: absolute; + top: 20px; + transform: translateX(-50%); + } `, ); diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx index a5b89fdf6df0cf..d292db8cea19e4 100644 --- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx +++ b/docs/data/base/components/slider/DiscreteSliderMarks.tsx @@ -95,6 +95,14 @@ const StyledSlider = styled(SliderUnstyled)( text-align: center; transform: translateX(-50%); } + + & .${sliderUnstyledClasses.markLabel} { + font-family: IBM Plex Sans; + font-size: 12px; + position: absolute; + top: 20px; + transform: translateX(-50%); + } `, ); diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js index 689289fb9c679f..e3f6becb80febd 100644 --- a/docs/data/base/components/slider/DiscreteSliderValues.js +++ b/docs/data/base/components/slider/DiscreteSliderValues.js @@ -95,6 +95,14 @@ const StyledSlider = styled(SliderUnstyled)( text-align: center; transform: translateX(-50%); } + + & .${sliderUnstyledClasses.markLabel} { + font-family: IBM Plex Sans; + font-size: 12px; + position: absolute; + top: 20px; + transform: translateX(-50%); + } `, ); diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx index 7902849e2f7012..9476a76d353e06 100644 --- a/docs/data/base/components/slider/DiscreteSliderValues.tsx +++ b/docs/data/base/components/slider/DiscreteSliderValues.tsx @@ -95,6 +95,14 @@ const StyledSlider = styled(SliderUnstyled)( text-align: center; transform: translateX(-50%); } + + & .${sliderUnstyledClasses.markLabel} { + font-family: IBM Plex Sans; + font-size: 12px; + position: absolute; + top: 20px; + transform: translateX(-50%); + } `, ); From 47eaff0819809d284621f4b1d0a1132b3c43d77f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Tue, 29 Mar 2022 08:57:48 +0200 Subject: [PATCH 7/8] docs:api --- docs/pages/base/api/slider-unstyled.json | 2 +- packages/mui-base/src/SliderUnstyled/SliderUnstyled.d.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/pages/base/api/slider-unstyled.json b/docs/pages/base/api/slider-unstyled.json index b4fc11ac6b9c36..def83e5e452bb6 100644 --- a/docs/pages/base/api/slider-unstyled.json +++ b/docs/pages/base/api/slider-unstyled.json @@ -117,6 +117,6 @@ "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.d.ts index 3634b809e1260e..76351b512326bc 100644 --- a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.d.ts @@ -6,7 +6,6 @@ import { SliderUnstyledTypeMap } from './SliderUnstyledProps'; * Demos: * * - [Slider](https://mui.com/base/react-slider/) - * - [Slider](https://mui.com/material/react-slider/) * * API: * From 4c7f51049c37ff866023beceaa40633326610637 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Tue, 29 Mar 2022 13:57:37 +0200 Subject: [PATCH 8/8] Fix broken demos --- docs/data/base/components/slider/DiscreteSlider.js | 2 +- docs/data/base/components/slider/DiscreteSlider.tsx | 2 +- docs/data/base/components/slider/DiscreteSliderMarks.js | 2 +- docs/data/base/components/slider/DiscreteSliderMarks.tsx | 2 +- docs/data/base/components/slider/DiscreteSliderValues.js | 2 +- docs/data/base/components/slider/DiscreteSliderValues.tsx | 2 +- docs/data/base/components/slider/RangeSlider.js | 2 +- docs/data/base/components/slider/RangeSlider.tsx | 2 +- docs/data/base/components/slider/UnstyledSlider.js | 2 +- docs/data/base/components/slider/UnstyledSlider.tsx | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/data/base/components/slider/DiscreteSlider.js b/docs/data/base/components/slider/DiscreteSlider.js index 9c623702899cc8..af17c12ef2b790 100644 --- a/docs/data/base/components/slider/DiscreteSlider.js +++ b/docs/data/base/components/slider/DiscreteSlider.js @@ -22,7 +22,7 @@ const StyledSlider = styled(SliderUnstyled)( &.${sliderUnstyledClasses.disabled} { pointer-events: none; cursor: default; - color: ${theme.palette.grey[400]}; + color: #bdbdbd; } & .${sliderUnstyledClasses.rail} { diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx index 0430a9266c09d1..68db5df993f4da 100644 --- a/docs/data/base/components/slider/DiscreteSlider.tsx +++ b/docs/data/base/components/slider/DiscreteSlider.tsx @@ -22,7 +22,7 @@ const StyledSlider = styled(SliderUnstyled)( &.${sliderUnstyledClasses.disabled} { pointer-events: none; cursor: default; - color: ${theme.palette.grey[400]}; + color: #bdbdbd; } & .${sliderUnstyledClasses.rail} { diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js index a0fdb577aa6bd2..302b2286842f97 100644 --- a/docs/data/base/components/slider/DiscreteSliderMarks.js +++ b/docs/data/base/components/slider/DiscreteSliderMarks.js @@ -22,7 +22,7 @@ const StyledSlider = styled(SliderUnstyled)( &.${sliderUnstyledClasses.disabled} { pointer-events: none; cursor: default; - color: ${theme.palette.grey[400]}; + color: #bdbdbd; } & .${sliderUnstyledClasses.rail} { diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx index d292db8cea19e4..78ace0c541d36d 100644 --- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx +++ b/docs/data/base/components/slider/DiscreteSliderMarks.tsx @@ -22,7 +22,7 @@ const StyledSlider = styled(SliderUnstyled)( &.${sliderUnstyledClasses.disabled} { pointer-events: none; cursor: default; - color: ${theme.palette.grey[400]}; + color: #bdbdbd; } & .${sliderUnstyledClasses.rail} { diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js index e3f6becb80febd..a9461452939d1e 100644 --- a/docs/data/base/components/slider/DiscreteSliderValues.js +++ b/docs/data/base/components/slider/DiscreteSliderValues.js @@ -22,7 +22,7 @@ const StyledSlider = styled(SliderUnstyled)( &.${sliderUnstyledClasses.disabled} { pointer-events: none; cursor: default; - color: ${theme.palette.grey[400]}; + color: #bdbdbd; } & .${sliderUnstyledClasses.rail} { diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx index 9476a76d353e06..f8ed812e622e34 100644 --- a/docs/data/base/components/slider/DiscreteSliderValues.tsx +++ b/docs/data/base/components/slider/DiscreteSliderValues.tsx @@ -22,7 +22,7 @@ const StyledSlider = styled(SliderUnstyled)( &.${sliderUnstyledClasses.disabled} { pointer-events: none; cursor: default; - color: ${theme.palette.grey[400]}; + color: #bdbdbd; } & .${sliderUnstyledClasses.rail} { diff --git a/docs/data/base/components/slider/RangeSlider.js b/docs/data/base/components/slider/RangeSlider.js index d178529bb1aa35..c5546c25792d5d 100644 --- a/docs/data/base/components/slider/RangeSlider.js +++ b/docs/data/base/components/slider/RangeSlider.js @@ -22,7 +22,7 @@ const StyledSlider = styled(SliderUnstyled)( &.${sliderUnstyledClasses.disabled} { pointer-events: none; cursor: default; - color: ${theme.palette.grey[400]}; + color: #bdbdbd; } & .${sliderUnstyledClasses.rail} { diff --git a/docs/data/base/components/slider/RangeSlider.tsx b/docs/data/base/components/slider/RangeSlider.tsx index f83e3e648f6c14..bed530a507e46b 100644 --- a/docs/data/base/components/slider/RangeSlider.tsx +++ b/docs/data/base/components/slider/RangeSlider.tsx @@ -22,7 +22,7 @@ const StyledSlider = styled(SliderUnstyled)( &.${sliderUnstyledClasses.disabled} { pointer-events: none; cursor: default; - color: ${theme.palette.grey[400]}; + color: #bdbdbd; } & .${sliderUnstyledClasses.rail} { diff --git a/docs/data/base/components/slider/UnstyledSlider.js b/docs/data/base/components/slider/UnstyledSlider.js index 76cc0e8ff05e46..0290a7115fb868 100644 --- a/docs/data/base/components/slider/UnstyledSlider.js +++ b/docs/data/base/components/slider/UnstyledSlider.js @@ -22,7 +22,7 @@ const StyledSlider = styled(SliderUnstyled)( &.${sliderUnstyledClasses.disabled} { pointer-events: none; cursor: default; - color: ${theme.palette.grey[400]}; + color: #bdbdbd; } & .${sliderUnstyledClasses.rail} { diff --git a/docs/data/base/components/slider/UnstyledSlider.tsx b/docs/data/base/components/slider/UnstyledSlider.tsx index 76cc0e8ff05e46..0290a7115fb868 100644 --- a/docs/data/base/components/slider/UnstyledSlider.tsx +++ b/docs/data/base/components/slider/UnstyledSlider.tsx @@ -22,7 +22,7 @@ const StyledSlider = styled(SliderUnstyled)( &.${sliderUnstyledClasses.disabled} { pointer-events: none; cursor: default; - color: ${theme.palette.grey[400]}; + color: #bdbdbd; } & .${sliderUnstyledClasses.rail} {