From c2d31cc5a68a171548064198c16c34cc64b59995 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 25 Sep 2020 17:15:54 +0200 Subject: [PATCH 001/102] add emotion peer dependencies --- docs/src/modules/utils/helpers.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js index cef69f1acd9a71..7bea9ccffbf6ca 100644 --- a/docs/src/modules/utils/helpers.js +++ b/docs/src/modules/utils/helpers.js @@ -77,6 +77,8 @@ function includePeerDependencies(deps, versions) { Object.assign(deps, { 'react-dom': versions['react-dom'], react: versions.react, + '@emotion/core': versions['@emotion/core'], + '@emotion/styled': versions['@emotion/styled'], }); if ( @@ -140,6 +142,8 @@ function getDependencies(raw, options = {}) { '@material-ui/system': getMuiPackageVersion('system', muiCommitRef), '@material-ui/utils': getMuiPackageVersion('utils', muiCommitRef), '@material-ui/pickers': 'next', + '@emotion/core': 'latest', + '@emotion/styled': 'latest', }; const re = /^import\s'([^']+)'|import\s[\s\S]*?\sfrom\s+'([^']+)/gm; From 5ae933ff68e3c736092102a1efeec89dbb850c97 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 25 Sep 2020 17:57:28 +0200 Subject: [PATCH 002/102] fixed types & tests --- docs/src/modules/utils/helpers.js | 2 +- docs/src/modules/utils/helpers.test.js | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js index 7bea9ccffbf6ca..d4dbb1c7e66eed 100644 --- a/docs/src/modules/utils/helpers.js +++ b/docs/src/modules/utils/helpers.js @@ -44,7 +44,7 @@ function pageToTitleI18n(page, t) { * set of packages that ship their own typings instead of using @types/ namespace * Array because Set([iterable]) is not supported in IE11 */ -const packagesWithBundledTypes = ['date-fns']; +const packagesWithBundledTypes = ['date-fns', '@emotion/core', '@emotion/styled']; /** * WARNING: Always uses `latest` typings. diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js index 42d93b963c1a11..b18c9e45994ed1 100644 --- a/docs/src/modules/utils/helpers.test.js +++ b/docs/src/modules/utils/helpers.test.js @@ -22,6 +22,8 @@ const styles = theme => ({ it('should handle @ dependencies', () => { expect(getDependencies(s1)).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -46,6 +48,8 @@ const suggestions = [ `; expect(getDependencies(source)).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/core': 'next', '@unexisting/thing': 'latest', 'autosuggest-highlight': 'latest', @@ -58,6 +62,8 @@ const suggestions = [ it('should support next dependencies', () => { expect(getDependencies(s1, { reactVersion: 'next' })).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -78,6 +84,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic expect(getDependencies(source)).to.deep.equal({ 'date-fns': 'latest', + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/pickers': 'next', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -88,6 +96,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic it('can collect required @types packages', () => { expect(getDependencies(s1, { codeLanguage: 'TS' })).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -114,6 +124,8 @@ import { expect(getDependencies(source)).to.deep.equal({ 'date-fns': 'latest', + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/core': 'next', '@material-ui/pickers': 'next', react: 'latest', @@ -127,6 +139,8 @@ import lab from '@material-ui/lab'; `; expect(getDependencies(source)).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/core': 'next', '@material-ui/lab': 'next', react: 'latest', @@ -142,6 +156,8 @@ import { useDemoData } from '@material-ui/x-grid-data-generator'; `; expect(getDependencies(source, { codeLanguage: 'TS' })).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/core': 'next', '@material-ui/lab': 'next', '@material-ui/icons': 'next', @@ -170,6 +186,8 @@ import * as Utils from '@material-ui/utils'; ).to.deep.equal({ react: 'latest', 'react-dom': 'latest', + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/core': 'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/core', '@material-ui/icons': From 18b066810678d92bb2ff9b979f06a1ba3393aba6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 25 Sep 2020 18:06:59 +0200 Subject: [PATCH 003/102] prettier --- docs/src/modules/utils/helpers.test.js | 36 +++++++++++++------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js index b18c9e45994ed1..80152e4c1918f4 100644 --- a/docs/src/modules/utils/helpers.test.js +++ b/docs/src/modules/utils/helpers.test.js @@ -22,8 +22,8 @@ const styles = theme => ({ it('should handle @ dependencies', () => { expect(getDependencies(s1)).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -48,8 +48,8 @@ const suggestions = [ `; expect(getDependencies(source)).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/core': 'next', '@unexisting/thing': 'latest', 'autosuggest-highlight': 'latest', @@ -62,8 +62,8 @@ const suggestions = [ it('should support next dependencies', () => { expect(getDependencies(s1, { reactVersion: 'next' })).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -84,8 +84,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic expect(getDependencies(source)).to.deep.equal({ 'date-fns': 'latest', - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/pickers': 'next', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -96,8 +96,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic it('can collect required @types packages', () => { expect(getDependencies(s1, { codeLanguage: 'TS' })).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -124,8 +124,8 @@ import { expect(getDependencies(source)).to.deep.equal({ 'date-fns': 'latest', - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/core': 'next', '@material-ui/pickers': 'next', react: 'latest', @@ -139,8 +139,8 @@ import lab from '@material-ui/lab'; `; expect(getDependencies(source)).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/core': 'next', '@material-ui/lab': 'next', react: 'latest', @@ -156,8 +156,8 @@ import { useDemoData } from '@material-ui/x-grid-data-generator'; `; expect(getDependencies(source, { codeLanguage: 'TS' })).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/core': 'next', '@material-ui/lab': 'next', '@material-ui/icons': 'next', @@ -186,8 +186,8 @@ import * as Utils from '@material-ui/utils'; ).to.deep.equal({ react: 'latest', 'react-dom': 'latest', - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/core': 'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/core', '@material-ui/icons': From cedbe3bb634927059b0bd92b4b80335d75c34266 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 5 Oct 2020 14:42:41 +0200 Subject: [PATCH 004/102] extract components --- .../slider-styled/CustomizedSlider.js | 8 +- .../slider-styled/CustomizedSlider.tsx | 8 +- .../src/SliderStyled/SliderStyled.js | 269 +++++++++--------- .../material-ui-lab/src/SliderStyled/index.js | 1 + .../src/SliderUnstyled/SliderUnstyled.d.ts | 8 +- .../src/SliderUnstyled/SliderUnstyled.js | 29 +- 6 files changed, 184 insertions(+), 139 deletions(-) diff --git a/docs/src/pages/components/slider-styled/CustomizedSlider.js b/docs/src/pages/components/slider-styled/CustomizedSlider.js index fb5d5e8bf343f8..9433eba1ed74e8 100644 --- a/docs/src/pages/components/slider-styled/CustomizedSlider.js +++ b/docs/src/pages/components/slider-styled/CustomizedSlider.js @@ -1,8 +1,8 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; -import Slider from '@material-ui/lab/SliderStyled'; -import styled from '@emotion/styled'; +import Slider, { SliderThumb } from '@material-ui/lab/SliderStyled'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Tooltip from '@material-ui/core/Tooltip'; @@ -160,11 +160,11 @@ const AirbnbSlider = styled(Slider)({ function AirbnbThumbComponent(props) { return ( - + - + ); } diff --git a/docs/src/pages/components/slider-styled/CustomizedSlider.tsx b/docs/src/pages/components/slider-styled/CustomizedSlider.tsx index 814e696d5807aa..af89dbb1b985d8 100644 --- a/docs/src/pages/components/slider-styled/CustomizedSlider.tsx +++ b/docs/src/pages/components/slider-styled/CustomizedSlider.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; -import Slider from '@material-ui/lab/SliderStyled'; -import styled from '@emotion/styled'; +import Slider, { SliderThumb } from '@material-ui/lab/SliderStyled'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Tooltip from '@material-ui/core/Tooltip'; @@ -172,11 +172,11 @@ const AirbnbSlider = styled(Slider)({ function AirbnbThumbComponent(props: any) { return ( - + - + ); } diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js index 432be8fdfa3141..0ee5136857cf4e 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js @@ -48,7 +48,7 @@ const overridesResolver = (props, styles, name) => { return styleOverrides; }; -const SliderRoot = experimentalStyled( +export const SliderRoot = experimentalStyled( 'span', {}, { muiName: 'MuiSlider', overridesResolver }, @@ -94,144 +94,150 @@ const SliderRoot = experimentalStyled( marginRight: 20, }), }), - '& .MuiSlider-rail': { - display: 'block', +})); + +export const SliderRail = experimentalStyled('span')((props) => ({ + display: 'block', + position: 'absolute', + width: '100%', + height: 2, + borderRadius: 1, + backgroundColor: 'currentColor', + opacity: 0.38, + ...(props.styleProps.orientation === 'vertical' && { + height: '100%', + width: 2, + }), + ...(props.styleProps.track === 'inverted' && { + opacity: 1, + }), +})); + +export const SliderTrack = experimentalStyled('span')((props) => ({ + display: 'block', + position: 'absolute', + height: 2, + borderRadius: 1, + backgroundColor: 'currentColor', + ...(props.styleProps.orientation === 'vertical' && { + width: 2, + }), + ...(props.styleProps.track === false && { + display: 'none', + }), + ...(props.styleProps.track === 'inverted' && { + backgroundColor: + // Same logic as the LinearProgress track color + props.theme.palette.mode === 'light' + ? lighten(props.theme.palette.primary.main, 0.62) + : darken(props.theme.palette.primary.main, 0.5), + }), +})); + +export const SliderThumb = experimentalStyled('span')((props) => ({ + position: 'absolute', + width: 12, + height: 12, + marginLeft: -6, + marginTop: -5, + boxSizing: 'border-box', + borderRadius: '50%', + outline: 0, + backgroundColor: 'currentColor', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + transition: props.theme.transitions.create(['box-shadow'], { + duration: props.theme.transitions.duration.shortest, + }), + '::after': { position: 'absolute', - width: '100%', - height: 2, - borderRadius: 1, - backgroundColor: 'currentColor', - opacity: 0.38, - ...(props.styleProps.orientation === 'vertical' && { - height: '100%', - width: 2, - }), - ...(props.styleProps.track === 'inverted' && { - opacity: 1, - }), + content: '""', + borderRadius: '50%', + // reach 42px hit target (2 * 15 + thumb diameter) + left: -15, + top: -15, + right: -15, + bottom: -15, }, - '& .MuiSlider-track': { - display: 'block', - position: 'absolute', - height: 2, - borderRadius: 1, - backgroundColor: 'currentColor', - ...(props.styleProps.orientation === 'vertical' && { - width: 2, - }), - ...(props.styleProps.track === false && { - display: 'none', - }), - ...(props.styleProps.track === 'inverted' && { - backgroundColor: - // Same logic as the LinearProgress track color - props.theme.palette.mode === 'light' - ? lighten(props.theme.palette.primary.main, 0.62) - : darken(props.theme.palette.primary.main, 0.5), - }), + ':hover, &.Mui-focusVisible': { + boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.primary.main, 0.16)}`, + '@media (hover: none)': { + boxShadow: 'none', + }, }, - '& .MuiSlider-thumb': { - position: 'absolute', - width: 12, - height: 12, - marginLeft: -6, - marginTop: -5, - boxSizing: 'border-box', - borderRadius: '50%', - outline: 0, - backgroundColor: 'currentColor', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - transition: props.theme.transitions.create(['box-shadow'], { - duration: props.theme.transitions.duration.shortest, - }), - '::after': { - position: 'absolute', - content: '""', - borderRadius: '50%', - // reach 42px hit target (2 * 15 + thumb diameter) - left: -15, - top: -15, - right: -15, - bottom: -15, + '&.Mui-active': { + boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.primary.main, 0.16)}`, + }, + '&.Mui-disabled': { + width: 8, + height: 8, + marginLeft: -4, + marginTop: -3, + ':hover': { + boxShadow: 'none', }, - ':hover, &.Mui-focusVisible': { - boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.primary.main, 0.16)}`, - '@media (hover: none)': { - boxShadow: 'none', - }, + }, + ...(props.styleProps.orientation === 'vertical' && { + marginLeft: -5, + marginBottom: -6, + }), + ...(props.styleProps.orientation === 'vertical' && { + '&.Mui-disabled': { + marginLeft: -3, + marginBottom: -4, }, - '&.Mui-active': { - boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.primary.main, 0.16)}`, + }), + ...(props.styleProps.color === 'secondary' && { + ':hover': { + boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`, }, - '&.Mui-disabled': { - width: 8, - height: 8, - marginLeft: -4, - marginTop: -3, - ':hover': { - boxShadow: 'none', - }, + '&.Mui-focusVisible': { + boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`, }, - ...(props.styleProps.orientation === 'vertical' && { - marginLeft: -5, - marginBottom: -6, - }), - ...(props.styleProps.orientation === 'vertical' && { - '&.Mui-disabled': { - marginLeft: -3, - marginBottom: -4, - }, - }), - ...(props.styleProps.color === 'secondary' && { - ':hover': { - boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`, - }, - '&.Mui-focusVisible': { - boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`, - }, - '&.Mui-active': { - boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.secondary.main, 0.16)}`, - }, - }), - }, - '& .MuiSlider-valueLabel': { - // IE 11 centering bug, to remove from the customization demos once no longer supported - left: 'calc(-50% - 4px)', - }, - '& .MuiSlider-mark': { - position: 'absolute', - width: 2, - height: 2, - borderRadius: 1, - backgroundColor: 'currentColor', - '&.MuiSlider-markActive': { - backgroundColor: props.theme.palette.background.paper, - opacity: 0.8, + '&.Mui-active': { + boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.secondary.main, 0.16)}`, }, + }), +})); + +export const SliderValueLabel = experimentalStyled(ValueLabelStyled)({ + // IE 11 centering bug, to remove from the customization demos once no longer supported + left: 'calc(-50% - 4px)', +}); + +export const SliderMark = experimentalStyled('span')((props) => ({ + position: 'absolute', + width: 2, + height: 2, + borderRadius: 1, + backgroundColor: 'currentColor', + '&.MuiSlider-markActive': { + backgroundColor: props.theme.palette.background.paper, + opacity: 0.8, }, - '& .MuiSlider-markLabel': { - ...props.theme.typography.body2, - color: props.theme.palette.text.secondary, - position: 'absolute', - top: 26, - transform: 'translateX(-50%)', - whiteSpace: 'nowrap', +})); + +export const SliderMarkLabel = experimentalStyled('span')((props) => ({ + ...props.theme.typography.body2, + color: props.theme.palette.text.secondary, + position: 'absolute', + top: 26, + transform: 'translateX(-50%)', + whiteSpace: 'nowrap', + ...(props.styleProps.orientation === 'vertical' && { + top: 'auto', + left: 26, + transform: 'translateY(50%)', + }), + '@media (pointer: coarse)': { + top: 40, ...(props.styleProps.orientation === 'vertical' && { - top: 'auto', - left: 26, - transform: 'translateY(50%)', + left: 31, }), - '@media (pointer: coarse)': { - top: 40, - ...(props.styleProps.orientation === 'vertical' && { - left: 31, - }), - }, - '&.MuiSlider-markLabelActive': { - color: props.theme.palette.text.primary, - }, + }, + '&.MuiSlider-markLabelActive': { + color: props.theme.palette.text.primary, }, })); @@ -290,7 +296,12 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { {...other} components={{ Root: SliderRoot, - ValueLabel: ValueLabelStyled, + Rail: SliderRail, + Track: SliderTrack, + Thumb: SliderThumb, + ValueLabel: SliderValueLabel, + Mark: SliderMark, + MarkLabel: SliderMarkLabel, ...components, }} ref={ref} diff --git a/packages/material-ui-lab/src/SliderStyled/index.js b/packages/material-ui-lab/src/SliderStyled/index.js index 1df58e6268e679..444df65729b43f 100644 --- a/packages/material-ui-lab/src/SliderStyled/index.js +++ b/packages/material-ui-lab/src/SliderStyled/index.js @@ -1 +1,2 @@ export { default } from './SliderStyled'; +export * from './SliderStyled'; diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts index 9ed5f484a09ca7..3d1154456d0c76 100644 --- a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.d.ts @@ -51,26 +51,32 @@ export interface SliderTypeMap

{ */ componentsProps?: { root?: { - styleProps?: Omit['props'], 'components' | 'componentsProps'>; as: React.ElementType; + styleProps?: Omit['props'], 'components' | 'componentsProps'>; }; track?: { as?: React.ElementType; + styleProps?: Omit['props'], 'components' | 'componentsProps'>; }; rail?: { as?: React.ElementType; + styleProps?: Omit['props'], 'components' | 'componentsProps'>; }; thumb?: { as?: React.ElementType; + styleProps?: Omit['props'], 'components' | 'componentsProps'>; }; mark?: { as?: React.ElementType; + styleProps?: Omit['props'], 'components' | 'componentsProps'>; }; markLabel?: { as?: React.ElementType; + styleProps?: Omit['props'], 'components' | 'componentsProps'>; }; valueLabel?: { as?: React.ElementType; + styleProps?: Omit['props'], 'components' | 'componentsProps'>; }; }; /** diff --git a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js index 983f72e0702875..51d047caad1f4e 100644 --- a/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-lab/src/SliderUnstyled/SliderUnstyled.js @@ -625,9 +625,20 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { {...other} className={clsx(utilityClasses.root, rootProps.className, className)} > - + @@ -656,6 +667,10 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { Date: Thu, 29 Oct 2020 14:15:11 +0100 Subject: [PATCH 005/102] init --- CHANGELOG.md | 2 +- docs/pages/api-docs/slider-styled.js | 15 - docs/pages/api-docs/slider-styled.md | 62 - docs/pages/api-docs/slider-unstyled.md | 4 - docs/pages/api-docs/slider.md | 65 +- docs/pages/components/slider-styled.js | 28 - docs/pages/performance/slider-emotion.js | 4 +- docs/src/pages.js | 1 - .../slider-styled/ContinuousSlider.js | 42 - .../slider-styled/ContinuousSlider.tsx | 45 - .../slider-styled/CustomizedSlider.js | 210 ---- .../slider-styled/CustomizedSlider.tsx | 209 ---- .../slider-styled/DiscreteSlider.js | 42 - .../slider-styled/DiscreteSlider.tsx | 42 - .../slider-styled/DiscreteSliderLabel.js | 45 - .../slider-styled/DiscreteSliderLabel.tsx | 45 - .../slider-styled/DiscreteSliderMarks.js | 45 - .../slider-styled/DiscreteSliderMarks.tsx | 45 - .../slider-styled/DiscreteSliderSteps.js | 28 - .../slider-styled/DiscreteSliderSteps.tsx | 28 - .../slider-styled/DiscreteSliderValues.js | 50 - .../slider-styled/DiscreteSliderValues.tsx | 50 - .../components/slider-styled/InputSlider.js | 67 -- .../components/slider-styled/InputSlider.tsx | 72 -- .../slider-styled/NonLinearSlider.js | 52 - .../slider-styled/NonLinearSlider.tsx | 55 - .../components/slider-styled/RangeSlider.js | 31 - .../components/slider-styled/RangeSlider.tsx | 34 - .../slider-styled/TrackFalseSlider.js | 62 - .../slider-styled/TrackFalseSlider.tsx | 62 - .../slider-styled/TrackInvertedSlider.js | 62 - .../slider-styled/TrackInvertedSlider.tsx | 62 - .../slider-styled/VerticalSlider.js | 59 - .../slider-styled/VerticalSlider.tsx | 59 - .../slider-styled/slider-styled-de.md | 113 -- .../slider-styled/slider-styled-es.md | 113 -- .../slider-styled/slider-styled-fr.md | 113 -- .../slider-styled/slider-styled-ja.md | 113 -- .../slider-styled/slider-styled-pt.md | 113 -- .../slider-styled/slider-styled-ru.md | 113 -- .../slider-styled/slider-styled-zh.md | 113 -- .../components/slider-styled/slider-styled.md | 119 -- .../components/slider/ContinuousSlider.js | 13 +- .../components/slider/ContinuousSlider.tsx | 13 +- .../components/slider/CustomizedSlider.js | 115 +- .../components/slider/CustomizedSlider.tsx | 120 +- .../pages/components/slider/DiscreteSlider.js | 14 +- .../components/slider/DiscreteSlider.tsx | 14 +- .../components/slider/DiscreteSliderLabel.js | 17 +- .../components/slider/DiscreteSliderLabel.tsx | 19 +- .../components/slider/DiscreteSliderMarks.js | 17 +- .../components/slider/DiscreteSliderMarks.tsx | 19 +- .../components/slider/DiscreteSliderSteps.js | 14 +- .../components/slider/DiscreteSliderSteps.tsx | 14 +- .../components/slider/DiscreteSliderValues.js | 14 +- .../slider/DiscreteSliderValues.tsx | 14 +- .../pages/components/slider/InputSlider.js | 22 +- .../pages/components/slider/InputSlider.tsx | 22 +- .../components/slider/NonLinearSlider.js | 14 +- .../components/slider/NonLinearSlider.tsx | 14 +- .../pages/components/slider/RangeSlider.js | 13 +- .../pages/components/slider/RangeSlider.tsx | 13 +- .../components/slider/TrackFalseSlider.js | 24 +- .../components/slider/TrackFalseSlider.tsx | 24 +- .../components/slider/TrackInvertedSlider.js | 24 +- .../components/slider/TrackInvertedSlider.tsx | 24 +- .../UnstyledSlider.js | 0 .../UnstyledSlider.tsx | 0 .../pages/components/slider/VerticalSlider.js | 14 +- .../components/slider/VerticalSlider.tsx | 14 +- docs/src/pages/components/slider/slider.md | 4 + .../guides/interoperability/EmotionCSS.js | 2 +- .../guides/interoperability/EmotionCSS.tsx | 2 +- .../interoperability/StyledComponents.js | 2 +- .../interoperability/StyledComponents.tsx | 2 +- .../interoperability/StyledComponentsDeep.js | 2 +- .../interoperability/StyledComponentsDeep.tsx | 2 +- .../interoperability/StyledComponentsTheme.js | 2 +- .../StyledComponentsTheme.tsx | 2 +- .../interoperability/interoperability.md | 24 +- docs/translations/translations.json | 1 - .../src/App.js | 2 +- packages/material-ui-lab/package.json | 1 - .../src/SliderStyled/SliderStyled.d.ts | 51 - .../src/SliderStyled/SliderStyled.js | 483 -------- .../src/SliderStyled/SliderStyled.spec.tsx | 11 - .../src/SliderStyled/SliderStyled.test.js | 806 ------------- .../src/SliderStyled/ValueLabelStyled.js | 76 -- .../src/SliderStyled/index.d.ts | 2 - .../material-ui-lab/src/SliderStyled/index.js | 1 - packages/material-ui-lab/src/index.d.ts | 3 - packages/material-ui-lab/src/index.js | 3 - .../src/SliderUnstyled/SliderUnstyled.d.ts | 4 - packages/material-ui/package.json | 1 + packages/material-ui/src/Slider/Slider.d.ts | 235 +--- packages/material-ui/src/Slider/Slider.js | 1053 ++++------------- packages/material-ui/src/Slider/ValueLabel.js | 85 +- packages/material-ui/src/index.js | 2 + scripts/generateProptypes.ts | 29 +- 99 files changed, 589 insertions(+), 5637 deletions(-) delete mode 100644 docs/pages/api-docs/slider-styled.js delete mode 100644 docs/pages/api-docs/slider-styled.md delete mode 100644 docs/pages/components/slider-styled.js delete mode 100644 docs/src/pages/components/slider-styled/ContinuousSlider.js delete mode 100644 docs/src/pages/components/slider-styled/ContinuousSlider.tsx delete mode 100644 docs/src/pages/components/slider-styled/CustomizedSlider.js delete mode 100644 docs/src/pages/components/slider-styled/CustomizedSlider.tsx delete mode 100644 docs/src/pages/components/slider-styled/DiscreteSlider.js delete mode 100644 docs/src/pages/components/slider-styled/DiscreteSlider.tsx delete mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderLabel.js delete mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderLabel.tsx delete mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderMarks.js delete mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderMarks.tsx delete mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderSteps.js delete mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderSteps.tsx delete mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderValues.js delete mode 100644 docs/src/pages/components/slider-styled/DiscreteSliderValues.tsx delete mode 100644 docs/src/pages/components/slider-styled/InputSlider.js delete mode 100644 docs/src/pages/components/slider-styled/InputSlider.tsx delete mode 100644 docs/src/pages/components/slider-styled/NonLinearSlider.js delete mode 100644 docs/src/pages/components/slider-styled/NonLinearSlider.tsx delete mode 100644 docs/src/pages/components/slider-styled/RangeSlider.js delete mode 100644 docs/src/pages/components/slider-styled/RangeSlider.tsx delete mode 100644 docs/src/pages/components/slider-styled/TrackFalseSlider.js delete mode 100644 docs/src/pages/components/slider-styled/TrackFalseSlider.tsx delete mode 100644 docs/src/pages/components/slider-styled/TrackInvertedSlider.js delete mode 100644 docs/src/pages/components/slider-styled/TrackInvertedSlider.tsx delete mode 100644 docs/src/pages/components/slider-styled/VerticalSlider.js delete mode 100644 docs/src/pages/components/slider-styled/VerticalSlider.tsx delete mode 100644 docs/src/pages/components/slider-styled/slider-styled-de.md delete mode 100644 docs/src/pages/components/slider-styled/slider-styled-es.md delete mode 100644 docs/src/pages/components/slider-styled/slider-styled-fr.md delete mode 100644 docs/src/pages/components/slider-styled/slider-styled-ja.md delete mode 100644 docs/src/pages/components/slider-styled/slider-styled-pt.md delete mode 100644 docs/src/pages/components/slider-styled/slider-styled-ru.md delete mode 100644 docs/src/pages/components/slider-styled/slider-styled-zh.md delete mode 100644 docs/src/pages/components/slider-styled/slider-styled.md rename docs/src/pages/components/{slider-styled => slider}/UnstyledSlider.js (100%) rename docs/src/pages/components/{slider-styled => slider}/UnstyledSlider.tsx (100%) delete mode 100644 packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts delete mode 100644 packages/material-ui-lab/src/SliderStyled/SliderStyled.js delete mode 100644 packages/material-ui-lab/src/SliderStyled/SliderStyled.spec.tsx delete mode 100644 packages/material-ui-lab/src/SliderStyled/SliderStyled.test.js delete mode 100644 packages/material-ui-lab/src/SliderStyled/ValueLabelStyled.js delete mode 100644 packages/material-ui-lab/src/SliderStyled/index.d.ts delete mode 100644 packages/material-ui-lab/src/SliderStyled/index.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 13efb66dffaefa..199ca3f2fa7109 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,7 +25,7 @@ Here are some highlights ✨: - It moves from support on Box only to any core component (starting with the slider). ```jsx - import Slider from '@material-ui/lab/SliderStyled'; + import Slider from '@material-ui/core/Slider'; // Set the primary color and a vertical margin of 16px on desktop. ; diff --git a/docs/pages/api-docs/slider-styled.js b/docs/pages/api-docs/slider-styled.js deleted file mode 100644 index 65bdb411b49815..00000000000000 --- a/docs/pages/api-docs/slider-styled.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; - -const pageFilename = 'api/slider-styled'; -const requireRaw = require.context('!raw-loader!./', false, /\/slider-styled\.md$/); - -export default function Page({ docs }) { - return ; -} - -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md deleted file mode 100644 index d4e100bc90b44e..00000000000000 --- a/docs/pages/api-docs/slider-styled.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -filename: /packages/material-ui-lab/src/SliderStyled/SliderStyled.js ---- - - - -# SliderStyled API - -

The API documentation of the SliderStyled React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import SliderStyled from '@material-ui/lab/SliderStyled'; -// or -import { SliderStyled } from '@material-ui/lab'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - - - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| aria-label | string | | The label of the slider. | -| aria-labelledby | string | | The id of the element containing a label for the slider. | -| aria-valuetext | string | | A string value that provides a user-friendly name for the current value of the slider. | -| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | -| components | { Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType } | {} | The components used for each slot inside the Slider. Either a string to use a HTML element or a component. | -| componentsProps | object | | The props used for each slot inside the Slider. | -| defaultValue | Array<number>
| number | | The default element value. Use when the component is not controlled. | -| disabled | bool | | If `true`, the slider is disabled. | -| getAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.

**Signature:**
`function(index: number) => string`
*index:* The thumb label's index to format. | -| getAriaValueText | func | | Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.

**Signature:**
`function(value: number, index: number) => string`
*value:* The thumb label's value to format.
*index:* The thumb label's index to format. | -| isRtl | bool | | Indicates whether the theme context has rtl direction. It is set automatically. | -| marks | Array<{ label?: node, value: number }>
| bool | | Marks indicate predetermined values to which the user can move the slider. If `true` the marks are spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys. | -| max | number | | The maximum allowed value of the slider. Should not be equal to min. | -| min | number | | The minimum allowed value of the slider. Should not be equal to max. | -| name | string | | Name attribute of the hidden `input` element. | -| onChange | func | | Callback function that is fired when the slider's value changed.

**Signature:**
`function(event: object, value: number \| number[]) => void`
*event:* The event source of the callback. **Warning**: This is a generic event not a change event.
*value:* The new value. | -| onChangeCommitted | func | | Callback function that is fired when the `mouseup` is triggered.

**Signature:**
`function(event: object, value: number \| number[]) => void`
*event:* The event source of the callback. **Warning**: This is a generic event not a change event.
*value:* The new value. | -| orientation | 'horizontal'
| 'vertical' | | The slider orientation. | -| scale | func | | A transformation function, to change the scale of the slider. | -| step | number | | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. | -| sx | object | | The system prop that allows defining system overrides as well as additional CSS styles. | -| track | 'inverted'
| 'normal'
| false | | The track presentation:
- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. | -| value | Array<number>
| number | | The value of the slider. For ranged sliders, provide an array with two values. | -| valueLabelDisplay | 'auto'
| 'off'
| 'on' | | Controls when the value label is displayed:
- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. | -| valueLabelFormat | func
| string | | The format function the value label's value.
When a function is provided, it should have the following signature:
- {number} value The value label's value to format - {number} index The value label's index to format | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## Demos - -- [Slider Styled](/components/slider-styled/) - diff --git a/docs/pages/api-docs/slider-unstyled.md b/docs/pages/api-docs/slider-unstyled.md index 1aa5fe1e92ff93..10cc1607673b88 100644 --- a/docs/pages/api-docs/slider-unstyled.md +++ b/docs/pages/api-docs/slider-unstyled.md @@ -56,7 +56,3 @@ The `ref` is forwarded to the root element. Any other props supplied will be provided to the root element (native element). -## Demos - -- [Slider Styled](/components/slider-styled/) - diff --git a/docs/pages/api-docs/slider.md b/docs/pages/api-docs/slider.md index 6e029129be5ee9..7615f546b01ff2 100644 --- a/docs/pages/api-docs/slider.md +++ b/docs/pages/api-docs/slider.md @@ -20,9 +20,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi -## Component name -The `MuiSlider` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. ## Props @@ -31,66 +29,33 @@ The `MuiSlider` name can be used for providing [default props](/customization/gl | aria-label | string | | The label of the slider. | | aria-labelledby | string | | The id of the element containing a label for the slider. | | aria-valuetext | string | | A string value that provides a user-friendly name for the current value of the slider. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'span' | The component used for the root node. Either a string to use a HTML element or a component. | +| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | +| components | { Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType } | {} | The components used for each slot inside the Slider. Either a string to use a HTML element or a component. | +| componentsProps | object | | The props used for each slot inside the Slider. | | defaultValue | Array<number>
| number | | The default element value. Use when the component is not controlled. | -| disabled | bool | false | If `true`, the slider is disabled. | +| disabled | bool | | If `true`, the slider is disabled. | | getAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.

**Signature:**
`function(index: number) => string`
*index:* The thumb label's index to format. | | getAriaValueText | func | | Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.

**Signature:**
`function(value: number, index: number) => string`
*value:* The thumb label's value to format.
*index:* The thumb label's index to format. | -| marks | Array<{ label?: node, value: number }>
| bool | false | Marks indicate predetermined values to which the user can move the slider. If `true` the marks are spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys. | -| max | number | 100 | The maximum allowed value of the slider. Should not be equal to min. | -| min | number | 0 | The minimum allowed value of the slider. Should not be equal to max. | +| isRtl | bool | | Indicates whether the theme context has rtl direction. It is set automatically. | +| marks | Array<{ label?: node, value: number }>
| bool | | Marks indicate predetermined values to which the user can move the slider. If `true` the marks are spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys. | +| max | number | | The maximum allowed value of the slider. Should not be equal to min. | +| min | number | | The minimum allowed value of the slider. Should not be equal to max. | | name | string | | Name attribute of the hidden `input` element. | | onChange | func | | Callback function that is fired when the slider's value changed.

**Signature:**
`function(event: object, value: number \| number[]) => void`
*event:* The event source of the callback. **Warning**: This is a generic event not a change event.
*value:* The new value. | | onChangeCommitted | func | | Callback function that is fired when the `mouseup` is triggered.

**Signature:**
`function(event: object, value: number \| number[]) => void`
*event:* The event source of the callback. **Warning**: This is a generic event not a change event.
*value:* The new value. | -| orientation | 'horizontal'
| 'vertical' | 'horizontal' | The slider orientation. | -| scale | func | (x) => x | A transformation function, to change the scale of the slider. | -| step | number | 1 | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. | -| ThumbComponent | elementType | 'span' | The component used to display the value label. | -| track | 'inverted'
| 'normal'
| false | 'normal' | The track presentation:
- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. | +| orientation | 'horizontal'
| 'vertical' | | The slider orientation. | +| scale | func | | A transformation function, to change the scale of the slider. | +| step | number | | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. | +| sx | object | | The system prop that allows defining system overrides as well as additional CSS styles. | +| track | 'inverted'
| 'normal'
| false | | The track presentation:
- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. | | value | Array<number>
| number | | The value of the slider. For ranged sliders, provide an array with two values. | -| ValueLabelComponent | elementType | ValueLabel | The value label component. | -| valueLabelDisplay | 'auto'
| 'off'
| 'on' | 'off' | Controls when the value label is displayed:
- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. | -| valueLabelFormat | func
| string | (x) => x | The format function the value label's value.
When a function is provided, it should have the following signature:
- {number} value The value label's value to format - {number} index The value label's index to format | +| valueLabelDisplay | 'auto'
| 'off'
| 'on' | | Controls when the value label is displayed:
- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. | +| valueLabelFormat | func
| string | | The format function the value label's value.
When a function is provided, it should have the following signature:
- {number} value The value label's value to format - {number} index The value label's index to format | The `ref` is forwarded to the root element. Any other props supplied will be provided to the root element (native element). -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiSlider-root | Styles applied to the root element. -| colorPrimary | .MuiSlider-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiSlider-colorSecondary | Styles applied to the root element if `color="secondary"`. -| marked | .MuiSlider-marked | Styles applied to the root element if `marks` is provided with at least one label. -| vertical | .MuiSlider-vertical | Pseudo-class applied to the root element if `orientation="vertical"`. -| disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. -| rail | .MuiSlider-rail | Styles applied to the rail element. -| track | .MuiSlider-track | Styles applied to the track element. -| trackFalse | .MuiSlider-trackFalse | Styles applied to the track element if `track={false}`. -| trackInverted | .MuiSlider-trackInverted | Styles applied to the track element if `track="inverted"`. -| thumb | .MuiSlider-thumb | Styles applied to the thumb element. -| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Styles applied to the thumb element if `color="primary"`. -| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Styles applied to the thumb element if `color="secondary"`. -| active | .MuiSlider-active | Pseudo-class applied to the thumb element if it's active. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. -| valueLabel | .MuiSlider-valueLabel | Styles applied to the thumb label element. -| mark | .MuiSlider-mark | Styles applied to the mark element. -| markActive | .MuiSlider-markActive | Styles applied to the mark element if active (depending on the value). -| markLabel | .MuiSlider-markLabel | Styles applied to the mark label element. -| markLabelActive | .MuiSlider-markLabelActive | Styles applied to the mark label element if active (depending on the value). - -You can override the style of the component thanks to one of these customization points: - -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Slider/Slider.js) for more detail. - ## Demos - [Slider](/components/slider/) diff --git a/docs/pages/components/slider-styled.js b/docs/pages/components/slider-styled.js deleted file mode 100644 index 7ddf45ac7dff81..00000000000000 --- a/docs/pages/components/slider-styled.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; - -const pageFilename = 'components/slider-styled'; -const requireDemo = require.context( - 'docs/src/pages/components/slider-styled', - false, - /\.(js|tsx)$/, -); -const requireRaw = require.context( - '!raw-loader!../../src/pages/components/slider-styled', - false, - /\.(js|md|tsx)$/, -); - -// create styled components to prevent false positive for "dynamic component creation" -// https://github.com/styled-components/styled-components/pull/2998 -requireDemo.keys().map(requireDemo); - -export default function Page({ demos, docs }) { - return ; -} - -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; diff --git a/docs/pages/performance/slider-emotion.js b/docs/pages/performance/slider-emotion.js index 4bf87be2d19843..fba3655d820386 100644 --- a/docs/pages/performance/slider-emotion.js +++ b/docs/pages/performance/slider-emotion.js @@ -1,6 +1,6 @@ import * as React from 'react'; import NoSsr from '@material-ui/core/NoSsr'; -import SliderStyled from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; const data = { name: 'Frozen yoghurt', @@ -17,7 +17,7 @@ export default function SliderEmotion() {
{rows.map((row, index) => ( - + ))}
diff --git a/docs/src/pages.js b/docs/src/pages.js index 0abcbefb7047d5..7b34832bacf3db 100644 --- a/docs/src/pages.js +++ b/docs/src/pages.js @@ -145,7 +145,6 @@ const pages = [ subheader: '/components/lab', children: [ { pathname: '/components/about-the-lab', title: 'About the lab 🧪' }, - { pathname: '/components/slider-styled' }, { pathname: '/components/timeline' }, { pathname: '/components/trap-focus' }, { pathname: '/components/tree-view' }, diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js deleted file mode 100644 index 7e2026ad9d91da..00000000000000 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.js +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Grid from '@material-ui/core/Grid'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; -import VolumeDown from '@material-ui/icons/VolumeDown'; -import VolumeUp from '@material-ui/icons/VolumeUp'; - -export default function ContinuousSlider() { - const [value, setValue] = React.useState(30); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - Volume - - - - - - - - - - - - - - Disabled slider - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.tsx b/docs/src/pages/components/slider-styled/ContinuousSlider.tsx deleted file mode 100644 index 78a3700074b149..00000000000000 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Grid from '@material-ui/core/Grid'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; -import VolumeDown from '@material-ui/icons/VolumeDown'; -import VolumeUp from '@material-ui/icons/VolumeUp'; - -export default function ContinuousSlider() { - const [value, setValue] = React.useState(30); - - const handleChange = ( - event: React.SyntheticEvent, - newValue: number | number[], - ) => { - setValue(newValue as number); - }; - - return ( - - - Volume - - - - - - - - - - - - - - Disabled slider - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/CustomizedSlider.js b/docs/src/pages/components/slider-styled/CustomizedSlider.js deleted file mode 100644 index 28b2c04c2eae6d..00000000000000 --- a/docs/src/pages/components/slider-styled/CustomizedSlider.js +++ /dev/null @@ -1,210 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Slider from '@material-ui/lab/SliderStyled'; -import Typography from '@material-ui/core/Typography'; -import Tooltip from '@material-ui/core/Tooltip'; - -const Root = styled('div')( - ({ theme }) => ` - width: calc(300px + ${theme.spacing(6)}); -`, -); - -const Separator = styled('div')( - ({ theme }) => ` - height: ${theme.spacing(3)}; -`, -); - -function ValueLabelComponent(props) { - const { children, open, value } = props; - - return ( - - {children} - - ); -} - -ValueLabelComponent.propTypes = { - children: PropTypes.element.isRequired, - open: PropTypes.bool.isRequired, - value: PropTypes.number.isRequired, -}; - -const iOSBoxShadow = - '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)'; - -const marks = [ - { - value: 0, - }, - { - value: 20, - }, - { - value: 37, - }, - { - value: 100, - }, -]; - -const IOSSlider = styled(Slider)({ - color: '#3880ff', - height: 2, - padding: '15px 0', - '& .MuiSlider-thumb': { - height: 28, - width: 28, - backgroundColor: '#fff', - boxShadow: iOSBoxShadow, - marginTop: -14, - marginLeft: -14, - '&:focus, &:hover, &.Mui-active': { - boxShadow: - '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)', - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - boxShadow: iOSBoxShadow, - }, - }, - }, - '& .MuiSlider-valueLabel': { - left: 'calc(-50% + 12px)', - top: -22, - '& *': { - background: 'transparent', - color: '#000', - }, - }, - '& .MuiSlider-track': { - height: 2, - }, - '& .MuiSlider-rail': { - height: 2, - opacity: 0.5, - backgroundColor: '#bfbfbf', - }, - '& .MuiSlider-mark': { - backgroundColor: '#bfbfbf', - height: 8, - width: 1, - marginTop: -3, - '&.MuiSlider-markActive': { - opacity: 1, - backgroundColor: 'currentColor', - }, - }, -}); - -const PrettoSlider = styled(Slider)({ - color: '#52af77', - height: 8, - '& .MuiSlider-thumb': { - height: 24, - width: 24, - backgroundColor: '#fff', - border: '2px solid currentColor', - marginTop: -8, - marginLeft: -12, - '&:focus, &:hover, &.Mui-active': { - boxShadow: 'inherit', - }, - }, - '& .MuiSlider-valueLabel': { - left: 'calc(-50% + 4px)', - }, - '& .MuiSlider-track': { - height: 8, - borderRadius: 4, - }, - '& .MuiSlider-rail': { - height: 8, - borderRadius: 4, - }, -}); - -const AirbnbSlider = styled(Slider)({ - color: '#3a8589', - height: 3, - padding: '13px 0', - '& .MuiSlider-thumb': { - height: 27, - width: 27, - backgroundColor: '#fff', - border: '1px solid currentColor', - marginTop: -12, - marginLeft: -13, - boxShadow: '#ebebeb 0 2px 2px', - '&:focus, &:hover, &.Mui-active': { - boxShadow: '#ccc 0 2px 3px 1px', - }, - '& .bar': { - // display: inline-block !important; - height: 9, - width: 1, - backgroundColor: 'currentColor', - marginLeft: 1, - marginRight: 1, - }, - }, - '& .MuiSlider-track': { - height: 3, - }, - '& .MuiSlider-rail': { - color: '#d8d8d8', - opacity: 1, - height: 3, - }, -}); - -function AirbnbThumbComponent(props) { - return ( - - - - - - ); -} - -export default function CustomizedSlider() { - return ( - - iOS - - - pretto.fr - - - Tooltip value label - - - Airbnb - - index === 0 ? 'Minimum price' : 'Maximum price' - } - defaultValue={[20, 40]} - /> - - ); -} diff --git a/docs/src/pages/components/slider-styled/CustomizedSlider.tsx b/docs/src/pages/components/slider-styled/CustomizedSlider.tsx deleted file mode 100644 index e1cd4860ad0224..00000000000000 --- a/docs/src/pages/components/slider-styled/CustomizedSlider.tsx +++ /dev/null @@ -1,209 +0,0 @@ -import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Slider from '@material-ui/lab/SliderStyled'; -import Typography from '@material-ui/core/Typography'; -import Tooltip from '@material-ui/core/Tooltip'; - -const Root = styled('div')( - ({ theme }) => ` - width: calc(300px + ${theme.spacing(6)}); -`, -); - -const Separator = styled('div')( - ({ theme }) => ` - height: ${theme.spacing(3)}; -`, -); - -interface Props { - children: React.ReactElement; - open: boolean; - value: number; -} - -function ValueLabelComponent(props: Props) { - const { children, open, value } = props; - - return ( - - {children} - - ); -} - -const iOSBoxShadow = - '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)'; - -const marks = [ - { - value: 0, - }, - { - value: 20, - }, - { - value: 37, - }, - { - value: 100, - }, -]; - -const IOSSlider = styled(Slider)({ - color: '#3880ff', - height: 2, - padding: '15px 0', - '& .MuiSlider-thumb': { - height: 28, - width: 28, - backgroundColor: '#fff', - boxShadow: iOSBoxShadow, - marginTop: -14, - marginLeft: -14, - '&:focus, &:hover, &.Mui-active': { - boxShadow: - '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)', - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - boxShadow: iOSBoxShadow, - }, - }, - }, - '& .MuiSlider-valueLabel': { - left: 'calc(-50% + 12px)', - top: -22, - '& *': { - background: 'transparent', - color: '#000', - }, - }, - '& .MuiSlider-track': { - height: 2, - }, - '& .MuiSlider-rail': { - height: 2, - opacity: 0.5, - backgroundColor: '#bfbfbf', - }, - '& .MuiSlider-mark': { - backgroundColor: '#bfbfbf', - height: 8, - width: 1, - marginTop: -3, - '&.MuiSlider-markActive': { - opacity: 1, - backgroundColor: 'currentColor', - }, - }, -}); - -const PrettoSlider = styled(Slider)({ - color: '#52af77', - height: 8, - '& .MuiSlider-thumb': { - height: 24, - width: 24, - backgroundColor: '#fff', - border: '2px solid currentColor', - marginTop: -8, - marginLeft: -12, - '&:focus, &:hover, &.Mui-active': { - boxShadow: 'inherit', - }, - }, - '& .MuiSlider-valueLabel': { - left: 'calc(-50% + 4px)', - }, - '& .MuiSlider-track': { - height: 8, - borderRadius: 4, - }, - '& .MuiSlider-rail': { - height: 8, - borderRadius: 4, - }, -}); - -const AirbnbSlider = styled(Slider)({ - color: '#3a8589', - height: 3, - padding: '13px 0', - '& .MuiSlider-thumb': { - height: 27, - width: 27, - backgroundColor: '#fff', - border: '1px solid currentColor', - marginTop: -12, - marginLeft: -13, - boxShadow: '#ebebeb 0 2px 2px', - '&:focus, &:hover, &.Mui-active': { - boxShadow: '#ccc 0 2px 3px 1px', - }, - '& .bar': { - // display: inline-block !important; - height: 9, - width: 1, - backgroundColor: 'currentColor', - marginLeft: 1, - marginRight: 1, - }, - }, - '& .MuiSlider-track': { - height: 3, - }, - '& .MuiSlider-rail': { - color: '#d8d8d8', - opacity: 1, - height: 3, - }, -}); - -function AirbnbThumbComponent(props: any) { - return ( - - - - - - ); -} - -export default function CustomizedSlider() { - return ( - - iOS - - - pretto.fr - - - Tooltip value label - - - Airbnb - - index === 0 ? 'Minimum price' : 'Maximum price' - } - defaultValue={[20, 40]} - /> - - ); -} diff --git a/docs/src/pages/components/slider-styled/DiscreteSlider.js b/docs/src/pages/components/slider-styled/DiscreteSlider.js deleted file mode 100644 index 78eb04491bef36..00000000000000 --- a/docs/src/pages/components/slider-styled/DiscreteSlider.js +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -function valuetext(value) { - return `${value}°C`; -} - -export default function DiscreteSlider() { - return ( - - - Temperature - - - - Disabled - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/DiscreteSlider.tsx b/docs/src/pages/components/slider-styled/DiscreteSlider.tsx deleted file mode 100644 index 24d6ff228c0b7b..00000000000000 --- a/docs/src/pages/components/slider-styled/DiscreteSlider.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -function valuetext(value: number) { - return `${value}°C`; -} - -export default function DiscreteSlider() { - return ( - - - Temperature - - - - Disabled - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderLabel.js b/docs/src/pages/components/slider-styled/DiscreteSliderLabel.js deleted file mode 100644 index 9402dc5012ae13..00000000000000 --- a/docs/src/pages/components/slider-styled/DiscreteSliderLabel.js +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -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 DiscreteSlider() { - return ( - - - Always visible - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderLabel.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderLabel.tsx deleted file mode 100644 index c30aa7fe6fe613..00000000000000 --- a/docs/src/pages/components/slider-styled/DiscreteSliderLabel.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -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 DiscreteSlider() { - return ( - - - Always visible - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderMarks.js b/docs/src/pages/components/slider-styled/DiscreteSliderMarks.js deleted file mode 100644 index 80b5422183cd1e..00000000000000 --- a/docs/src/pages/components/slider-styled/DiscreteSliderMarks.js +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -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 DiscreteSlider() { - return ( - - - Custom marks - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderMarks.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderMarks.tsx deleted file mode 100644 index 197fd535aab41e..00000000000000 --- a/docs/src/pages/components/slider-styled/DiscreteSliderMarks.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -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 DiscreteSlider() { - return ( - - - Custom marks - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderSteps.js b/docs/src/pages/components/slider-styled/DiscreteSliderSteps.js deleted file mode 100644 index 0cd2cb573d78d7..00000000000000 --- a/docs/src/pages/components/slider-styled/DiscreteSliderSteps.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -function valuetext(value) { - return `${value}°C`; -} - -export default function DiscreteSlider() { - return ( - - - Small steps - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderSteps.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderSteps.tsx deleted file mode 100644 index ded633c3b2915e..00000000000000 --- a/docs/src/pages/components/slider-styled/DiscreteSliderSteps.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -function valuetext(value: number) { - return `${value}°C`; -} - -export default function DiscreteSlider() { - return ( - - - Small steps - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderValues.js b/docs/src/pages/components/slider-styled/DiscreteSliderValues.js deleted file mode 100644 index 9ec610a5302935..00000000000000 --- a/docs/src/pages/components/slider-styled/DiscreteSliderValues.js +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -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`; -} - -function valueLabelFormat(value) { - return marks.findIndex((mark) => mark.value === value) + 1; -} - -export default function DiscreteSlider() { - return ( - - - Restricted values - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/DiscreteSliderValues.tsx b/docs/src/pages/components/slider-styled/DiscreteSliderValues.tsx deleted file mode 100644 index 6994f366032869..00000000000000 --- a/docs/src/pages/components/slider-styled/DiscreteSliderValues.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -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`; -} - -function valueLabelFormat(value: number) { - return marks.findIndex((mark) => mark.value === value) + 1; -} - -export default function DiscreteSlider() { - return ( - - - Restricted values - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/InputSlider.js b/docs/src/pages/components/slider-styled/InputSlider.js deleted file mode 100644 index 6b4a828ba920d1..00000000000000 --- a/docs/src/pages/components/slider-styled/InputSlider.js +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Box from '@material-ui/core/Box'; -import Grid from '@material-ui/core/Grid'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; -import MuiInput from '@material-ui/core/Input'; -import VolumeUp from '@material-ui/icons/VolumeUp'; - -const Input = styled(MuiInput)` - width: 42px; -`; - -export default function InputSlider() { - const [value, setValue] = React.useState(30); - - const handleSliderChange = (event, newValue) => { - setValue(newValue); - }; - - const handleInputChange = (event) => { - setValue(event.target.value === '' ? '' : Number(event.target.value)); - }; - - const handleBlur = () => { - if (value < 0) { - setValue(0); - } else if (value > 100) { - setValue(100); - } - }; - - return ( - - - Volume - - - - - - - - - - - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/InputSlider.tsx b/docs/src/pages/components/slider-styled/InputSlider.tsx deleted file mode 100644 index b7cf9ae21e0f52..00000000000000 --- a/docs/src/pages/components/slider-styled/InputSlider.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Box from '@material-ui/core/Box'; -import Grid from '@material-ui/core/Grid'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; -import MuiInput from '@material-ui/core/Input'; -import VolumeUp from '@material-ui/icons/VolumeUp'; - -const Input = styled(MuiInput)` - width: 42px; -`; - -export default function InputSlider() { - const [value, setValue] = React.useState< - number | string | Array - >(30); - - const handleSliderChange = ( - event: React.SyntheticEvent, - newValue: number | number[], - ) => { - setValue(newValue); - }; - - const handleInputChange = (event: React.ChangeEvent) => { - setValue(event.target.value === '' ? '' : Number(event.target.value)); - }; - - const handleBlur = () => { - if (value < 0) { - setValue(0); - } else if (value > 100) { - setValue(100); - } - }; - - return ( - - - Volume - - - - - - - - - - - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/NonLinearSlider.js b/docs/src/pages/components/slider-styled/NonLinearSlider.js deleted file mode 100644 index a8a8b9adfb8cc9..00000000000000 --- a/docs/src/pages/components/slider-styled/NonLinearSlider.js +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/core/Slider'; - -function valueLabelFormat(value) { - const units = ['KB', 'MB', 'GB', 'TB']; - - let unitIndex = 0; - let scaledValue = value; - - while (scaledValue >= 1024 && unitIndex < units.length - 1) { - unitIndex += 1; - scaledValue /= 1024; - } - - return `${scaledValue} ${units[unitIndex]}`; -} - -function calculateValue(value) { - return 2 ** value; -} - -export default function NonLinearSlider() { - const [value, setValue] = React.useState(10); - - const handleChange = (event, newValue) => { - if (typeof newValue === 'number') { - setValue(newValue); - } - }; - - return ( - - - Storage: {valueLabelFormat(calculateValue(value))} - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/NonLinearSlider.tsx b/docs/src/pages/components/slider-styled/NonLinearSlider.tsx deleted file mode 100644 index a3a76137f99d76..00000000000000 --- a/docs/src/pages/components/slider-styled/NonLinearSlider.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/core/Slider'; - -function valueLabelFormat(value: number) { - const units = ['KB', 'MB', 'GB', 'TB']; - - let unitIndex = 0; - let scaledValue = value; - - while (scaledValue >= 1024 && unitIndex < units.length - 1) { - unitIndex += 1; - scaledValue /= 1024; - } - - return `${scaledValue} ${units[unitIndex]}`; -} - -function calculateValue(value: number) { - return 2 ** value; -} - -export default function NonLinearSlider() { - const [value, setValue] = React.useState(10); - - const handleChange = ( - event: React.SyntheticEvent, - newValue: number | number[], - ) => { - if (typeof newValue === 'number') { - setValue(newValue); - } - }; - - return ( - - - Storage: {valueLabelFormat(calculateValue(value))} - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/RangeSlider.js b/docs/src/pages/components/slider-styled/RangeSlider.js deleted file mode 100644 index d818e1d8c8047a..00000000000000 --- a/docs/src/pages/components/slider-styled/RangeSlider.js +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -function valuetext(value) { - return `${value}°C`; -} - -export default function RangeSlider() { - const [value, setValue] = React.useState([20, 37]); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - Temperature range - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/RangeSlider.tsx b/docs/src/pages/components/slider-styled/RangeSlider.tsx deleted file mode 100644 index a4a8035e12d849..00000000000000 --- a/docs/src/pages/components/slider-styled/RangeSlider.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -function valuetext(value: number) { - return `${value}°C`; -} - -export default function RangeSlider() { - const [value, setValue] = React.useState([20, 37]); - - const handleChange = ( - event: React.SyntheticEvent, - newValue: number | number[], - ) => { - setValue(newValue as number[]); - }; - - return ( - - - Temperature range - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/TrackFalseSlider.js b/docs/src/pages/components/slider-styled/TrackFalseSlider.js deleted file mode 100644 index 9c55cc2a8989af..00000000000000 --- a/docs/src/pages/components/slider-styled/TrackFalseSlider.js +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -const Separator = styled('div')( - ({ theme }) => ` - height: ${theme.spacing(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 TrackFalseSlider() { - return ( - - - Removed track - - - - - Removed track range slider - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/TrackFalseSlider.tsx b/docs/src/pages/components/slider-styled/TrackFalseSlider.tsx deleted file mode 100644 index 1b3d50a4a91bab..00000000000000 --- a/docs/src/pages/components/slider-styled/TrackFalseSlider.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -const Separator = styled('div')( - ({ theme }) => ` - height: ${theme.spacing(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 TrackFalseSlider() { - return ( - - - Removed track - - - - - Removed track range slider - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/TrackInvertedSlider.js b/docs/src/pages/components/slider-styled/TrackInvertedSlider.js deleted file mode 100644 index 7af48eadeb9688..00000000000000 --- a/docs/src/pages/components/slider-styled/TrackInvertedSlider.js +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -const Separator = styled('div')( - ({ theme }) => ` - height: ${theme.spacing(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 TrackInvertedSlider() { - return ( - - - Inverted track - - - - - Inverted track range - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/TrackInvertedSlider.tsx b/docs/src/pages/components/slider-styled/TrackInvertedSlider.tsx deleted file mode 100644 index 456759a9104b68..00000000000000 --- a/docs/src/pages/components/slider-styled/TrackInvertedSlider.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -const Separator = styled('div')( - ({ theme }) => ` - height: ${theme.spacing(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 TrackInvertedSlider() { - return ( - - - Inverted track - - - - - Inverted track range - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/VerticalSlider.js b/docs/src/pages/components/slider-styled/VerticalSlider.js deleted file mode 100644 index dc348c4dcd2561..00000000000000 --- a/docs/src/pages/components/slider-styled/VerticalSlider.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -function valuetext(value) { - return `${value}°C`; -} - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - -export default function VerticalSlider() { - return ( - - - Temperature - - - - - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/VerticalSlider.tsx b/docs/src/pages/components/slider-styled/VerticalSlider.tsx deleted file mode 100644 index 0ce8ef0e0f4987..00000000000000 --- a/docs/src/pages/components/slider-styled/VerticalSlider.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import Box from '@material-ui/core/Box'; -import Typography from '@material-ui/core/Typography'; -import Slider from '@material-ui/lab/SliderStyled'; - -function valuetext(value: number) { - return `${value}°C`; -} - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - -export default function VerticalSlider() { - return ( - - - Temperature - - - - - - - - ); -} diff --git a/docs/src/pages/components/slider-styled/slider-styled-de.md b/docs/src/pages/components/slider-styled/slider-styled-de.md deleted file mode 100644 index 37172dce9191be..00000000000000 --- a/docs/src/pages/components/slider-styled/slider-styled-de.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: React Slider component -components: SliderStyled, SliderUnstyled -githubLabel: - component: Slider -materialDesign: https://material.io/components/sliders -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#slider' ---- - -# Slider - -

Schieberegler erlauben es Nutzern, eine Auswahl aus einer Reihe von Werten zu treffen.

- -[Schieberegler](https://material.io/design/components/sliders.html) spiegeln einen Wertebereich entlang einer Leiste wider, aus dem Benutzer einen einzelnen Wert auswählen können. Sie sind ideal zum Anpassen von Einstellungen wie Lautstärke, Helligkeit oder Anwenden von Bildfiltern. - -- 📦 [22 kB gzipped](/size-snapshot) (but only +8 kB when used together with other Material-UI components). - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Kontinuierliche Schieberegler - -Continuous sliders allow users to select a value along a subjective range. - -{{"demo": "pages/components/slider-styled/ContinuousSlider.js"}} - -## Discrete sliders - -Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos: - -You can generate a mark for each step with `marks={true}`. - -{{"demo": "pages/components/slider-styled/DiscreteSlider.js"}} - -### Small steps - -You can change the default step increment. - -{{"demo": "pages/components/slider-styled/DiscreteSliderSteps.js"}} - -### Custom marks - -You can have custom marks by providing a rich array to the `marks` prop. - -{{"demo": "pages/components/slider-styled/DiscreteSliderMarks.js"}} - -### Restricted values - -You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderValues.js"}} - -### Label always visible - -You can force the thumb label to be always visible with `valueLabelDisplay="on"`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderLabel.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` prop. - -{{"demo": "pages/components/slider-styled/RangeSlider.js"}} - -## Slider with input field - -In this example an input allows a discrete value to be set. - -{{"demo": "pages/components/slider-styled/InputSlider.js"}} - -## Benutzerdefinierte Auswahl - -Hier einige Beispiele zum Anpassen der Komponente. You can learn more about this in the [overrides documentation page](/customization/components/). - -{{"demo": "pages/components/slider-styled/CustomizedSlider.js"}} - -## Vertical sliders - -{{"demo": "pages/components/slider-styled/VerticalSlider.js"}} - -## Track - -The track shows the range available for user selection. - -### Removed track - -The track can be turned off with `track={false}`. - -{{"demo": "pages/components/slider-styled/TrackFalseSlider.js"}} - -### Inverted track - -The track can be inverted with `track="inverted"`. - -{{"demo": "pages/components/slider-styled/TrackInvertedSlider.js"}} - -## Non-linear scale - -You can use the `scale` prop to represent the `value` on a different scale. For instance, in the following demo, the value *x* represents the power of *10^x*. - -{{"demo": "pages/components/slider-styled/NonLinearSlider.js"}} - -## Unstyled slider - -{{"demo": "pages/components/slider-styled/UnstyledSlider.js"}} - -## Barrierefreiheit - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider) - -The component handles most of the work necessary to make it accessible. Sie müssen jedoch sicherstellen, dass: - -- 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. diff --git a/docs/src/pages/components/slider-styled/slider-styled-es.md b/docs/src/pages/components/slider-styled/slider-styled-es.md deleted file mode 100644 index b3c45916079f61..00000000000000 --- a/docs/src/pages/components/slider-styled/slider-styled-es.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: React Slider component -components: SliderStyled, SliderUnstyled -githubLabel: - component: Slider -materialDesign: https://material.io/components/sliders -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#slider' ---- - -# Slider - -

Los deslizadores permiten a los usuarios hacer selecciones a partir de una gama de valores.

- -[Sliders](https://material.io/design/components/sliders.html) reflect a range of values along a bar, from which users may select a single value. Son ideales para ajustar ajustes como volumen, brillo o aplicación de filtros de imagen. - -- 📦 [22 kB gzipped](/size-snapshot) (pero solo +8 kB cuando se usa junto con otros componentes de Material-UI). - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Deslizadores continuos - -Los deslizadores continuos permiten a los usuarios seleccionar un valor a lo largo de un rango más amplio. - -{{"demo": "pages/components/slider-styled/ContinuousSlider.js"}} - -## Deslizadores discretos - -Los deslizadores discretos pueden ser ajustados a un valor específico haciendo referencia a su indicador de valor. Por orden de demos: - -Puedes generar una marca para cada paso con `marks={true}`. - -{{"demo": "pages/components/slider-styled/DiscreteSlider.js"}} - -### Pequeños pasos - -Puede cambiar el incremento de paso por defecto. - -{{"demo": "pages/components/slider-styled/DiscreteSliderSteps.js"}} - -### Marcas personalizadas - -You can have custom marks by providing a rich array to the `marks` prop. - -{{"demo": "pages/components/slider-styled/DiscreteSliderMarks.js"}} - -### Valores restringidos - -You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderValues.js"}} - -### Etiqueta siempre visible - -You can force the thumb label to be always visible with `valueLabelDisplay="on"`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderLabel.js"}} - -## Deslizador de rango - -The slider can be used to set the start and end of a range by supplying an array of values to the `value` prop. - -{{"demo": "pages/components/slider-styled/RangeSlider.js"}} - -## Deslizador con campo de entrada - -In this example an input allows a discrete value to be set. - -{{"demo": "pages/components/slider-styled/InputSlider.js"}} - -## Deslizadores personalizados - -Here are some examples of customizing the component. Puedes aprender más sobre esto en la [sección Personalizando Componentes de la documentación](/customization/components/). - -{{"demo": "pages/components/slider-styled/CustomizedSlider.js"}} - -## Deslizadores verticales - -{{"demo": "pages/components/slider-styled/VerticalSlider.js"}} - -## Track - -The track shows the range available for user selection. - -### Removed track - -The track can be turned off with `track={false}`. - -{{"demo": "pages/components/slider-styled/TrackFalseSlider.js"}} - -### Inverted track - -The track can be inverted with `track="inverted"`. - -{{"demo": "pages/components/slider-styled/TrackInvertedSlider.js"}} - -## Non-linear scale - -You can use the `scale` prop to represent the `value` on a different scale. For instance, in the following demo, the value *x* represents the power of *10^x*. - -{{"demo": "pages/components/slider-styled/NonLinearSlider.js"}} - -## Slider sin estilo - -{{"demo": "pages/components/slider-styled/UnstyledSlider.js"}} - -## Accesibilidad - -(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. diff --git a/docs/src/pages/components/slider-styled/slider-styled-fr.md b/docs/src/pages/components/slider-styled/slider-styled-fr.md deleted file mode 100644 index 3c571af3a8170f..00000000000000 --- a/docs/src/pages/components/slider-styled/slider-styled-fr.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: React Slider component -components: SliderStyled, SliderUnstyled -githubLabel: - component: Slider -materialDesign: https://material.io/components/sliders -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#slider' ---- - -# Slider - -

Les curseurs permettent aux utilisateurs d'effectuer des sélections à partir d'une plage de valeurs.

- -[Les curseurs](https://material.io/design/components/sliders.html) reflètent une plage de valeurs sur une barre, à partir de laquelle les utilisateurs peuvent sélectionner une seule valeur. Ils sont idéaux pour ajuster des paramètres tels que le volume, la luminosité ou l'application de filtres d'images. - -- 📦 [22 kB gzipped](/size-snapshot) (but only +8 kB when used together with other Material-UI components). - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Continuous sliders - -Continuous sliders allow users to select a value along a subjective range. - -{{"demo": "pages/components/slider-styled/ContinuousSlider.js"}} - -## Discrete sliders - -Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos: - -You can generate a mark for each step with `marks={true}`. - -{{"demo": "pages/components/slider-styled/DiscreteSlider.js"}} - -### Small steps - -You can change the default step increment. - -{{"demo": "pages/components/slider-styled/DiscreteSliderSteps.js"}} - -### Custom marks - -You can have custom marks by providing a rich array to the `marks` prop. - -{{"demo": "pages/components/slider-styled/DiscreteSliderMarks.js"}} - -### Restricted values - -You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderValues.js"}} - -### Label always visible - -You can force the thumb label to be always visible with `valueLabelDisplay="on"`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderLabel.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` prop. - -{{"demo": "pages/components/slider-styled/RangeSlider.js"}} - -## Slider with input field - -In this example an input allows a discrete value to be set. - -{{"demo": "pages/components/slider-styled/InputSlider.js"}} - -## Curseurs personnalisés - -Here are some examples of customizing the component. Vous pouvez en apprendre plus à ce sujet dans la [page de documentation](/customization/components/). - -{{"demo": "pages/components/slider-styled/CustomizedSlider.js"}} - -## Vertical sliders - -{{"demo": "pages/components/slider-styled/VerticalSlider.js"}} - -## Track - -The track shows the range available for user selection. - -### Removed track - -The track can be turned off with `track={false}`. - -{{"demo": "pages/components/slider-styled/TrackFalseSlider.js"}} - -### Inverted track - -The track can be inverted with `track="inverted"`. - -{{"demo": "pages/components/slider-styled/TrackInvertedSlider.js"}} - -## Non-linear scale - -You can use the `scale` prop to represent the `value` on a different scale. For instance, in the following demo, the value *x* represents the power of *10^x*. - -{{"demo": "pages/components/slider-styled/NonLinearSlider.js"}} - -## Unstyled slider - -{{"demo": "pages/components/slider-styled/UnstyledSlider.js"}} - -## Accessibilité - -(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. diff --git a/docs/src/pages/components/slider-styled/slider-styled-ja.md b/docs/src/pages/components/slider-styled/slider-styled-ja.md deleted file mode 100644 index 8bcf5b32c3149b..00000000000000 --- a/docs/src/pages/components/slider-styled/slider-styled-ja.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: React Slider component -components: SliderStyled, SliderUnstyled -githubLabel: - component: Slider -materialDesign: https://material.io/components/sliders -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#slider' ---- - -# Slider - -

スライダーを使用すると、ユーザーは値の範囲から選択できます。

- -[Sliders](https://material.io/design/components/sliders.html) reflect a range of values along a bar, from which users may select a single value. ボリューム、輝度などの設定を調整したり、画像フィルターを適用したりするのに理想的です。 - -- 📦 [22 kB gzipped](/size-snapshot) (but only +8 kB when used together with other Material-UI components). - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## 連続スライダー - -連続スライダーにより、ユーザーは主観的な範囲に沿って値を選択できます。 - -{{"demo": "pages/components/slider-styled/ContinuousSlider.js"}} - -## 個別のスライダー - -個別のスライダーは、値インジケーターを参照することで特定の値に調整できます。 デモ順： - -`marks={true}`で各ステップのマークを生成できます。 - -{{"demo": "pages/components/slider-styled/DiscreteSlider.js"}} - -### Small steps - -デフォルトのステップ増分を変更できます。 - -{{"demo": "pages/components/slider-styled/DiscreteSliderSteps.js"}} - -### Custom marks - -`marks`プロップに豊富な配列を提供することにより、カスタムマークを作成できます。 - -{{"demo": "pages/components/slider-styled/DiscreteSliderMarks.js"}} - -### Restricted values - -選択可能な値を、 `marks` prop with `step ={null}`で、提供される値に制限できます。 - -{{"demo": "pages/components/slider-styled/DiscreteSliderValues.js"}} - -### Label always visible - -`valueLabelDisplay = "on"`すると、常にサムラベルを強制的に表示できます。 - -{{"demo": "pages/components/slider-styled/DiscreteSliderLabel.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` prop. - -{{"demo": "pages/components/slider-styled/RangeSlider.js"}} - -## Slider with input field - -In this example an input allows a discrete value to be set. - -{{"demo": "pages/components/slider-styled/InputSlider.js"}} - -## Customized sliders - -コンポーネントのカスタマイズの例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドドキュメントページ](/customization/components/)ご覧ください。 - -{{"demo": "pages/components/slider-styled/CustomizedSlider.js"}} - -## 垂直スライダー - -{{"demo": "pages/components/slider-styled/VerticalSlider.js"}} - -## Track - -The track shows the range available for user selection. - -### Removed track - -The track can be turned off with `track={false}`. - -{{"demo": "pages/components/slider-styled/TrackFalseSlider.js"}} - -### Inverted track - -The track can be inverted with `track="inverted"`. - -{{"demo": "pages/components/slider-styled/TrackInvertedSlider.js"}} - -## Non-linear scale - -You can use the `scale` prop to represent the `value` on a different scale. For instance, in the following demo, the value *x* represents the power of *10^x*. - -{{"demo": "pages/components/slider-styled/NonLinearSlider.js"}} - -## Unstyled slider - -{{"demo": "pages/components/slider-styled/UnstyledSlider.js"}} - -## アクセシビリティ - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider) - -コンポーネントは、アクセス可能にするために必要なほとんどの作業を処理します。 ただし、次の点を確認する必要があります。 ただし、次の点を確認する必要があります。 ただし、次の点を確認する必要があります。 - -- 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. 値がラベルのセマンティクスと一致する場合、これは必要ありません。 この名前は、 `getAriaValueText`または`aria-valuetext`プロパティを使用して変更できます。 diff --git a/docs/src/pages/components/slider-styled/slider-styled-pt.md b/docs/src/pages/components/slider-styled/slider-styled-pt.md deleted file mode 100644 index e062b8dc5dd14e..00000000000000 --- a/docs/src/pages/components/slider-styled/slider-styled-pt.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: React Slider component -components: SliderStyled, SliderUnstyled -githubLabel: - component: Slider -materialDesign: https://material.io/components/sliders -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#slider' ---- - -# Slider - -

Sliders permitem que os usuários façam seleções a partir de um intervalo de valores.

- -[Sliders](https://material.io/design/components/sliders.html) refletem um intervalo de valores ao longo de uma barra, a partir do qual os usuários podem selecionar um único valor. Eles são ideais para ajustar configurações como volume, brilho ou aplicação de filtros de imagem. - -- 📦 [22 kB gzipped](/size-snapshot) (mas apenas +8 kB quando usado junto com outros componentes de Material-UI). - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Sliders contínuos - -Os sliders contínuos permitem que os usuários selecionem um valor ao longo de um intervalo subjetivo. - -{{"demo": "pages/components/slider-styled/ContinuousSlider.js"}} - -## Sliders discretos - -Os sliders discretos podem ser ajustados para um valor específico, fazendo referência ao seu indicador de valor. Por ordem de demonstrações: - -Você pode gerar uma marca para cada etapa com `marks={true}`. - -{{"demo": "pages/components/slider-styled/DiscreteSlider.js"}} - -### Pequenas etapas - -Você pode alterar o incremento padrão da etapa. - -{{"demo": "pages/components/slider-styled/DiscreteSliderSteps.js"}} - -### Marcas personalizadas - -Você pode ter marcas customizadas, fornecendo um array para a propriedade `marks`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderMarks.js"}} - -### Valores restritos - -Você pode restringir os valores selecionáveis fornecidos na propriedade `marks` configurando a propriedade `step={null}`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderValues.js"}} - -### Rótulo sempre visível - -Você pode forçar o marcador a ficar sempre visível com `valueLabelDisplay="on"`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderLabel.js"}} - -## Slider com intervalo - -O slider pode ser usado para definir o início e o fim de um intervalo, fornecendo um array de valores para a propriedade `value`. - -{{"demo": "pages/components/slider-styled/RangeSlider.js"}} - -## Slider com campo de entrada - -Neste exemplo, um campo de entrada permite que um valor seja definido. - -{{"demo": "pages/components/slider-styled/InputSlider.js"}} - -## Sliders customizados - -Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/). - -{{"demo": "pages/components/slider-styled/CustomizedSlider.js"}} - -## Sliders verticais - -{{"demo": "pages/components/slider-styled/VerticalSlider.js"}} - -## Faixa - -A faixa exibe o intervalo disponível para a seleção do usuário. - -### Faixa desabilitada - -A faixa pode ser desabilitada com `track={false}`. - -{{"demo": "pages/components/slider-styled/TrackFalseSlider.js"}} - -### Faixa invertida - -A faixa pode ser invertida com `track="inverted"`. - -{{"demo": "pages/components/slider-styled/TrackInvertedSlider.js"}} - -## Escala não linear - -Você pode usar a propriedade `scale` para representar o `value` em uma escala diferente. Por exemplo, na demonstração seguinte, o valor *x* representa a potência de *10^x*. - -{{"demo": "pages/components/slider-styled/NonLinearSlider.js"}} - -## Unstyled slider - -{{"demo": "pages/components/slider-styled/UnstyledSlider.js"}} - -## Acessibilidade - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider) - -O componente lida com a maior parte do trabalho necessário para torná-lo acessível. No entanto, você precisa se certificar de que: - -- Cada marcador possua propriedades de rótulo amigável para o usuário (`aria-label`, `aria-labelledby` ou `getAriaLabel`). -- Cada marcador tenha um texto amigável para o seu valor atual. Isso não é necessário se o valor corresponder ao rótulo exibido no slider. Você pode alterar o nome com as propriedades `getAriaValueText` ou `aria-valuetext`. diff --git a/docs/src/pages/components/slider-styled/slider-styled-ru.md b/docs/src/pages/components/slider-styled/slider-styled-ru.md deleted file mode 100644 index 341cbd240ca414..00000000000000 --- a/docs/src/pages/components/slider-styled/slider-styled-ru.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Компонент React Slider -components: SliderStyled, SliderUnstyled -githubLabel: - component: Slider -materialDesign: https://material.io/components/sliders -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#slider' ---- - -# Slider - -

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

- -[Sliders](https://material.io/design/components/sliders.html) 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. - -- 📦 [22 kB gzipped](/size-snapshot) (but only +8 kB when used together with other Material-UI components). - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Continuous sliders - -Continuous sliders allow users to select a value along a subjective range. - -{{"demo": "pages/components/slider-styled/ContinuousSlider.js"}} - -## Discrete sliders - -Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos: - -You can generate a mark for each step with `marks={true}`. - -{{"demo": "pages/components/slider-styled/DiscreteSlider.js"}} - -### Small steps - -You can change the default step increment. - -{{"demo": "pages/components/slider-styled/DiscreteSliderSteps.js"}} - -### Custom marks - -You can have custom marks by providing a rich array to the `marks` prop. - -{{"demo": "pages/components/slider-styled/DiscreteSliderMarks.js"}} - -### Restricted values - -You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderValues.js"}} - -### Label always visible - -You can force the thumb label to be always visible with `valueLabelDisplay="on"`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderLabel.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` prop. - -{{"demo": "pages/components/slider-styled/RangeSlider.js"}} - -## Slider with input field - -In this example an input allows a discrete value to be set. - -{{"demo": "pages/components/slider-styled/InputSlider.js"}} - -## Customized sliders - -Ниже находятся примеры кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/). - -{{"demo": "pages/components/slider-styled/CustomizedSlider.js"}} - -## Vertical sliders - -{{"demo": "pages/components/slider-styled/VerticalSlider.js"}} - -## Track - -The track shows the range available for user selection. - -### Removed track - -The track can be turned off with `track={false}`. - -{{"demo": "pages/components/slider-styled/TrackFalseSlider.js"}} - -### Inverted track - -The track can be inverted with `track="inverted"`. - -{{"demo": "pages/components/slider-styled/TrackInvertedSlider.js"}} - -## Non-linear scale - -You can use the `scale` prop to represent the `value` on a different scale. For instance, in the following demo, the value *x* represents the power of *10^x*. - -{{"demo": "pages/components/slider-styled/NonLinearSlider.js"}} - -## Unstyled slider - -{{"demo": "pages/components/slider-styled/UnstyledSlider.js"}} - -## Доступность - -(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. diff --git a/docs/src/pages/components/slider-styled/slider-styled-zh.md b/docs/src/pages/components/slider-styled/slider-styled-zh.md deleted file mode 100644 index f97249a74495a5..00000000000000 --- a/docs/src/pages/components/slider-styled/slider-styled-zh.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: React 滑块组件 -components: SliderStyled, SliderUnstyled -githubLabel: - component: Slider -materialDesign: https://material.io/components/sliders -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#slider' ---- - -# Slider 滑块控件 - -

用户可以使用滑块控件在某一范围内取值。

- -[滑块](https://material.io/design/components/sliders.html) 反映了条形图上的一系列值，用户可以从中选择单个值。 它们通常适用于调节一些设置，譬如调节设备音量、调整屏幕亮度，或者改变图像的滤镜。 - -- 📦 [22 kB 压缩大小](/size-snapshot) (但与其他 Material-UI 组件使用时只有+8 kB)。 - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## 连续滑块（Continuous sliders） - -用户可以使用连续的滑块组件在给定的范围内选择一个值。 - -{{"demo": "pages/components/slider-styled/ContinuousSlider.js"}} - -## 间续滑块（Discrete sliders） - -用户可以通过参考其值指示器，来将间续滑块调整为某一特定值。 以下是一些案例： - -通过设置 `marks={true}`，你可以针对每个步骤产生一个标记（mark）。 - -{{"demo": "pages/components/slider-styled/DiscreteSlider.js"}} - -### 小的步骤 - -您可以更改默认的步进增量。 - -{{"demo": "pages/components/slider-styled/DiscreteSliderSteps.js"}} - -### 自定义标记 - -通过将一个丰富的数组提供给 `marks` 属性，您可以定制标记。 - -{{"demo": "pages/components/slider-styled/DiscreteSliderMarks.js"}} - -### 受限制的值 - -通过将 `step={null}` 赋予给 `marks` 属性，您可以限制可供选择的值。 - -{{"demo": "pages/components/slider-styled/DiscreteSliderValues.js"}} - -### 标签总是可见 - -通过设置 `valueLabelDisplay="on"`，您可以强制缩略图的标签始终可见。 - -{{"demo": "pages/components/slider-styled/DiscreteSliderLabel.js"}} - -## 范围滑块 - -通过提供一个包含值的数组给 `value` 属性，您可以设置滑块的起始和终止值。 - -{{"demo": "pages/components/slider-styled/RangeSlider.js"}} - -## 带输入框的滑块组件 - -在这个例子中，我们允许给输入框设置一个离散值。 - -{{"demo": "pages/components/slider-styled/InputSlider.js"}} - -## 自定义滑块 - -你可以参考以下一些例子来自定义组件。 您可以在 [重写文档页面](/customization/components/) 中了解更多有关此内容的信息。 - -{{"demo": "pages/components/slider-styled/CustomizedSlider.js"}} - -## 纵向滑块 - -{{"demo": "pages/components/slider-styled/VerticalSlider.js"}} - -## 轨道（Track） - -轨道显示了允许用户选择的范围。 - -### 移除轨道 - -您可以通过设置 `track={false}` 来禁用轨道。 - -{{"demo": "pages/components/slider-styled/TrackFalseSlider.js"}} - -### 反转轨道 - -你可以通过设置 `track="inverted"` 来反转轨道。 - -{{"demo": "pages/components/slider-styled/TrackInvertedSlider.js"}} - -## 非线性缩放 - -你可以使用 `scale` 属性来表示不同范围的`值`。 例如，下面的例子中，*x* 的值表示 *10^x*。 - -{{"demo": "pages/components/slider-styled/NonLinearSlider.js"}} - -## 无样式的滑块 - -{{"demo": "pages/components/slider-styled/UnstyledSlider.js"}} - -## 无障碍设计 - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider) - -该组件处理了大部分必要的工作，使之应用无障碍访问。 但是，你需要确保： - -- 每个滑块都带有一个方便用户的标签（`aria-label`、`aria-labelledby` 或 `getAriaLabel` 属性）。 -- 每一个滑块的当前值都有一个方便用户阅读的文字。 如果值与标签的语义相匹配的话，则不需要此操作。 你可以通过`getAriaValueText` 或者 `aria-valuetext` 属性来更改名字。 diff --git a/docs/src/pages/components/slider-styled/slider-styled.md b/docs/src/pages/components/slider-styled/slider-styled.md deleted file mode 100644 index e7affcbff6b6cd..00000000000000 --- a/docs/src/pages/components/slider-styled/slider-styled.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: React Slider component -components: SliderStyled, SliderUnstyled -githubLabel: component: Slider -materialDesign: https://material.io/components/sliders -waiAria: https://www.w3.org/TR/wai-aria-practices/#slider ---- - -# 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. - -- 📦 [22 kB gzipped](/size-snapshot) (but only +8 kB when used together with other Material-UI components). - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Continuous sliders - -Continuous sliders allow users to select a value along a subjective range. - -{{"demo": "pages/components/slider-styled/ContinuousSlider.js"}} - -## Discrete sliders - -Discrete sliders can be adjusted to a specific value by referencing its value indicator. -By order of demos: - -You can generate a mark for each step with `marks={true}`. - -{{"demo": "pages/components/slider-styled/DiscreteSlider.js"}} - -### Small steps - -You can change the default step increment. - -{{"demo": "pages/components/slider-styled/DiscreteSliderSteps.js"}} - -### Custom marks - -You can have custom marks by providing a rich array to the `marks` prop. - -{{"demo": "pages/components/slider-styled/DiscreteSliderMarks.js"}} - -### Restricted values - -You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderValues.js"}} - -### Label always visible - -You can force the thumb label to be always visible with `valueLabelDisplay="on"`. - -{{"demo": "pages/components/slider-styled/DiscreteSliderLabel.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` prop. - -{{"demo": "pages/components/slider-styled/RangeSlider.js"}} - -## Slider with input field - -In this example an input allows a discrete value to be set. - -{{"demo": "pages/components/slider-styled/InputSlider.js"}} - -## Customized sliders - -Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). - -{{"demo": "pages/components/slider-styled/CustomizedSlider.js"}} - -## Vertical sliders - -{{"demo": "pages/components/slider-styled/VerticalSlider.js"}} - -## Track - -The track shows the range available for user selection. - -### Removed track - -The track can be turned off with `track={false}`. - -{{"demo": "pages/components/slider-styled/TrackFalseSlider.js"}} - -### Inverted track - -The track can be inverted with `track="inverted"`. - -{{"demo": "pages/components/slider-styled/TrackInvertedSlider.js"}} - -## Non-linear scale - -You can use the `scale` prop to represent the `value` on a different scale. - -In the following demo, the value _x_ represents the value _2^x_. -Increasing _x_ by one increases the represented value by factor _2_. - -{{"demo": "pages/components/slider-styled/NonLinearSlider.js"}} - -## Unstyled slider - -{{"demo": "pages/components/slider-styled/UnstyledSlider.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. diff --git a/docs/src/pages/components/slider/ContinuousSlider.js b/docs/src/pages/components/slider/ContinuousSlider.js index 7ae21c8a7ed066..938f4c9a84f1cd 100644 --- a/docs/src/pages/components/slider/ContinuousSlider.js +++ b/docs/src/pages/components/slider/ContinuousSlider.js @@ -1,19 +1,12 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; import VolumeDown from '@material-ui/icons/VolumeDown'; import VolumeUp from '@material-ui/icons/VolumeUp'; -const useStyles = makeStyles({ - root: { - width: 200, - }, -}); - export default function ContinuousSlider() { - const classes = useStyles(); const [value, setValue] = React.useState(30); const handleChange = (event, newValue) => { @@ -21,7 +14,7 @@ export default function ContinuousSlider() { }; return ( -
+ Volume @@ -44,6 +37,6 @@ export default function ContinuousSlider() { Disabled slider -
+ ); } diff --git a/docs/src/pages/components/slider/ContinuousSlider.tsx b/docs/src/pages/components/slider/ContinuousSlider.tsx index af6ccdef609597..0ebd383fc6ccdf 100644 --- a/docs/src/pages/components/slider/ContinuousSlider.tsx +++ b/docs/src/pages/components/slider/ContinuousSlider.tsx @@ -1,19 +1,12 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; import VolumeDown from '@material-ui/icons/VolumeDown'; import VolumeUp from '@material-ui/icons/VolumeUp'; -const useStyles = makeStyles({ - root: { - width: 200, - }, -}); - export default function ContinuousSlider() { - const classes = useStyles(); const [value, setValue] = React.useState(30); const handleChange = ( @@ -24,7 +17,7 @@ export default function ContinuousSlider() { }; return ( -
+ Volume @@ -47,6 +40,6 @@ export default function ContinuousSlider() { Disabled slider -
+ ); } diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js index a7be6496ffe5f3..6c99bf05496c12 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.js +++ b/docs/src/pages/components/slider/CustomizedSlider.js @@ -1,18 +1,21 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, makeStyles } from '@material-ui/core/styles'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; import Slider from '@material-ui/core/Slider'; import Typography from '@material-ui/core/Typography'; import Tooltip from '@material-ui/core/Tooltip'; -const useStyles = makeStyles((theme) => ({ - root: { - width: `calc(300px + ${theme.spacing(6)})`, - }, - margin: { - height: theme.spacing(3), - }, -})); +const Root = styled('div')( + ({ theme }) => ` + width: calc(300px + ${theme.spacing(6)}); +`, +); + +const Separator = styled('div')( + ({ theme }) => ` + height: ${theme.spacing(3)}; +`, +); function ValueLabelComponent(props) { const { children, open, value } = props; @@ -48,20 +51,18 @@ const marks = [ }, ]; -const IOSSlider = withStyles({ - root: { - color: '#3880ff', - height: 2, - padding: '15px 0', - }, - thumb: { +const IOSSlider = styled(Slider)({ + color: '#3880ff', + height: 2, + padding: '15px 0', + '& .MuiSlider-thumb': { height: 28, width: 28, backgroundColor: '#fff', boxShadow: iOSBoxShadow, marginTop: -14, marginLeft: -14, - '&:focus, &:hover, &$active': { + '&:focus, &:hover, &.Mui-active': { boxShadow: '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)', // Reset on touch devices, it doesn't add specificity @@ -70,8 +71,7 @@ const IOSSlider = withStyles({ }, }, }, - active: {}, - valueLabel: { + '& .MuiSlider-valueLabel': { left: 'calc(-50% + 12px)', top: -22, '& *': { @@ -79,63 +79,58 @@ const IOSSlider = withStyles({ color: '#000', }, }, - track: { + '& .MuiSlider-track': { height: 2, }, - rail: { + '& .MuiSlider-rail': { height: 2, opacity: 0.5, backgroundColor: '#bfbfbf', }, - mark: { + '& .MuiSlider-mark': { backgroundColor: '#bfbfbf', height: 8, width: 1, marginTop: -3, + '&.MuiSlider-markActive': { + opacity: 1, + backgroundColor: 'currentColor', + }, }, - markActive: { - opacity: 1, - backgroundColor: 'currentColor', - }, -})(Slider); +}); -const PrettoSlider = withStyles({ - root: { - color: '#52af77', - height: 8, - }, - thumb: { +const PrettoSlider = styled(Slider)({ + color: '#52af77', + height: 8, + '& .MuiSlider-thumb': { height: 24, width: 24, backgroundColor: '#fff', border: '2px solid currentColor', marginTop: -8, marginLeft: -12, - '&:focus, &:hover, &$active': { + '&:focus, &:hover, &.Mui-active': { boxShadow: 'inherit', }, }, - active: {}, - valueLabel: { + '& .MuiSlider-valueLabel': { left: 'calc(-50% + 4px)', }, - track: { + '& .MuiSlider-track': { height: 8, borderRadius: 4, }, - rail: { + '& .MuiSlider-rail': { height: 8, borderRadius: 4, }, -})(Slider); +}); -const AirbnbSlider = withStyles({ - root: { - color: '#3a8589', - height: 3, - padding: '13px 0', - }, - thumb: { +const AirbnbSlider = styled(Slider)({ + color: '#3a8589', + height: 3, + padding: '13px 0', + '& .MuiSlider-thumb': { height: 27, width: 27, backgroundColor: '#fff', @@ -143,7 +138,7 @@ const AirbnbSlider = withStyles({ marginTop: -12, marginLeft: -13, boxShadow: '#ebebeb 0 2px 2px', - '&:focus, &:hover, &$active': { + '&:focus, &:hover, &.Mui-active': { boxShadow: '#ccc 0 2px 3px 1px', }, '& .bar': { @@ -155,16 +150,15 @@ const AirbnbSlider = withStyles({ marginRight: 1, }, }, - active: {}, - track: { + '& .MuiSlider-track': { height: 3, }, - rail: { + '& .MuiSlider-rail': { color: '#d8d8d8', opacity: 1, height: 3, }, -})(Slider); +}); function AirbnbThumbComponent(props) { return ( @@ -177,10 +171,8 @@ function AirbnbThumbComponent(props) { } export default function CustomizedSlider() { - const classes = useStyles(); - return ( -
+ iOS -
+ pretto.fr -
+ Tooltip value label -
+ Airbnb index === 0 ? 'Minimum price' : 'Maximum price' } defaultValue={[20, 40]} /> -
+ ); } diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx index 004e3d85c9a47e..52659edecc9765 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.tsx +++ b/docs/src/pages/components/slider/CustomizedSlider.tsx @@ -1,23 +1,19 @@ import * as React from 'react'; -import { - withStyles, - makeStyles, - Theme, - createStyles, -} from '@material-ui/core/styles'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; import Slider from '@material-ui/core/Slider'; import Typography from '@material-ui/core/Typography'; import Tooltip from '@material-ui/core/Tooltip'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: `calc(300px + ${theme.spacing(6)})`, - }, - margin: { - height: theme.spacing(3), - }, - }), +const Root = styled('div')( + ({ theme }) => ` + width: calc(300px + ${theme.spacing(6)}); +`, +); + +const Separator = styled('div')( + ({ theme }) => ` + height: ${theme.spacing(3)}; +`, ); interface Props { @@ -54,20 +50,18 @@ const marks = [ }, ]; -const IOSSlider = withStyles({ - root: { - color: '#3880ff', - height: 2, - padding: '15px 0', - }, - thumb: { +const IOSSlider = styled(Slider)({ + color: '#3880ff', + height: 2, + padding: '15px 0', + '& .MuiSlider-thumb': { height: 28, width: 28, backgroundColor: '#fff', boxShadow: iOSBoxShadow, marginTop: -14, marginLeft: -14, - '&:focus, &:hover, &$active': { + '&:focus, &:hover, &.Mui-active': { boxShadow: '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)', // Reset on touch devices, it doesn't add specificity @@ -76,8 +70,7 @@ const IOSSlider = withStyles({ }, }, }, - active: {}, - valueLabel: { + '& .MuiSlider-valueLabel': { left: 'calc(-50% + 12px)', top: -22, '& *': { @@ -85,63 +78,58 @@ const IOSSlider = withStyles({ color: '#000', }, }, - track: { + '& .MuiSlider-track': { height: 2, }, - rail: { + '& .MuiSlider-rail': { height: 2, opacity: 0.5, backgroundColor: '#bfbfbf', }, - mark: { + '& .MuiSlider-mark': { backgroundColor: '#bfbfbf', height: 8, width: 1, marginTop: -3, + '&.MuiSlider-markActive': { + opacity: 1, + backgroundColor: 'currentColor', + }, }, - markActive: { - opacity: 1, - backgroundColor: 'currentColor', - }, -})(Slider); +}); -const PrettoSlider = withStyles({ - root: { - color: '#52af77', - height: 8, - }, - thumb: { +const PrettoSlider = styled(Slider)({ + color: '#52af77', + height: 8, + '& .MuiSlider-thumb': { height: 24, width: 24, backgroundColor: '#fff', border: '2px solid currentColor', marginTop: -8, marginLeft: -12, - '&:focus, &:hover, &$active': { + '&:focus, &:hover, &.Mui-active': { boxShadow: 'inherit', }, }, - active: {}, - valueLabel: { + '& .MuiSlider-valueLabel': { left: 'calc(-50% + 4px)', }, - track: { + '& .MuiSlider-track': { height: 8, borderRadius: 4, }, - rail: { + '& .MuiSlider-rail': { height: 8, borderRadius: 4, }, -})(Slider); +}); -const AirbnbSlider = withStyles({ - root: { - color: '#3a8589', - height: 3, - padding: '13px 0', - }, - thumb: { +const AirbnbSlider = styled(Slider)({ + color: '#3a8589', + height: 3, + padding: '13px 0', + '& .MuiSlider-thumb': { height: 27, width: 27, backgroundColor: '#fff', @@ -149,7 +137,7 @@ const AirbnbSlider = withStyles({ marginTop: -12, marginLeft: -13, boxShadow: '#ebebeb 0 2px 2px', - '&:focus, &:hover, &$active': { + '&:focus, &:hover, &.Mui-active': { boxShadow: '#ccc 0 2px 3px 1px', }, '& .bar': { @@ -161,16 +149,15 @@ const AirbnbSlider = withStyles({ marginRight: 1, }, }, - active: {}, - track: { + '& .MuiSlider-track': { height: 3, }, - rail: { + '& .MuiSlider-rail': { color: '#d8d8d8', opacity: 1, height: 3, }, -})(Slider); +}); function AirbnbThumbComponent(props: any) { return ( @@ -183,10 +170,8 @@ function AirbnbThumbComponent(props: any) { } export default function CustomizedSlider() { - const classes = useStyles(); - return ( -
+ iOS -
+ pretto.fr -
+ Tooltip value label -
+ Airbnb index === 0 ? 'Minimum price' : 'Maximum price' } defaultValue={[20, 40]} /> -
+ ); } diff --git a/docs/src/pages/components/slider/DiscreteSlider.js b/docs/src/pages/components/slider/DiscreteSlider.js index 051ddacb07fda9..01f44e3263488d 100644 --- a/docs/src/pages/components/slider/DiscreteSlider.js +++ b/docs/src/pages/components/slider/DiscreteSlider.js @@ -1,23 +1,15 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - width: 300, - }, -}); - function valuetext(value) { return `${value}°C`; } export default function DiscreteSlider() { - const classes = useStyles(); - return ( -
+ Temperature @@ -45,6 +37,6 @@ export default function DiscreteSlider() { max={110} disabled /> -
+ ); } diff --git a/docs/src/pages/components/slider/DiscreteSlider.tsx b/docs/src/pages/components/slider/DiscreteSlider.tsx index b76612cff6af0e..2e104731868d86 100644 --- a/docs/src/pages/components/slider/DiscreteSlider.tsx +++ b/docs/src/pages/components/slider/DiscreteSlider.tsx @@ -1,23 +1,15 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - width: 300, - }, -}); - function valuetext(value: number) { return `${value}°C`; } export default function DiscreteSlider() { - const classes = useStyles(); - return ( -
+ Temperature @@ -45,6 +37,6 @@ export default function DiscreteSlider() { max={110} disabled /> -
+ ); } diff --git a/docs/src/pages/components/slider/DiscreteSliderLabel.js b/docs/src/pages/components/slider/DiscreteSliderLabel.js index 5e5ea2abd2f3b7..690d12f2b8f232 100644 --- a/docs/src/pages/components/slider/DiscreteSliderLabel.js +++ b/docs/src/pages/components/slider/DiscreteSliderLabel.js @@ -1,17 +1,8 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles((theme) => ({ - root: { - width: 300, - }, - margin: { - height: theme.spacing(3), - }, -})); - const marks = [ { value: 0, @@ -36,10 +27,8 @@ function valuetext(value) { } export default function DiscreteSlider() { - const classes = useStyles(); - return ( -
+ Always visible @@ -51,6 +40,6 @@ export default function DiscreteSlider() { marks={marks} valueLabelDisplay="on" /> -
+ ); } diff --git a/docs/src/pages/components/slider/DiscreteSliderLabel.tsx b/docs/src/pages/components/slider/DiscreteSliderLabel.tsx index 63c556e25629e6..2bcf9845ea5a56 100644 --- a/docs/src/pages/components/slider/DiscreteSliderLabel.tsx +++ b/docs/src/pages/components/slider/DiscreteSliderLabel.tsx @@ -1,19 +1,8 @@ import * as React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: 300, - }, - margin: { - height: theme.spacing(3), - }, - }), -); - const marks = [ { value: 0, @@ -38,10 +27,8 @@ function valuetext(value: number) { } export default function DiscreteSlider() { - const classes = useStyles(); - return ( -
+ Always visible @@ -53,6 +40,6 @@ export default function DiscreteSlider() { marks={marks} valueLabelDisplay="on" /> -
+ ); } diff --git a/docs/src/pages/components/slider/DiscreteSliderMarks.js b/docs/src/pages/components/slider/DiscreteSliderMarks.js index 8824eb220061d0..abb2386b304d86 100644 --- a/docs/src/pages/components/slider/DiscreteSliderMarks.js +++ b/docs/src/pages/components/slider/DiscreteSliderMarks.js @@ -1,17 +1,8 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles((theme) => ({ - root: { - width: 300, - }, - margin: { - height: theme.spacing(3), - }, -})); - const marks = [ { value: 0, @@ -36,10 +27,8 @@ function valuetext(value) { } export default function DiscreteSlider() { - const classes = useStyles(); - return ( -
+ Custom marks @@ -51,6 +40,6 @@ export default function DiscreteSlider() { valueLabelDisplay="auto" marks={marks} /> -
+ ); } diff --git a/docs/src/pages/components/slider/DiscreteSliderMarks.tsx b/docs/src/pages/components/slider/DiscreteSliderMarks.tsx index b91c5b5ccd123b..73ccd9fb5905af 100644 --- a/docs/src/pages/components/slider/DiscreteSliderMarks.tsx +++ b/docs/src/pages/components/slider/DiscreteSliderMarks.tsx @@ -1,19 +1,8 @@ import * as React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: 300, - }, - margin: { - height: theme.spacing(3), - }, - }), -); - const marks = [ { value: 0, @@ -38,10 +27,8 @@ function valuetext(value: number) { } export default function DiscreteSlider() { - const classes = useStyles(); - return ( -
+ Custom marks @@ -53,6 +40,6 @@ export default function DiscreteSlider() { valueLabelDisplay="auto" marks={marks} /> -
+ ); } diff --git a/docs/src/pages/components/slider/DiscreteSliderSteps.js b/docs/src/pages/components/slider/DiscreteSliderSteps.js index c1664b31bd1b8c..f0493ac62b8209 100644 --- a/docs/src/pages/components/slider/DiscreteSliderSteps.js +++ b/docs/src/pages/components/slider/DiscreteSliderSteps.js @@ -1,23 +1,15 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - width: 300, - }, -}); - function valuetext(value) { return `${value}°C`; } export default function DiscreteSlider() { - const classes = useStyles(); - return ( -
+ Small steps @@ -31,6 +23,6 @@ export default function DiscreteSlider() { max={0.0000001} valueLabelDisplay="auto" /> -
+ ); } diff --git a/docs/src/pages/components/slider/DiscreteSliderSteps.tsx b/docs/src/pages/components/slider/DiscreteSliderSteps.tsx index 477f4a8a6f998d..ffceb32a5db0d3 100644 --- a/docs/src/pages/components/slider/DiscreteSliderSteps.tsx +++ b/docs/src/pages/components/slider/DiscreteSliderSteps.tsx @@ -1,23 +1,15 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - width: 300, - }, -}); - function valuetext(value: number) { return `${value}°C`; } export default function DiscreteSlider() { - const classes = useStyles(); - return ( -
+ Small steps @@ -31,6 +23,6 @@ export default function DiscreteSlider() { max={0.0000001} valueLabelDisplay="auto" /> -
+ ); } diff --git a/docs/src/pages/components/slider/DiscreteSliderValues.js b/docs/src/pages/components/slider/DiscreteSliderValues.js index d6271b26fba43d..5a8ffac43f264f 100644 --- a/docs/src/pages/components/slider/DiscreteSliderValues.js +++ b/docs/src/pages/components/slider/DiscreteSliderValues.js @@ -1,14 +1,8 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - width: 300, - }, -}); - const marks = [ { value: 0, @@ -37,10 +31,8 @@ function valueLabelFormat(value) { } export default function DiscreteSlider() { - const classes = useStyles(); - return ( -
+ Restricted values @@ -53,6 +45,6 @@ export default function DiscreteSlider() { valueLabelDisplay="auto" marks={marks} /> -
+ ); } diff --git a/docs/src/pages/components/slider/DiscreteSliderValues.tsx b/docs/src/pages/components/slider/DiscreteSliderValues.tsx index e5113ccce80a4e..703c896f092565 100644 --- a/docs/src/pages/components/slider/DiscreteSliderValues.tsx +++ b/docs/src/pages/components/slider/DiscreteSliderValues.tsx @@ -1,14 +1,8 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - width: 300, - }, -}); - const marks = [ { value: 0, @@ -37,10 +31,8 @@ function valueLabelFormat(value: number) { } export default function DiscreteSlider() { - const classes = useStyles(); - return ( -
+ Restricted values @@ -53,6 +45,6 @@ export default function DiscreteSlider() { valueLabelDisplay="auto" marks={marks} /> -
+ ); } diff --git a/docs/src/pages/components/slider/InputSlider.js b/docs/src/pages/components/slider/InputSlider.js index 2f3c871d482a66..5a87551bdbee47 100644 --- a/docs/src/pages/components/slider/InputSlider.js +++ b/docs/src/pages/components/slider/InputSlider.js @@ -1,22 +1,17 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -import Input from '@material-ui/core/Input'; +import MuiInput from '@material-ui/core/Input'; import VolumeUp from '@material-ui/icons/VolumeUp'; -const useStyles = makeStyles({ - root: { - width: 250, - }, - input: { - width: 42, - }, -}); +const Input = styled(MuiInput)` + width: 42px; +`; export default function InputSlider() { - const classes = useStyles(); const [value, setValue] = React.useState(30); const handleSliderChange = (event, newValue) => { @@ -36,7 +31,7 @@ export default function InputSlider() { }; return ( -
+ Volume @@ -53,7 +48,6 @@ export default function InputSlider() { -
+ ); } diff --git a/docs/src/pages/components/slider/InputSlider.tsx b/docs/src/pages/components/slider/InputSlider.tsx index 95edd3ab786d91..9ff75be4b3ef1a 100644 --- a/docs/src/pages/components/slider/InputSlider.tsx +++ b/docs/src/pages/components/slider/InputSlider.tsx @@ -1,22 +1,17 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -import Input from '@material-ui/core/Input'; +import MuiInput from '@material-ui/core/Input'; import VolumeUp from '@material-ui/icons/VolumeUp'; -const useStyles = makeStyles({ - root: { - width: 250, - }, - input: { - width: 42, - }, -}); +const Input = styled(MuiInput)` + width: 42px; +`; export default function InputSlider() { - const classes = useStyles(); const [value, setValue] = React.useState< number | string | Array >(30); @@ -41,7 +36,7 @@ export default function InputSlider() { }; return ( -
+ Volume @@ -58,7 +53,6 @@ export default function InputSlider() { -
+ ); } diff --git a/docs/src/pages/components/slider/NonLinearSlider.js b/docs/src/pages/components/slider/NonLinearSlider.js index 66ca18f3c46239..a8a8b9adfb8cc9 100644 --- a/docs/src/pages/components/slider/NonLinearSlider.js +++ b/docs/src/pages/components/slider/NonLinearSlider.js @@ -1,14 +1,8 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - width: 250, - }, -}); - function valueLabelFormat(value) { const units = ['KB', 'MB', 'GB', 'TB']; @@ -36,10 +30,8 @@ export default function NonLinearSlider() { } }; - const classes = useStyles(); - return ( -
+ Storage: {valueLabelFormat(calculateValue(value))} @@ -55,6 +47,6 @@ export default function NonLinearSlider() { valueLabelDisplay="auto" aria-labelledby="non-linear-slider" /> -
+ ); } diff --git a/docs/src/pages/components/slider/NonLinearSlider.tsx b/docs/src/pages/components/slider/NonLinearSlider.tsx index e257a6bef178ea..a3a76137f99d76 100644 --- a/docs/src/pages/components/slider/NonLinearSlider.tsx +++ b/docs/src/pages/components/slider/NonLinearSlider.tsx @@ -1,14 +1,8 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - width: 250, - }, -}); - function valueLabelFormat(value: number) { const units = ['KB', 'MB', 'GB', 'TB']; @@ -39,10 +33,8 @@ export default function NonLinearSlider() { } }; - const classes = useStyles(); - return ( -
+ Storage: {valueLabelFormat(calculateValue(value))} @@ -58,6 +50,6 @@ export default function NonLinearSlider() { valueLabelDisplay="auto" aria-labelledby="non-linear-slider" /> -
+ ); } diff --git a/docs/src/pages/components/slider/RangeSlider.js b/docs/src/pages/components/slider/RangeSlider.js index cd72d7d45b7f71..f07975c2a73585 100644 --- a/docs/src/pages/components/slider/RangeSlider.js +++ b/docs/src/pages/components/slider/RangeSlider.js @@ -1,20 +1,13 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - width: 300, - }, -}); - function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { - const classes = useStyles(); const [value, setValue] = React.useState([20, 37]); const handleChange = (event, newValue) => { @@ -22,7 +15,7 @@ export default function RangeSlider() { }; return ( -
+ Temperature range @@ -33,6 +26,6 @@ export default function RangeSlider() { aria-labelledby="range-slider-demo" getAriaValueText={valuetext} /> -
+ ); } diff --git a/docs/src/pages/components/slider/RangeSlider.tsx b/docs/src/pages/components/slider/RangeSlider.tsx index 7f3c8b9c8bede2..d3dd6e51dbfcfd 100644 --- a/docs/src/pages/components/slider/RangeSlider.tsx +++ b/docs/src/pages/components/slider/RangeSlider.tsx @@ -1,20 +1,13 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - width: 300, - }, -}); - function valuetext(value: number) { return `${value}°C`; } export default function RangeSlider() { - const classes = useStyles(); const [value, setValue] = React.useState([20, 37]); const handleChange = ( @@ -25,7 +18,7 @@ export default function RangeSlider() { }; return ( -
+ Temperature range @@ -36,6 +29,6 @@ export default function RangeSlider() { aria-labelledby="range-slider-demo" getAriaValueText={valuetext} /> -
+ ); } diff --git a/docs/src/pages/components/slider/TrackFalseSlider.js b/docs/src/pages/components/slider/TrackFalseSlider.js index edf7ddc1a097d3..2f6bc38a9df1d0 100644 --- a/docs/src/pages/components/slider/TrackFalseSlider.js +++ b/docs/src/pages/components/slider/TrackFalseSlider.js @@ -1,16 +1,14 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles((theme) => ({ - root: { - width: 250, - }, - margin: { - height: theme.spacing(3), - }, -})); +const Separator = styled('div')( + ({ theme }) => ` + height: ${theme.spacing(3)}; +`, +); const marks = [ { @@ -36,10 +34,8 @@ function valuetext(value) { } export default function TrackFalseSlider() { - const classes = useStyles(); - return ( -
+ Removed track @@ -50,7 +46,7 @@ export default function TrackFalseSlider() { defaultValue={30} marks={marks} /> -
+ Removed track range slider @@ -61,6 +57,6 @@ export default function TrackFalseSlider() { defaultValue={[20, 37, 50]} marks={marks} /> -
+ ); } diff --git a/docs/src/pages/components/slider/TrackFalseSlider.tsx b/docs/src/pages/components/slider/TrackFalseSlider.tsx index 9a47b551f473cc..11b1c7282057b9 100644 --- a/docs/src/pages/components/slider/TrackFalseSlider.tsx +++ b/docs/src/pages/components/slider/TrackFalseSlider.tsx @@ -1,17 +1,13 @@ import * as React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: 250, - }, - margin: { - height: theme.spacing(3), - }, - }), +const Separator = styled('div')( + ({ theme }) => ` + height: ${theme.spacing(3)}; +`, ); const marks = [ @@ -38,10 +34,8 @@ function valuetext(value: number) { } export default function TrackFalseSlider() { - const classes = useStyles(); - return ( -
+ Removed track @@ -52,7 +46,7 @@ export default function TrackFalseSlider() { defaultValue={30} marks={marks} /> -
+ Removed track range slider @@ -63,6 +57,6 @@ export default function TrackFalseSlider() { defaultValue={[20, 37, 50]} marks={marks} /> -
+ ); } diff --git a/docs/src/pages/components/slider/TrackInvertedSlider.js b/docs/src/pages/components/slider/TrackInvertedSlider.js index f58c033931c288..b29fd093976f49 100644 --- a/docs/src/pages/components/slider/TrackInvertedSlider.js +++ b/docs/src/pages/components/slider/TrackInvertedSlider.js @@ -1,16 +1,14 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles((theme) => ({ - root: { - width: 250, - }, - margin: { - height: theme.spacing(3), - }, -})); +const Separator = styled('div')( + ({ theme }) => ` + height: ${theme.spacing(3)}; +`, +); const marks = [ { @@ -36,10 +34,8 @@ function valuetext(value) { } export default function TrackInvertedSlider() { - const classes = useStyles(); - return ( -
+ Inverted track @@ -50,7 +46,7 @@ export default function TrackInvertedSlider() { defaultValue={30} marks={marks} /> -
+ Inverted track range @@ -61,6 +57,6 @@ export default function TrackInvertedSlider() { defaultValue={[20, 37]} marks={marks} /> -
+ ); } diff --git a/docs/src/pages/components/slider/TrackInvertedSlider.tsx b/docs/src/pages/components/slider/TrackInvertedSlider.tsx index 586925157e395f..9ea0d430825cb4 100644 --- a/docs/src/pages/components/slider/TrackInvertedSlider.tsx +++ b/docs/src/pages/components/slider/TrackInvertedSlider.tsx @@ -1,17 +1,13 @@ import * as React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: 250, - }, - margin: { - height: theme.spacing(3), - }, - }), +const Separator = styled('div')( + ({ theme }) => ` + height: ${theme.spacing(3)}; +`, ); const marks = [ @@ -38,10 +34,8 @@ function valuetext(value: number) { } export default function TrackInvertedSlider() { - const classes = useStyles(); - return ( -
+ Inverted track @@ -52,7 +46,7 @@ export default function TrackInvertedSlider() { defaultValue={30} marks={marks} /> -
+ Inverted track range @@ -63,6 +57,6 @@ export default function TrackInvertedSlider() { defaultValue={[20, 37]} marks={marks} /> -
+ ); } diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.js b/docs/src/pages/components/slider/UnstyledSlider.js similarity index 100% rename from docs/src/pages/components/slider-styled/UnstyledSlider.js rename to docs/src/pages/components/slider/UnstyledSlider.js diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx b/docs/src/pages/components/slider/UnstyledSlider.tsx similarity index 100% rename from docs/src/pages/components/slider-styled/UnstyledSlider.tsx rename to docs/src/pages/components/slider/UnstyledSlider.tsx diff --git a/docs/src/pages/components/slider/VerticalSlider.js b/docs/src/pages/components/slider/VerticalSlider.js index bb1721e833cd0b..c74996bbd78fac 100644 --- a/docs/src/pages/components/slider/VerticalSlider.js +++ b/docs/src/pages/components/slider/VerticalSlider.js @@ -1,14 +1,8 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - height: 300, - }, -}); - function valuetext(value) { return `${value}°C`; } @@ -33,14 +27,12 @@ const marks = [ ]; export default function VerticalSlider() { - const classes = useStyles(); - return ( Temperature -
+ -
+ ); } diff --git a/docs/src/pages/components/slider/VerticalSlider.tsx b/docs/src/pages/components/slider/VerticalSlider.tsx index c8f1fcd4387937..04c762bf0e2d78 100644 --- a/docs/src/pages/components/slider/VerticalSlider.tsx +++ b/docs/src/pages/components/slider/VerticalSlider.tsx @@ -1,14 +1,8 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/core/Slider'; -const useStyles = makeStyles({ - root: { - height: 300, - }, -}); - function valuetext(value: number) { return `${value}°C`; } @@ -33,14 +27,12 @@ const marks = [ ]; export default function VerticalSlider() { - const classes = useStyles(); - return ( Temperature -
+ -
+ ); } diff --git a/docs/src/pages/components/slider/slider.md b/docs/src/pages/components/slider/slider.md index 9da190af6bfc2b..b33938bd850c70 100644 --- a/docs/src/pages/components/slider/slider.md +++ b/docs/src/pages/components/slider/slider.md @@ -102,6 +102,10 @@ Increasing _x_ by one increases the represented value by factor _2_. {{"demo": "pages/components/slider/NonLinearSlider.js"}} +## Unstyled slider + +{{"demo": "pages/components/slider-styled/UnstyledSlider.js"}} + ## Accessibility (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider) diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js index 4d68337a731a4f..c7f8d9fe38cc95 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.js +++ b/docs/src/pages/guides/interoperability/EmotionCSS.js @@ -1,6 +1,6 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import Box from '@material-ui/core/Box'; export default function EmotionCSS() { diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx index 4d68337a731a4f..c7f8d9fe38cc95 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.tsx +++ b/docs/src/pages/guides/interoperability/EmotionCSS.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import Box from '@material-ui/core/Box'; export default function EmotionCSS() { diff --git a/docs/src/pages/guides/interoperability/StyledComponents.js b/docs/src/pages/guides/interoperability/StyledComponents.js index 71f3d0076ace56..1dfb9b05c73465 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.js +++ b/docs/src/pages/guides/interoperability/StyledComponents.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` diff --git a/docs/src/pages/guides/interoperability/StyledComponents.tsx b/docs/src/pages/guides/interoperability/StyledComponents.tsx index 71f3d0076ace56..1dfb9b05c73465 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponents.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js index d1f0130d956856..1ff74377839e64 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx index d1f0130d956856..1ff74377839e64 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 52021db7aebc59..7f78318babc2b9 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -5,7 +5,7 @@ import { ThemeProvider, darken, } from '@material-ui/core/styles'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import Box from '@material-ui/core/Box'; const customTheme = createMuiTheme({ diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 52021db7aebc59..7f78318babc2b9 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -5,7 +5,7 @@ import { ThemeProvider, darken, } from '@material-ui/core/styles'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import Box from '@material-ui/core/Box'; const customTheme = createMuiTheme({ diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 3574d350b7b66f..3985bc3a27996c 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -36,7 +36,7 @@ Nothing fancy, just plain CSS. ```jsx import * as React from 'react'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import './PlainCssSlider.css'; export default function PlainCssSlider() { @@ -108,7 +108,7 @@ The following examples override the slider's `thumb` style in addition to the cu ```jsx import * as React from 'react'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import './PlainCssSliderDeep1.css'; export default function PlainCssSliderDeep1() { @@ -143,7 +143,7 @@ The above demo relies on the [default `className` values](/styles/advanced/#with ```jsx import * as React from 'react'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import './PlainCssSliderDeep2.css'; export default function PlainCssSliderDeep2() { @@ -183,7 +183,7 @@ Explicitly providing the class names to the component is too much effort? ```jsx import * as React from 'react'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import './GlobalCssSlider.css'; export default function GlobalCssSlider() { @@ -250,7 +250,7 @@ The following example overrides the slider's `thumb` style in addition to the cu ```jsx import * as React from 'react'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import './GlobalCssSliderDeep.css'; export default function GlobalCssSliderDeep() { @@ -278,7 +278,7 @@ from `@material-ui/core/styles` and have direct access to the theme. ```jsx import * as React from 'react'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import { experimentalStyled as styled } from '@material-ui/core/styles'; const CustomizedSlider = styled(Slider)` @@ -306,7 +306,7 @@ The following examples override the slider's `thumb` style in addition to the cu ```jsx import * as React from 'react'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import { experimentalStyled as styled } from '@material-ui/core/styles'; const CustomizedSlider = styled(Slider)` @@ -336,7 +336,7 @@ The above demo relies on the [default `className` values](/styles/advanced/#with ```jsx import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; const CustomizedSlider = styled((props) => ( @@ -420,7 +420,7 @@ bundling solution people are using. ```jsx import React from 'react'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; // webpack, parcel or else will inject the CSS into the page import styles from './CssModulesSlider.module.css'; @@ -495,7 +495,7 @@ The following examples override the slider's `thumb` style in addition to the cu import React from 'react'; // webpack, parcel or else will inject the CSS into the page import styles from './CssModulesSliderDeep1.module.css'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; export default function CssModulesSliderDeep1() { return ( @@ -531,7 +531,7 @@ The above demo relies on the [default `className` values](/styles/advanced/#with import React from 'react'; // webpack, parcel or else will inject the CSS into the page import styles from './CssModulesSliderDeep2.module.css'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; export default function CssModulesSliderDeep2() { return ( @@ -563,7 +563,7 @@ Emotion's **css()** method works seamlessly with Material-UI. ```jsx /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; export default function EmotionCSS() { return ( diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 2e9b713d681202..77be34bd7595f7 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -202,7 +202,6 @@ "/components/use-media-query": "useMediaQuery", "/components/lab": "Lab", "/components/about-the-lab": "About the lab 🧪", - "/components/slider-styled": "Slider Styled", "/components/timeline": "Timeline", "/components/trap-focus": "Trap Focus", "/components/tree-view": "Tree View", diff --git a/examples/create-react-app-with-styled-components/src/App.js b/examples/create-react-app-with-styled-components/src/App.js index 0521741b09bca1..e092cff5641def 100644 --- a/examples/create-react-app-with-styled-components/src/App.js +++ b/examples/create-react-app-with-styled-components/src/App.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Slider from '@material-ui/lab/SliderStyled'; +import Slider from '@material-ui/core/Slider'; import Typography from '@material-ui/core/Typography'; export default function App() { diff --git a/packages/material-ui-lab/package.json b/packages/material-ui-lab/package.json index 6252a7d11d41c7..c370a8616c34ab 100644 --- a/packages/material-ui-lab/package.json +++ b/packages/material-ui-lab/package.json @@ -48,7 +48,6 @@ "dependencies": { "@babel/runtime": "^7.4.4", "@material-ui/system": "^5.0.0-alpha.14", - "@material-ui/unstyled": "^5.0.0-alpha.14", "@material-ui/utils": "^5.0.0-alpha.14", "clsx": "^1.0.4", "prop-types": "^15.7.2", diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts deleted file mode 100644 index 3b80b4c84322c5..00000000000000 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import { SxProps } from '@material-ui/core/Box'; -import { - ExtendSliderUnstyledTypeMap, - ExtendSliderUnstyled, -} from '@material-ui/unstyled/SliderUnstyled'; - -export type SliderStyledTypeMap< - D extends React.ElementType = 'span', - P = {} -> = ExtendSliderUnstyledTypeMap<{ - props: P & { - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: D; -}>; - -type SliderRootProps = NonNullable['root']; -type SliderMarkProps = NonNullable['mark']; -type SliderMarkLabelProps = NonNullable< - SliderStyledTypeMap['props']['componentsProps'] ->['markLabel']; -type SliderRailProps = NonNullable['rail']; -type SliderTrackProps = NonNullable['track']; -type SliderThumbProps = NonNullable['thumb']; -type SliderValueLabel = NonNullable['valueLabel']; - -export const SliderRoot: React.FC; -export const SliderMark: React.FC; -export const SliderMarkLabel: React.FC; -export const SliderRail: React.FC; -export const SliderTrack: React.FC; -export const SliderThumb: React.FC; -export const SliderValueLabel: React.FC; - -/** - * - * Demos: - * - * - [Slider Styled](https://material-ui.com/components/slider-styled/) - * - * API: - * - * - [SliderStyled API](https://material-ui.com/api/slider-styled/) - */ -declare const Slider: ExtendSliderUnstyled; - -export default Slider; diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js deleted file mode 100644 index f47f91b54b331a..00000000000000 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ /dev/null @@ -1,483 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { - useThemeProps, - experimentalStyled, - alpha, - lighten, - darken, -} from '@material-ui/core/styles'; -import { capitalize } from '@material-ui/core/utils'; -import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; -import ValueLabelStyled from './ValueLabelStyled'; - -const overridesResolver = (props, styles, name) => { - const { - color = 'primary', - marks: marksProp = false, - max = 100, - min = 0, - orientation = 'horizontal', - step = 1, - track = 'normal', - } = props; - - const marks = - marksProp === true && step !== null - ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({ - value: min + step * index, - })) - : marksProp || []; - - const marked = marks.length > 0 && marks.some((mark) => mark.label); - - const styleOverrides = { - ...styles.root, - ...styles[`color${capitalize(color)}`], - '&.Mui-disabled': styles.disabled, - ...(marked && styles.marked), - ...(orientation === 'vertical' && styles.vertical), - ...(track === 'inverted' && styles.trackInverted), - ...(track === false && styles.trackFalse), - [`& .${name}-rail`]: styles.rail, - [`& .${name}-track`]: styles.track, - [`& .${name}-mark`]: styles.mark, - [`& .${name}-markLabel`]: styles.markLabel, - [`& .${name}-valueLabel`]: styles.valueLabel, - [`& .${name}-thumb`]: { - ...styles.thumb, - ...styles[`thumbColor${capitalize(color)}`], - '&.Mui-disabled': styles.disabled, - }, - }; - - return styleOverrides; -}; - -const SliderRoot = experimentalStyled( - 'span', - {}, - { muiName: 'MuiSlider', overridesResolver }, -)((props) => ({ - height: 2, - width: '100%', - boxSizing: 'content-box', - padding: '13px 0', - display: 'inline-block', - position: 'relative', - cursor: 'pointer', - touchAction: 'none', - color: props.theme.palette.primary.main, - WebkitTapHighlightColor: 'transparent', - ...(props.styleProps.color === 'secondary' && { - color: props.theme.palette.secondary.main, - }), - '&.Mui-disabled': { - pointerEvents: 'none', - cursor: 'default', - color: props.theme.palette.grey[400], - }, - ...(props.styleProps.orientation === 'vertical' && { - width: 2, - height: '100%', - padding: '0 13px', - }), - // The primary input mechanism of the device includes a pointing device of limited accuracy. - '@media (pointer: coarse)': { - // Reach 42px touch target, about ~8mm on screen. - padding: '20px 0', - ...(props.styleProps.orientation === 'vertical' && { - padding: '0 20px', - }), - }, - '@media print': { - colorAdjust: 'exact', - }, - ...(props.styleProps.marked && { - marginBottom: 20, - ...(props.styleProps.orientation === 'vertical' && { - marginBottom: 'auto', - marginRight: 20, - }), - }), - '& .MuiSlider-rail': { - display: 'block', - position: 'absolute', - width: '100%', - height: 2, - borderRadius: 1, - backgroundColor: 'currentColor', - opacity: 0.38, - ...(props.styleProps.orientation === 'vertical' && { - height: '100%', - width: 2, - }), - ...(props.styleProps.track === 'inverted' && { - opacity: 1, - }), - }, - '& .MuiSlider-track': { - display: 'block', - position: 'absolute', - height: 2, - borderRadius: 1, - backgroundColor: 'currentColor', - ...(props.styleProps.orientation === 'vertical' && { - width: 2, - }), - ...(props.styleProps.track === false && { - display: 'none', - }), - ...(props.styleProps.track === 'inverted' && { - backgroundColor: - // Same logic as the LinearProgress track color - props.theme.palette.mode === 'light' - ? lighten(props.theme.palette.primary.main, 0.62) - : darken(props.theme.palette.primary.main, 0.5), - }), - }, - '& .MuiSlider-thumb': { - position: 'absolute', - width: 12, - height: 12, - marginLeft: -6, - marginTop: -5, - boxSizing: 'border-box', - borderRadius: '50%', - outline: 0, - backgroundColor: 'currentColor', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - transition: props.theme.transitions.create(['box-shadow'], { - duration: props.theme.transitions.duration.shortest, - }), - '::after': { - position: 'absolute', - content: '""', - borderRadius: '50%', - // reach 42px hit target (2 * 15 + thumb diameter) - left: -15, - top: -15, - right: -15, - bottom: -15, - }, - ':hover, &.Mui-focusVisible': { - boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.primary.main, 0.16)}`, - '@media (hover: none)': { - boxShadow: 'none', - }, - }, - '&.Mui-active': { - boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.primary.main, 0.16)}`, - }, - '&.Mui-disabled': { - width: 8, - height: 8, - marginLeft: -4, - marginTop: -3, - ':hover': { - boxShadow: 'none', - }, - ...(props.styleProps.orientation === 'vertical' && { - marginLeft: -3, - marginBottom: -4, - }), - }, - ...(props.styleProps.orientation === 'vertical' && { - marginLeft: -5, - marginBottom: -6, - }), - ...(props.styleProps.color === 'secondary' && { - ':hover': { - boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.secondary.main, 0.16)}`, - }, - '&.Mui-focusVisible': { - boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.secondary.main, 0.16)}`, - }, - '&.Mui-active': { - boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.secondary.main, 0.16)}`, - }, - }), - }, - '& .MuiSlider-valueLabel': { - // IE11 centering bug, to remove from the customization demos once no longer supported - left: 'calc(-50% - 4px)', - }, - '& .MuiSlider-mark': { - position: 'absolute', - width: 2, - height: 2, - borderRadius: 1, - backgroundColor: 'currentColor', - '&.MuiSlider-markActive': { - backgroundColor: props.theme.palette.background.paper, - opacity: 0.8, - }, - }, - '& .MuiSlider-markLabel': { - ...props.theme.typography.body2, - color: props.theme.palette.text.secondary, - position: 'absolute', - top: 26, - transform: 'translateX(-50%)', - whiteSpace: 'nowrap', - ...(props.styleProps.orientation === 'vertical' && { - top: 'auto', - left: 26, - transform: 'translateY(50%)', - }), - '@media (pointer: coarse)': { - top: 40, - ...(props.styleProps.orientation === 'vertical' && { - top: 'auto', - left: 31, - }), - }, - '&.MuiSlider-markLabelActive': { - color: props.theme.palette.text.primary, - }, - }, -})); - -SliderRoot.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * @ignore - */ - children: PropTypes.node, - /** - * @ignore - */ - styleProps: PropTypes.shape({ - 'aria-label': PropTypes.string, - 'aria-labelledby': PropTypes.string, - 'aria-valuetext': PropTypes.string, - classes: PropTypes.object, - color: PropTypes.oneOf(['primary', 'secondary']), - defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - disabled: PropTypes.bool, - getAriaLabel: PropTypes.func, - getAriaValueText: PropTypes.func, - isRtl: PropTypes.bool, - marks: PropTypes.oneOfType([ - PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.node, - value: PropTypes.number.isRequired, - }), - ), - PropTypes.bool, - ]), - max: PropTypes.number, - min: PropTypes.number, - name: PropTypes.string, - onChange: PropTypes.func, - onChangeCommitted: PropTypes.func, - orientation: PropTypes.oneOf(['horizontal', 'vertical']), - scale: PropTypes.func, - step: PropTypes.number, - track: PropTypes.oneOf(['inverted', 'normal', false]), - value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), - valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - }), -}; - -const Slider = React.forwardRef(function Slider(inputProps, ref) { - const props = useThemeProps({ props: inputProps, name: 'MuiSlider' }); - const { components = {}, ...other } = props; - return ( - - ); -}); - -Slider.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * The label of the slider. - */ - 'aria-label': PropTypes.string, - /** - * The id of the element containing a label for the slider. - */ - 'aria-labelledby': PropTypes.string, - /** - * A string value that provides a user-friendly name for the current value of the slider. - */ - 'aria-valuetext': PropTypes.string, - /** - * @ignore - */ - children: PropTypes.node, - /** - * The color of the component. It supports those theme colors that make sense for this component. - * @default 'primary' - */ - color: PropTypes.oneOf(['primary', 'secondary']), - /** - * The components used for each slot inside the Slider. - * Either a string to use a HTML element or a component. - * @default {} - */ - components: PropTypes.shape({ - Mark: PropTypes.elementType, - MarkLabel: PropTypes.elementType, - Rail: PropTypes.elementType, - Root: PropTypes.elementType, - Thumb: PropTypes.elementType, - Track: PropTypes.elementType, - ValueLabel: PropTypes.elementType, - }), - /** - * The props used for each slot inside the Slider. - * @default {} - */ - componentsProps: PropTypes.object, - /** - * The default element value. Use when the component is not controlled. - */ - defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - /** - * If `true`, the slider is disabled. - * @default false - */ - disabled: PropTypes.bool, - /** - * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. - * - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaLabel: PropTypes.func, - /** - * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. - * - * @param {number} value The thumb label's value to format. - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaValueText: PropTypes.func, - /** - * Indicates whether the theme context has rtl direction. It is set automatically. - * @default false - */ - isRtl: PropTypes.bool, - /** - * Marks indicate predetermined values to which the user can move the slider. - * If `true` the marks are spaced according the value of the `step` prop. - * If an array, it should contain objects with `value` and an optional `label` keys. - * @default false - */ - marks: PropTypes.oneOfType([ - PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.node, - value: PropTypes.number.isRequired, - }), - ), - PropTypes.bool, - ]), - /** - * The maximum allowed value of the slider. - * Should not be equal to min. - * @default 100 - */ - max: PropTypes.number, - /** - * The minimum allowed value of the slider. - * Should not be equal to max. - * @default 0 - */ - min: PropTypes.number, - /** - * Name attribute of the hidden `input` element. - */ - name: PropTypes.string, - /** - * Callback function that is fired when the slider's value changed. - * - * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {number | number[]} value The new value. - */ - onChange: PropTypes.func, - /** - * Callback function that is fired when the `mouseup` is triggered. - * - * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {number | number[]} value The new value. - */ - onChangeCommitted: PropTypes.func, - /** - * The slider orientation. - * @default 'horizontal' - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']), - /** - * A transformation function, to change the scale of the slider. - * @default (x) => x - */ - scale: PropTypes.func, - /** - * The granularity with which the slider can step through values. (A "discrete" slider.) - * The `min` prop serves as the origin for the valid values. - * We recommend (max - min) to be evenly divisible by the step. - * - * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. - * @default 1 - */ - step: PropTypes.number, - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.object, - /** - * The track presentation: - * - * - `normal` the track will render a bar representing the slider value. - * - `inverted` the track will render a bar representing the remaining slider value. - * - `false` the track will render without a bar. - * @default 'normal' - */ - track: PropTypes.oneOf(['inverted', 'normal', false]), - /** - * The value of the slider. - * For ranged sliders, provide an array with two values. - */ - value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - /** - * Controls when the value label is displayed: - * - * - `auto` the value label will display when the thumb is hovered or focused. - * - `on` will display persistently. - * - `off` will never display. - * @default 'off' - */ - valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), - /** - * The format function the value label's value. - * - * When a function is provided, it should have the following signature: - * - * - {number} value The value label's value to format - * - {number} index The value label's index to format - * @default (x) => x - */ - valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), -}; - -export default Slider; diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.spec.tsx b/packages/material-ui-lab/src/SliderStyled/SliderStyled.spec.tsx deleted file mode 100644 index 93972052db9c92..00000000000000 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import Slider from '@material-ui/lab/SliderStyled'; - -function testOnChange() { - function handleSliderChange(event: React.SyntheticEvent, tabsValue: unknown) {} - ; - - function handleElementChange(event: React.ChangeEvent) {} - // @ts-expect-error internally it's whatever even lead to a change in value - ; -} diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.test.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.test.js deleted file mode 100644 index fffd7497d832e9..00000000000000 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.test.js +++ /dev/null @@ -1,806 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { spy, stub } from 'sinon'; -import { expect } from 'chai'; -import { - createMount, - describeConformance, - act, - createClientRender, - fireEvent, - screen, -} from 'test/utils'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; -import styled from '@material-ui/styled-engine'; -import Slider from './SliderStyled'; - -function createTouches(touches) { - return { - changedTouches: touches.map( - (touch) => - new Touch({ - target: document.body, - ...touch, - }), - ), - }; -} - -describe('', () => { - // only run in supported browsers - if (typeof Touch === 'undefined') { - return; - } - - const mount = createMount(); - const render = createClientRender(); - - describeConformance(, () => ({ - classes: {}, - inheritComponent: 'span', - mount, - refInstanceof: window.HTMLSpanElement, - testComponentPropWith: 'span', - })); - - it('should call handlers', () => { - const handleChange = spy(); - const handleChangeCommitted = spy(); - - const { container, getByRole } = render( - , - ); - const slider = getByRole('slider'); - - fireEvent.mouseDown(container.firstChild); - fireEvent.mouseUp(document.body); - - expect(handleChange.callCount).to.equal(1); - expect(handleChangeCommitted.callCount).to.equal(1); - - slider.focus(); - fireEvent.keyDown(slider, { - key: 'Home', - }); - expect(handleChange.callCount).to.equal(2); - expect(handleChangeCommitted.callCount).to.equal(2); - }); - - it('should only listen to changes from the same touchpoint', () => { - const handleChange = spy(); - const handleChangeCommitted = spy(); - const { container } = render( - , - ); - - fireEvent.touchStart(container.firstChild, createTouches([{ identifier: 1 }])); - expect(handleChange.callCount).to.equal(1); - expect(handleChangeCommitted.callCount).to.equal(0); - - fireEvent.touchEnd(document.body, createTouches([{ identifier: 2 }])); - expect(handleChange.callCount).to.equal(1); - expect(handleChangeCommitted.callCount).to.equal(0); - - fireEvent.touchMove(document.body, createTouches([{ identifier: 1 }])); - expect(handleChange.callCount).to.equal(2); - expect(handleChangeCommitted.callCount).to.equal(0); - - fireEvent.touchMove(document.body, createTouches([{ identifier: 2 }])); - expect(handleChange.callCount).to.equal(2); - expect(handleChangeCommitted.callCount).to.equal(0); - - fireEvent.touchEnd(document.body, createTouches([{ identifier: 1 }])); - expect(handleChange.callCount).to.equal(2); - expect(handleChangeCommitted.callCount).to.equal(1); - }); - - it('should edge against a dropped mouseup event', () => { - const handleChange = spy(); - const { container } = render(); - stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ - width: 100, - left: 0, - })); - - fireEvent.mouseDown(container.firstChild, { - buttons: 1, - clientX: 1, - }); - expect(handleChange.callCount).to.equal(1); - expect(handleChange.args[0][1]).to.equal(1); - - fireEvent.mouseMove(document.body, { - buttons: 1, - clientX: 10, - }); - expect(handleChange.callCount).to.equal(2); - expect(handleChange.args[1][1]).to.equal(10); - - fireEvent.mouseMove(document.body, { - buttons: 0, - clientX: 11, - }); - // The mouse's button was released, stop the dragging session. - expect(handleChange.callCount).to.equal(2); - }); - - describe('prop: orientation', () => { - it('should render with the vertical classes', () => { - const { container, getByRole } = render(); - expect(container.firstChild).to.have.class('MuiSlider-vertical'); - expect(getByRole('slider')).to.have.attribute('aria-orientation', 'vertical'); - }); - - it('should report the right position', () => { - const handleChange = spy(); - const { container } = render( - , - ); - stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ - width: 10, - height: 100, - bottom: 100, - left: 0, - })); - - fireEvent.touchStart( - container.firstChild, - createTouches([{ identifier: 1, clientX: 0, clientY: 20 }]), - ); - fireEvent.touchMove( - document.body, - createTouches([{ identifier: 1, clientX: 0, clientY: 22 }]), - ); - - expect(handleChange.callCount).to.equal(2); - expect(handleChange.args[0][1]).to.equal(80); - expect(handleChange.args[1][1]).to.equal(78); - }); - }); - - describe('range', () => { - it('should support keyboard', () => { - const { getAllByRole } = render(); - const [thumb1, thumb2] = getAllByRole('slider'); - - act(() => { - thumb1.focus(); - fireEvent.keyDown(thumb1, { - key: 'ArrowRight', - }); - }); - - expect(thumb1.getAttribute('aria-valuenow')).to.equal('21'); - - act(() => { - thumb2.focus(); - fireEvent.keyDown(thumb2, { - key: 'ArrowLeft', - }); - }); - - expect(thumb2.getAttribute('aria-valuenow')).to.equal('29'); - }); - - it('should focus the slider when dragging', () => { - const { getByRole } = render(); - const thumb = getByRole('slider'); - fireEvent.mouseDown(thumb); - expect(thumb).toHaveFocus(); - }); - - it('should support mouse events', () => { - const handleChange = spy(); - const { container } = render(); - stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ - width: 100, - height: 10, - bottom: 10, - left: 0, - })); - - fireEvent.touchStart( - container.firstChild, - createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]), - ); - - fireEvent.touchMove( - document.body, - createTouches([{ identifier: 1, clientX: 22, clientY: 0 }]), - ); - fireEvent.touchMove( - document.body, - createTouches([{ identifier: 1, clientX: 22, clientY: 0 }]), - ); - - expect(handleChange.callCount).to.equal(3); - expect(handleChange.args[0][1]).to.deep.equal([21, 30]); - expect(handleChange.args[1][1]).to.deep.equal([22, 30]); - expect(handleChange.args[2][1]).to.equal(handleChange.args[1][1]); - }); - - it('should not react to right clicks', () => { - const handleChange = spy(); - const { getByRole } = render( - , - ); - const thumb = getByRole('slider'); - fireEvent.mouseDown(thumb, { button: 2 }); - expect(handleChange.callCount).to.equal(0); - }); - }); - - it('should not break when initial value is out of range', () => { - const { container } = render(); - - stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ - width: 100, - height: 10, - bottom: 10, - left: 0, - })); - - fireEvent.touchStart( - container.firstChild, - createTouches([{ identifier: 1, clientX: 100, clientY: 0 }]), - ); - - fireEvent.touchMove(document.body, createTouches([{ identifier: 1, clientX: 20, clientY: 0 }])); - }); - - it('focuses the thumb on when touching', () => { - const { getByRole } = render(); - const thumb = getByRole('slider'); - - fireEvent.touchStart(thumb, createTouches([{ identifier: 1, clientX: 0, clientY: 0 }])); - - expect(thumb).toHaveFocus(); - }); - - describe('prop: step', () => { - it('should handle a null step', () => { - const { getByRole, container } = render( - , - ); - stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ - width: 100, - height: 10, - bottom: 10, - left: 0, - })); - const thumb = getByRole('slider'); - - fireEvent.touchStart( - container.firstChild, - createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]), - ); - expect(thumb).to.have.attribute('aria-valuenow', '20'); - - thumb.focus(); - fireEvent.keyDown(thumb, { - key: 'ArrowUp', - }); - expect(thumb).to.have.attribute('aria-valuenow', '30'); - - fireEvent.keyDown(thumb, { - key: 'ArrowDown', - }); - expect(thumb).to.have.attribute('aria-valuenow', '20'); - }); - }); - - describe('prop: disabled', () => { - it('should render the disabled classes', () => { - const { container, getByRole } = render(); - expect(container.firstChild).to.have.class('Mui-disabled'); - expect(getByRole('slider')).to.not.have.attribute('tabIndex'); - }); - - it('should not respond to drag events after becoming disabled', function test() { - // TODO: Don't skip once a fix for https://github.com/jsdom/jsdom/issues/3029 is released. - if (/jsdom/.test(window.navigator.userAgent)) { - this.skip(); - } - - const { getByRole, setProps, container } = render(); - - stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ - width: 100, - height: 10, - bottom: 10, - left: 0, - })); - - fireEvent.touchStart( - container.firstChild, - createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]), - ); - - const thumb = getByRole('slider'); - - expect(thumb).to.have.attribute('aria-valuenow', '21'); - expect(thumb).toHaveFocus(); - - setProps({ disabled: true }); - expect(thumb).not.toHaveFocus(); - expect(thumb).to.not.have.class('Mui-active'); - - fireEvent.touchMove( - container.firstChild, - createTouches([{ identifier: 1, clientX: 30, clientY: 0 }]), - ); - - expect(thumb).to.have.attribute('aria-valuenow', '21'); - }); - - it('is not focused (visibly) after becoming disabled', function test() { - // TODO: Don't skip once a fix for https://github.com/jsdom/jsdom/issues/3029 is released. - if (/jsdom/.test(window.navigator.userAgent)) { - this.skip(); - } - - const { getByRole, setProps } = render(); - - const thumb = getByRole('slider'); - act(() => { - thumb.focus(); - }); - setProps({ disabled: true }); - expect(thumb).not.toHaveFocus(); - expect(thumb).to.not.have.class('Mui-focusVisible'); - }); - }); - - describe('prop: track', () => { - it('should render the track classes for false', () => { - const { container } = render(); - expect(container.firstChild).to.have.class('MuiSlider-trackFalse'); - }); - - it('should render the track classes for inverted', () => { - const { container } = render(); - expect(container.firstChild).to.have.class('MuiSlider-trackInverted'); - }); - }); - - describe('keyboard', () => { - it('should handle all the keys', () => { - const { getByRole } = render(); - const thumb = getByRole('slider'); - act(() => { - thumb.focus(); - }); - - fireEvent.keyDown(thumb, { - key: 'Home', - }); - expect(thumb).to.have.attribute('aria-valuenow', '0'); - - fireEvent.keyDown(thumb, { - key: 'End', - }); - expect(thumb).to.have.attribute('aria-valuenow', '100'); - - fireEvent.keyDown(thumb, { - key: 'PageDown', - }); - expect(thumb).to.have.attribute('aria-valuenow', '90'); - - fireEvent.keyDown(thumb, { - key: 'Escape', - }); - expect(thumb).to.have.attribute('aria-valuenow', '90'); - - fireEvent.keyDown(thumb, { - key: 'PageUp', - }); - expect(thumb).to.have.attribute('aria-valuenow', '100'); - }); - - const moveLeftEvent = { - key: 'ArrowLeft', - }; - const moveRightEvent = { - key: 'ArrowRight', - }; - - it('should use min as the step origin', () => { - const { getByRole } = render(); - const thumb = getByRole('slider'); - act(() => { - thumb.focus(); - }); - - fireEvent.keyDown(thumb, moveRightEvent); - expect(thumb).to.have.attribute('aria-valuenow', '250'); - - fireEvent.keyDown(thumb, moveLeftEvent); - expect(thumb).to.have.attribute('aria-valuenow', '150'); - }); - - it('should reach right edge value', () => { - const { getByRole } = render(); - const thumb = getByRole('slider'); - act(() => { - thumb.focus(); - }); - - fireEvent.keyDown(thumb, moveRightEvent); - expect(thumb).to.have.attribute('aria-valuenow', '96'); - - fireEvent.keyDown(thumb, moveRightEvent); - expect(thumb).to.have.attribute('aria-valuenow', '106'); - - fireEvent.keyDown(thumb, moveRightEvent); - expect(thumb).to.have.attribute('aria-valuenow', '108'); - - fireEvent.keyDown(thumb, moveLeftEvent); - expect(thumb).to.have.attribute('aria-valuenow', '96'); - - fireEvent.keyDown(thumb, moveLeftEvent); - expect(thumb).to.have.attribute('aria-valuenow', '86'); - }); - - it('should reach left edge value', () => { - const { getByRole } = render(); - const thumb = getByRole('slider'); - act(() => { - thumb.focus(); - }); - - fireEvent.keyDown(thumb, moveLeftEvent); - expect(thumb).to.have.attribute('aria-valuenow', '6'); - - fireEvent.keyDown(thumb, moveRightEvent); - expect(thumb).to.have.attribute('aria-valuenow', '16'); - - fireEvent.keyDown(thumb, moveRightEvent); - expect(thumb).to.have.attribute('aria-valuenow', '26'); - }); - - it('should round value to step precision', () => { - const { getByRole } = render(); - const thumb = getByRole('slider'); - act(() => { - thumb.focus(); - }); - - fireEvent.keyDown(thumb, moveRightEvent); - expect(thumb).to.have.attribute('aria-valuenow', '0.3'); - }); - - it('should not fail to round value to step precision when step is very small', () => { - const { getByRole } = render( - , - ); - const thumb = getByRole('slider'); - act(() => { - thumb.focus(); - }); - - fireEvent.keyDown(thumb, moveRightEvent); - expect(thumb).to.have.attribute('aria-valuenow', '3e-8'); - }); - - it('should not fail to round value to step precision when step is very small and negative', () => { - const { getByRole } = render( - , - ); - const thumb = getByRole('slider'); - act(() => { - thumb.focus(); - }); - - fireEvent.keyDown(thumb, moveLeftEvent); - expect(thumb).to.have.attribute('aria-valuenow', '-3e-8'); - }); - - it('should handle RTL', () => { - const { getByRole } = render( - - - , - ); - const thumb = getByRole('slider'); - act(() => { - thumb.focus(); - }); - - fireEvent.keyDown(thumb, moveLeftEvent); - expect(thumb).to.have.attribute('aria-valuenow', '31'); - fireEvent.keyDown(thumb, moveRightEvent); - expect(thumb).to.have.attribute('aria-valuenow', '30'); - }); - }); - - describe('prop: valueLabelDisplay', () => { - it('should always display the value label', () => { - const { getByRole, setProps } = render(); - const thumb = getByRole('slider'); - expect(thumb.textContent).to.equal('50'); - setProps({ - valueLabelDisplay: 'off', - }); - expect(thumb.textContent).to.equal(''); - }); - }); - - describe('markActive state', () => { - function getActives(container) { - return Array.from(container.querySelectorAll(`.MuiSlider-mark`)).map((node) => - node.classList.contains('MuiSlider-markActive'), - ); - } - - it('sets the marks active that are `within` the value', () => { - const marks = [{ value: 5 }, { value: 10 }, { value: 15 }]; - - const { container: container1 } = render( - , - ); - expect(getActives(container1)).to.deep.equal([true, true, false]); - - const { container: container2 } = render( - , - ); - expect(getActives(container2)).to.deep.equal([false, true, false]); - }); - - it('uses closed intervals for the within check', () => { - const { container: container1 } = render( - , - ); - expect(getActives(container1)).to.deep.equal([true, true, true]); - - const { container: container2 } = render( - , - ); - expect(getActives(container2)).to.deep.equal([true, true, false]); - }); - - it('should support inverted track', () => { - const marks = [{ value: 5 }, { value: 10 }, { value: 15 }]; - - const { container: container1 } = render( - , - ); - expect(getActives(container1)).to.deep.equal([false, false, true]); - - const { container: container2 } = render( - , - ); - expect(getActives(container2)).to.deep.equal([true, false, true]); - }); - }); - - it('should forward mouseDown', () => { - const handleMouseDown = spy(); - const { container } = render(); - fireEvent.mouseDown(container.firstChild); - expect(handleMouseDown.callCount).to.equal(1); - }); - - it('should handle RTL', () => { - const handleChange = spy(); - const { container, getByRole } = render( - - - , - ); - const thumb = getByRole('slider'); - expect(thumb.style.right).to.equal('30%'); - - stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({ - width: 100, - height: 10, - bottom: 10, - left: 0, - })); - - fireEvent.touchStart( - container.firstChild, - createTouches([{ identifier: 1, clientX: 20, clientY: 0 }]), - ); - - fireEvent.touchMove(document.body, createTouches([{ identifier: 1, clientX: 22, clientY: 0 }])); - - expect(handleChange.callCount).to.equal(2); - expect(handleChange.args[0][1]).to.equal(80); - expect(handleChange.args[1][1]).to.equal(78); - }); - - describe('warnings', () => { - beforeEach(() => { - PropTypes.resetWarningCache(); - }); - - it('should warn if aria-valuetext is provided', () => { - expect(() => render()).toErrorDev( - 'Material-UI: You need to use the `getAriaValueText` prop instead of', - ); - }); - - it('should warn if aria-label is provided', () => { - expect(() => render()).toErrorDev( - 'Material-UI: You need to use the `getAriaLabel` prop instead of', - ); - }); - - it('should warn when switching from controlled to uncontrolled', () => { - const { setProps } = render(); - - expect(() => { - setProps({ value: undefined }); - }).toErrorDev( - 'Material-UI: A component is changing the controlled value state of Slider to be uncontrolled.', - ); - }); - - it('should warn when switching between uncontrolled to controlled', () => { - const { setProps } = render(); - - expect(() => { - setProps({ value: [20, 50] }); - }).toErrorDev( - 'Material-UI: A component is changing the uncontrolled value state of Slider to be controlled.', - ); - }); - }); - - it('should support getAriaValueText', () => { - const getAriaValueText = (value) => `${value}°C`; - const { getAllByRole } = render( - , - ); - const sliders = getAllByRole('slider'); - - expect(sliders[0]).to.have.attribute('aria-valuetext', '20°C'); - expect(sliders[1]).to.have.attribute('aria-valuetext', '50°C'); - }); - - it('should support getAriaLabel', () => { - const getAriaLabel = (index) => `Label ${index}`; - const { getAllByRole } = render(); - const sliders = getAllByRole('slider'); - - expect(sliders[0]).to.have.attribute('aria-label', 'Label 0'); - expect(sliders[1]).to.have.attribute('aria-label', 'Label 1'); - }); - - it('should allow customization of the marks', () => { - const { container } = render( - , - ); - expect(container.querySelectorAll('.MuiSlider-markLabel').length).to.equal(3); - expect(container.querySelectorAll('.MuiSlider-mark').length).to.equal(3); - expect(container.querySelectorAll('.MuiSlider-markLabel[data-index="2"]').length).to.equal(1); - expect(container.querySelectorAll('.MuiSlider-mark[data-index="2"]').length).to.equal(1); - }); - - it('should pass "name" and "value" as part of the event.target for onChange', () => { - const handleChange = stub().callsFake((event) => event.target); - const { getByRole } = render( - , - ); - const thumb = getByRole('slider'); - - act(() => { - thumb.focus(); - fireEvent.keyDown(thumb, { - key: 'ArrowRight', - }); - }); - - expect(handleChange.callCount).to.equal(1); - expect(handleChange.firstCall.returnValue).to.deep.equal({ - name: 'change-testing', - value: 4, - }); - }); - - describe('prop: components', () => { - it('ValueLabel receives the formatted value', () => { - function ValueLabelComponent(props) { - const { value } = props; - return {value}; - } - ValueLabelComponent.propTypes = { value: PropTypes.string }; - - const { getByTestId } = render( - n.toString(2)} - />, - ); - - expect(getByTestId('value-label')).to.have.text('1010'); - }); - }); - - describe('theme components', () => { - const theme = createMuiTheme({ - components: { - MuiSlider: { - variants: [ - { - props: { color: 'primary', orientation: 'vertical' }, - style: { - backgroundColor: 'rgb(0, 255, 0)', - }, - }, - ], - styleOverrides: { - root: { - background: 'rgb(255, 0, 0)', - }, - }, - }, - }, - }); - - it('overrides should be respected', () => { - render( - - Test - , - ); - - expect(screen.getByTestId('component')).toHaveComputedStyle({ - backgroundColor: 'rgb(255, 0, 0)', - }); - }); - - it('variants should win over overrides', () => { - render( - - - Test - - , - ); - - expect(screen.getByTestId('component')).toHaveComputedStyle({ - backgroundColor: 'rgb(0, 255, 0)', - }); - }); - - it('styled wrapper should win over variants', () => { - const CustomSlider = styled(Slider)` - background-color: rgb(0, 0, 255); - `; - - render( - - - Test - - , - ); - - expect(screen.getByTestId('component')).toHaveComputedStyle({ - backgroundColor: 'rgb(0, 0, 255)', - }); - }); - }); -}); diff --git a/packages/material-ui-lab/src/SliderStyled/ValueLabelStyled.js b/packages/material-ui-lab/src/SliderStyled/ValueLabelStyled.js deleted file mode 100644 index c1bf4da4ed3e18..00000000000000 --- a/packages/material-ui-lab/src/SliderStyled/ValueLabelStyled.js +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from 'react'; -import { useThemeProps, experimentalStyled } from '@material-ui/core/styles'; -import { ValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled'; - -const overridesResolver = (_, styles) => { - const componentName = 'MuiSlider-valueLabel'; - - const styleOverrides = { - ...styles.root, - [`&.${componentName}Open`]: styles.open, - [`&.${componentName}Offset`]: styles.offset, - [`& .${componentName}Circle`]: styles.circle, - [`& .${componentName}Label`]: styles.label, - }; - - return styleOverrides; -}; - -const ValueLabelRoot = experimentalStyled( - 'span', - {}, - { muiName: 'PrivateValueLabel', overridesResolver }, -)((props) => ({ - '&.MuiSlider-valueLabelOffset': { - '&.MuiSlider-valueLabelOpen': { - transform: 'scale(1) translateY(-10px)', - }, - zIndex: 1, - ...props.theme.typography.body2, - fontSize: props.theme.typography.pxToRem(12), - lineHeight: 1.2, - transition: props.theme.transitions.create(['transform'], { - duration: props.theme.transitions.duration.shortest, - }), - top: -34, - transformOrigin: 'bottom center', - transform: 'scale(0)', - position: 'absolute', - }, - '& .MuiSlider-valueLabelCircle': { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: 32, - height: 32, - borderRadius: '50% 50% 50% 0', - backgroundColor: 'currentColor', - transform: 'rotate(-45deg)', - }, - '& .MuiSlider-valueLabelLabel': { - color: props.theme.palette.primary.contrastText, - transform: 'rotate(45deg)', - textAlign: 'center', - }, -})); - -/** - * @ignore - internal component. - */ -const ValueLabel = React.forwardRef(function ValueLabel(inputProps, ref) { - const props = useThemeProps({ props: inputProps, name: 'PrivateValueLabel' }); - /* eslint-disable react/prop-types */ - const { components = {}, ...other } = props; - - return ( - - ); -}); - -export default ValueLabel; diff --git a/packages/material-ui-lab/src/SliderStyled/index.d.ts b/packages/material-ui-lab/src/SliderStyled/index.d.ts deleted file mode 100644 index 444df65729b43f..00000000000000 --- a/packages/material-ui-lab/src/SliderStyled/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './SliderStyled'; -export * from './SliderStyled'; diff --git a/packages/material-ui-lab/src/SliderStyled/index.js b/packages/material-ui-lab/src/SliderStyled/index.js deleted file mode 100644 index 1df58e6268e679..00000000000000 --- a/packages/material-ui-lab/src/SliderStyled/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SliderStyled'; diff --git a/packages/material-ui-lab/src/index.d.ts b/packages/material-ui-lab/src/index.d.ts index d0c63e8c4a56d6..c5ab1318de1c97 100644 --- a/packages/material-ui-lab/src/index.d.ts +++ b/packages/material-ui-lab/src/index.d.ts @@ -22,9 +22,6 @@ export * from './Rating'; export { default as Skeleton } from './Skeleton'; export * from './Skeleton'; -export { default as SliderStyled } from './SliderStyled'; -export * from './SliderStyled'; - export { default as SpeedDial } from './SpeedDial'; export * from './SpeedDial'; diff --git a/packages/material-ui-lab/src/index.js b/packages/material-ui-lab/src/index.js index f2ca8bff18413d..3038c1de672a3e 100644 --- a/packages/material-ui-lab/src/index.js +++ b/packages/material-ui-lab/src/index.js @@ -26,9 +26,6 @@ export * from './Rating'; export { default as Skeleton } from './Skeleton'; export * from './Skeleton'; -export { default as SliderStyled } from './SliderStyled'; -export * from './SliderStyled'; - export { default as SpeedDial } from './SpeedDial'; export * from './SpeedDial'; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts index f9df1dc3d505e9..41b3e3d0b77a79 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts @@ -208,10 +208,6 @@ export type ExtendSliderUnstyled = OverridableComp >; /** - * - * Demos: - * - * - [Slider Styled](https://material-ui.com/components/slider-styled/) * * API: * diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json index f00724b99880f1..0d8e81a12edf46 100644 --- a/packages/material-ui/package.json +++ b/packages/material-ui/package.json @@ -64,6 +64,7 @@ "@material-ui/styles": "^5.0.0-alpha.14", "@material-ui/system": "^5.0.0-alpha.14", "@material-ui/types": "^5.1.0", + "@material-ui/unstyled": "^5.0.0-alpha.14", "@material-ui/utils": "^5.0.0-alpha.14", "@popperjs/core": "^2.4.4", "@types/react-transition-group": "^4.2.0", diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts index 52a82805e5af19..b417b8343ac6ec 100644 --- a/packages/material-ui/src/Slider/Slider.d.ts +++ b/packages/material-ui/src/Slider/Slider.d.ts @@ -1,208 +1,38 @@ import * as React from 'react'; -import { OverridableComponent, OverrideProps } from '../OverridableComponent'; +import { SxProps } from '@material-ui/core/Box'; +import { + ExtendSliderUnstyledTypeMap, + ExtendSliderUnstyled, +} from '@material-ui/unstyled/SliderUnstyled'; -export interface Mark { - value: number; - label?: React.ReactNode; -} - -export interface ValueLabelProps extends React.HTMLAttributes { - children: React.ReactElement; - index: number; - open: boolean; - value: number; -} - -export interface SliderTypeMap

{ +export type SliderTypeMap< + D extends React.ElementType = 'span', + P = {} +> = ExtendSliderUnstyledTypeMap<{ props: P & { /** - * The label of the slider. - */ - 'aria-label'?: string; - /** - * The id of the element containing a label for the slider. - */ - 'aria-labelledby'?: string; - /** - * A string value that provides a user-friendly name for the current value of the slider. - */ - 'aria-valuetext'?: string; - /** - * Override or extend the styles applied to the component. - */ - classes?: { - /** Styles applied to the root element. */ - root?: string; - /** Styles applied to the root element if `color="primary"`. */ - colorPrimary?: string; - /** Styles applied to the root element if `color="secondary"`. */ - colorSecondary?: string; - /** Styles applied to the root element if `marks` is provided with at least one label. */ - marked?: string; - /** Pseudo-class applied to the root element if `orientation="vertical"`. */ - vertical?: string; - /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ - disabled?: string; - /** Styles applied to the rail element. */ - rail?: string; - /** Styles applied to the track element. */ - track?: string; - /** Styles applied to the track element if `track={false}`. */ - trackFalse?: string; - /** Styles applied to the track element if `track="inverted"`. */ - trackInverted?: string; - /** Styles applied to the thumb element. */ - thumb?: string; - /** Styles applied to the thumb element if `color="primary"`. */ - thumbColorPrimary?: string; - /** Styles applied to the thumb element if `color="secondary"`. */ - thumbColorSecondary?: string; - /** Pseudo-class applied to the thumb element if it's active. */ - active?: string; - /** Pseudo-class applied to the thumb element if keyboard focused. */ - focusVisible?: string; - /** Styles applied to the thumb label element. */ - valueLabel?: string; - /** Styles applied to the mark element. */ - mark?: string; - /** Styles applied to the mark element if active (depending on the value). */ - markActive?: string; - /** Styles applied to the mark label element. */ - markLabel?: string; - /** Styles applied to the mark label element if active (depending on the value). */ - markLabelActive?: string; - }; - /** - * The color of the component. It supports those theme colors that make sense for this component. - * @default 'primary' - */ - color?: 'primary' | 'secondary'; - /** - * The default element value. Use when the component is not controlled. - */ - defaultValue?: number | number[]; - /** - * If `true`, the slider is disabled. - * @default false - */ - disabled?: boolean; - /** - * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. - * - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaLabel?: (index: number) => string; - /** - * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. - * - * @param {number} value The thumb label's value to format. - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaValueText?: (value: number, index: number) => string; - /** - * Marks indicate predetermined values to which the user can move the slider. - * If `true` the marks are spaced according the value of the `step` prop. - * If an array, it should contain objects with `value` and an optional `label` keys. - * @default false - */ - marks?: boolean | Mark[]; - /** - * The maximum allowed value of the slider. - * Should not be equal to min. - * @default 100 - */ - max?: number; - /** - * The minimum allowed value of the slider. - * Should not be equal to max. - * @default 0 - */ - min?: number; - /** - * Name attribute of the hidden `input` element. + * The system prop that allows defining system overrides as well as additional CSS styles. */ - name?: string; - /** - * Callback function that is fired when the slider's value changed. - * - * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {number | number[]} value The new value. - */ - onChange?: (event: React.SyntheticEvent, value: number | number[]) => void; - /** - * Callback function that is fired when the `mouseup` is triggered. - * - * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {number | number[]} value The new value. - */ - onChangeCommitted?: (event: React.SyntheticEvent, value: number | number[]) => void; - /** - * The slider orientation. - * @default 'horizontal' - */ - orientation?: 'horizontal' | 'vertical'; - /** - * A transformation function, to change the scale of the slider. - * @default (x) => x - */ - scale?: (value: number) => number; - /** - * The granularity with which the slider can step through values. (A "discrete" slider.) - * The `min` prop serves as the origin for the valid values. - * We recommend (max - min) to be evenly divisible by the step. - * - * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. - * @default 1 - */ - step?: number | null; - /** - * The component used to display the value label. - * @default 'span' - */ - ThumbComponent?: React.ElementType>; - /** - * The track presentation: - * - * - `normal` the track will render a bar representing the slider value. - * - `inverted` the track will render a bar representing the remaining slider value. - * - `false` the track will render without a bar. - * @default 'normal' - */ - track?: 'normal' | false | 'inverted'; - /** - * The value of the slider. - * For ranged sliders, provide an array with two values. - */ - value?: number | number[]; - /** - * The value label component. - * @default ValueLabel - */ - ValueLabelComponent?: React.ElementType; - /** - * Controls when the value label is displayed: - * - * - `auto` the value label will display when the thumb is hovered or focused. - * - `on` will display persistently. - * - `off` will never display. - * @default 'off' - */ - valueLabelDisplay?: 'on' | 'auto' | 'off'; - /** - * The format function the value label's value. - * - * When a function is provided, it should have the following signature: - * - * - {number} value The value label's value to format - * - {number} index The value label's index to format - * @default (x) => x - */ - valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode); + sx?: SxProps; }; defaultComponent: D; -} +}>; + +type SliderRootProps = NonNullable['root']; +type SliderMarkProps = NonNullable['mark']; +type SliderMarkLabelProps = NonNullable['markLabel']; +type SliderRailProps = NonNullable['rail']; +type SliderTrackProps = NonNullable['track']; +type SliderThumbProps = NonNullable['thumb']; +type SliderValueLabel = NonNullable['valueLabel']; + +export const SliderRoot: React.FC; +export const SliderMark: React.FC; +export const SliderMarkLabel: React.FC; +export const SliderRail: React.FC; +export const SliderTrack: React.FC; +export const SliderThumb: React.FC; +export const SliderValueLabel: React.FC; /** * * Demos: @@ -213,13 +43,6 @@ export interface SliderTypeMap

{ * * - [Slider API](https://material-ui.com/api/slider/) */ -declare const Slider: OverridableComponent; - -export type SliderClassKey = keyof NonNullable; - -export type SliderProps< - D extends React.ElementType = SliderTypeMap['defaultComponent'], - P = {} -> = OverrideProps, D>; +declare const Slider: ExtendSliderUnstyled; export default Slider; diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index c31ef2647ca956..cf713abcfd4be0 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,208 +1,106 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import clsx from 'clsx'; -import { chainPropTypes } from '@material-ui/utils'; -import withStyles from '../styles/withStyles'; -import useTheme from '../styles/useTheme'; -import { alpha, lighten, darken } from '../styles/colorManipulator'; -import useIsFocusVisible from '../utils/useIsFocusVisible'; -import useEnhancedEffect from '../utils/useEnhancedEffect'; -import ownerDocument from '../utils/ownerDocument'; -import useEventCallback from '../utils/useEventCallback'; -import useForkRef from '../utils/useForkRef'; -import capitalize from '../utils/capitalize'; -import useControlled from '../utils/useControlled'; +import { + useThemeProps, + experimentalStyled, + alpha, + lighten, + darken, +} from '@material-ui/core/styles'; +import { capitalize } from '@material-ui/core/utils'; +import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; import ValueLabel from './ValueLabel'; -function asc(a, b) { - return a - b; -} - -function clamp(value, min, max) { - return Math.min(Math.max(min, value), max); -} - -function findClosest(values, currentValue) { - const { index: closestIndex } = values.reduce((acc, value, index) => { - const distance = Math.abs(currentValue - value); - - if (acc === null || distance < acc.distance || distance === acc.distance) { - return { - distance, - index, - }; - } - - return acc; - }, null); - return closestIndex; -} - -function trackFinger(event, touchId) { - if (touchId.current !== undefined && event.changedTouches) { - for (let i = 0; i < event.changedTouches.length; i += 1) { - const touch = event.changedTouches[i]; - if (touch.identifier === touchId.current) { - return { - x: touch.clientX, - y: touch.clientY, - }; - } - } +const overridesResolver = (props, styles, name) => { + const { + color = 'primary', + marks: marksProp = false, + max = 100, + min = 0, + orientation = 'horizontal', + step = 1, + track = 'normal', + } = props; - return false; - } + const marks = + marksProp === true && step !== null + ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({ + value: min + step * index, + })) + : marksProp || []; - return { - x: event.clientX, - y: event.clientY, + const marked = marks.length > 0 && marks.some((mark) => mark.label); + + const styleOverrides = { + ...styles.root, + ...styles[`color${capitalize(color)}`], + '&.Mui-disabled': styles.disabled, + ...(marked && styles.marked), + ...(orientation === 'vertical' && styles.vertical), + ...(track === 'inverted' && styles.trackInverted), + ...(track === false && styles.trackFalse), + [`& .${name}-rail`]: styles.rail, + [`& .${name}-track`]: styles.track, + [`& .${name}-mark`]: styles.mark, + [`& .${name}-markLabel`]: styles.markLabel, + [`& .${name}-valueLabel`]: styles.valueLabel, + [`& .${name}-thumb`]: { + ...styles.thumb, + ...styles[`thumbColor${capitalize(color)}`], + '&.Mui-disabled': styles.disabled, + }, }; -} - -function valueToPercent(value, min, max) { - return ((value - min) * 100) / (max - min); -} - -function percentToValue(percent, min, max) { - return (max - min) * percent + min; -} - -function getDecimalPrecision(num) { - // This handles the case when num is very small (0.00000001), js will turn this into 1e-8. - // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine. - if (Math.abs(num) < 1) { - const parts = num.toExponential().split('e-'); - const matissaDecimalPart = parts[0].split('.')[1]; - return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10); - } - - const decimalPart = num.toString().split('.')[1]; - return decimalPart ? decimalPart.length : 0; -} - -function roundValueToStep(value, step, min) { - const nearest = Math.round((value - min) / step) * step + min; - return Number(nearest.toFixed(getDecimalPrecision(step))); -} -function setValueIndex({ values, source, newValue, index }) { - // Performance shortcut - if (source[index] === newValue) { - return source; - } - - const output = values.slice(); - output[index] = newValue; - return output; -} - -function focusThumb({ sliderRef, activeIndex, setActive }) { - const doc = ownerDocument(sliderRef.current); - if ( - !sliderRef.current.contains(doc.activeElement) || - Number(doc.activeElement.getAttribute('data-index')) !== activeIndex - ) { - sliderRef.current.querySelector(`[role="slider"][data-index="${activeIndex}"]`).focus(); - } - - if (setActive) { - setActive(activeIndex); - } -} - -const axisProps = { - horizontal: { - offset: (percent) => ({ left: `${percent}%` }), - leap: (percent) => ({ width: `${percent}%` }), - }, - 'horizontal-reverse': { - offset: (percent) => ({ right: `${percent}%` }), - leap: (percent) => ({ width: `${percent}%` }), - }, - vertical: { - offset: (percent) => ({ bottom: `${percent}%` }), - leap: (percent) => ({ height: `${percent}%` }), - }, + return styleOverrides; }; -const Identity = (x) => x; - -// TODO: remove support for Safari < 13. -// https://caniuse.com/#search=touch-action -// -// Safari, on iOS, supports touch action since v13. -// Over 80% of the iOS phones are compatible -// in August 2020. -let cachedSupportsTouchActionNone; -function doesSupportTouchActionNone() { - if (cachedSupportsTouchActionNone === undefined) { - const element = document.createElement('div'); - element.style.touchAction = 'none'; - document.body.appendChild(element); - cachedSupportsTouchActionNone = window.getComputedStyle(element).touchAction === 'none'; - element.parentElement.removeChild(element); - } - return cachedSupportsTouchActionNone; -} - -export const styles = (theme) => ({ - /* Styles applied to the root element. */ - root: { - height: 2, - width: '100%', - boxSizing: 'content-box', - padding: '13px 0', - display: 'inline-block', - position: 'relative', - cursor: 'pointer', - // Disable scroll capabilities. - touchAction: 'none', - color: theme.palette.primary.main, - WebkitTapHighlightColor: 'transparent', - '&$disabled': { - pointerEvents: 'none', - cursor: 'default', - color: theme.palette.grey[400], - }, - '&$vertical': { - width: 2, - height: '100%', - padding: '0 13px', - }, - // The primary input mechanism of the device includes a pointing device of limited accuracy. - '@media (pointer: coarse)': { - // Reach 42px touch target, about ~8mm on screen. - padding: '20px 0', - '&$vertical': { - padding: '0 20px', - }, - }, - '@media print': { - colorAdjust: 'exact', - }, +const SliderRoot = experimentalStyled( + 'span', + {}, + { muiName: 'MuiSlider', overridesResolver }, +)((props) => ({ + height: 2, + width: '100%', + boxSizing: 'content-box', + padding: '13px 0', + display: 'inline-block', + position: 'relative', + cursor: 'pointer', + touchAction: 'none', + color: props.theme.palette.primary.main, + WebkitTapHighlightColor: 'transparent', + ...(props.styleProps.color === 'secondary' && { + color: props.theme.palette.secondary.main, + }), + '&.Mui-disabled': { + pointerEvents: 'none', + cursor: 'default', + color: props.theme.palette.grey[400], }, - /* Styles applied to the root element if `color="primary"`. */ - colorPrimary: { - // TODO v5: move the style here + ...(props.styleProps.orientation === 'vertical' && { + width: 2, + height: '100%', + padding: '0 13px', + }), + // The primary input mechanism of the device includes a pointing device of limited accuracy. + '@media (pointer: coarse)': { + // Reach 42px touch target, about ~8mm on screen. + padding: '20px 0', + ...(props.styleProps.orientation === 'vertical' && { + padding: '0 20px', + }), }, - /* Styles applied to the root element if `color="secondary"`. */ - colorSecondary: { - color: theme.palette.secondary.main, + '@media print': { + colorAdjust: 'exact', }, - /* Styles applied to the root element if `marks` is provided with at least one label. */ - marked: { + ...(props.styleProps.marked && { marginBottom: 20, - '&$vertical': { + ...(props.styleProps.orientation === 'vertical' && { marginBottom: 'auto', marginRight: 20, - }, - }, - /* Pseudo-class applied to the root element if `orientation="vertical"`. */ - vertical: {}, - /* Pseudo-class applied to the root and thumb element if `disabled={true}`. */ - disabled: {}, - /* Styles applied to the rail element. */ - rail: { + }), + }), + '& .MuiSlider-rail': { display: 'block', position: 'absolute', width: '100%', @@ -210,43 +108,35 @@ export const styles = (theme) => ({ borderRadius: 1, backgroundColor: 'currentColor', opacity: 0.38, - '$vertical &': { + ...(props.styleProps.orientation === 'vertical' && { height: '100%', width: 2, - }, + }), + ...(props.styleProps.track === 'inverted' && { + opacity: 1, + }), }, - /* Styles applied to the track element. */ - track: { + '& .MuiSlider-track': { display: 'block', position: 'absolute', height: 2, borderRadius: 1, backgroundColor: 'currentColor', - '$vertical &': { + ...(props.styleProps.orientation === 'vertical' && { width: 2, - }, - }, - /* Styles applied to the track element if `track={false}`. */ - trackFalse: { - '& $track': { + }), + ...(props.styleProps.track === false && { display: 'none', - }, - }, - /* Styles applied to the track element if `track="inverted"`. */ - trackInverted: { - '& $track': { + }), + ...(props.styleProps.track === 'inverted' && { backgroundColor: // Same logic as the LinearProgress track color - theme.palette.mode === 'light' - ? lighten(theme.palette.primary.main, 0.62) - : darken(theme.palette.primary.main, 0.5), - }, - '& $rail': { - opacity: 1, - }, + props.theme.palette.mode === 'light' + ? lighten(props.theme.palette.primary.main, 0.62) + : darken(props.theme.palette.primary.main, 0.5), + }), }, - /* Styles applied to the thumb element. */ - thumb: { + '& .MuiSlider-thumb': { position: 'absolute', width: 12, height: 12, @@ -259,10 +149,10 @@ export const styles = (theme) => ({ display: 'flex', alignItems: 'center', justifyContent: 'center', - transition: theme.transitions.create(['box-shadow'], { - duration: theme.transitions.duration.shortest, + transition: props.theme.transitions.create(['box-shadow'], { + duration: props.theme.transitions.duration.shortest, }), - '&::after': { + '::after': { position: 'absolute', content: '""', borderRadius: '50%', @@ -272,608 +162,144 @@ export const styles = (theme) => ({ right: -15, bottom: -15, }, - '&:hover, &$focusVisible': { - boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.primary.main, 0.16)}`, + ':hover, &.Mui-focusVisible': { + boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.primary.main, 0.16)}`, '@media (hover: none)': { boxShadow: 'none', }, }, - '&$active': { - boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.primary.main, 0.16)}`, + '&.Mui-active': { + boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.primary.main, 0.16)}`, }, - '&$disabled': { + '&.Mui-disabled': { width: 8, height: 8, marginLeft: -4, marginTop: -3, - '&:hover': { + ':hover': { boxShadow: 'none', }, + ...(props.styleProps.orientation === 'vertical' && { + marginLeft: -3, + marginBottom: -4, + }), }, - '$vertical &': { + ...(props.styleProps.orientation === 'vertical' && { marginLeft: -5, marginBottom: -6, - }, - '$vertical &$disabled': { - marginLeft: -3, - marginBottom: -4, - }, - }, - /* Styles applied to the thumb element if `color="primary"`. */ - thumbColorPrimary: { - // TODO v5: move the style here - }, - /* Styles applied to the thumb element if `color="secondary"`. */ - thumbColorSecondary: { - '&$focusVisible,&:hover': { - boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.secondary.main, 0.16)}`, - }, - '&$active': { - boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.secondary.main, 0.16)}`, - }, + }), + ...(props.styleProps.color === 'secondary' && { + ':hover': { + boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.secondary.main, 0.16)}`, + }, + '&.Mui-focusVisible': { + boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.secondary.main, 0.16)}`, + }, + '&.Mui-active': { + boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.secondary.main, 0.16)}`, + }, + }), }, - /* Pseudo-class applied to the thumb element if it's active. */ - active: {}, - /* Pseudo-class applied to the thumb element if keyboard focused. */ - focusVisible: {}, - /* Styles applied to the thumb label element. */ - valueLabel: { + '& .MuiSlider-valueLabel': { // IE11 centering bug, to remove from the customization demos once no longer supported left: 'calc(-50% - 4px)', }, - /* Styles applied to the mark element. */ - mark: { + '& .MuiSlider-mark': { position: 'absolute', width: 2, height: 2, borderRadius: 1, backgroundColor: 'currentColor', + '&.MuiSlider-markActive': { + backgroundColor: props.theme.palette.background.paper, + opacity: 0.8, + }, }, - /* Styles applied to the mark element if active (depending on the value). */ - markActive: { - backgroundColor: theme.palette.background.paper, - opacity: 0.8, - }, - /* Styles applied to the mark label element. */ - markLabel: { - ...theme.typography.body2, - color: theme.palette.text.secondary, + '& .MuiSlider-markLabel': { + ...props.theme.typography.body2, + color: props.theme.palette.text.secondary, position: 'absolute', top: 26, transform: 'translateX(-50%)', whiteSpace: 'nowrap', - '$vertical &': { + ...(props.styleProps.orientation === 'vertical' && { top: 'auto', left: 26, transform: 'translateY(50%)', - }, + }), '@media (pointer: coarse)': { top: 40, - '$vertical &': { + ...(props.styleProps.orientation === 'vertical' && { + top: 'auto', left: 31, - }, + }), + }, + '&.MuiSlider-markLabelActive': { + color: props.theme.palette.text.primary, }, }, - /* Styles applied to the mark label element if active (depending on the value). */ - markLabelActive: { - color: theme.palette.text.primary, - }, -}); - -const Forward = ({ children }) => children; - -const Slider = React.forwardRef(function Slider(props, ref) { - const { - 'aria-label': ariaLabel, - 'aria-labelledby': ariaLabelledby, - 'aria-valuetext': ariaValuetext, - classes, - className, - color = 'primary', - component: Component = 'span', - defaultValue, - disabled = false, - getAriaLabel, - getAriaValueText, - marks: marksProp = false, - max = 100, - min = 0, - name, - onChange, - onChangeCommitted, - onMouseDown, - orientation = 'horizontal', - scale = Identity, - step = 1, - ThumbComponent = 'span', - track = 'normal', - value: valueProp, - ValueLabelComponent: ValueLabelComponentProp = ValueLabel, - valueLabelDisplay = 'off', - valueLabelFormat = Identity, - ...other - } = props; - const theme = useTheme(); - const touchId = React.useRef(); - // We can't use the :active browser pseudo-classes. - // - The active state isn't triggered when clicking on the rail. - // - The active state isn't transferred when inversing a range slider. - const [active, setActive] = React.useState(-1); - const [open, setOpen] = React.useState(-1); - - const [valueDerived, setValueState] = useControlled({ - controlled: valueProp, - default: defaultValue, - name: 'Slider', - }); - - const handleChange = - onChange && - ((event, value) => { - if (!(event instanceof Event)) event.persist(); - - // Redefine target to allow name and value to be read. - // This allows seamless integration with the most popular form libraries. - // https://github.com/mui-org/material-ui/issues/13485#issuecomment-676048492 - Object.defineProperty(event, 'target', { - writable: true, - value: { value, name }, - }); +})); - onChange(event, value); - }); - - const range = Array.isArray(valueDerived); - let values = range ? valueDerived.slice().sort(asc) : [valueDerived]; - values = values.map((value) => clamp(value, min, max)); - const marks = - marksProp === true && step !== null - ? [...Array(Math.floor((max - min) / step) + 1)].map((_, index) => ({ - value: min + step * index, - })) - : marksProp || []; - - const { - isFocusVisibleRef, - onBlur: handleBlurVisible, - onFocus: handleFocusVisible, - ref: focusVisibleRef, - } = useIsFocusVisible(); - const [focusVisible, setFocusVisible] = React.useState(-1); - - const sliderRef = React.useRef(); - const handleFocusRef = useForkRef(focusVisibleRef, sliderRef); - const handleRef = useForkRef(ref, handleFocusRef); - - const handleFocus = useEventCallback((event) => { - const index = Number(event.currentTarget.getAttribute('data-index')); - handleFocusVisible(event); - if (isFocusVisibleRef.current === true) { - setFocusVisible(index); - } - setOpen(index); - }); - const handleBlur = useEventCallback((event) => { - handleBlurVisible(event); - if (isFocusVisibleRef.current === false) { - setFocusVisible(-1); - } - setOpen(-1); - }); - const handleMouseOver = useEventCallback((event) => { - const index = Number(event.currentTarget.getAttribute('data-index')); - setOpen(index); - }); - const handleMouseLeave = useEventCallback(() => { - setOpen(-1); - }); - - useEnhancedEffect(() => { - if (disabled && sliderRef.current.contains(document.activeElement)) { - // This is necessary because Firefox and Safari will keep focus - // on a disabled element: - // https://codesandbox.io/s/mui-pr-22247-forked-h151h?file=/src/App.js - document.activeElement.blur(); - } - }, [disabled]); - - if (disabled && active !== -1) { - setActive(-1); - } - if (disabled && focusVisible !== -1) { - setFocusVisible(-1); - } - - const isRtl = theme.direction === 'rtl'; - - const handleKeyDown = useEventCallback((event) => { - const index = Number(event.currentTarget.getAttribute('data-index')); - const value = values[index]; - const tenPercents = (max - min) / 10; - const marksValues = marks.map((mark) => mark.value); - const marksIndex = marksValues.indexOf(value); - let newValue; - const increaseKey = isRtl ? 'ArrowLeft' : 'ArrowRight'; - const decreaseKey = isRtl ? 'ArrowRight' : 'ArrowLeft'; - - switch (event.key) { - case 'Home': - newValue = min; - break; - case 'End': - newValue = max; - break; - case 'PageUp': - if (step) { - newValue = value + tenPercents; - } - break; - case 'PageDown': - if (step) { - newValue = value - tenPercents; - } - break; - case increaseKey: - case 'ArrowUp': - if (step) { - newValue = value + step; - } else { - newValue = marksValues[marksIndex + 1] || marksValues[marksValues.length - 1]; - } - break; - case decreaseKey: - case 'ArrowDown': - if (step) { - newValue = value - step; - } else { - newValue = marksValues[marksIndex - 1] || marksValues[0]; - } - break; - default: - return; - } - - // Prevent scroll of the page - event.preventDefault(); - - if (step) { - newValue = roundValueToStep(newValue, step, min); - } - - newValue = clamp(newValue, min, max); - - if (range) { - const previousValue = newValue; - newValue = setValueIndex({ - values, - source: valueDerived, - newValue, - index, - }).sort(asc); - focusThumb({ sliderRef, activeIndex: newValue.indexOf(previousValue) }); - } - - setValueState(newValue); - setFocusVisible(index); - - if (handleChange) { - handleChange(event, newValue); - } - if (onChangeCommitted) { - onChangeCommitted(event, newValue); - } - }); - - const previousIndex = React.useRef(); - let axis = orientation; - if (isRtl && orientation === 'horizontal') { - axis += '-reverse'; - } - - const getFingerNewValue = ({ finger, move = false, values: values2, source }) => { - const { current: slider } = sliderRef; - const { width, height, bottom, left } = slider.getBoundingClientRect(); - let percent; - - if (axis.indexOf('vertical') === 0) { - percent = (bottom - finger.y) / height; - } else { - percent = (finger.x - left) / width; - } - - if (axis.indexOf('-reverse') !== -1) { - percent = 1 - percent; - } - - let newValue; - newValue = percentToValue(percent, min, max); - if (step) { - newValue = roundValueToStep(newValue, step, min); - } else { - const marksValues = marks.map((mark) => mark.value); - const closestIndex = findClosest(marksValues, newValue); - newValue = marksValues[closestIndex]; - } - - newValue = clamp(newValue, min, max); - let activeIndex = 0; - - if (range) { - if (!move) { - activeIndex = findClosest(values2, newValue); - } else { - activeIndex = previousIndex.current; - } - - const previousValue = newValue; - newValue = setValueIndex({ - values: values2, - source, - newValue, - index: activeIndex, - }).sort(asc); - activeIndex = newValue.indexOf(previousValue); - previousIndex.current = activeIndex; - } - - return { newValue, activeIndex }; - }; - - const handleTouchMove = useEventCallback((nativeEvent) => { - const finger = trackFinger(nativeEvent, touchId); - - if (!finger) { - return; - } - - // Cancel move in case some other element consumed a mouseup event and it was not fired. - if (nativeEvent.type === 'mousemove' && nativeEvent.buttons === 0) { - // eslint-disable-next-line @typescript-eslint/no-use-before-define - handleTouchEnd(nativeEvent); - return; - } - - const { newValue, activeIndex } = getFingerNewValue({ - finger, - move: true, - values, - source: valueDerived, - }); - - focusThumb({ sliderRef, activeIndex, setActive }); - setValueState(newValue); - - if (handleChange) { - handleChange(nativeEvent, newValue); - } - }); - - const handleTouchEnd = useEventCallback((nativeEvent) => { - const finger = trackFinger(nativeEvent, touchId); - - if (!finger) { - return; - } - - const { newValue } = getFingerNewValue({ finger, values, source: valueDerived }); - - setActive(-1); - if (nativeEvent.type === 'touchend') { - setOpen(-1); - } - - if (onChangeCommitted) { - onChangeCommitted(nativeEvent, newValue); - } - - touchId.current = undefined; - - // eslint-disable-next-line @typescript-eslint/no-use-before-define - stopListening(); - }); - - const handleTouchStart = useEventCallback((event) => { - // If touch-action: none; is not supported we need to prevent the scroll manually. - if (!doesSupportTouchActionNone()) { - event.preventDefault(); - } - - const touch = event.changedTouches[0]; - if (touch != null) { - // A number that uniquely identifies the current finger in the touch session. - touchId.current = touch.identifier; - } - const finger = trackFinger(event, touchId); - const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived }); - focusThumb({ sliderRef, activeIndex, setActive }); - - setValueState(newValue); - - if (handleChange) { - handleChange(event, newValue); - } - - const doc = ownerDocument(sliderRef.current); - doc.addEventListener('touchmove', handleTouchMove); - doc.addEventListener('touchend', handleTouchEnd); - }); - - const stopListening = React.useCallback(() => { - const doc = ownerDocument(sliderRef.current); - doc.removeEventListener('mousemove', handleTouchMove); - doc.removeEventListener('mouseup', handleTouchEnd); - doc.removeEventListener('touchmove', handleTouchMove); - doc.removeEventListener('touchend', handleTouchEnd); - }, [handleTouchEnd, handleTouchMove]); - - React.useEffect(() => { - const { current: slider } = sliderRef; - slider.addEventListener('touchstart', handleTouchStart, { - passive: doesSupportTouchActionNone(), - }); - - return () => { - slider.removeEventListener('touchstart', handleTouchStart, { - passive: doesSupportTouchActionNone(), - }); - - stopListening(); - }; - }, [stopListening, handleTouchStart]); - - React.useEffect(() => { - if (disabled) { - stopListening(); - } - }, [disabled, stopListening]); - - const handleMouseDown = useEventCallback((event) => { - if (onMouseDown) { - onMouseDown(event); - } - - // Only handle left clicks - if (event.button !== 0) { - return; - } - - // Avoid text selection - event.preventDefault(); - const finger = trackFinger(event, touchId); - const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived }); - focusThumb({ sliderRef, activeIndex, setActive }); - - setValueState(newValue); - - if (handleChange) { - handleChange(event, newValue); - } - - const doc = ownerDocument(sliderRef.current); - doc.addEventListener('mousemove', handleTouchMove); - doc.addEventListener('mouseup', handleTouchEnd); - }); - - const trackOffset = valueToPercent(range ? values[0] : min, min, max); - const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset; - const trackStyle = { - ...axisProps[axis].offset(trackOffset), - ...axisProps[axis].leap(trackLeap), - }; +SliderRoot.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * @ignore + */ + children: PropTypes.node, + /** + * @ignore + */ + styleProps: PropTypes.shape({ + 'aria-label': PropTypes.string, + 'aria-labelledby': PropTypes.string, + 'aria-valuetext': PropTypes.string, + classes: PropTypes.object, + color: PropTypes.oneOf(['primary', 'secondary']), + defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), + disabled: PropTypes.bool, + getAriaLabel: PropTypes.func, + getAriaValueText: PropTypes.func, + isRtl: PropTypes.bool, + marks: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.node, + value: PropTypes.number.isRequired, + }), + ), + PropTypes.bool, + ]), + max: PropTypes.number, + min: PropTypes.number, + name: PropTypes.string, + onChange: PropTypes.func, + onChangeCommitted: PropTypes.func, + orientation: PropTypes.oneOf(['horizontal', 'vertical']), + scale: PropTypes.func, + step: PropTypes.number, + track: PropTypes.oneOf(['inverted', 'normal', false]), + value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), + valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), + valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + }), +}; +const Slider = React.forwardRef(function Slider(inputProps, ref) { + const props = useThemeProps({ props: inputProps, name: 'MuiSlider' }); + const { components = {}, ...other } = props; return ( - 0 && marks.some((mark) => mark.label), - [classes.vertical]: orientation === 'vertical', - [classes.trackInverted]: track === 'inverted', - [classes.trackFalse]: track === false, - }, - className, - )} - onMouseDown={handleMouseDown} + - - - - {marks.map((mark, index) => { - const percent = valueToPercent(mark.value, min, max); - const style = axisProps[axis].offset(percent); - - let markActive; - if (track === false) { - markActive = values.indexOf(mark.value) !== -1; - } else { - markActive = - (track === 'normal' && - (range - ? mark.value >= values[0] && mark.value <= values[values.length - 1] - : mark.value <= values[0])) || - (track === 'inverted' && - (range - ? mark.value <= values[0] || mark.value >= values[values.length - 1] - : mark.value >= values[0])); - } - - return ( - - - {mark.label != null ? ( - - {mark.label} - - ) : null} - - ); - })} - {values.map((value, index) => { - const percent = valueToPercent(value, min, max); - const style = axisProps[axis].offset(percent); - const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelComponentProp; - - return ( - - - - ); - })} - + components={{ + Root: SliderRoot, + ValueLabel, + ...components, + }} + ref={ref} + /> ); }); @@ -885,17 +311,7 @@ Slider.propTypes = { /** * The label of the slider. */ - 'aria-label': chainPropTypes(PropTypes.string, (props) => { - const range = Array.isArray(props.value || props.defaultValue); - - if (range && props['aria-label'] != null) { - return new Error( - 'Material-UI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.', - ); - } - - return null; - }), + 'aria-label': PropTypes.string, /** * The id of the element containing a label for the slider. */ @@ -903,39 +319,35 @@ Slider.propTypes = { /** * A string value that provides a user-friendly name for the current value of the slider. */ - 'aria-valuetext': chainPropTypes(PropTypes.string, (props) => { - const range = Array.isArray(props.value || props.defaultValue); - - if (range && props['aria-valuetext'] != null) { - return new Error( - 'Material-UI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.', - ); - } - - return null; - }), + 'aria-valuetext': PropTypes.string, /** * @ignore */ children: PropTypes.node, - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object, - /** - * @ignore - */ - className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. * @default 'primary' */ color: PropTypes.oneOf(['primary', 'secondary']), /** - * The component used for the root node. + * The components used for each slot inside the Slider. * Either a string to use a HTML element or a component. + * @default {} + */ + components: PropTypes.shape({ + Mark: PropTypes.elementType, + MarkLabel: PropTypes.elementType, + Rail: PropTypes.elementType, + Root: PropTypes.elementType, + Thumb: PropTypes.elementType, + Track: PropTypes.elementType, + ValueLabel: PropTypes.elementType, + }), + /** + * The props used for each slot inside the Slider. + * @default {} */ - component: PropTypes.elementType, + componentsProps: PropTypes.object, /** * The default element value. Use when the component is not controlled. */ @@ -960,6 +372,11 @@ Slider.propTypes = { * @returns {string} */ getAriaValueText: PropTypes.func, + /** + * Indicates whether the theme context has rtl direction. It is set automatically. + * @default false + */ + isRtl: PropTypes.bool, /** * Marks indicate predetermined values to which the user can move the slider. * If `true` the marks are spaced according the value of the `step` prop. @@ -1005,10 +422,6 @@ Slider.propTypes = { * @param {number | number[]} value The new value. */ onChangeCommitted: PropTypes.func, - /** - * @ignore - */ - onMouseDown: PropTypes.func, /** * The slider orientation. * @default 'horizontal' @@ -1029,10 +442,9 @@ Slider.propTypes = { */ step: PropTypes.number, /** - * The component used to display the value label. - * @default 'span' + * The system prop that allows defining system overrides as well as additional CSS styles. */ - ThumbComponent: PropTypes.elementType, + sx: PropTypes.object, /** * The track presentation: * @@ -1047,11 +459,6 @@ Slider.propTypes = { * For ranged sliders, provide an array with two values. */ value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - /** - * The value label component. - * @default ValueLabel - */ - ValueLabelComponent: PropTypes.elementType, /** * Controls when the value label is displayed: * @@ -1073,4 +480,4 @@ Slider.propTypes = { valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), }; -export default withStyles(styles, { name: 'MuiSlider' })(Slider); +export default Slider; diff --git a/packages/material-ui/src/Slider/ValueLabel.js b/packages/material-ui/src/Slider/ValueLabel.js index f0712a0504fdce..c1bf4da4ed3e18 100644 --- a/packages/material-ui/src/Slider/ValueLabel.js +++ b/packages/material-ui/src/Slider/ValueLabel.js @@ -1,30 +1,43 @@ import * as React from 'react'; -import clsx from 'clsx'; -import withStyles from '../styles/withStyles'; +import { useThemeProps, experimentalStyled } from '@material-ui/core/styles'; +import { ValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled'; -const styles = (theme) => ({ - thumb: { - '&$open': { - '& $offset': { - transform: 'scale(1) translateY(-10px)', - }, +const overridesResolver = (_, styles) => { + const componentName = 'MuiSlider-valueLabel'; + + const styleOverrides = { + ...styles.root, + [`&.${componentName}Open`]: styles.open, + [`&.${componentName}Offset`]: styles.offset, + [`& .${componentName}Circle`]: styles.circle, + [`& .${componentName}Label`]: styles.label, + }; + + return styleOverrides; +}; + +const ValueLabelRoot = experimentalStyled( + 'span', + {}, + { muiName: 'PrivateValueLabel', overridesResolver }, +)((props) => ({ + '&.MuiSlider-valueLabelOffset': { + '&.MuiSlider-valueLabelOpen': { + transform: 'scale(1) translateY(-10px)', }, - }, - open: {}, - offset: { zIndex: 1, - ...theme.typography.body2, - fontSize: theme.typography.pxToRem(12), + ...props.theme.typography.body2, + fontSize: props.theme.typography.pxToRem(12), lineHeight: 1.2, - transition: theme.transitions.create(['transform'], { - duration: theme.transitions.duration.shortest, + transition: props.theme.transitions.create(['transform'], { + duration: props.theme.transitions.duration.shortest, }), top: -34, transformOrigin: 'bottom center', transform: 'scale(0)', position: 'absolute', }, - circle: { + '& .MuiSlider-valueLabelCircle': { display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -34,36 +47,30 @@ const styles = (theme) => ({ backgroundColor: 'currentColor', transform: 'rotate(-45deg)', }, - label: { - color: theme.palette.primary.contrastText, + '& .MuiSlider-valueLabelLabel': { + color: props.theme.palette.primary.contrastText, transform: 'rotate(45deg)', textAlign: 'center', }, -}); +})); /** * @ignore - internal component. */ -function ValueLabel(props) { - const { children, classes, className, open, value } = props; +const ValueLabel = React.forwardRef(function ValueLabel(inputProps, ref) { + const props = useThemeProps({ props: inputProps, name: 'PrivateValueLabel' }); + /* eslint-disable react/prop-types */ + const { components = {}, ...other } = props; - return React.cloneElement( - children, - { - className: clsx( - children.props.className, - { - [classes.open]: open, - }, - classes.thumb, - ), - }, - - - {value} - - , + return ( + ); -} +}); -export default withStyles(styles, { name: 'PrivateValueLabel' })(ValueLabel); +export default ValueLabel; diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js index ec611e06df670b..d50c6a11e1647f 100644 --- a/packages/material-ui/src/index.js +++ b/packages/material-ui/src/index.js @@ -6,6 +6,8 @@ export * from './styles'; export * from './utils'; +export * from '@material-ui/unstyled'; + export { default as Accordion } from './Accordion'; export * from './Accordion'; diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index 035ed8d2c9b843..58b4107cf4fe86 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -151,6 +151,28 @@ const prettierConfig = prettier.resolveConfig.sync(process.cwd(), { config: path.join(__dirname, '../prettier.config.js'), }); +const getUnstyledFile = (tsFile: string) => { + let unstyledFile = ''; + + if(tsFile.endsWith('.d.ts') && tsFile.indexOf('material-ui-unstyled') === -1) { + const pathParts = tsFile.split('/'); + const componentName = pathParts[pathParts.length - 1].replace('.d.ts', ''); + const directoryName = pathParts[pathParts.length - 2]; + + const componentNameReg = new RegExp(componentName, 'g'); + + unstyledFile = tsFile.replace(/packages\/material-ui-lab|packages\/material-ui/g, 'packages/material-ui-unstyled'); + unstyledFile = unstyledFile.replace(componentNameReg, `${componentName}Unstyled`); + + if(directoryName !== componentName) { + const directoryNameReg = new RegExp(directoryName, 'g'); + unstyledFile = unstyledFile.replace(directoryNameReg, `${directoryName}Unstyled`); + } + } + + return unstyledFile; +} + async function generateProptypes( tsFile: string, jsFile: string, @@ -184,12 +206,7 @@ async function generateProptypes( const jsContent = await fse.readFile(jsFile, 'utf8'); - const unstyledFile = tsFile.endsWith('Styled.d.ts') - ? tsFile.replace(/material-ui-lab|material-ui-core|Styled/g, (matched) => { - if (matched === 'Styled') return 'Unstyled'; - return 'material-ui-unstyled'; - }) - : null; + const unstyledFile = getUnstyledFile(tsFile); const result = ttp.inject(proptypes, jsContent, { removeExistingPropTypes: true, From d9b1475bb44dfa65e85c744aa9c621a6167ba253 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 14:26:30 +0100 Subject: [PATCH 006/102] imports fixes --- packages/material-ui/src/Slider/Slider.js | 12 +++--------- packages/material-ui/src/Slider/ValueLabel.js | 2 +- scripts/generateProptypes.ts | 13 ++++++++----- 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index cf713abcfd4be0..c85bf434c4dcb1 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,15 +1,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { - useThemeProps, - experimentalStyled, - alpha, - lighten, - darken, -} from '@material-ui/core/styles'; -import { capitalize } from '@material-ui/core/utils'; -import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; +import { useThemeProps, experimentalStyled, alpha, lighten, darken } from '../styles'; +import capitalize from '../utils/capitalize'; import ValueLabel from './ValueLabel'; +import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; const overridesResolver = (props, styles, name) => { const { diff --git a/packages/material-ui/src/Slider/ValueLabel.js b/packages/material-ui/src/Slider/ValueLabel.js index c1bf4da4ed3e18..98600ecc15a64e 100644 --- a/packages/material-ui/src/Slider/ValueLabel.js +++ b/packages/material-ui/src/Slider/ValueLabel.js @@ -1,6 +1,6 @@ import * as React from 'react'; -import { useThemeProps, experimentalStyled } from '@material-ui/core/styles'; import { ValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled'; +import { useThemeProps, experimentalStyled } from '../styles'; const overridesResolver = (_, styles) => { const componentName = 'MuiSlider-valueLabel'; diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index 58b4107cf4fe86..c1a1fcf9a11120 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -154,24 +154,27 @@ const prettierConfig = prettier.resolveConfig.sync(process.cwd(), { const getUnstyledFile = (tsFile: string) => { let unstyledFile = ''; - if(tsFile.endsWith('.d.ts') && tsFile.indexOf('material-ui-unstyled') === -1) { + if (tsFile.endsWith('.d.ts') && tsFile.indexOf('material-ui-unstyled') === -1) { const pathParts = tsFile.split('/'); const componentName = pathParts[pathParts.length - 1].replace('.d.ts', ''); const directoryName = pathParts[pathParts.length - 2]; - + const componentNameReg = new RegExp(componentName, 'g'); - unstyledFile = tsFile.replace(/packages\/material-ui-lab|packages\/material-ui/g, 'packages/material-ui-unstyled'); + unstyledFile = tsFile.replace( + /packages\/material-ui-lab|packages\/material-ui/g, + 'packages/material-ui-unstyled', + ); unstyledFile = unstyledFile.replace(componentNameReg, `${componentName}Unstyled`); - if(directoryName !== componentName) { + if (directoryName !== componentName) { const directoryNameReg = new RegExp(directoryName, 'g'); unstyledFile = unstyledFile.replace(directoryNameReg, `${directoryName}Unstyled`); } } return unstyledFile; -} +}; async function generateProptypes( tsFile: string, From 18ce348b693f80d8c076e4db4de82d43832fd6e4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 14:36:26 +0100 Subject: [PATCH 007/102] imports order --- packages/material-ui/src/Slider/Slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index c85bf434c4dcb1..11a9d65a28b613 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,9 +1,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; import { useThemeProps, experimentalStyled, alpha, lighten, darken } from '../styles'; import capitalize from '../utils/capitalize'; import ValueLabel from './ValueLabel'; -import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; const overridesResolver = (props, styles, name) => { const { From fc94e1d0ae31de5da05c0d03a43213746f0b2587 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 14:39:01 +0100 Subject: [PATCH 008/102] testing umd build --- packages/material-ui/scripts/rollup.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui/scripts/rollup.config.js b/packages/material-ui/scripts/rollup.config.js index 253e1cd5606642..72a05346e97230 100644 --- a/packages/material-ui/scripts/rollup.config.js +++ b/packages/material-ui/scripts/rollup.config.js @@ -10,6 +10,7 @@ const input = './src/index.js'; const globals = { react: 'React', 'react-dom': 'ReactDOM', + '@material-ui/unstyled': 'MaterialUIUnstyled' }; const babelOptions = { exclude: /node_modules/, From 8573dfe0208365f3df3a7fc41f7045926df78b48 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 14:42:01 +0100 Subject: [PATCH 009/102] prettier --- packages/material-ui/scripts/rollup.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/scripts/rollup.config.js b/packages/material-ui/scripts/rollup.config.js index 72a05346e97230..637c554bc2a796 100644 --- a/packages/material-ui/scripts/rollup.config.js +++ b/packages/material-ui/scripts/rollup.config.js @@ -10,7 +10,7 @@ const input = './src/index.js'; const globals = { react: 'React', 'react-dom': 'ReactDOM', - '@material-ui/unstyled': 'MaterialUIUnstyled' + '@material-ui/unstyled': 'MaterialUIUnstyled', }; const babelOptions = { exclude: /node_modules/, From 22f458127a7987654333bf7fa66de35ee935c025 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 14:49:10 +0100 Subject: [PATCH 010/102] changed imports --- packages/material-ui/scripts/rollup.config.js | 1 - packages/material-ui/src/Slider/Slider.js | 2 +- packages/material-ui/src/Slider/ValueLabel.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/scripts/rollup.config.js b/packages/material-ui/scripts/rollup.config.js index 637c554bc2a796..253e1cd5606642 100644 --- a/packages/material-ui/scripts/rollup.config.js +++ b/packages/material-ui/scripts/rollup.config.js @@ -10,7 +10,6 @@ const input = './src/index.js'; const globals = { react: 'React', 'react-dom': 'ReactDOM', - '@material-ui/unstyled': 'MaterialUIUnstyled', }; const babelOptions = { exclude: /node_modules/, diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 11a9d65a28b613..b1ab389737eb36 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; +import { SliderUnstyled } from '@material-ui/unstyled'; import { useThemeProps, experimentalStyled, alpha, lighten, darken } from '../styles'; import capitalize from '../utils/capitalize'; import ValueLabel from './ValueLabel'; diff --git a/packages/material-ui/src/Slider/ValueLabel.js b/packages/material-ui/src/Slider/ValueLabel.js index 98600ecc15a64e..ed5370d35b7c5f 100644 --- a/packages/material-ui/src/Slider/ValueLabel.js +++ b/packages/material-ui/src/Slider/ValueLabel.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled'; +import { ValueLabelUnstyled } from '@material-ui/unstyled'; import { useThemeProps, experimentalStyled } from '../styles'; const overridesResolver = (_, styles) => { From f1eb1394114b0a72f17fb3b8d15bae0b3f132b25 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 15:58:41 +0100 Subject: [PATCH 011/102] fixes --- docs/src/pages/components/slider/slider.md | 2 +- .../src/SliderUnstyled/SliderUnstyled.d.ts | 2 +- .../src/SliderUnstyled/SliderUnstyled.js | 7 ++- .../src/SliderUnstyled/ValueLabelUnstyled.js | 8 +-- .../material-ui/src/Slider/Slider.test.js | 53 +++++++++---------- 5 files changed, 34 insertions(+), 38 deletions(-) diff --git a/docs/src/pages/components/slider/slider.md b/docs/src/pages/components/slider/slider.md index b33938bd850c70..c26d88a36c5be0 100644 --- a/docs/src/pages/components/slider/slider.md +++ b/docs/src/pages/components/slider/slider.md @@ -104,7 +104,7 @@ Increasing _x_ by one increases the represented value by factor _2_. ## Unstyled slider -{{"demo": "pages/components/slider-styled/UnstyledSlider.js"}} +{{"demo": "pages/components/slider/UnstyledSlider.js"}} ## Accessibility diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts index 41b3e3d0b77a79..b7087e4ae2da60 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts @@ -199,7 +199,7 @@ export interface SliderTypeMap

{ * Utility to create component types that inherit props from SliderUnstyled. */ export interface ExtendSliderUnstyledTypeMap { - props: M['props'] & Omit; + props: M['props']; defaultComponent: M['defaultComponent']; } diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js index b72450c4a641b0..7bcf6df2240461 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js @@ -173,6 +173,7 @@ const useSliderClasses = (props) => { }; const isComponent = (element) => typeof element !== 'string'; +const Forward = ({ children }) => children; const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { const { @@ -682,8 +683,10 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { const percent = valueToPercent(value, min, max); const style = axisProps[axis].offset(percent); + const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabel; + return ( - - + ); })} diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js index 5c351efd78a64a..ca53e8d2936730 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js @@ -11,7 +11,7 @@ const useValueLabelClasses = (props) => { const utilityClasses = { offset: clsx('MuiSlider-valueLabel', getUtilityClass('offset'), { - [getUtilityClass('open')]: open || valueLabelDisplay === 'on', + [getUtilityClass('open')]: open, }), circle: getUtilityClass('circle'), label: getUtilityClass('label'), @@ -24,13 +24,9 @@ const useValueLabelClasses = (props) => { * @ignore - internal component. */ function ValueLabel(props) { - const { children, className, value, valueLabelDisplay, components = {}, theme } = props; + const { children, className, value, components = {}, theme } = props; const classes = useValueLabelClasses(props); - if (valueLabelDisplay === 'off') { - return children; - } - const Root = components.Root || 'span'; return React.cloneElement( diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js index f7afee055461bd..1235acc969d0c4 100644 --- a/packages/material-ui/src/Slider/Slider.test.js +++ b/packages/material-ui/src/Slider/Slider.test.js @@ -34,15 +34,10 @@ describe('', () => { } const mount = createMount(); - let classes; const render = createClientRender(); - before(() => { - classes = getClasses(); - }); - describeConformance(, () => ({ - classes, + classes: {}, inheritComponent: 'span', mount, refInstanceof: window.HTMLSpanElement, @@ -133,7 +128,7 @@ describe('', () => { describe('prop: orientation', () => { it('should render with the vertical classes', () => { const { container, getByRole } = render(); - expect(container.firstChild).to.have.class(classes.vertical); + expect(container.firstChild).to.have.class('MuiSlider-vertical'); expect(getByRole('slider')).to.have.attribute('aria-orientation', 'vertical'); }); @@ -302,7 +297,7 @@ describe('', () => { describe('prop: disabled', () => { it('should render the disabled classes', () => { const { container, getByRole } = render(); - expect(container.firstChild).to.have.class(classes.disabled); + expect(container.firstChild).to.have.class('Mui-disabled'); expect(getByRole('slider')).to.not.have.attribute('tabIndex'); }); @@ -333,7 +328,7 @@ describe('', () => { setProps({ disabled: true }); expect(thumb).not.toHaveFocus(); - expect(thumb).to.not.have.class(classes.active); + expect(thumb).to.not.have.class('Mui-active'); fireEvent.touchMove( container.firstChild, @@ -357,19 +352,19 @@ describe('', () => { }); setProps({ disabled: true }); expect(thumb).not.toHaveFocus(); - expect(thumb).to.not.have.class(classes.focusVisible); + expect(thumb).to.not.have.class('Mui-focusVisible'); }); }); describe('prop: track', () => { it('should render the track classes for false', () => { const { container } = render(); - expect(container.firstChild).to.have.class(classes.trackFalse); + expect(container.firstChild).to.have.class('MuiSlider-trackFalse'); }); it('should render the track classes for inverted', () => { const { container } = render(); - expect(container.firstChild).to.have.class(classes.trackInverted); + expect(container.firstChild).to.have.class('MuiSlider-trackInverted'); }); }); @@ -529,28 +524,26 @@ describe('', () => { describe('prop: valueLabelDisplay', () => { it('should always display the value label according to on and off', () => { - const valueLabelClasses = getClasses(); const { getByRole, setProps } = render(); const thumb = getByRole('slider'); - expect(thumb).to.have.class(valueLabelClasses.open); + expect(thumb.firstChild).to.have.class('MuiSlider-valueLabelOpen'); setProps({ valueLabelDisplay: 'off', }); const newThumb = getByRole('slider'); - expect(newThumb).not.to.have.class(valueLabelClasses.open); + expect(newThumb.firstChild).to.equal(null); }); it('should display the value label only on hover for auto', () => { - const valueLabelClasses = getClasses(); const { getByRole } = render(); const thumb = getByRole('slider'); - expect(thumb).not.to.have.class(valueLabelClasses.open); + expect(thumb.firstChild).not.to.have.class('MuiSlider-valueLabelOpen'); fireEvent.mouseOver(thumb); - expect(thumb).to.have.class(valueLabelClasses.open); + expect(thumb.firstChild).to.have.class('MuiSlider-valueLabelOpen'); }); it('should be respected when using custom value label', () => { @@ -565,7 +558,11 @@ describe('', () => { ValueLabelComponent.propTypes = { value: PropTypes.number }; const screen = render( - , + , ); expect(screen.queryByTestId('value-label')).to.have.class('open'); @@ -580,8 +577,8 @@ describe('', () => { describe('markActive state', () => { function getActives(container) { - return Array.from(container.querySelectorAll(`.${classes.mark}`)).map((node) => - node.classList.contains(classes.markActive), + return Array.from(container.querySelectorAll('.MuiSlider-mark')).map((node) => + node.classList.contains('MuiSlider-markActive'), ); } @@ -674,7 +671,7 @@ describe('', () => { it('should warn if aria-valuetext is provided', () => { expect(() => { PropTypes.checkPropTypes( - Slider.Naked.propTypes, + Slider.propTypes, { classes: {}, value: [20, 50], 'aria-valuetext': 'hot' }, 'prop', 'MockedSlider', @@ -685,7 +682,7 @@ describe('', () => { it('should warn if aria-label is provided', () => { expect(() => { PropTypes.checkPropTypes( - Slider.Naked.propTypes, + Slider.propTypes, { classes: {}, value: [20, 50], 'aria-label': 'hot' }, 'prop', 'MockedSlider', @@ -745,10 +742,10 @@ describe('', () => { defaultValue={0} />, ); - expect(container.querySelectorAll(`.${classes.markLabel}`).length).to.equal(3); - expect(container.querySelectorAll(`.${classes.mark}`).length).to.equal(3); - expect(container.querySelectorAll(`.${classes.markLabel}[data-index="2"]`).length).to.equal(1); - expect(container.querySelectorAll(`.${classes.mark}[data-index="2"]`).length).to.equal(1); + expect(container.querySelectorAll('.MuiSlider-markLabel').length).to.equal(3); + expect(container.querySelectorAll('.MuiSlider-mark').length).to.equal(3); + expect(container.querySelectorAll('.MuiSlider-markLabel[data-index="2"]').length).to.equal(1); + expect(container.querySelectorAll('.MuiSlider-mark[data-index="2"]').length).to.equal(1); }); it('should pass "name" and "value" as part of the event.target for onChange', () => { @@ -783,7 +780,7 @@ describe('', () => { const { getByTestId } = render( n.toString(2)} />, From 49f07998b7c310b5507986dc93b2c35e5a0333f7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 15:58:48 +0100 Subject: [PATCH 012/102] fixes --- test/utils/getClasses.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/utils/getClasses.js b/test/utils/getClasses.js index 6268173a7f77f9..162ca4f7f50af2 100644 --- a/test/utils/getClasses.js +++ b/test/utils/getClasses.js @@ -13,7 +13,7 @@ export default function getClasses(element) { let classes; function Listener() { - classes = useStyles(element.props); + if (useStyles) classes = useStyles(element.props); return null; } shallow(); From c11de66fc8815908c765f8ce122e2918e16904e9 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 16:29:52 +0100 Subject: [PATCH 013/102] wip --- packages/material-ui/src/Slider/Slider.d.ts | 61 +++-- packages/material-ui/src/Slider/Slider.js | 211 +----------------- packages/material-ui/src/Slider/ValueLabel.js | 2 +- scripts/generateProptypes.ts | 6 +- 4 files changed, 54 insertions(+), 226 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts index b417b8343ac6ec..7fafccefb63d9f 100644 --- a/packages/material-ui/src/Slider/Slider.d.ts +++ b/packages/material-ui/src/Slider/Slider.d.ts @@ -4,6 +4,7 @@ import { ExtendSliderUnstyledTypeMap, ExtendSliderUnstyled, } from '@material-ui/unstyled/SliderUnstyled'; +import { OverrideProps } from '../OverridableComponent'; export type SliderTypeMap< D extends React.ElementType = 'span', @@ -19,20 +20,7 @@ export type SliderTypeMap< }>; type SliderRootProps = NonNullable['root']; -type SliderMarkProps = NonNullable['mark']; -type SliderMarkLabelProps = NonNullable['markLabel']; -type SliderRailProps = NonNullable['rail']; -type SliderTrackProps = NonNullable['track']; -type SliderThumbProps = NonNullable['thumb']; -type SliderValueLabel = NonNullable['valueLabel']; - export const SliderRoot: React.FC; -export const SliderMark: React.FC; -export const SliderMarkLabel: React.FC; -export const SliderRail: React.FC; -export const SliderTrack: React.FC; -export const SliderThumb: React.FC; -export const SliderValueLabel: React.FC; /** * * Demos: @@ -45,4 +33,51 @@ export const SliderValueLabel: React.FC; */ declare const Slider: ExtendSliderUnstyled; +export type SliderClassKey = + /** Styles applied to the root element. */ + | 'root' + /** Styles applied to the root element if `color="primary"`. */ + | 'colorPrimary' + /** Styles applied to the root element if `color="secondary"`. */ + | 'colorSecondary' + /** Styles applied to the root element if `marks` is provided with at least one label. */ + | 'marked' + /** Pseudo-class applied to the root element if `orientation="vertical"`. */ + | 'vertical' + /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ + | 'disabled' + /** Styles applied to the rail element. */ + | 'rail' + /** Styles applied to the track element. */ + | 'track' + /** Styles applied to the track element if `track={false}`. */ + | 'trackFalse' + /** Styles applied to the track element if `track="inverted"`. */ + | 'trackInverted' + /** Styles applied to the thumb element. */ + | 'thumb' + /** Styles applied to the thumb element if `color="primary"`. */ + | 'thumbColorPrimary' + /** Styles applied to the thumb element if `color="secondary"`. */ + | 'thumbColorSecondary' + /** Pseudo-class applied to the thumb element if it's active. */ + | 'active' + /** Pseudo-class applied to the thumb element if keyboard focused. */ + | 'focusVisible' + /** Styles applied to the thumb label element. */ + | 'valueLabel' + /** Styles applied to the mark element. */ + | 'mark' + /** Styles applied to the mark element if active (depending on the value). */ + | 'markActive' + /** Styles applied to the mark label element. */ + | 'markLabel' + /** Styles applied to the mark label element if active (depending on the value). */ + | 'markLabelActive'; + +export type SliderProps< + D extends React.ElementType = SliderTypeMap['defaultComponent'], + P = {} +> = OverrideProps, D>; + export default Slider; diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index b1ab389737eb36..4cf9e9bcfee550 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { SliderUnstyled } from '@material-ui/unstyled'; +import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; import { useThemeProps, experimentalStyled, alpha, lighten, darken } from '../styles'; import capitalize from '../utils/capitalize'; import ValueLabel from './ValueLabel'; @@ -234,53 +234,6 @@ const SliderRoot = experimentalStyled( }, })); -SliderRoot.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | - // ---------------------------------------------------------------------- - /** - * @ignore - */ - children: PropTypes.node, - /** - * @ignore - */ - styleProps: PropTypes.shape({ - 'aria-label': PropTypes.string, - 'aria-labelledby': PropTypes.string, - 'aria-valuetext': PropTypes.string, - classes: PropTypes.object, - color: PropTypes.oneOf(['primary', 'secondary']), - defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - disabled: PropTypes.bool, - getAriaLabel: PropTypes.func, - getAriaValueText: PropTypes.func, - isRtl: PropTypes.bool, - marks: PropTypes.oneOfType([ - PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.node, - value: PropTypes.number.isRequired, - }), - ), - PropTypes.bool, - ]), - max: PropTypes.number, - min: PropTypes.number, - name: PropTypes.string, - onChange: PropTypes.func, - onChangeCommitted: PropTypes.func, - orientation: PropTypes.oneOf(['horizontal', 'vertical']), - scale: PropTypes.func, - step: PropTypes.number, - track: PropTypes.oneOf(['inverted', 'normal', false]), - value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), - valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - }), -}; - const Slider = React.forwardRef(function Slider(inputProps, ref) { const props = useThemeProps({ props: inputProps, name: 'MuiSlider' }); const { components = {}, ...other } = props; @@ -302,176 +255,14 @@ Slider.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- - /** - * The label of the slider. - */ - 'aria-label': PropTypes.string, - /** - * The id of the element containing a label for the slider. - */ - 'aria-labelledby': PropTypes.string, - /** - * A string value that provides a user-friendly name for the current value of the slider. - */ - 'aria-valuetext': PropTypes.string, /** * @ignore */ children: PropTypes.node, - /** - * The color of the component. It supports those theme colors that make sense for this component. - * @default 'primary' - */ - color: PropTypes.oneOf(['primary', 'secondary']), - /** - * The components used for each slot inside the Slider. - * Either a string to use a HTML element or a component. - * @default {} - */ - components: PropTypes.shape({ - Mark: PropTypes.elementType, - MarkLabel: PropTypes.elementType, - Rail: PropTypes.elementType, - Root: PropTypes.elementType, - Thumb: PropTypes.elementType, - Track: PropTypes.elementType, - ValueLabel: PropTypes.elementType, - }), - /** - * The props used for each slot inside the Slider. - * @default {} - */ - componentsProps: PropTypes.object, - /** - * The default element value. Use when the component is not controlled. - */ - defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - /** - * If `true`, the slider is disabled. - * @default false - */ - disabled: PropTypes.bool, - /** - * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. - * - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaLabel: PropTypes.func, - /** - * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. - * - * @param {number} value The thumb label's value to format. - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaValueText: PropTypes.func, - /** - * Indicates whether the theme context has rtl direction. It is set automatically. - * @default false - */ - isRtl: PropTypes.bool, - /** - * Marks indicate predetermined values to which the user can move the slider. - * If `true` the marks are spaced according the value of the `step` prop. - * If an array, it should contain objects with `value` and an optional `label` keys. - * @default false - */ - marks: PropTypes.oneOfType([ - PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.node, - value: PropTypes.number.isRequired, - }), - ), - PropTypes.bool, - ]), - /** - * The maximum allowed value of the slider. - * Should not be equal to min. - * @default 100 - */ - max: PropTypes.number, - /** - * The minimum allowed value of the slider. - * Should not be equal to max. - * @default 0 - */ - min: PropTypes.number, - /** - * Name attribute of the hidden `input` element. - */ - name: PropTypes.string, - /** - * Callback function that is fired when the slider's value changed. - * - * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {number | number[]} value The new value. - */ - onChange: PropTypes.func, - /** - * Callback function that is fired when the `mouseup` is triggered. - * - * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {number | number[]} value The new value. - */ - onChangeCommitted: PropTypes.func, - /** - * The slider orientation. - * @default 'horizontal' - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']), - /** - * A transformation function, to change the scale of the slider. - * @default (x) => x - */ - scale: PropTypes.func, - /** - * The granularity with which the slider can step through values. (A "discrete" slider.) - * The `min` prop serves as the origin for the valid values. - * We recommend (max - min) to be evenly divisible by the step. - * - * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. - * @default 1 - */ - step: PropTypes.number, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx: PropTypes.object, - /** - * The track presentation: - * - * - `normal` the track will render a bar representing the slider value. - * - `inverted` the track will render a bar representing the remaining slider value. - * - `false` the track will render without a bar. - * @default 'normal' - */ - track: PropTypes.oneOf(['inverted', 'normal', false]), - /** - * The value of the slider. - * For ranged sliders, provide an array with two values. - */ - value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), - /** - * Controls when the value label is displayed: - * - * - `auto` the value label will display when the thumb is hovered or focused. - * - `on` will display persistently. - * - `off` will never display. - * @default 'off' - */ - valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), - /** - * The format function the value label's value. - * - * When a function is provided, it should have the following signature: - * - * - {number} value The value label's value to format - * - {number} index The value label's index to format - * @default (x) => x - */ - valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), }; export default Slider; diff --git a/packages/material-ui/src/Slider/ValueLabel.js b/packages/material-ui/src/Slider/ValueLabel.js index ed5370d35b7c5f..98600ecc15a64e 100644 --- a/packages/material-ui/src/Slider/ValueLabel.js +++ b/packages/material-ui/src/Slider/ValueLabel.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ValueLabelUnstyled } from '@material-ui/unstyled'; +import { ValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled'; import { useThemeProps, experimentalStyled } from '../styles'; const overridesResolver = (_, styles) => { diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index c1a1fcf9a11120..8d6cac786c461c 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -155,13 +155,15 @@ const getUnstyledFile = (tsFile: string) => { let unstyledFile = ''; if (tsFile.endsWith('.d.ts') && tsFile.indexOf('material-ui-unstyled') === -1) { - const pathParts = tsFile.split('/'); + unstyledFile = tsFile; + + const pathParts = unstyledFile.split('/'); const componentName = pathParts[pathParts.length - 1].replace('.d.ts', ''); const directoryName = pathParts[pathParts.length - 2]; const componentNameReg = new RegExp(componentName, 'g'); - unstyledFile = tsFile.replace( + unstyledFile = unstyledFile.replace( /packages\/material-ui-lab|packages\/material-ui/g, 'packages/material-ui-unstyled', ); From 25a0da43c756e7e51fcc7ecae3c59685ad3ef1a7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 16:45:48 +0100 Subject: [PATCH 014/102] proptypes fixed --- .../src/SliderUnstyled/SliderUnstyled.d.ts | 8 +- packages/material-ui/src/Slider/Slider.d.ts | 1 + packages/material-ui/src/Slider/Slider.js | 183 ++++++++++++++++++ 3 files changed, 188 insertions(+), 4 deletions(-) diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts index b7087e4ae2da60..c91b99eff0125c 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts @@ -12,7 +12,7 @@ export interface ValueLabelProps extends React.HTMLAttributes { value: number; } -export interface SliderTypeMap

{ +export interface SliderUnstyledTypeMap

{ props: P & { /** * The label of the slider. @@ -51,7 +51,7 @@ export interface SliderTypeMap

{ */ componentsProps?: { root?: { - styleProps?: Omit['props'], 'components' | 'componentsProps'>; + styleProps?: Omit['props'], 'components' | 'componentsProps'>; as: React.ElementType; }; track?: { @@ -199,7 +199,7 @@ export interface SliderTypeMap

{ * Utility to create component types that inherit props from SliderUnstyled. */ export interface ExtendSliderUnstyledTypeMap { - props: M['props']; + props: M['props'] & SliderUnstyledTypeMap['props']; defaultComponent: M['defaultComponent']; } @@ -213,6 +213,6 @@ export type ExtendSliderUnstyled = OverridableComp * * - [SliderUnstyled API](https://material-ui.com/api/slider-unstyled/) */ -declare const SliderUnstyled: OverridableComponent; +declare const SliderUnstyled: OverridableComponent; export default SliderUnstyled; diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts index 7fafccefb63d9f..66022a51ba7ef3 100644 --- a/packages/material-ui/src/Slider/Slider.d.ts +++ b/packages/material-ui/src/Slider/Slider.d.ts @@ -21,6 +21,7 @@ export type SliderTypeMap< type SliderRootProps = NonNullable['root']; export const SliderRoot: React.FC; + /** * * Demos: diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 4cf9e9bcfee550..8b9052a809a11a 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,5 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import { chainPropTypes } from '@material-ui/utils'; import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; import { useThemeProps, experimentalStyled, alpha, lighten, darken } from '../styles'; import capitalize from '../utils/capitalize'; @@ -255,14 +256,196 @@ Slider.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * The label of the slider. + */ + 'aria-label': chainPropTypes(PropTypes.string, (props) => { + const range = Array.isArray(props.value || props.defaultValue); + + if (range && props['aria-label'] != null) { + return new Error( + 'Material-UI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.', + ); + } + + return null; + }), + /** + * The id of the element containing a label for the slider. + */ + 'aria-labelledby': PropTypes.string, + /** + * A string value that provides a user-friendly name for the current value of the slider. + */ + 'aria-valuetext': chainPropTypes(PropTypes.string, (props) => { + const range = Array.isArray(props.value || props.defaultValue); + + if (range && props['aria-valuetext'] != null) { + return new Error( + 'Material-UI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.', + ); + } + + return null; + }), /** * @ignore */ children: PropTypes.node, + /** + * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' + */ + color: PropTypes.oneOf(['primary', 'secondary']), + /** + * The components used for each slot inside the Slider. + * Either a string to use a HTML element or a component. + * @default {} + */ + components: PropTypes.shape({ + Mark: PropTypes.elementType, + MarkLabel: PropTypes.elementType, + Rail: PropTypes.elementType, + Root: PropTypes.elementType, + Thumb: PropTypes.elementType, + Track: PropTypes.elementType, + ValueLabel: PropTypes.elementType, + }), + /** + * The props used for each slot inside the Slider. + * @default {} + */ + componentsProps: PropTypes.object, + /** + * The default element value. Use when the component is not controlled. + */ + defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), + /** + * If `true`, the slider is disabled. + * @default false + */ + disabled: PropTypes.bool, + /** + * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. + * + * @param {number} index The thumb label's index to format. + * @returns {string} + */ + getAriaLabel: PropTypes.func, + /** + * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. + * + * @param {number} value The thumb label's value to format. + * @param {number} index The thumb label's index to format. + * @returns {string} + */ + getAriaValueText: PropTypes.func, + /** + * Indicates whether the theme context has rtl direction. It is set automatically. + * @default false + */ + isRtl: PropTypes.bool, + /** + * Marks indicate predetermined values to which the user can move the slider. + * If `true` the marks are spaced according the value of the `step` prop. + * If an array, it should contain objects with `value` and an optional `label` keys. + * @default false + */ + marks: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.node, + value: PropTypes.number.isRequired, + }), + ), + PropTypes.bool, + ]), + /** + * The maximum allowed value of the slider. + * Should not be equal to min. + * @default 100 + */ + max: PropTypes.number, + /** + * The minimum allowed value of the slider. + * Should not be equal to max. + * @default 0 + */ + min: PropTypes.number, + /** + * Name attribute of the hidden `input` element. + */ + name: PropTypes.string, + /** + * Callback function that is fired when the slider's value changed. + * + * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event. + * @param {number | number[]} value The new value. + */ + onChange: PropTypes.func, + /** + * Callback function that is fired when the `mouseup` is triggered. + * + * @param {object} event The event source of the callback. **Warning**: This is a generic event not a change event. + * @param {number | number[]} value The new value. + */ + onChangeCommitted: PropTypes.func, + /** + * The slider orientation. + * @default 'horizontal' + */ + orientation: PropTypes.oneOf(['horizontal', 'vertical']), + /** + * A transformation function, to change the scale of the slider. + * @default (x) => x + */ + scale: PropTypes.func, + /** + * The granularity with which the slider can step through values. (A "discrete" slider.) + * The `min` prop serves as the origin for the valid values. + * We recommend (max - min) to be evenly divisible by the step. + * + * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. + * @default 1 + */ + step: PropTypes.number, /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx: PropTypes.object, + /** + * The track presentation: + * + * - `normal` the track will render a bar representing the slider value. + * - `inverted` the track will render a bar representing the remaining slider value. + * - `false` the track will render without a bar. + * @default 'normal' + */ + track: PropTypes.oneOf(['inverted', 'normal', false]), + /** + * The value of the slider. + * For ranged sliders, provide an array with two values. + */ + value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), + /** + * Controls when the value label is displayed: + * + * - `auto` the value label will display when the thumb is hovered or focused. + * - `on` will display persistently. + * - `off` will never display. + * @default 'off' + */ + valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), + /** + * The format function the value label's value. + * + * When a function is provided, it should have the following signature: + * + * - {number} value The value label's value to format + * - {number} index The value label's index to format + * @default (x) => x + */ + valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), }; export default Slider; From 65b91c51827e923dd6b3ee2f3adf63389d8d59e4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 17:10:13 +0100 Subject: [PATCH 015/102] framer --- framer/Material-UI.framerfx/code/Slider.tsx | 103 ++++++++++---------- framer/scripts/framerConfig.js | 2 + 2 files changed, 52 insertions(+), 53 deletions(-) diff --git a/framer/Material-UI.framerfx/code/Slider.tsx b/framer/Material-UI.framerfx/code/Slider.tsx index 93a8ee09d86cdf..653f5ae8f1c160 100644 --- a/framer/Material-UI.framerfx/code/Slider.tsx +++ b/framer/Material-UI.framerfx/code/Slider.tsx @@ -3,14 +3,15 @@ import { addPropertyControls, ControlType } from 'framer'; import MuiSlider from '@material-ui/core/Slider'; interface Props { - color: 'primary' | 'secondary'; - disabled: boolean; - max: number; - min: number; - orientation: 'horizontal' | 'vertical'; - step: number; - track: 'inverted' | 'normal' | false; - valueLabelDisplay: 'auto' | 'off' | 'on'; + color?: 'primary' | 'secondary'; + disabled?: boolean; + max?: number; + min?: number; + orientation?: 'horizontal' | 'vertical'; + step?: number; + sx?: object; + track?: 'inverted' | 'normal' | false; + valueLabelDisplay?: 'auto' | 'off' | 'on'; width: number | string; height: number; } @@ -21,53 +22,49 @@ export function Slider(props: Props): JSX.Element { } Slider.defaultProps = { - color: 'primary' as 'primary', - disabled: false, - max: 100, - min: 0, - orientation: 'horizontal' as 'horizontal', - step: 1, - track: 'normal' as 'normal', - valueLabelDisplay: 'off' as 'off', width: 160, height: 24, }; addPropertyControls(Slider, { - color: { - type: ControlType.Enum, - title: 'Color', - options: ['primary', 'secondary'], - }, - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - max: { - type: ControlType.Number, - title: 'Max', - }, - min: { - type: ControlType.Number, - title: 'Min', - }, - orientation: { - type: ControlType.Enum, - title: 'Orientation', - options: ['horizontal', 'vertical'], - }, - step: { - type: ControlType.Number, - title: 'Step', - }, - track: { - type: ControlType.Enum, - title: 'Track', - options: ['inverted', 'normal', false], - }, - valueLabelDisplay: { - type: ControlType.Enum, - title: 'Value label display', - options: ['auto', 'off', 'on'], - }, -}); +color: { + type: ControlType.Enum, + title: 'Color', + options: ['primary', 'secondary'], +}, +disabled: { + type: ControlType.Boolean, + title: 'Disabled', +}, +max: { + type: ControlType.Number, + title: 'Max', +}, +min: { + type: ControlType.Number, + title: 'Min', +}, +orientation: { + type: ControlType.Enum, + title: 'Orientation', + options: ['horizontal', 'vertical'], +}, +step: { + type: ControlType.Number, + title: 'Step', +}, +sx: { + type: ControlType.Object, + title: 'Sx', +}, +track: { + type: ControlType.Enum, + title: 'Track', + options: ['inverted', 'normal', false], +}, +valueLabelDisplay: { + type: ControlType.Enum, + title: 'Value label display', + options: ['auto', 'off', 'on'], +}, +}); \ No newline at end of file diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index e0fc90248e238a..ab0a818852ae53 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -252,9 +252,11 @@ export const componentSettings = { }, Slider: { ignoredProps: [ + 'components', 'defaultValue', 'getAriaLabel', 'getAriaValueText', + 'isRtl', 'onChange', 'onChangeCommitted', 'scale', From b1b38bf86b04eb978155c0f853c6e645bd28fa84 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 17:25:13 +0100 Subject: [PATCH 016/102] build fix test --- packages/material-ui-unstyled/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-unstyled/package.json b/packages/material-ui-unstyled/package.json index 360616acb492e9..a2eef1f6b2ce53 100644 --- a/packages/material-ui-unstyled/package.json +++ b/packages/material-ui-unstyled/package.json @@ -22,7 +22,7 @@ }, "homepage": "https://material-ui.com", "scripts": { - "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:copy-files", + "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files", "build:legacy": "node ../../scripts/build legacy", "build:modern": "node ../../scripts/build modern", "build:node": "node ../../scripts/build node", From cf9f1c8f12e76becf49b3c7c60f081b0ea4a2c61 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 17:34:28 +0100 Subject: [PATCH 017/102] framer & build test --- babel.config.js | 2 ++ framer/Material-UI.framerfx/code/Slider.tsx | 5 ----- framer/scripts/framerConfig.js | 1 + 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/babel.config.js b/babel.config.js index b5b77d8501928a..6bb3696cbb3a9e 100644 --- a/babel.config.js +++ b/babel.config.js @@ -108,6 +108,8 @@ module.exports = function getBabelConfig(api) { 'babel-plugin-module-resolver', { alias: { + // TODO: Should we add this + ...defaultAlias, modules: './modules', }, }, diff --git a/framer/Material-UI.framerfx/code/Slider.tsx b/framer/Material-UI.framerfx/code/Slider.tsx index 653f5ae8f1c160..89d188b3cb288d 100644 --- a/framer/Material-UI.framerfx/code/Slider.tsx +++ b/framer/Material-UI.framerfx/code/Slider.tsx @@ -9,7 +9,6 @@ interface Props { min?: number; orientation?: 'horizontal' | 'vertical'; step?: number; - sx?: object; track?: 'inverted' | 'normal' | false; valueLabelDisplay?: 'auto' | 'off' | 'on'; width: number | string; @@ -53,10 +52,6 @@ step: { type: ControlType.Number, title: 'Step', }, -sx: { - type: ControlType.Object, - title: 'Sx', -}, track: { type: ControlType.Enum, title: 'Track', diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index ab0a818852ae53..7dcdfda0a82d48 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -265,6 +265,7 @@ export const componentSettings = { 'ValueLabelComponent', 'valueLabelFormat', 'marks', + 'sx', ], propValues: { width: 160, From f66346527d6ee02f1ff81278e34da595ff8553c6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 17:38:39 +0100 Subject: [PATCH 018/102] prettier --- framer/Material-UI.framerfx/code/Slider.tsx | 74 ++++++++++----------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/framer/Material-UI.framerfx/code/Slider.tsx b/framer/Material-UI.framerfx/code/Slider.tsx index 89d188b3cb288d..dd9bf9b7048686 100644 --- a/framer/Material-UI.framerfx/code/Slider.tsx +++ b/framer/Material-UI.framerfx/code/Slider.tsx @@ -26,40 +26,40 @@ Slider.defaultProps = { }; addPropertyControls(Slider, { -color: { - type: ControlType.Enum, - title: 'Color', - options: ['primary', 'secondary'], -}, -disabled: { - type: ControlType.Boolean, - title: 'Disabled', -}, -max: { - type: ControlType.Number, - title: 'Max', -}, -min: { - type: ControlType.Number, - title: 'Min', -}, -orientation: { - type: ControlType.Enum, - title: 'Orientation', - options: ['horizontal', 'vertical'], -}, -step: { - type: ControlType.Number, - title: 'Step', -}, -track: { - type: ControlType.Enum, - title: 'Track', - options: ['inverted', 'normal', false], -}, -valueLabelDisplay: { - type: ControlType.Enum, - title: 'Value label display', - options: ['auto', 'off', 'on'], -}, -}); \ No newline at end of file + color: { + type: ControlType.Enum, + title: 'Color', + options: ['primary', 'secondary'], + }, + disabled: { + type: ControlType.Boolean, + title: 'Disabled', + }, + max: { + type: ControlType.Number, + title: 'Max', + }, + min: { + type: ControlType.Number, + title: 'Min', + }, + orientation: { + type: ControlType.Enum, + title: 'Orientation', + options: ['horizontal', 'vertical'], + }, + step: { + type: ControlType.Number, + title: 'Step', + }, + track: { + type: ControlType.Enum, + title: 'Track', + options: ['inverted', 'normal', false], + }, + valueLabelDisplay: { + type: ControlType.Enum, + title: 'Value label display', + options: ['auto', 'off', 'on'], + }, +}); From d0fa6cc88c3ea90a97c5cdc1174b68b4eaab391c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 17:46:31 +0100 Subject: [PATCH 019/102] test imports --- packages/material-ui/src/Slider/Slider.d.ts | 2 +- packages/material-ui/src/Slider/Slider.js | 2 +- packages/material-ui/src/Slider/ValueLabel.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts index 66022a51ba7ef3..67904f74ac1116 100644 --- a/packages/material-ui/src/Slider/Slider.d.ts +++ b/packages/material-ui/src/Slider/Slider.d.ts @@ -3,7 +3,7 @@ import { SxProps } from '@material-ui/core/Box'; import { ExtendSliderUnstyledTypeMap, ExtendSliderUnstyled, -} from '@material-ui/unstyled/SliderUnstyled'; +} from '@material-ui/unstyled'; import { OverrideProps } from '../OverridableComponent'; export type SliderTypeMap< diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 8b9052a809a11a..06ec515857e10c 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { chainPropTypes } from '@material-ui/utils'; -import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; +import { SliderUnstyled } from '@material-ui/unstyled'; import { useThemeProps, experimentalStyled, alpha, lighten, darken } from '../styles'; import capitalize from '../utils/capitalize'; import ValueLabel from './ValueLabel'; diff --git a/packages/material-ui/src/Slider/ValueLabel.js b/packages/material-ui/src/Slider/ValueLabel.js index 98600ecc15a64e..ed5370d35b7c5f 100644 --- a/packages/material-ui/src/Slider/ValueLabel.js +++ b/packages/material-ui/src/Slider/ValueLabel.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled'; +import { ValueLabelUnstyled } from '@material-ui/unstyled'; import { useThemeProps, experimentalStyled } from '../styles'; const overridesResolver = (_, styles) => { From d0781f0d2942a95e1d3f5d63984a1c4ab4bb4273 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 17:57:31 +0100 Subject: [PATCH 020/102] type fixes & prettier --- packages/material-ui/src/Slider/Slider.d.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts index 67904f74ac1116..b38f7bb7f13d27 100644 --- a/packages/material-ui/src/Slider/Slider.d.ts +++ b/packages/material-ui/src/Slider/Slider.d.ts @@ -1,9 +1,6 @@ import * as React from 'react'; import { SxProps } from '@material-ui/core/Box'; -import { - ExtendSliderUnstyledTypeMap, - ExtendSliderUnstyled, -} from '@material-ui/unstyled'; +import { ExtendSliderUnstyledTypeMap, ExtendSliderUnstyled } from '@material-ui/unstyled'; import { OverrideProps } from '../OverridableComponent'; export type SliderTypeMap< @@ -79,6 +76,6 @@ export type SliderClassKey = export type SliderProps< D extends React.ElementType = SliderTypeMap['defaultComponent'], P = {} -> = OverrideProps, D>; +> = OverrideProps, D>; export default Slider; From 9a0aec446f0bd494b7f54870e9bc27337c09753a Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 18:18:55 +0100 Subject: [PATCH 021/102] various fixes --- babel.config.js | 2 -- docs/src/modules/utils/helpers.test.js | 7 +++++++ .../src/SliderUnstyled/SliderUnstyled.js | 4 ++-- .../src/SliderUnstyled/ValueLabelUnstyled.js | 2 +- packages/material-ui/src/Slider/Slider.test.js | 10 +--------- scripts/sizeSnapshot/webpack.config.js | 13 +++++++++++++ 6 files changed, 24 insertions(+), 14 deletions(-) diff --git a/babel.config.js b/babel.config.js index 6bb3696cbb3a9e..b5b77d8501928a 100644 --- a/babel.config.js +++ b/babel.config.js @@ -108,8 +108,6 @@ module.exports = function getBabelConfig(api) { 'babel-plugin-module-resolver', { alias: { - // TODO: Should we add this - ...defaultAlias, modules: './modules', }, }, diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js index 80152e4c1918f4..5d6fe2770646b3 100644 --- a/docs/src/modules/utils/helpers.test.js +++ b/docs/src/modules/utils/helpers.test.js @@ -11,6 +11,7 @@ import InputLabel from '@material-ui/core/InputLabel'; import FormControl from '@material-ui/core/FormControl'; import FormHelperText from '@material-ui/core/FormHelperText'; import Select from '@material-ui/core/Select'; +import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; import FooBar, { Qux } from '@foo-bar/bip'; const styles = theme => ({ container: { @@ -26,6 +27,7 @@ const styles = theme => ({ '@emotion/styled': 'latest', '@foo-bar/bip': 'latest', '@material-ui/core': 'next', + '@material-ui/unstyled': 'next', 'prop-types': 'latest', 'react-dom': 'latest', react: 'latest', @@ -66,6 +68,7 @@ const suggestions = [ '@emotion/styled': 'latest', '@foo-bar/bip': 'latest', '@material-ui/core': 'next', + '@material-ui/unstyled': 'next', 'prop-types': 'latest', 'react-dom': 'next', react: 'next', @@ -100,6 +103,7 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic '@emotion/styled': 'latest', '@foo-bar/bip': 'latest', '@material-ui/core': 'next', + '@material-ui/unstyled': 'next', 'prop-types': 'latest', 'react-dom': 'latest', react: 'latest', @@ -174,6 +178,7 @@ import { useDemoData } from '@material-ui/x-grid-data-generator'; it('can use codesandbox deploys if a commit is given', () => { const source = ` import * as Core from '@material-ui/core'; +import * as Unstyled from '@material-ui/unstyled'; import * as Icons from '@material-ui/icons'; import * as Lab from '@material-ui/lab'; import * as Styles from '@material-ui/styles'; @@ -200,6 +205,8 @@ import * as Utils from '@material-ui/utils'; 'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/system', '@material-ui/utils': 'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/utils', + '@material-ui/unstyled': + 'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/unstyled', }); }); }); diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js index 7bcf6df2240461..b59ccfd1d31c13 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js @@ -11,7 +11,7 @@ import { unstable_capitalize as capitalize, unstable_useControlled as useControlled, } from '@material-ui/utils'; -import ValueLabelComponent from './ValueLabelUnstyled'; +import ValueLabelUnstyled from './ValueLabelUnstyled'; function asc(a, b) { return a - b; @@ -586,7 +586,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { const Thumb = components.Thumb || 'span'; const thumbProps = componentsProps.thumb || {}; - const ValueLabel = components.ValueLabel || ValueLabelComponent; + const ValueLabel = components.ValueLabel || ValueLabelUnstyled; const valueLabelProps = componentsProps.valueLabel || {}; const Mark = components.Mark || 'span'; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js index ca53e8d2936730..82617e2291b946 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js @@ -7,7 +7,7 @@ const getUtilityClass = (name) => { }; const useValueLabelClasses = (props) => { - const { open, valueLabelDisplay } = props; + const { open } = props; const utilityClasses = { offset: clsx('MuiSlider-valueLabel', getUtilityClass('offset'), { diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js index 1235acc969d0c4..b67a66ed5f1d30 100644 --- a/packages/material-ui/src/Slider/Slider.test.js +++ b/packages/material-ui/src/Slider/Slider.test.js @@ -2,18 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { spy, stub } from 'sinon'; import { expect } from 'chai'; -import { - getClasses, - createMount, - describeConformance, - act, - createClientRender, - fireEvent, -} from 'test/utils'; +import { createMount, describeConformance, act, createClientRender, fireEvent } from 'test/utils'; import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import clsx from 'clsx'; import Slider from './Slider'; -import ValueLabel from './ValueLabel'; function createTouches(touches) { return { diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index ba19ad1d6b8eaf..c64f9442860478 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -43,6 +43,18 @@ async function getWebpackEntries() { }, ); + const unstyledPackagePath = path.join(workspaceRoot, 'packages/material-ui-unstyled/build'); + const unstyledComponents = (await glob(path.join(unstyledPackagePath, '[A-Z]*/index.js'))).map( + (componentPath) => { + const componentName = path.basename(path.dirname(componentPath)); + + return { + name: componentName, + path: path.relative(workspaceRoot, path.dirname(componentPath)), + }; + }, + ); + return [ { name: '@material-ui/core', @@ -86,6 +98,7 @@ async function getWebpackEntries() { name: '@material-ui/utils', path: 'packages/material-ui-utils/build/esm/index.js', }, + ...unstyledComponents, // TODO: Requires webpack v5 // Resolution of webpack/acorn to 7.x is blocked by nextjs (https://github.com/vercel/next.js/issues/11947) // { From 3dfeb34ee4761f3e673c701a6764a3523b8c754e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 18:31:12 +0100 Subject: [PATCH 022/102] getClasses fix --- test/utils/getClasses.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/utils/getClasses.js b/test/utils/getClasses.js index 162ca4f7f50af2..3f8dfc5669d4ec 100644 --- a/test/utils/getClasses.js +++ b/test/utils/getClasses.js @@ -9,11 +9,11 @@ const shallow = createShallow(); * @returns {Record} */ export default function getClasses(element) { - const { useStyles } = element.type; + const { useStyles = () => null } = element.type; let classes; function Listener() { - if (useStyles) classes = useStyles(element.props); + classes = useStyles(element.props); return null; } shallow(); From f97f83116dbf344a4b978399cc1316bc7d964c01 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 29 Oct 2020 18:56:12 +0100 Subject: [PATCH 023/102] Fixed CustomizedSlider example --- docs/src/pages/components/slider/CustomizedSlider.js | 1 + docs/src/pages/components/slider/CustomizedSlider.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js index 6c99bf05496c12..108b5236a27b09 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.js +++ b/docs/src/pages/components/slider/CustomizedSlider.js @@ -190,6 +190,7 @@ export default function CustomizedSlider() { Tooltip value label Tooltip value label Date: Thu, 29 Oct 2020 22:03:11 +0100 Subject: [PATCH 024/102] quick review --- CHANGELOG.md | 2 +- test/regressions/index.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 199ca3f2fa7109..13efb66dffaefa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,7 +25,7 @@ Here are some highlights ✨: - It moves from support on Box only to any core component (starting with the slider). ```jsx - import Slider from '@material-ui/core/Slider'; + import Slider from '@material-ui/lab/SliderStyled'; // Set the primary color and a vertical margin of 16px on desktop. ; diff --git a/test/regressions/index.js b/test/regressions/index.js index 402b3bf8fd58e1..7856610af24455 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -81,6 +81,7 @@ const blacklist = [ 'docs-components-skeleton/Facebook.png', // Flaky image loading 'docs-components-skeleton/SkeletonChildren.png', // flaky image loading 'docs-components-skeleton/YouTube.png', // Flaky image loading + 'docs-components-slider/UnstyledSlider.png', // Unstyled 'docs-components-snackbars/ConsecutiveSnackbars.png', // Needs interaction 'docs-components-snackbars/CustomizedSnackbars.png', // Redundant 'docs-components-snackbars/DirectionSnackbar.png', // Needs interaction From 43711300500db3e5d8f8122309dc341184b7bcfc Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 29 Oct 2020 22:17:07 +0100 Subject: [PATCH 025/102] increase CSS specificity :/ --- docs/src/pages/components/slider/CustomizedSlider.js | 4 +++- docs/src/pages/components/slider/CustomizedSlider.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js index 108b5236a27b09..7a85734c56f881 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.js +++ b/docs/src/pages/components/slider/CustomizedSlider.js @@ -74,8 +74,10 @@ const IOSSlider = styled(Slider)({ '& .MuiSlider-valueLabel': { left: 'calc(-50% + 12px)', top: -22, - '& *': { + '& .MuiSlider-valueLabelCircle': { background: 'transparent', + }, + '& .MuiSlider-valueLabelLabel': { color: '#000', }, }, diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx index adf3374e20967a..7e3e88bf814d15 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.tsx +++ b/docs/src/pages/components/slider/CustomizedSlider.tsx @@ -73,8 +73,10 @@ const IOSSlider = styled(Slider)({ '& .MuiSlider-valueLabel': { left: 'calc(-50% + 12px)', top: -22, - '& *': { + '& .MuiSlider-valueLabelCircle': { background: 'transparent', + }, + '& .MuiSlider-valueLabelLabel': { color: '#000', }, }, From e529e8312c5e195483faac6b487c8dc0d60d9f5e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 30 Oct 2020 11:38:36 +0100 Subject: [PATCH 026/102] renamed ValueLabel* to SliderValueLabel* --- .../src/SliderUnstyled/SliderUnstyled.js | 4 ++-- ...elUnstyled.d.ts => SliderValueLabelUnstyled.d.ts} | 0 ...eLabelUnstyled.js => SliderValueLabelUnstyled.js} | 4 ++-- .../src/SliderUnstyled/index.d.ts | 4 ++-- .../material-ui-unstyled/src/SliderUnstyled/index.js | 2 +- packages/material-ui/src/Slider/Slider.js | 4 ++-- .../Slider/{ValueLabel.js => SliderValueLabel.js} | 12 ++++++------ 7 files changed, 15 insertions(+), 15 deletions(-) rename packages/material-ui-unstyled/src/SliderUnstyled/{ValueLabelUnstyled.d.ts => SliderValueLabelUnstyled.d.ts} (100%) rename packages/material-ui-unstyled/src/SliderUnstyled/{ValueLabelUnstyled.js => SliderValueLabelUnstyled.js} (92%) rename packages/material-ui/src/Slider/{ValueLabel.js => SliderValueLabel.js} (84%) diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js index b59ccfd1d31c13..3c84b47eacd6e3 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js @@ -11,7 +11,7 @@ import { unstable_capitalize as capitalize, unstable_useControlled as useControlled, } from '@material-ui/utils'; -import ValueLabelUnstyled from './ValueLabelUnstyled'; +import SliderValueLabelUnstyled from './SliderValueLabelUnstyled'; function asc(a, b) { return a - b; @@ -586,7 +586,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { const Thumb = components.Thumb || 'span'; const thumbProps = componentsProps.thumb || {}; - const ValueLabel = components.ValueLabel || ValueLabelUnstyled; + const ValueLabel = components.ValueLabel || SliderValueLabelUnstyled; const valueLabelProps = componentsProps.valueLabel || {}; const Mark = components.Mark || 'span'; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/SliderValueLabelUnstyled.d.ts similarity index 100% rename from packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.d.ts rename to packages/material-ui-unstyled/src/SliderUnstyled/SliderValueLabelUnstyled.d.ts diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderValueLabelUnstyled.js similarity index 92% rename from packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js rename to packages/material-ui-unstyled/src/SliderUnstyled/SliderValueLabelUnstyled.js index 82617e2291b946..3890a073795fd8 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/ValueLabelUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderValueLabelUnstyled.js @@ -23,7 +23,7 @@ const useValueLabelClasses = (props) => { /** * @ignore - internal component. */ -function ValueLabel(props) { +function SliderValueLabelUnstyled(props) { const { children, className, value, components = {}, theme } = props; const classes = useValueLabelClasses(props); @@ -42,4 +42,4 @@ function ValueLabel(props) { ); } -export default ValueLabel; +export default SliderValueLabelUnstyled; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/index.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/index.d.ts index 00e1bbef8e481b..cda85365ff6a40 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/index.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/index.d.ts @@ -1,4 +1,4 @@ export { default } from './SliderUnstyled'; export * from './SliderUnstyled'; -export { default as ValueLabelUnstyled } from './ValueLabelUnstyled'; -export * from './ValueLabelUnstyled'; +export { default as SliderValueLabelUnstyled } from './SliderValueLabelUnstyled'; +export * from './SliderValueLabelUnstyled'; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/index.js b/packages/material-ui-unstyled/src/SliderUnstyled/index.js index ff1b7e2b1d2cb7..b9d290c2a2a125 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/index.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/index.js @@ -1,2 +1,2 @@ export { default } from './SliderUnstyled'; -export { default as ValueLabelUnstyled } from './ValueLabelUnstyled'; +export { default as SliderValueLabelUnstyled } from './SliderValueLabelUnstyled'; diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 06ec515857e10c..b4c8be45bb5bf4 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -4,7 +4,7 @@ import { chainPropTypes } from '@material-ui/utils'; import { SliderUnstyled } from '@material-ui/unstyled'; import { useThemeProps, experimentalStyled, alpha, lighten, darken } from '../styles'; import capitalize from '../utils/capitalize'; -import ValueLabel from './ValueLabel'; +import SliderValueLabel from './SliderValueLabel'; const overridesResolver = (props, styles, name) => { const { @@ -243,7 +243,7 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { {...other} components={{ Root: SliderRoot, - ValueLabel, + ValueLabel: SliderValueLabel, ...components, }} ref={ref} diff --git a/packages/material-ui/src/Slider/ValueLabel.js b/packages/material-ui/src/Slider/SliderValueLabel.js similarity index 84% rename from packages/material-ui/src/Slider/ValueLabel.js rename to packages/material-ui/src/Slider/SliderValueLabel.js index ed5370d35b7c5f..92978017b5c017 100644 --- a/packages/material-ui/src/Slider/ValueLabel.js +++ b/packages/material-ui/src/Slider/SliderValueLabel.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ValueLabelUnstyled } from '@material-ui/unstyled'; +import { SliderValueLabelUnstyled } from '@material-ui/unstyled'; import { useThemeProps, experimentalStyled } from '../styles'; const overridesResolver = (_, styles) => { @@ -16,7 +16,7 @@ const overridesResolver = (_, styles) => { return styleOverrides; }; -const ValueLabelRoot = experimentalStyled( +const SliderValueLabelRoot = experimentalStyled( 'span', {}, { muiName: 'PrivateValueLabel', overridesResolver }, @@ -57,20 +57,20 @@ const ValueLabelRoot = experimentalStyled( /** * @ignore - internal component. */ -const ValueLabel = React.forwardRef(function ValueLabel(inputProps, ref) { +const SliderValueLabel = React.forwardRef(function ValueLabel(inputProps, ref) { const props = useThemeProps({ props: inputProps, name: 'PrivateValueLabel' }); /* eslint-disable react/prop-types */ const { components = {}, ...other } = props; return ( - ); }); -export default ValueLabel; +export default SliderValueLabel; From cb7bbf29bed6bd15770236a39953fb3b12616017 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 30 Oct 2020 14:19:03 +0100 Subject: [PATCH 027/102] Removed SliderValueLabel component and keep specificity of 2 --- .../components/slider/CustomizedSlider.js | 4 +- .../components/slider/CustomizedSlider.tsx | 4 +- packages/material-ui/src/Slider/Slider.js | 37 ++++++++- .../src/Slider/SliderValueLabel.js | 76 ------------------- 4 files changed, 36 insertions(+), 85 deletions(-) delete mode 100644 packages/material-ui/src/Slider/SliderValueLabel.js diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js index 7a85734c56f881..108b5236a27b09 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.js +++ b/docs/src/pages/components/slider/CustomizedSlider.js @@ -74,10 +74,8 @@ const IOSSlider = styled(Slider)({ '& .MuiSlider-valueLabel': { left: 'calc(-50% + 12px)', top: -22, - '& .MuiSlider-valueLabelCircle': { + '& *': { background: 'transparent', - }, - '& .MuiSlider-valueLabelLabel': { color: '#000', }, }, diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx index 7e3e88bf814d15..adf3374e20967a 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.tsx +++ b/docs/src/pages/components/slider/CustomizedSlider.tsx @@ -73,10 +73,8 @@ const IOSSlider = styled(Slider)({ '& .MuiSlider-valueLabel': { left: 'calc(-50% + 12px)', top: -22, - '& .MuiSlider-valueLabelCircle': { + '& *': { background: 'transparent', - }, - '& .MuiSlider-valueLabelLabel': { color: '#000', }, }, diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index b4c8be45bb5bf4..334f7f28b7828d 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,10 +1,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { chainPropTypes } from '@material-ui/utils'; -import { SliderUnstyled } from '@material-ui/unstyled'; +import { SliderUnstyled, SliderValueLabelUnstyled } from '@material-ui/unstyled'; import { useThemeProps, experimentalStyled, alpha, lighten, darken } from '../styles'; import capitalize from '../utils/capitalize'; -import SliderValueLabel from './SliderValueLabel'; const overridesResolver = (props, styles, name) => { const { @@ -198,6 +197,38 @@ const SliderRoot = experimentalStyled( '& .MuiSlider-valueLabel': { // IE11 centering bug, to remove from the customization demos once no longer supported left: 'calc(-50% - 4px)', + + '&.MuiSlider-valueLabelOffset': { + '&.MuiSlider-valueLabelOpen': { + transform: 'scale(1) translateY(-10px)', + }, + zIndex: 1, + ...props.theme.typography.body2, + fontSize: props.theme.typography.pxToRem(12), + lineHeight: 1.2, + transition: props.theme.transitions.create(['transform'], { + duration: props.theme.transitions.duration.shortest, + }), + top: -34, + transformOrigin: 'bottom center', + transform: 'scale(0)', + position: 'absolute', + }, + }, + '& .MuiSlider-valueLabelCircle': { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: 32, + height: 32, + borderRadius: '50% 50% 50% 0', + backgroundColor: 'currentColor', + transform: 'rotate(-45deg)', + }, + '& .MuiSlider-valueLabelLabel': { + color: props.theme.palette.primary.contrastText, + transform: 'rotate(45deg)', + textAlign: 'center', }, '& .MuiSlider-mark': { position: 'absolute', @@ -243,7 +274,7 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { {...other} components={{ Root: SliderRoot, - ValueLabel: SliderValueLabel, + ValueLabel: SliderValueLabelUnstyled, ...components, }} ref={ref} diff --git a/packages/material-ui/src/Slider/SliderValueLabel.js b/packages/material-ui/src/Slider/SliderValueLabel.js deleted file mode 100644 index 92978017b5c017..00000000000000 --- a/packages/material-ui/src/Slider/SliderValueLabel.js +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from 'react'; -import { SliderValueLabelUnstyled } from '@material-ui/unstyled'; -import { useThemeProps, experimentalStyled } from '../styles'; - -const overridesResolver = (_, styles) => { - const componentName = 'MuiSlider-valueLabel'; - - const styleOverrides = { - ...styles.root, - [`&.${componentName}Open`]: styles.open, - [`&.${componentName}Offset`]: styles.offset, - [`& .${componentName}Circle`]: styles.circle, - [`& .${componentName}Label`]: styles.label, - }; - - return styleOverrides; -}; - -const SliderValueLabelRoot = experimentalStyled( - 'span', - {}, - { muiName: 'PrivateValueLabel', overridesResolver }, -)((props) => ({ - '&.MuiSlider-valueLabelOffset': { - '&.MuiSlider-valueLabelOpen': { - transform: 'scale(1) translateY(-10px)', - }, - zIndex: 1, - ...props.theme.typography.body2, - fontSize: props.theme.typography.pxToRem(12), - lineHeight: 1.2, - transition: props.theme.transitions.create(['transform'], { - duration: props.theme.transitions.duration.shortest, - }), - top: -34, - transformOrigin: 'bottom center', - transform: 'scale(0)', - position: 'absolute', - }, - '& .MuiSlider-valueLabelCircle': { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: 32, - height: 32, - borderRadius: '50% 50% 50% 0', - backgroundColor: 'currentColor', - transform: 'rotate(-45deg)', - }, - '& .MuiSlider-valueLabelLabel': { - color: props.theme.palette.primary.contrastText, - transform: 'rotate(45deg)', - textAlign: 'center', - }, -})); - -/** - * @ignore - internal component. - */ -const SliderValueLabel = React.forwardRef(function ValueLabel(inputProps, ref) { - const props = useThemeProps({ props: inputProps, name: 'PrivateValueLabel' }); - /* eslint-disable react/prop-types */ - const { components = {}, ...other } = props; - - return ( - - ); -}); - -export default SliderValueLabel; From da59a5dde95c0a78a7860ac427550ade3ff1f47e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 30 Oct 2020 18:06:18 +0100 Subject: [PATCH 028/102] prettier & proptypes --- packages/material-ui/src/Slider/Slider.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 334f7f28b7828d..4ce8395849d5b6 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -197,7 +197,6 @@ const SliderRoot = experimentalStyled( '& .MuiSlider-valueLabel': { // IE11 centering bug, to remove from the customization demos once no longer supported left: 'calc(-50% - 4px)', - '&.MuiSlider-valueLabelOffset': { '&.MuiSlider-valueLabelOpen': { transform: 'scale(1) translateY(-10px)', From 81910b42ed26f58e0a4d15836d5c6388e9548c41 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 16:25:56 +0100 Subject: [PATCH 029/102] buildApi CSS changes wip --- docs/scripts/buildApi.ts | 71 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 70 insertions(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 543fd7d1483765..74a20c893e78ee 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -192,6 +192,71 @@ async function annotateComponentDefinition(context: { writeFileSync(typesFilename, typesSourceNew, { encoding: 'utf8' }); } +function trimComment(comment: string) { + let i = 0; + for (; i < comment.length; i++) { + if (comment[i] !== '*' && comment[i] !== ' ') { + break; + } + } + return comment.substr(i, comment.length - 1); +} + +async function updateStylesDefinition(context: { api: ReactApi; component: { filename: string } }) { + const { api, component } = context; + + const typesFilename = component.filename.replace(/\.js$/, '.d.ts'); + const typesSource = readFileSync(typesFilename, { encoding: 'utf8' }); + const typesAST = await babel.parseAsync(typesSource, { + configFile: false, + filename: typesFilename, + presets: [require.resolve('@babel/preset-typescript')], + }); + if (typesAST === null) { + throw new Error('No AST returned from babel.'); + } + + if (api.styles.classes.length === 0) { + const parts = component.filename.split('\\'); + const componentName = parts[parts.length - 1].replace(/\.js$/, ''); + + typesAST.program.body.forEach((node) => { + const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; + if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { + const classes = node.declaration.typeAnnotation.types.map( + (node: babel.types.TSLiteralType) => node.literal.value, + ); + + const nodeLeadingComments = node.declaration.typeAnnotation.leadingComments || []; + + node.declaration.typeAnnotation.types.forEach( + (typeNode: babel.types.TSLiteralType, idx: number) => { + let leadingComments = typeNode.leadingComments; + if (idx === 0) { + if (leadingComments) { + leadingComments = leadingComments.concat(nodeLeadingComments); + } else { + leadingComments = nodeLeadingComments; + } + } + if (leadingComments) { + for (let i = 0; i < leadingComments.length; i++) { + if (leadingComments[i].end + 6 === typeNode.literal.start) { + api.styles.descriptions[typeNode.literal.value as string] = trimComment( + leadingComments[i].value, + ); + } + } + } + return ''; + }, + ); + api.styles.classes = classes; + } + }); + } +} + async function annotateClassesDefinition(context: { api: ReactApi; component: { filename: string }; @@ -227,7 +292,6 @@ async function annotateClassesDefinition(context: { } }, }); - if (end === null || start === 0) { // Some components actually don't implement this prop. return; @@ -380,6 +444,11 @@ async function buildDocs(options: { reactAPI.filename = componentObject.filename.replace(workspaceRoot, ''); reactAPI.inheritance = getInheritance(testInfo, src); + await updateStylesDefinition({ + api: reactAPI, + component: componentObject, + }); + let markdown; try { markdown = generateMarkdown(reactAPI); From 8b0fd675bd4e27f248c6927968a22a87365670e4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 16:50:13 +0100 Subject: [PATCH 030/102] fixed css generation --- docs/pages/api-docs/slider.md | 35 +++++++++++++++++++++++ docs/scripts/buildApi.ts | 3 +- packages/material-ui/src/Slider/Slider.js | 4 +++ 3 files changed, 41 insertions(+), 1 deletion(-) diff --git a/docs/pages/api-docs/slider.md b/docs/pages/api-docs/slider.md index 7615f546b01ff2..f9ca3876857d9a 100644 --- a/docs/pages/api-docs/slider.md +++ b/docs/pages/api-docs/slider.md @@ -20,7 +20,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi +## Component name +The `MuiSlider` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. ## Props @@ -56,6 +58,39 @@ The `ref` is forwarded to the root element. Any other props supplied will be provided to the root element (native element). +## CSS + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .undefined | Styles applied to the root element. +| colorPrimary | .undefined | Styles applied to the root element if `color="primary"`. +| colorSecondary | .undefined | Styles applied to the root element if `color="secondary"`. +| marked | .undefined | Styles applied to the root element if `marks` is provided with at least one label. +| vertical | .undefined | Pseudo-class applied to the root element if `orientation="vertical"`. +| disabled | .undefined | Pseudo-class applied to the root and thumb element if `disabled={true}`. +| rail | .undefined | Styles applied to the rail element. +| track | .undefined | Styles applied to the track element. +| trackFalse | .undefined | Styles applied to the track element if `track={false}`. +| trackInverted | .undefined | Styles applied to the track element if `track="inverted"`. +| thumb | .undefined | Styles applied to the thumb element. +| thumbColorPrimary | .undefined | Styles applied to the thumb element if `color="primary"`. +| thumbColorSecondary | .undefined | Styles applied to the thumb element if `color="secondary"`. +| active | .undefined | Pseudo-class applied to the thumb element if it's active. +| focusVisible | .undefined | Pseudo-class applied to the thumb element if keyboard focused. +| valueLabel | .undefined | Styles applied to the thumb label element. +| mark | .undefined | Styles applied to the mark element. +| markActive | .undefined | Styles applied to the mark element if active (depending on the value). +| markLabel | .undefined | Styles applied to the mark label element. +| markLabelActive | .undefined | Styles applied to the mark label element if active (depending on the value). + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Slider/Slider.js) for more detail. + ## Demos - [Slider](/components/slider/) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 74a20c893e78ee..607748fb4701f9 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -364,12 +364,13 @@ async function buildDocs(options: { globalClasses: {}, }; + styles.name = component?.default?.options?.name; + if (component.styles && component.default.options) { // Collect the customization points of the `classes` property. styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter( (className) => !className.match(/^(@media|@keyframes|@global)/), ); - styles.name = component.default.options.name; styles.globalClasses = styles.classes.reduce((acc, key) => { acc[key] = generateClassName( // @ts-expect-error diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 4ce8395849d5b6..953040fd41dcdf 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -281,6 +281,10 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { ); }); +Slider.options = { + name: 'MuiSlider', +}; + Slider.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | From 2d70b7c9d5cdb0d6fbde60d95301be6763a674d8 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 17:08:42 +0100 Subject: [PATCH 031/102] improved unstyled example --- docs/src/pages/components/slider/UnstyledSlider.js | 7 ++++++- docs/src/pages/components/slider/UnstyledSlider.tsx | 3 ++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/slider/UnstyledSlider.js b/docs/src/pages/components/slider/UnstyledSlider.js index 3582f918e9d5b5..8c93ea3f4c3a72 100644 --- a/docs/src/pages/components/slider/UnstyledSlider.js +++ b/docs/src/pages/components/slider/UnstyledSlider.js @@ -1,6 +1,7 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; +import Box from '@material-ui/core/Box'; const StyledSlider = styled(SliderUnstyled)` color: black; @@ -59,5 +60,9 @@ const StyledSlider = styled(SliderUnstyled)` `; export default function UnstyledSlider() { - return ; + return ( + + + + ); } diff --git a/docs/src/pages/components/slider/UnstyledSlider.tsx b/docs/src/pages/components/slider/UnstyledSlider.tsx index 3582f918e9d5b5..7eb611d66ed015 100644 --- a/docs/src/pages/components/slider/UnstyledSlider.tsx +++ b/docs/src/pages/components/slider/UnstyledSlider.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; +import Box from '@material-ui/core/Box'; const StyledSlider = styled(SliderUnstyled)` color: black; @@ -59,5 +60,5 @@ const StyledSlider = styled(SliderUnstyled)` `; export default function UnstyledSlider() { - return ; + return ; } From fc40e0eb2053f65661d6462a2855120ab906d4a8 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 17:21:53 +0100 Subject: [PATCH 032/102] init --- docs/pages/api-docs/slider-styled.md | 35 +++++++++ docs/scripts/buildApi.ts | 77 ++++++++++++++++++- .../src/SliderStyled/SliderStyled.d.ts | 42 ++++++++++ .../src/SliderStyled/SliderStyled.js | 4 + 4 files changed, 155 insertions(+), 3 deletions(-) diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index d4e100bc90b44e..86c6e59f62a7fd 100644 --- a/docs/pages/api-docs/slider-styled.md +++ b/docs/pages/api-docs/slider-styled.md @@ -20,7 +20,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi +## Component name +The `MuiSlider` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. ## Props @@ -56,6 +58,39 @@ The `ref` is forwarded to the root element. Any other props supplied will be provided to the root element (native element). +## CSS + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .undefined | Styles applied to the root element. +| colorPrimary | .undefined | Styles applied to the root element if `color="primary"`. +| colorSecondary | .undefined | Styles applied to the root element if `color="secondary"`. +| marked | .undefined | Styles applied to the root element if `marks` is provided with at least one label. +| vertical | .undefined | Pseudo-class applied to the root element if `orientation="vertical"`. +| disabled | .undefined | Pseudo-class applied to the root and thumb element if `disabled={true}`. +| rail | .undefined | Styles applied to the rail element. +| track | .undefined | Styles applied to the track element. +| trackFalse | .undefined | Styles applied to the track element if `track={false}`. +| trackInverted | .undefined | Styles applied to the track element if `track="inverted"`. +| thumb | .undefined | Styles applied to the thumb element. +| thumbColorPrimary | .undefined | Styles applied to the thumb element if `color="primary"`. +| thumbColorSecondary | .undefined | Styles applied to the thumb element if `color="secondary"`. +| active | .undefined | Pseudo-class applied to the thumb element if it's active. +| focusVisible | .undefined | Pseudo-class applied to the thumb element if keyboard focused. +| valueLabel | .undefined | Styles applied to the thumb label element. +| mark | .undefined | Styles applied to the mark element. +| markActive | .undefined | Styles applied to the mark element if active (depending on the value). +| markLabel | .undefined | Styles applied to the mark label element. +| markLabelActive | .undefined | Styles applied to the mark label element if active (depending on the value). + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/SliderStyled/SliderStyled.js) for more detail. + ## Demos - [Slider Styled](/components/slider-styled/) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index d1d57b32b128af..e7d4ca1205e323 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -134,8 +134,8 @@ async function annotateComponentDefinition(context: { } const { leadingComments } = node; - const jsdocBlock = leadingComments != null ? leadingComments[0] : null; - if (leadingComments != null && leadingComments.length > 1) { + const jsdocBlock = leadingComments !== null ? leadingComments[0] : null; + if (leadingComments !== null && leadingComments.length > 1) { throw new Error('Should only have a single leading jsdoc block'); } if (jsdocBlock != null) { @@ -192,6 +192,71 @@ async function annotateComponentDefinition(context: { writeFileSync(typesFilename, typesSourceNew, { encoding: 'utf8' }); } +function trimComment(comment: string) { + let i = 0; + for (; i < comment.length; i++) { + if (comment[i] !== '*' && comment[i] !== ' ') { + break; + } + } + return comment.substr(i, comment.length - 1); +} + +async function updateStylesDefinition(context: { api: ReactApi; component: { filename: string } }) { + const { api, component } = context; + + const typesFilename = component.filename.replace(/\.js$/, '.d.ts'); + const typesSource = readFileSync(typesFilename, { encoding: 'utf8' }); + const typesAST = await babel.parseAsync(typesSource, { + configFile: false, + filename: typesFilename, + presets: [require.resolve('@babel/preset-typescript')], + }); + if (typesAST === null) { + throw new Error('No AST returned from babel.'); + } + + if (api.styles.classes.length === 0) { + const parts = component.filename.split('\\'); + const componentName = parts[parts.length - 1].replace(/\.js$/, ''); + + typesAST.program.body.forEach((node) => { + const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; + if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { + const classes = node.declaration.typeAnnotation.types.map( + (node: babel.types.TSLiteralType) => node.literal.value, + ); + + const nodeLeadingComments = node.declaration.typeAnnotation.leadingComments || []; + + node.declaration.typeAnnotation.types.forEach( + (typeNode: babel.types.TSLiteralType, idx: number) => { + let leadingComments = typeNode.leadingComments; + if (idx === 0) { + if (leadingComments) { + leadingComments = leadingComments.concat(nodeLeadingComments); + } else { + leadingComments = nodeLeadingComments; + } + } + if (leadingComments) { + for (let i = 0; i < leadingComments.length; i++) { + if (leadingComments[i].end + 6 === typeNode.literal.start) { + api.styles.descriptions[typeNode.literal.value as string] = trimComment( + leadingComments[i].value, + ); + } + } + } + return ''; + }, + ); + api.styles.classes = classes; + } + }); + } +} + async function annotateClassesDefinition(context: { api: ReactApi; component: { filename: string }; @@ -300,12 +365,13 @@ async function buildDocs(options: { globalClasses: {}, }; + styles.name = component?.default?.options?.name; + if (component.styles && component.default.options) { // Collect the customization points of the `classes` property. styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter( (className) => !className.match(/^(@media|@keyframes|@global)/), ); - styles.name = component.default.options.name; styles.globalClasses = styles.classes.reduce((acc, key) => { acc[key] = generateClassName( // @ts-expect-error @@ -376,6 +442,11 @@ async function buildDocs(options: { reactAPI.filename = componentObject.filename.replace(workspaceRoot, ''); reactAPI.inheritance = getInheritance(testInfo, src); + await updateStylesDefinition({ + api: reactAPI, + component: componentObject, + }); + let markdown; try { markdown = generateMarkdown(reactAPI); diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts index 3b80b4c84322c5..3def13595a0c01 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts @@ -48,4 +48,46 @@ export const SliderValueLabel: React.FC; */ declare const Slider: ExtendSliderUnstyled; +export type SliderStyledClassKey = + /** Styles applied to the root element. */ + | 'root' + /** Styles applied to the root element if `color="primary"`. */ + | 'colorPrimary' + /** Styles applied to the root element if `color="secondary"`. */ + | 'colorSecondary' + /** Styles applied to the root element if `marks` is provided with at least one label. */ + | 'marked' + /** Pseudo-class applied to the root element if `orientation="vertical"`. */ + | 'vertical' + /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ + | 'disabled' + /** Styles applied to the rail element. */ + | 'rail' + /** Styles applied to the track element. */ + | 'track' + /** Styles applied to the track element if `track={false}`. */ + | 'trackFalse' + /** Styles applied to the track element if `track="inverted"`. */ + | 'trackInverted' + /** Styles applied to the thumb element. */ + | 'thumb' + /** Styles applied to the thumb element if `color="primary"`. */ + | 'thumbColorPrimary' + /** Styles applied to the thumb element if `color="secondary"`. */ + | 'thumbColorSecondary' + /** Pseudo-class applied to the thumb element if it's active. */ + | 'active' + /** Pseudo-class applied to the thumb element if keyboard focused. */ + | 'focusVisible' + /** Styles applied to the thumb label element. */ + | 'valueLabel' + /** Styles applied to the mark element. */ + | 'mark' + /** Styles applied to the mark element if active (depending on the value). */ + | 'markActive' + /** Styles applied to the mark label element. */ + | 'markLabel' + /** Styles applied to the mark label element if active (depending on the value). */ + | 'markLabelActive'; + export default Slider; diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js index f47f91b54b331a..9392b9fa754b41 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js @@ -303,6 +303,10 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { ); }); +Slider.options = { + name: 'MuiSlider', +}; + Slider.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | From 6e5325beff7efb117d1ec460502b4aee291f343c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 17:36:22 +0100 Subject: [PATCH 033/102] types :\ --- docs/scripts/buildApi.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index e7d4ca1205e323..794173d85ace73 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -212,6 +212,7 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil filename: typesFilename, presets: [require.resolve('@babel/preset-typescript')], }); + if (typesAST === null) { throw new Error('No AST returned from babel.'); } @@ -220,7 +221,7 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil const parts = component.filename.split('\\'); const componentName = parts[parts.length - 1].replace(/\.js$/, ''); - typesAST.program.body.forEach((node) => { + (typesAST as any).program.body.forEach((node: any) => { const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { const classes = node.declaration.typeAnnotation.types.map( From c6df4f74653839a602556b14b8693536113165e3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 17:42:18 +0100 Subject: [PATCH 034/102] test ci --- docs/scripts/buildApi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 794173d85ace73..60d1008ec4d507 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -218,7 +218,7 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil } if (api.styles.classes.length === 0) { - const parts = component.filename.split('\\'); + const parts = component.filename.split('\/'); const componentName = parts[parts.length - 1].replace(/\.js$/, ''); (typesAST as any).program.body.forEach((node: any) => { From 7a866bc3a1d53de38634e7af4e3ae88c67006b9b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 17:48:23 +0100 Subject: [PATCH 035/102] fixed componentName --- docs/scripts/buildApi.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 60d1008ec4d507..de054a0155506c 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -218,9 +218,8 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil } if (api.styles.classes.length === 0) { - const parts = component.filename.split('\/'); - const componentName = parts[parts.length - 1].replace(/\.js$/, ''); - + const componentName = path.basename(typesFilename).replace(/\.d\.ts$/, ''); + console.log(componentName); (typesAST as any).program.body.forEach((node: any) => { const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { From 371063845986cb1ecd653628be8d3dc8a3da055f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 17:48:46 +0100 Subject: [PATCH 036/102] componentName --- docs/scripts/buildApi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index de054a0155506c..c07b5acd6834fc 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -219,7 +219,7 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil if (api.styles.classes.length === 0) { const componentName = path.basename(typesFilename).replace(/\.d\.ts$/, ''); - console.log(componentName); + (typesAST as any).program.body.forEach((node: any) => { const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { From 094fa7d537ea10b98c711c86caaa308c6a33ca55 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 18:11:14 +0100 Subject: [PATCH 037/102] fixes on the global classes --- docs/pages/api-docs/slider-styled.md | 40 ++++++++++++++-------------- docs/scripts/buildApi.ts | 29 +++++++++++++++----- 2 files changed, 43 insertions(+), 26 deletions(-) diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index 86c6e59f62a7fd..3a71e4a69b050c 100644 --- a/docs/pages/api-docs/slider-styled.md +++ b/docs/pages/api-docs/slider-styled.md @@ -62,26 +62,26 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .undefined | Styles applied to the root element. -| colorPrimary | .undefined | Styles applied to the root element if `color="primary"`. -| colorSecondary | .undefined | Styles applied to the root element if `color="secondary"`. -| marked | .undefined | Styles applied to the root element if `marks` is provided with at least one label. -| vertical | .undefined | Pseudo-class applied to the root element if `orientation="vertical"`. -| disabled | .undefined | Pseudo-class applied to the root and thumb element if `disabled={true}`. -| rail | .undefined | Styles applied to the rail element. -| track | .undefined | Styles applied to the track element. -| trackFalse | .undefined | Styles applied to the track element if `track={false}`. -| trackInverted | .undefined | Styles applied to the track element if `track="inverted"`. -| thumb | .undefined | Styles applied to the thumb element. -| thumbColorPrimary | .undefined | Styles applied to the thumb element if `color="primary"`. -| thumbColorSecondary | .undefined | Styles applied to the thumb element if `color="secondary"`. -| active | .undefined | Pseudo-class applied to the thumb element if it's active. -| focusVisible | .undefined | Pseudo-class applied to the thumb element if keyboard focused. -| valueLabel | .undefined | Styles applied to the thumb label element. -| mark | .undefined | Styles applied to the mark element. -| markActive | .undefined | Styles applied to the mark element if active (depending on the value). -| markLabel | .undefined | Styles applied to the mark label element. -| markLabelActive | .undefined | Styles applied to the mark label element if active (depending on the value). +| root | .MuiSlider-root | Styles applied to the root element. +| colorPrimary | .MuiSlider-colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | .MuiSlider-colorSecondary | Styles applied to the root element if `color="secondary"`. +| marked | .MuiSlider-marked | Styles applied to the root element if `marks` is provided with at least one label. +| vertical | .MuiSlider-vertical | Pseudo-class applied to the root element if `orientation="vertical"`. +| disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. +| rail | .MuiSlider-rail | Styles applied to the rail element. +| track | .MuiSlider-track | Styles applied to the track element. +| trackFalse | .MuiSlider-trackFalse | Styles applied to the track element if `track={false}`. +| trackInverted | .MuiSlider-trackInverted | Styles applied to the track element if `track="inverted"`. +| thumb | .MuiSlider-thumb | Styles applied to the thumb element. +| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Styles applied to the thumb element if `color="primary"`. +| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Styles applied to the thumb element if `color="secondary"`. +| active | .MuiSlider-active | Pseudo-class applied to the thumb element if it's active. +| focusVisible | .Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. +| valueLabel | .MuiSlider-valueLabel | Styles applied to the thumb label element. +| mark | .MuiSlider-mark | Styles applied to the mark element. +| markActive | .MuiSlider-markActive | Styles applied to the mark element if active (depending on the value). +| markLabel | .MuiSlider-markLabel | Styles applied to the mark label element. +| markLabelActive | .MuiSlider-markLabelActive | Styles applied to the mark label element if active (depending on the value). You can override the style of the component thanks to one of these customization points: diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index c07b5acd6834fc..ea00d73365eed3 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -232,13 +232,12 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil node.declaration.typeAnnotation.types.forEach( (typeNode: babel.types.TSLiteralType, idx: number) => { let leadingComments = typeNode.leadingComments; - if (idx === 0) { - if (leadingComments) { - leadingComments = leadingComments.concat(nodeLeadingComments); - } else { - leadingComments = nodeLeadingComments; - } + if (leadingComments) { + leadingComments = leadingComments.concat(nodeLeadingComments); + } else { + leadingComments = nodeLeadingComments; } + if (leadingComments) { for (let i = 0; i < leadingComments.length; i++) { if (leadingComments[i].end + 6 === typeNode.literal.start) { @@ -447,6 +446,24 @@ async function buildDocs(options: { component: componentObject, }); + if(reactAPI.styles.classes) { + reactAPI.styles.globalClasses = reactAPI.styles.classes.reduce((acc, key) => { + acc[key] = generateClassName( + // @ts-expect-error + { + key, + }, + { + options: { + name: styles.name, + theme: {}, + }, + }, + ); + return acc; + }, {} as Record); + } + let markdown; try { markdown = generateMarkdown(reactAPI); From 773888e8a60649da95cc488379087005018610a4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 18:26:38 +0100 Subject: [PATCH 038/102] updates on comments and fixes --- docs/pages/api-docs/slider-styled.md | 32 +++++++++---------- docs/scripts/buildApi.ts | 5 +-- .../src/SliderStyled/SliderStyled.d.ts | 32 +++++++++---------- 3 files changed, 35 insertions(+), 34 deletions(-) diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index 3a71e4a69b050c..28c11cab0d40f2 100644 --- a/docs/pages/api-docs/slider-styled.md +++ b/docs/pages/api-docs/slider-styled.md @@ -62,26 +62,26 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiSlider-root | Styles applied to the root element. -| colorPrimary | .MuiSlider-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiSlider-colorSecondary | Styles applied to the root element if `color="secondary"`. -| marked | .MuiSlider-marked | Styles applied to the root element if `marks` is provided with at least one label. +| root | .MuiSlider-root | Class name applied to the root element. +| colorPrimary | .MuiSlider-colorPrimary | Class name applied to the root element if `color="primary"`. +| colorSecondary | .MuiSlider-colorSecondary | Class name applied to the root element if `color="secondary"`. +| marked | .MuiSlider-marked | Class name applied to the root element if `marks` is provided with at least one label. | vertical | .MuiSlider-vertical | Pseudo-class applied to the root element if `orientation="vertical"`. | disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. -| rail | .MuiSlider-rail | Styles applied to the rail element. -| track | .MuiSlider-track | Styles applied to the track element. -| trackFalse | .MuiSlider-trackFalse | Styles applied to the track element if `track={false}`. -| trackInverted | .MuiSlider-trackInverted | Styles applied to the track element if `track="inverted"`. -| thumb | .MuiSlider-thumb | Styles applied to the thumb element. -| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Styles applied to the thumb element if `color="primary"`. -| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Styles applied to the thumb element if `color="secondary"`. +| rail | .MuiSlider-rail | Class name applied to the rail element. +| track | .MuiSlider-track | Class name applied to the track element. +| trackFalse | .MuiSlider-trackFalse | Class name applied to the track element if `track={false}`. +| trackInverted | .MuiSlider-trackInverted | Class name applied to the track element if `track="inverted"`. +| thumb | .MuiSlider-thumb | Class name applied to the thumb element. +| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Class name applied to the thumb element if `color="primary"`. +| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Class name applied to the thumb element if `color="secondary"`. | active | .MuiSlider-active | Pseudo-class applied to the thumb element if it's active. | focusVisible | .Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. -| valueLabel | .MuiSlider-valueLabel | Styles applied to the thumb label element. -| mark | .MuiSlider-mark | Styles applied to the mark element. -| markActive | .MuiSlider-markActive | Styles applied to the mark element if active (depending on the value). -| markLabel | .MuiSlider-markLabel | Styles applied to the mark label element. -| markLabelActive | .MuiSlider-markLabelActive | Styles applied to the mark label element if active (depending on the value). +| valueLabel | .MuiSlider-valueLabel | Class name applied to the thumb label element. +| mark | .MuiSlider-mark | Class name applied to the mark element. +| markActive | .MuiSlider-markActive | Class name applied to the mark element if active (depending on the value). +| markLabel | .MuiSlider-markLabel | Class name applied to the mark label element. +| markLabelActive | .MuiSlider-markLabelActive | Class name applied to the mark label element if active (depending on the value). You can override the style of the component thanks to one of these customization points: diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index ea00d73365eed3..b62a9d5e44bbc5 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -240,13 +240,14 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil if (leadingComments) { for (let i = 0; i < leadingComments.length; i++) { - if (leadingComments[i].end + 6 === typeNode.literal.start) { + if (leadingComments[i].end + 5 === typeNode.literal.start) { api.styles.descriptions[typeNode.literal.value as string] = trimComment( leadingComments[i].value, ); } } } + return ''; }, ); @@ -446,7 +447,7 @@ async function buildDocs(options: { component: componentObject, }); - if(reactAPI.styles.classes) { + if (reactAPI.styles.classes) { reactAPI.styles.globalClasses = reactAPI.styles.classes.reduce((acc, key) => { acc[key] = generateClassName( // @ts-expect-error diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts index 3def13595a0c01..7b02670201ff01 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts @@ -49,45 +49,45 @@ export const SliderValueLabel: React.FC; declare const Slider: ExtendSliderUnstyled; export type SliderStyledClassKey = - /** Styles applied to the root element. */ + /** Class name applied to the root element. */ | 'root' - /** Styles applied to the root element if `color="primary"`. */ + /** Class name applied to the root element if `color="primary"`. */ | 'colorPrimary' - /** Styles applied to the root element if `color="secondary"`. */ + /** Class name applied to the root element if `color="secondary"`. */ | 'colorSecondary' - /** Styles applied to the root element if `marks` is provided with at least one label. */ + /** Class name applied to the root element if `marks` is provided with at least one label. */ | 'marked' /** Pseudo-class applied to the root element if `orientation="vertical"`. */ | 'vertical' /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ | 'disabled' - /** Styles applied to the rail element. */ + /** Class name applied to the rail element. */ | 'rail' - /** Styles applied to the track element. */ + /** Class name applied to the track element. */ | 'track' - /** Styles applied to the track element if `track={false}`. */ + /** Class name applied to the track element if `track={false}`. */ | 'trackFalse' - /** Styles applied to the track element if `track="inverted"`. */ + /** Class name applied to the track element if `track="inverted"`. */ | 'trackInverted' - /** Styles applied to the thumb element. */ + /** Class name applied to the thumb element. */ | 'thumb' - /** Styles applied to the thumb element if `color="primary"`. */ + /** Class name applied to the thumb element if `color="primary"`. */ | 'thumbColorPrimary' - /** Styles applied to the thumb element if `color="secondary"`. */ + /** Class name applied to the thumb element if `color="secondary"`. */ | 'thumbColorSecondary' /** Pseudo-class applied to the thumb element if it's active. */ | 'active' /** Pseudo-class applied to the thumb element if keyboard focused. */ | 'focusVisible' - /** Styles applied to the thumb label element. */ + /** Class name applied to the thumb label element. */ | 'valueLabel' - /** Styles applied to the mark element. */ + /** Class name applied to the mark element. */ | 'mark' - /** Styles applied to the mark element if active (depending on the value). */ + /** Class name applied to the mark element if active (depending on the value). */ | 'markActive' - /** Styles applied to the mark label element. */ + /** Class name applied to the mark label element. */ | 'markLabel' - /** Styles applied to the mark label element if active (depending on the value). */ + /** Class name applied to the mark label element if active (depending on the value). */ | 'markLabelActive'; export default Slider; From f447fd88a8766f055c4b6e074f91acbe54698f35 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 18:29:47 +0100 Subject: [PATCH 039/102] Update docs/scripts/buildApi.ts --- docs/scripts/buildApi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index b62a9d5e44bbc5..114c56a8b79a1f 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -134,7 +134,7 @@ async function annotateComponentDefinition(context: { } const { leadingComments } = node; - const jsdocBlock = leadingComments !== null ? leadingComments[0] : null; + const jsdocBlock = leadingComments != null ? leadingComments[0] : null; if (leadingComments !== null && leadingComments.length > 1) { throw new Error('Should only have a single leading jsdoc block'); } From f310f0d91ebb19f5dac4ea74c710e6e498cd2511 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 18:30:26 +0100 Subject: [PATCH 040/102] revert some changes --- docs/scripts/buildApi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 114c56a8b79a1f..ee5489923f70b5 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -135,7 +135,7 @@ async function annotateComponentDefinition(context: { const { leadingComments } = node; const jsdocBlock = leadingComments != null ? leadingComments[0] : null; - if (leadingComments !== null && leadingComments.length > 1) { + if (leadingComments != null && leadingComments.length > 1) { throw new Error('Should only have a single leading jsdoc block'); } if (jsdocBlock != null) { From 582c59a8951d3c258e044928b81d6f46a6a87475 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 18:48:56 +0100 Subject: [PATCH 041/102] lint fixes --- docs/scripts/buildApi.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index ee5489923f70b5..ef8310b1a08ae3 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -194,7 +194,7 @@ async function annotateComponentDefinition(context: { function trimComment(comment: string) { let i = 0; - for (; i < comment.length; i++) { + for (; i < comment.length; i+=1) { if (comment[i] !== '*' && comment[i] !== ' ') { break; } @@ -224,13 +224,13 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { const classes = node.declaration.typeAnnotation.types.map( - (node: babel.types.TSLiteralType) => node.literal.value, + (typeNode: babel.types.TSLiteralType) => typeNode.literal.value, ); const nodeLeadingComments = node.declaration.typeAnnotation.leadingComments || []; node.declaration.typeAnnotation.types.forEach( - (typeNode: babel.types.TSLiteralType, idx: number) => { + (typeNode: babel.types.TSLiteralType) => { let leadingComments = typeNode.leadingComments; if (leadingComments) { leadingComments = leadingComments.concat(nodeLeadingComments); @@ -239,7 +239,7 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil } if (leadingComments) { - for (let i = 0; i < leadingComments.length; i++) { + for (let i = 0; i < leadingComments.length; i+=1) { if (leadingComments[i].end + 5 === typeNode.literal.start) { api.styles.descriptions[typeNode.literal.value as string] = trimComment( leadingComments[i].value, From 37033226ef99d36231ae4f50ee52a99670b242f8 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 19:23:24 +0100 Subject: [PATCH 042/102] refactored traversing of the AST tree --- docs/scripts/buildApi.ts | 48 ++++++++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 19 deletions(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index ef8310b1a08ae3..af19da58c10d75 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -194,7 +194,7 @@ async function annotateComponentDefinition(context: { function trimComment(comment: string) { let i = 0; - for (; i < comment.length; i+=1) { + for (; i < comment.length; i += 1) { if (comment[i] !== '*' && comment[i] !== ' ') { break; } @@ -220,17 +220,25 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil if (api.styles.classes.length === 0) { const componentName = path.basename(typesFilename).replace(/\.d\.ts$/, ''); - (typesAST as any).program.body.forEach((node: any) => { - const name = node.type === 'ExportNamedDeclaration' ? node?.declaration?.id?.name : undefined; - if (name === `${componentName}ClassKey` && node.declaration.typeAnnotation.types) { - const classes = node.declaration.typeAnnotation.types.map( - (typeNode: babel.types.TSLiteralType) => typeNode.literal.value, - ); + traverse(typesAST, { + ExportNamedDeclaration(babelPath) { + const { node } = babelPath; + const declaration = node.declaration as babel.types.TSTypeAliasDeclaration; - const nodeLeadingComments = node.declaration.typeAnnotation.leadingComments || []; + const name = declaration.id?.name; + + const typeAnnotation = declaration.typeAnnotation as babel.types.TSUnionType; + + if (name === `${componentName}ClassKey` && typeAnnotation.types) { + const classes: string[] = []; + + const nodeLeadingComments = declaration.typeAnnotation.leadingComments || []; + + typeAnnotation.types.forEach((typeNode) => { + const value = (typeNode as babel.types.TSLiteralType).literal.value as string; + + classes.push(value); - node.declaration.typeAnnotation.types.forEach( - (typeNode: babel.types.TSLiteralType) => { let leadingComments = typeNode.leadingComments; if (leadingComments) { leadingComments = leadingComments.concat(nodeLeadingComments); @@ -239,20 +247,22 @@ async function updateStylesDefinition(context: { api: ReactApi; component: { fil } if (leadingComments) { - for (let i = 0; i < leadingComments.length; i+=1) { - if (leadingComments[i].end + 5 === typeNode.literal.start) { - api.styles.descriptions[typeNode.literal.value as string] = trimComment( - leadingComments[i].value, - ); + for (let i = 0; i < leadingComments.length; i += 1) { + if ( + leadingComments[i].end + 5 === + (typeNode as babel.types.TSLiteralType).literal.start + ) { + api.styles.descriptions[value] = trimComment(leadingComments[i].value); } } } return ''; - }, - ); - api.styles.classes = classes; - } + }); + + api.styles.classes = classes; + } + }, }); } } From 2e56a2220fb3ffae5553e36aed0183374186ba08 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 2 Nov 2020 19:45:01 +0100 Subject: [PATCH 043/102] trigger build From 0653705152fbc865943d7db4db792d3310184736 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 3 Nov 2020 08:25:05 +0100 Subject: [PATCH 044/102] Update packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts Co-authored-by: Olivier Tassinari --- packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts index 7b02670201ff01..6d741d24ab6846 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.d.ts @@ -57,7 +57,7 @@ export type SliderStyledClassKey = | 'colorSecondary' /** Class name applied to the root element if `marks` is provided with at least one label. */ | 'marked' - /** Pseudo-class applied to the root element if `orientation="vertical"`. */ + /** Class name applied to the root element if `orientation="vertical"`. */ | 'vertical' /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ | 'disabled' From 07f00786680c31d5a28b2e55d121d2c79805a14b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 3 Nov 2020 13:50:36 +0100 Subject: [PATCH 045/102] docs:api --- docs/pages/api-docs/slider-styled.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md index 28c11cab0d40f2..f16aef952a29c1 100644 --- a/docs/pages/api-docs/slider-styled.md +++ b/docs/pages/api-docs/slider-styled.md @@ -66,7 +66,7 @@ Any other props supplied will be provided to the root element (native element). | colorPrimary | .MuiSlider-colorPrimary | Class name applied to the root element if `color="primary"`. | colorSecondary | .MuiSlider-colorSecondary | Class name applied to the root element if `color="secondary"`. | marked | .MuiSlider-marked | Class name applied to the root element if `marks` is provided with at least one label. -| vertical | .MuiSlider-vertical | Pseudo-class applied to the root element if `orientation="vertical"`. +| vertical | .MuiSlider-vertical | Class name applied to the root element if `orientation="vertical"`. | disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. | rail | .MuiSlider-rail | Class name applied to the rail element. | track | .MuiSlider-track | Class name applied to the track element. From e8b2879de37beaf3da48b4dc3cfcd3bab7a5f1c9 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 3 Nov 2020 16:50:09 +0100 Subject: [PATCH 046/102] comments --- babel.config.js | 12 ++++++++++++ docs/src/pages/components/slider/UnstyledSlider.tsx | 6 +++++- packages/material-ui/src/Slider/Slider.js | 2 +- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/babel.config.js b/babel.config.js index b5b77d8501928a..37b94ca978dfb4 100644 --- a/babel.config.js +++ b/babel.config.js @@ -114,6 +114,18 @@ module.exports = function getBabelConfig(api) { ], ], }, + stable: { + plugins: [ + [ + 'babel-plugin-module-resolver', + { + alias: { + '@material-ui/unstyled': '../../packages/material-ui-unstyled/src', + }, + }, + ], + ], + }, legacy: { plugins: [ // IE11 support diff --git a/docs/src/pages/components/slider/UnstyledSlider.tsx b/docs/src/pages/components/slider/UnstyledSlider.tsx index 7eb611d66ed015..8c93ea3f4c3a72 100644 --- a/docs/src/pages/components/slider/UnstyledSlider.tsx +++ b/docs/src/pages/components/slider/UnstyledSlider.tsx @@ -60,5 +60,9 @@ const StyledSlider = styled(SliderUnstyled)` `; export default function UnstyledSlider() { - return ; + return ( + + + + ); } diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 953040fd41dcdf..fd6c247734941f 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { chainPropTypes } from '@material-ui/utils'; -import { SliderUnstyled, SliderValueLabelUnstyled } from '@material-ui/unstyled'; +import SliderUnstyled, { SliderValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled'; import { useThemeProps, experimentalStyled, alpha, lighten, darken } from '../styles'; import capitalize from '../utils/capitalize'; From 94d3ec319cbad95df84ff2d811bdde7e9d1e62cb Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 3 Nov 2020 16:54:45 +0100 Subject: [PATCH 047/102] docs:api --- docs/pages/api-docs/slider.md | 40 +++++++++++++++++------------------ 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/pages/api-docs/slider.md b/docs/pages/api-docs/slider.md index f9ca3876857d9a..b816451e90745a 100644 --- a/docs/pages/api-docs/slider.md +++ b/docs/pages/api-docs/slider.md @@ -62,26 +62,26 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .undefined | Styles applied to the root element. -| colorPrimary | .undefined | Styles applied to the root element if `color="primary"`. -| colorSecondary | .undefined | Styles applied to the root element if `color="secondary"`. -| marked | .undefined | Styles applied to the root element if `marks` is provided with at least one label. -| vertical | .undefined | Pseudo-class applied to the root element if `orientation="vertical"`. -| disabled | .undefined | Pseudo-class applied to the root and thumb element if `disabled={true}`. -| rail | .undefined | Styles applied to the rail element. -| track | .undefined | Styles applied to the track element. -| trackFalse | .undefined | Styles applied to the track element if `track={false}`. -| trackInverted | .undefined | Styles applied to the track element if `track="inverted"`. -| thumb | .undefined | Styles applied to the thumb element. -| thumbColorPrimary | .undefined | Styles applied to the thumb element if `color="primary"`. -| thumbColorSecondary | .undefined | Styles applied to the thumb element if `color="secondary"`. -| active | .undefined | Pseudo-class applied to the thumb element if it's active. -| focusVisible | .undefined | Pseudo-class applied to the thumb element if keyboard focused. -| valueLabel | .undefined | Styles applied to the thumb label element. -| mark | .undefined | Styles applied to the mark element. -| markActive | .undefined | Styles applied to the mark element if active (depending on the value). -| markLabel | .undefined | Styles applied to the mark label element. -| markLabelActive | .undefined | Styles applied to the mark label element if active (depending on the value). +| root | .MuiSlider-root | Class name applied to the root element. +| colorPrimary | .MuiSlider-colorPrimary | Class name applied to the root element if `color="primary"`. +| colorSecondary | .MuiSlider-colorSecondary | Class name applied to the root element if `color="secondary"`. +| marked | .MuiSlider-marked | Class name applied to the root element if `marks` is provided with at least one label. +| vertical | .MuiSlider-vertical | Class name applied to the root element if `orientation="vertical"`. +| disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. +| rail | .MuiSlider-rail | Class name applied to the rail element. +| track | .MuiSlider-track | Class name applied to the track element. +| trackFalse | .MuiSlider-trackFalse | Class name applied to the track element if `track={false}`. +| trackInverted | .MuiSlider-trackInverted | Class name applied to the track element if `track="inverted"`. +| thumb | .MuiSlider-thumb | Class name applied to the thumb element. +| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Class name applied to the thumb element if `color="primary"`. +| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Class name applied to the thumb element if `color="secondary"`. +| active | .MuiSlider-active | Pseudo-class applied to the thumb element if it's active. +| focusVisible | .Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. +| valueLabel | .MuiSlider-valueLabel | Class name applied to the thumb label element. +| mark | .MuiSlider-mark | Class name applied to the mark element. +| markActive | .MuiSlider-markActive | Class name applied to the mark element if active (depending on the value). +| markLabel | .MuiSlider-markLabel | Class name applied to the mark label element. +| markLabelActive | .MuiSlider-markLabelActive | Class name applied to the mark label element if active (depending on the value). You can override the style of the component thanks to one of these customization points: From 14a469967b2322ea067adcfc999a5681a3c46049 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 6 Nov 2020 16:21:28 +0100 Subject: [PATCH 048/102] some migration instructions --- .../pages/guides/migration-v4/migration-v4.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 57e0f0dfde1ff6..930ea962eb5502 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -705,6 +705,22 @@ const classes = makeStyles(theme => ({ + {}} /> ``` +- The `ValueLabelComponent` prop is now part of the `components` prop. + + ```diff + - + + + ``` + +- The `ThumbComponent` prop is not part of the `components` prop. + + ```diff + - + + + ``` + +- The `classes` property is no longer available for styling the component. You can move these overrides to the theme's components overrides section, or you can follow one of the overrides approach described on the ([Style Library Interoperability](https://next.material-ui.com/guides/interoperability/)) page. + ### Snackbar - The notification now displays at the bottom left on large screens. From c83de9378e1cdc677f7e5074f3809654328b8d8b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 6 Nov 2020 16:51:58 +0100 Subject: [PATCH 049/102] improved migration guide --- .../pages/guides/migration-v4/migration-v4.md | 38 ++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 930ea962eb5502..0a851845161dbf 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -719,7 +719,43 @@ const classes = makeStyles(theme => ({ + ``` -- The `classes` property is no longer available for styling the component. You can move these overrides to the theme's components overrides section, or you can follow one of the overrides approach described on the ([Style Library Interoperability](https://next.material-ui.com/guides/interoperability/)) page. +- The `classes` property is no longer available for styling the component. You can fix this by one of these options: + +1. Move these overrides to the theme's components overrides section + +```diff +- const useStyles = makeStyles({ +- root: { +- margin: '10px', +- }, +- colorPrimary: { +- backgroundColor: '#232323', +- } +- }); ++ const theme = createMuiTheme({ ++ components: { ++ MuiSlider: { ++ styleOverrides: { ++ root: { ++ margin: '10px', ++ }, ++ colorPrimary: { ++ backgroundColor: '#232323', ++ }, ++ }, ++ }, ++ }, ++ }); + // ... +- const classes = useStyles(); + // ... ++ +// ... +- ++ +``` + +or you can follow one of the overrides approach described on the ([Style Library Interoperability](https://next.material-ui.com/guides/interoperability/)) page. The class names for the Slider component can be find on the [API page](https://next.material-ui.com/api/slider/#css). ### Snackbar From f8bd2196fc854c53a89e3205219e72f802dc16dd Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 11 Nov 2020 13:01:18 +0100 Subject: [PATCH 050/102] fixes --- packages/material-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json index 54a10eb5da3f58..749ba0cdb5cd8c 100644 --- a/packages/material-ui/package.json +++ b/packages/material-ui/package.json @@ -64,7 +64,7 @@ "@material-ui/styles": "^5.0.0-alpha.15", "@material-ui/system": "^5.0.0-alpha.15", "@material-ui/types": "^5.1.0", - "@material-ui/unstyled": "^5.0.0-alpha.14", + "@material-ui/unstyled": "^5.0.0-alpha.15", "@material-ui/utils": "^5.0.0-alpha.15", "@popperjs/core": "^2.4.4", "@types/react-transition-group": "^4.2.0", From 7b5e33a787bea204eab8ffed33491ea5c3b9cfa3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 11 Nov 2020 13:02:51 +0100 Subject: [PATCH 051/102] fixes --- docs/data/{slider-styled.json => slider.json} | 0 packages/material-ui/src/Slider/Slider.js | 4 ---- 2 files changed, 4 deletions(-) rename docs/data/{slider-styled.json => slider.json} (100%) diff --git a/docs/data/slider-styled.json b/docs/data/slider.json similarity index 100% rename from docs/data/slider-styled.json rename to docs/data/slider.json diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index fd6c247734941f..1c9ecba32bfe1f 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -281,10 +281,6 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { ); }); -Slider.options = { - name: 'MuiSlider', -}; - Slider.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | From 2a5315fd6d190d75bb2764134f3005b0bb56f3e3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 11 Nov 2020 13:06:55 +0100 Subject: [PATCH 052/102] docs:api + removed comments --- docs/pages/api-docs/slider.md | 47 ++++++++++----------- docs/scripts/buildApi.ts | 1 + packages/material-ui/src/Slider/Slider.d.ts | 20 --------- 3 files changed, 23 insertions(+), 45 deletions(-) diff --git a/docs/pages/api-docs/slider.md b/docs/pages/api-docs/slider.md index b816451e90745a..c6bddb4314aaa7 100644 --- a/docs/pages/api-docs/slider.md +++ b/docs/pages/api-docs/slider.md @@ -62,34 +62,31 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiSlider-root | Class name applied to the root element. -| colorPrimary | .MuiSlider-colorPrimary | Class name applied to the root element if `color="primary"`. -| colorSecondary | .MuiSlider-colorSecondary | Class name applied to the root element if `color="secondary"`. -| marked | .MuiSlider-marked | Class name applied to the root element if `marks` is provided with at least one label. -| vertical | .MuiSlider-vertical | Class name applied to the root element if `orientation="vertical"`. -| disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. -| rail | .MuiSlider-rail | Class name applied to the rail element. -| track | .MuiSlider-track | Class name applied to the track element. -| trackFalse | .MuiSlider-trackFalse | Class name applied to the track element if `track={false}`. -| trackInverted | .MuiSlider-trackInverted | Class name applied to the track element if `track="inverted"`. -| thumb | .MuiSlider-thumb | Class name applied to the thumb element. -| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Class name applied to the thumb element if `color="primary"`. -| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Class name applied to the thumb element if `color="secondary"`. -| active | .MuiSlider-active | Pseudo-class applied to the thumb element if it's active. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. -| valueLabel | .MuiSlider-valueLabel | Class name applied to the thumb label element. -| mark | .MuiSlider-mark | Class name applied to the mark element. -| markActive | .MuiSlider-markActive | Class name applied to the mark element if active (depending on the value). -| markLabel | .MuiSlider-markLabel | Class name applied to the mark label element. -| markLabelActive | .MuiSlider-markLabelActive | Class name applied to the mark label element if active (depending on the value). +| root | .MuiSlider-root | Class name applied to the root element. +| colorPrimary | .MuiSlider-colorPrimary | Class name applied to the root element if `color="primary"`. +| colorSecondary | .MuiSlider-colorSecondary | Class name applied to the root element if `color="secondary"`. +| marked | .MuiSlider-marked | Class name applied to the root element if `marks` is provided with at least one label. +| vertical | .MuiSlider-vertical | Class name applied to the root element if `orientation="vertical"`. +| disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. +| rail | .MuiSlider-rail | Class name applied to the rail element. +| track | .MuiSlider-track | Class name applied to the track element. +| trackFalse | .MuiSlider-trackFalse | Class name applied to the track element if `track={false}`. +| trackInverted | .MuiSlider-trackInverted | Class name applied to the track element if `track="inverted"`. +| thumb | .MuiSlider-thumb | Class name applied to the thumb element. +| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Class name applied to the thumb element if `color="primary"`. +| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Class name applied to the thumb element if `color="secondary"`. +| active | .MuiSlider-active | Pseudo-class applied to the thumb element if it's active. +| focusVisible | .Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. +| valueLabel | .MuiSlider-valueLabel | Class name applied to the thumb label element. +| mark | .MuiSlider-mark | Class name applied to the mark element. +| markActive | .MuiSlider-markActive | Class name applied to the mark element if active (depending on the value). +| markLabel | .MuiSlider-markLabel | Class name applied to the mark label element. +| markLabelActive | .MuiSlider-markLabelActive | Class name applied to the mark label element if active (depending on the value). You can override the style of the component thanks to one of these customization points: -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Slider/Slider.js) for more detail. +- With a [global class name](/guides/interoperability/#global-css). +- With a rule name as part of the component's [`styleOverrides` property](/customization/components/#global-theme-override) in a custom theme. ## Demos diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 7750e95205374f..8b72e4e3f69e72 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -351,6 +351,7 @@ async function buildDocs(options: { styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter( (className) => !className.match(/^(@media|@keyframes|@global)/), ); + styles.name = component.default.options.name; styles.globalClasses = styles.classes.reduce((acc, key) => { acc[key] = generateClassName( // @ts-expect-error diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts index fa38ddbdb946bc..baec485b0efc98 100644 --- a/packages/material-ui/src/Slider/Slider.d.ts +++ b/packages/material-ui/src/Slider/Slider.d.ts @@ -32,45 +32,25 @@ export const SliderRoot: React.FC; declare const Slider: ExtendSliderUnstyled; export type SliderClassKey = - /** Class name applied to the root element. */ | 'root' - /** Class name applied to the root element if `color="primary"`. */ | 'colorPrimary' - /** Class name applied to the root element if `color="secondary"`. */ | 'colorSecondary' - /** Class name applied to the root element if `marks` is provided with at least one label. */ | 'marked' - /** Class name applied to the root element if `orientation="vertical"`. */ | 'vertical' - /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ | 'disabled' - /** Class name applied to the rail element. */ | 'rail' - /** Class name applied to the track element. */ | 'track' - /** Class name applied to the track element if `track={false}`. */ | 'trackFalse' - /** Class name applied to the track element if `track="inverted"`. */ | 'trackInverted' - /** Class name applied to the thumb element. */ | 'thumb' - /** Class name applied to the thumb element if `color="primary"`. */ | 'thumbColorPrimary' - /** Class name applied to the thumb element if `color="secondary"`. */ | 'thumbColorSecondary' - /** Pseudo-class applied to the thumb element if it's active. */ | 'active' - /** Pseudo-class applied to the thumb element if keyboard focused. */ | 'focusVisible' - /** Class name applied to the thumb label element. */ | 'valueLabel' - /** Class name applied to the mark element. */ | 'mark' - /** Class name applied to the mark element if active (depending on the value). */ | 'markActive' - /** Class name applied to the mark label element. */ | 'markLabel' - /** Class name applied to the mark label element if active (depending on the value). */ | 'markLabelActive'; export type SliderProps< From 08acd35e3250d6a58aeeb6721ff973e836bf053b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 11 Nov 2020 13:10:26 +0100 Subject: [PATCH 053/102] Update docs/scripts/buildApi.ts --- docs/scripts/buildApi.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 8b72e4e3f69e72..60fe299a6fb008 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -261,6 +261,7 @@ async function annotateClassesDefinition(context: { } }, }); + if (end === null || start === 0) { // Some components actually don't implement this prop. return; From c6648b10fc90ed617c98208aed31d26fe7c18406 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 11 Nov 2020 13:10:56 +0100 Subject: [PATCH 054/102] Update docs/scripts/buildApi.ts --- docs/scripts/buildApi.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 60fe299a6fb008..8b72e4e3f69e72 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -261,7 +261,6 @@ async function annotateClassesDefinition(context: { } }, }); - if (end === null || start === 0) { // Some components actually don't implement this prop. return; From 89a77d134fd8da7233454b551bd21e8c05de3e48 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 11 Nov 2020 13:16:17 +0100 Subject: [PATCH 055/102] reverted some changes --- docs/scripts/buildApi.ts | 1 + packages/material-ui-unstyled/package.json | 2 +- .../src/SliderUnstyled/SliderUnstyled.d.ts | 4 ++++ 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index 8b72e4e3f69e72..d5afa0577c169a 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -261,6 +261,7 @@ async function annotateClassesDefinition(context: { } }, }); + if (end === null || start === 0) { // Some components actually don't implement this prop. return; diff --git a/packages/material-ui-unstyled/package.json b/packages/material-ui-unstyled/package.json index 50eaf1a3de1620..09108c3639fcea 100644 --- a/packages/material-ui-unstyled/package.json +++ b/packages/material-ui-unstyled/package.json @@ -22,7 +22,7 @@ }, "homepage": "https://material-ui.com", "scripts": { - "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files", + "build": "yarn build:legacy && yarn build:modern &&yarn build:node && yarn build:stable && yarn build:copy-files", "build:legacy": "node ../../scripts/build legacy", "build:modern": "node ../../scripts/build modern", "build:node": "node ../../scripts/build node", diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts index c91b99eff0125c..785510b4afc60f 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts @@ -208,6 +208,10 @@ export type ExtendSliderUnstyled = OverridableComp >; /** + * + * Demos: + * + * - [Slider](https://material-ui.com/components/slider/) * * API: * From 5c084478b8468edf1846f3c5575f20828b735e5e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 11 Nov 2020 13:26:33 +0100 Subject: [PATCH 056/102] prettier --- docs/src/pages/guides/migration-v4/migration-v4.md | 4 ++-- .../src/SliderUnstyled/SliderUnstyled.d.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 2033fc5c6ae99f..4d1a8f793b4085 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -738,7 +738,7 @@ const classes = makeStyles(theme => ({ ```diff - + - ``` + ``` - The `classes` property is no longer available for styling the component. You can fix this by one of these options: @@ -771,7 +771,7 @@ const classes = makeStyles(theme => ({ - const classes = useStyles(); // ... + -// ... +// ... - + ``` diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts index 785510b4afc60f..22c536085850dc 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts @@ -208,9 +208,9 @@ export type ExtendSliderUnstyled = OverridableComp >; /** - * - * Demos: - * + * + * Demos: + * * - [Slider](https://material-ui.com/components/slider/) * * API: From f7399ecefc11a462d2b9b8628d935833bdbd8804 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 11 Nov 2020 13:40:02 +0100 Subject: [PATCH 057/102] docs:api --- .../src/SliderUnstyled/SliderUnstyled.d.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts index 22c536085850dc..c91b99eff0125c 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts @@ -208,10 +208,6 @@ export type ExtendSliderUnstyled = OverridableComp >; /** - * - * Demos: - * - * - [Slider](https://material-ui.com/components/slider/) * * API: * From 5f601d7fb8564270909b6b38c9609f0a4d9bb21e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 11 Nov 2020 13:46:21 +0100 Subject: [PATCH 058/102] fixed buildAPI Demo generation for unstyled components --- docs/scripts/buildApi.ts | 6 +++++- .../src/SliderUnstyled/SliderUnstyled.d.ts | 4 ++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/scripts/buildApi.ts b/docs/scripts/buildApi.ts index d5afa0577c169a..e16a6d09adf5aa 100644 --- a/docs/scripts/buildApi.ts +++ b/docs/scripts/buildApi.ts @@ -156,7 +156,11 @@ async function annotateComponentDefinition(context: { const demos = uniqBy( api.pagesMarkdown.filter((page) => { - return page.components.includes(api.name); + return ( + page.components.includes(api.name) || + (api.name.endsWith('Unstyled') && + page.components.includes(api.name.replace('Unstyled', ''))) + ); }, []), (page) => page.pathname, ); diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts index c91b99eff0125c..22c536085850dc 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts @@ -208,6 +208,10 @@ export type ExtendSliderUnstyled = OverridableComp >; /** + * + * Demos: + * + * - [Slider](https://material-ui.com/components/slider/) * * API: * From 481ea36932852099731c2a475ac32b38f1c5c691 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 11 Nov 2020 14:04:16 +0100 Subject: [PATCH 059/102] reverted some changes --- scripts/sizeSnapshot/webpack.config.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index 8c651114d00348..5379b52cdb6357 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -40,18 +40,6 @@ async function getWebpackEntries() { }, ); - const unstyledPackagePath = path.join(workspaceRoot, 'packages/material-ui-unstyled/build'); - const unstyledComponents = (await glob(path.join(unstyledPackagePath, '[A-Z]*/index.js'))).map( - (componentPath) => { - const componentName = path.basename(path.dirname(componentPath)); - - return { - name: componentName, - path: path.relative(workspaceRoot, path.dirname(componentPath)), - }; - }, - ); - return [ { name: '@material-ui/core', @@ -95,7 +83,6 @@ async function getWebpackEntries() { name: '@material-ui/utils', path: 'packages/material-ui-utils/build/esm/index.js', }, - ...unstyledComponents, // TODO: Requires webpack v5 // Resolution of webpack/acorn to 7.x is blocked by nextjs (https://github.com/vercel/next.js/issues/11947) // { From 714a8e0c6256ef70c888819c83302534871ab089 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 11 Nov 2020 14:58:37 +0100 Subject: [PATCH 060/102] removed unstyled as dependency of lab --- packages/material-ui-lab/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui-lab/package.json b/packages/material-ui-lab/package.json index 73cb6d49fff793..77c5de54f4922d 100644 --- a/packages/material-ui-lab/package.json +++ b/packages/material-ui-lab/package.json @@ -65,7 +65,6 @@ "dependencies": { "@babel/runtime": "^7.4.4", "@material-ui/system": "^5.0.0-alpha.15", - "@material-ui/unstyled": "^5.0.0-alpha.15", "@material-ui/utils": "^5.0.0-alpha.15", "clsx": "^1.0.4", "prop-types": "^15.7.2", From dcc11d3ba4dea390c8a0b2547732c88b73761e09 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 11 Nov 2020 18:29:13 +0100 Subject: [PATCH 061/102] add missing demo link --- docs/pages/api-docs/slider-unstyled.md | 4 ++++ docs/src/pages/components/slider/slider.md | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/pages/api-docs/slider-unstyled.md b/docs/pages/api-docs/slider-unstyled.md index 10cc1607673b88..583f664a09a7d7 100644 --- a/docs/pages/api-docs/slider-unstyled.md +++ b/docs/pages/api-docs/slider-unstyled.md @@ -56,3 +56,7 @@ The `ref` is forwarded to the root element. Any other props supplied will be provided to the root element (native element). +## Demos + +- [Slider](/components/slider/) + diff --git a/docs/src/pages/components/slider/slider.md b/docs/src/pages/components/slider/slider.md index c26d88a36c5be0..832e349adbda34 100644 --- a/docs/src/pages/components/slider/slider.md +++ b/docs/src/pages/components/slider/slider.md @@ -1,6 +1,6 @@ --- title: React Slider component -components: Slider +components: Slider, SliderUnstyled githubLabel: 'component: Slider' materialDesign: https://material.io/components/sliders waiAria: https://www.w3.org/TR/wai-aria-practices/#slider From fdba4dd72df45770e7970f7e7db320465ddf01d2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 11 Nov 2020 18:38:25 +0100 Subject: [PATCH 062/102] indentation --- .../pages/guides/migration-v4/migration-v4.md | 70 +++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 4d1a8f793b4085..99eecd1ca6cfb2 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -740,43 +740,43 @@ const classes = makeStyles(theme => ({ + ``` -- The `classes` property is no longer available for styling the component. You can fix this by one of these options: - -1. Move these overrides to the theme's components overrides section - -```diff -- const useStyles = makeStyles({ -- root: { -- margin: '10px', -- }, -- colorPrimary: { -- backgroundColor: '#232323', -- } -- }); -+ const theme = createMuiTheme({ -+ components: { -+ MuiSlider: { -+ styleOverrides: { -+ root: { -+ margin: '10px', -+ }, -+ colorPrimary: { -+ backgroundColor: '#232323', -+ }, -+ }, -+ }, -+ }, -+ }); - // ... -- const classes = useStyles(); +- The `classes` prop is no longer available for styling the component. You can fix this by one of these options: + + 1. Move these overrides to the theme's components overrides section + + ```diff + - const useStyles = makeStyles({ + - root: { + - margin: '10px', + - }, + - colorPrimary: { + - backgroundColor: '#232323', + - } + - }); + + const theme = createMuiTheme({ + + components: { + + MuiSlider: { + + styleOverrides: { + + root: { + + margin: '10px', + + }, + + colorPrimary: { + + backgroundColor: '#232323', + + }, + + }, + + }, + + }, + + }); + // ... + - const classes = useStyles(); + // ... + + // ... -+ -// ... -- -+ -``` + - + + + ``` -or you can follow one of the overrides approach described on the ([Style Library Interoperability](https://next.material-ui.com/guides/interoperability/)) page. The class names for the Slider component can be find on the [API page](https://next.material-ui.com/api/slider/#css). + or 2. you can follow one of the overrides approach described on the ([Style Library Interoperability](/guides/interoperability/)) page. The class names for the Slider component can be find on the [API page](/api/slider/#css). ### Snackbar From 4a6f762b2e0ba77f91b28478a9ec4fea241139c8 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 11 Nov 2020 18:53:33 +0100 Subject: [PATCH 063/102] default config --- babel.config.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/babel.config.js b/babel.config.js index 37b94ca978dfb4..b5b77d8501928a 100644 --- a/babel.config.js +++ b/babel.config.js @@ -114,18 +114,6 @@ module.exports = function getBabelConfig(api) { ], ], }, - stable: { - plugins: [ - [ - 'babel-plugin-module-resolver', - { - alias: { - '@material-ui/unstyled': '../../packages/material-ui-unstyled/src', - }, - }, - ], - ], - }, legacy: { plugins: [ // IE11 support From c677b25fb3aa04174e76b043e53845c714d06a5e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 11 Nov 2020 20:04:15 +0100 Subject: [PATCH 064/102] proposed fix --- babel.config.js | 39 +++++++++++++------ packages/material-ui/package.json | 2 +- packages/material-ui/scripts/rollup.config.js | 3 +- 3 files changed, 30 insertions(+), 14 deletions(-) diff --git a/babel.config.js b/babel.config.js index b5b77d8501928a..82849551f1ce74 100644 --- a/babel.config.js +++ b/babel.config.js @@ -4,17 +4,20 @@ const errorCodesPath = path.resolve(__dirname, './docs/public/static/error-codes const missingError = process.env.MUI_EXTRACT_ERROR_CODES === 'true' ? 'write' : 'annotate'; const defaultAlias = { - '@material-ui/core': './packages/material-ui/src', - '@material-ui/docs': './packages/material-ui-docs/src', - '@material-ui/icons': './packages/material-ui-icons/src', - '@material-ui/lab': './packages/material-ui-lab/src', - '@material-ui/styled-engine': './packages/material-ui-styled-engine/src', - '@material-ui/styled-engine-sc': './packages/material-ui-styled-engine-sc/src', - '@material-ui/styles': './packages/material-ui-styles/src', - '@material-ui/system': './packages/material-ui-system/src', - '@material-ui/unstyled': './packages/material-ui-unstyled/src', - '@material-ui/utils': './packages/material-ui-utils/src', - 'typescript-to-proptypes': './packages/typescript-to-proptypes/src', + '@material-ui/core': path.resolve(__dirname, './packages/material-ui/src'), + '@material-ui/docs': path.resolve(__dirname, './packages/material-ui-docs/src'), + '@material-ui/icons': path.resolve(__dirname, './packages/material-ui-icons/src'), + '@material-ui/lab': path.resolve(__dirname, './packages/material-ui-lab/src'), + '@material-ui/styled-engine': path.resolve(__dirname, './packages/material-ui-styled-engine/src'), + '@material-ui/styled-engine-sc': path.resolve( + __dirname, + './packages/material-ui-styled-engine-sc/src', + ), + '@material-ui/styles': path.resolve(__dirname, './packages/material-ui-styles/src'), + '@material-ui/system': path.resolve(__dirname, './packages/material-ui-system/src'), + '@material-ui/unstyled': path.resolve(__dirname, './packages/material-ui-unstyled/src'), + '@material-ui/utils': path.resolve(__dirname, './packages/material-ui-utils/src'), + 'typescript-to-proptypes': path.resolve(__dirname, './packages/typescript-to-proptypes/src'), }; const productionPlugins = [ @@ -29,7 +32,7 @@ const productionPlugins = [ ]; module.exports = function getBabelConfig(api) { - const useESModules = api.env(['legacy', 'modern', 'stable']); + const useESModules = api.env(['legacy', 'modern', 'stable', 'rollup']); const presets = [ [ @@ -114,6 +117,18 @@ module.exports = function getBabelConfig(api) { ], ], }, + rollup: { + plugins: [ + [ + 'babel-plugin-module-resolver', + { + alias: { + '@material-ui/unstyled': defaultAlias['@material-ui/unstyled'], + }, + }, + ], + ], + }, legacy: { plugins: [ // IE11 support diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json index 749ba0cdb5cd8c..1751cdc783bed4 100644 --- a/packages/material-ui/package.json +++ b/packages/material-ui/package.json @@ -31,7 +31,7 @@ "build:modern": "node ../../scripts/build modern", "build:node": "node ../../scripts/build node", "build:stable": "node ../../scripts/build stable", - "build:umd": "cross-env BABEL_ENV=stable rollup -c scripts/rollup.config.js", + "build:umd": "cross-env BABEL_ENV=rollup rollup -c scripts/rollup.config.js", "build:copy-files": "node ../../scripts/copy-files.js", "build:types": "tsc -p tsconfig.build.json", "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true yarn build:modern", diff --git a/packages/material-ui/scripts/rollup.config.js b/packages/material-ui/scripts/rollup.config.js index 253e1cd5606642..9b00ecc31f8209 100644 --- a/packages/material-ui/scripts/rollup.config.js +++ b/packages/material-ui/scripts/rollup.config.js @@ -1,3 +1,4 @@ +import path from 'path'; import nodeResolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import babel from 'rollup-plugin-babel'; @@ -16,7 +17,7 @@ const babelOptions = { // We are using @babel/plugin-transform-runtime runtimeHelpers: true, extensions: ['.js', '.ts', '.tsx'], - configFile: '../../babel.config.js', + configFile: path.resolve(__dirname, '../../../babel.config.js'), }; const commonjsOptions = { ignoreGlobal: true, From f9eb4daf9ead17c5c3da85dc29f210975b8d456e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 12 Nov 2020 12:23:45 +0100 Subject: [PATCH 065/102] updates classes --- .../slider-styled/UnstyledSlider.js | 17 ++++++- .../slider-styled/UnstyledSlider.tsx | 17 ++++++- .../src/SliderStyled/SliderStyled.js | 8 +-- .../src/SliderUnstyled/SliderUnstyled.js | 49 +++++++++++++------ 4 files changed, 69 insertions(+), 22 deletions(-) diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.js b/docs/src/pages/components/slider-styled/UnstyledSlider.js index 3582f918e9d5b5..7b2b49194ff5c1 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.js +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.js @@ -1,6 +1,8 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; +import { alpha } from '@material-ui/core/styles'; import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; +import Box from '@material-ui/core/Box'; const StyledSlider = styled(SliderUnstyled)` color: black; @@ -55,9 +57,22 @@ const StyledSlider = styled(SliderUnstyled)` right: -15px; bottom: -15px; } + + :hover, + &.Mui-focusVisible { + box-shadow: 0px 0px 0px 8px ${alpha('#000', 0.16)}; + } + + &.mui-active: { + boxshadow: 0px 0px 0px 14px ${alpha('#000', 0.16)}; + } } `; export default function UnstyledSlider() { - return ; + return ( + + + + ); } diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx index 3582f918e9d5b5..7b2b49194ff5c1 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; +import { alpha } from '@material-ui/core/styles'; import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; +import Box from '@material-ui/core/Box'; const StyledSlider = styled(SliderUnstyled)` color: black; @@ -55,9 +57,22 @@ const StyledSlider = styled(SliderUnstyled)` right: -15px; bottom: -15px; } + + :hover, + &.Mui-focusVisible { + box-shadow: 0px 0px 0px 8px ${alpha('#000', 0.16)}; + } + + &.mui-active: { + boxshadow: 0px 0px 0px 14px ${alpha('#000', 0.16)}; + } } `; export default function UnstyledSlider() { - return ; + return ( + + + + ); } diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js index 3b26d6e48d7082..c47d6e142dc628 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js @@ -167,13 +167,13 @@ export const SliderThumb = experimentalStyled('span')((props) => ({ bottom: -15, }, ':hover, &.Mui-focusVisible': { - boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.primary.main, 0.16)}`, + boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.primary.main, 0.16)}`, '@media (hover: none)': { boxShadow: 'none', }, }, '&.Mui-active': { - boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.primary.main, 0.16)}`, + boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.primary.main, 0.16)}`, }, '&.Mui-disabled': { width: 8, @@ -190,10 +190,10 @@ export const SliderThumb = experimentalStyled('span')((props) => ({ }, ...(props.styleProps.color === 'secondary' && { ':hover, &.Mui-focusVisible': { - boxShadow: `0px 0px 0px 8px ${fade(props.theme.palette.secondary.main, 0.16)}`, + boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.secondary.main, 0.16)}`, }, '&.Mui-active': { - boxShadow: `0px 0px 0px 14px ${fade(props.theme.palette.secondary.main, 0.16)}`, + boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.secondary.main, 0.16)}`, }, }), '& .MuiSlider-valueLabel': { diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js index 9ba1b8e1c3af0a..1e983c121f15af 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js @@ -149,24 +149,40 @@ const getUtilityClass = (name) => { }; const useSliderClasses = (props) => { - const { color, disabled, marked, orientation, track } = props; + const { color, disabled, marked, orientation, track, classes = {} } = props; const utilityClasses = { - root: clsx(getUtilityClass('root'), getUtilityClass(`color${capitalize(color)}`), { - 'Mui-disabled': disabled, - [getUtilityClass('marked')]: marked, - [getUtilityClass('vertical')]: orientation === 'vertical', - [getUtilityClass('trackInverted')]: track === 'inverted', - [getUtilityClass('trackFalse')]: track === false, - }), - rail: getUtilityClass('rail'), - track: getUtilityClass('track'), - mark: getUtilityClass('mark'), - markLabel: getUtilityClass('markLabel'), - valueLabel: getUtilityClass('valueLabel'), - thumb: clsx(getUtilityClass('thumb'), getUtilityClass(`thumbColor${capitalize(color)}`), { - 'Mui-disabled': disabled, - }), + root: clsx( + getUtilityClass('root'), + classes['root'], + getUtilityClass(`color${capitalize(color)}`), + classes[`color${capitalize(color)}`], + { + 'Mui-disabled': disabled, + [getUtilityClass('marked')]: marked, + [classes['marked']]: marked, + [getUtilityClass('vertical')]: orientation === 'vertical', + [classes['vertical']]: orientation === 'vertical', + [getUtilityClass('trackInverted')]: track === 'inverted', + [classes['trackInverted']]: track === 'inverted', + [getUtilityClass('trackFalse')]: track === false, + [classes['trackFalse']]: track === false, + }, + ), + rail: clsx(getUtilityClass('rail'), classes['rail']), + track: clsx(getUtilityClass('track'), classes['track']), + mark: clsx(getUtilityClass('mark'), classes['mark']), + markLabel: clsx(getUtilityClass('markLabel'), classes['markLabel']), + valueLabel: clsx(getUtilityClass('valueLabel'), classes['valueLabel']), + thumb: clsx( + getUtilityClass('thumb'), + classes['thumb'], + getUtilityClass(`thumbColor${capitalize(color)}`), + classes[`thumbColor${capitalize(color)}`], + { + 'Mui-disabled': disabled, + }, + ), }; return utilityClasses; @@ -180,6 +196,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { 'aria-labelledby': ariaLabelledby, 'aria-valuetext': ariaValuetext, className, + classes: classesProp = {}, color = 'primary', component: Component = 'span', defaultValue, From 95ec2bc15cc21be69034b46f2ebdad24f4fa8708 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 12 Nov 2020 12:35:24 +0100 Subject: [PATCH 066/102] names --- .../src/SliderStyled/SliderStyled.js | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js index c47d6e142dc628..d5dcce1b90e8f5 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js @@ -102,7 +102,11 @@ export const SliderRoot = experimentalStyled( }), })); -export const SliderRail = experimentalStyled('span')((props) => ({ +export const SliderRail = experimentalStyled( + 'span', + {}, + { muiName: 'MuiSliderRail' }, +)((props) => ({ display: 'block', position: 'absolute', width: '100%', @@ -119,7 +123,11 @@ export const SliderRail = experimentalStyled('span')((props) => ({ }), })); -export const SliderTrack = experimentalStyled('span')((props) => ({ +export const SliderTrack = experimentalStyled( + 'span', + {}, + { muiName: 'MuiSliderTrack' }, +)((props) => ({ display: 'block', position: 'absolute', height: 2, @@ -140,7 +148,11 @@ export const SliderTrack = experimentalStyled('span')((props) => ({ }), })); -export const SliderThumb = experimentalStyled('span')((props) => ({ +export const SliderThumb = experimentalStyled( + 'span', + {}, + { muiName: 'MuiSliderThumb' }, +)((props) => ({ position: 'absolute', width: 12, height: 12, @@ -218,7 +230,11 @@ export const SliderValueLabel = experimentalStyled(ValueLabelStyled)({ left: 'calc(-50% - 4px)', }); -export const SliderMark = experimentalStyled('span')((props) => ({ +export const SliderMark = experimentalStyled( + 'span', + {}, + { muiName: 'MuiSliderMark' }, +)((props) => ({ position: 'absolute', width: 2, height: 2, @@ -230,7 +246,11 @@ export const SliderMark = experimentalStyled('span')((props) => ({ }, })); -export const SliderMarkLabel = experimentalStyled('span')((props) => ({ +export const SliderMarkLabel = experimentalStyled( + 'span', + {}, + { muiName: 'MuiSliderMarkLabel' }, +)((props) => ({ ...props.theme.typography.body2, color: props.theme.palette.text.secondary, position: 'absolute', From ab090ffd204554a68c66f8a7213267755d43d73e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 12 Nov 2020 12:45:47 +0100 Subject: [PATCH 067/102] names as classes --- .../material-ui-lab/src/SliderStyled/SliderStyled.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js index d5dcce1b90e8f5..0ba6732b40fe22 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js @@ -105,7 +105,7 @@ export const SliderRoot = experimentalStyled( export const SliderRail = experimentalStyled( 'span', {}, - { muiName: 'MuiSliderRail' }, + { muiName: 'MuiSlider-rail' }, )((props) => ({ display: 'block', position: 'absolute', @@ -126,7 +126,7 @@ export const SliderRail = experimentalStyled( export const SliderTrack = experimentalStyled( 'span', {}, - { muiName: 'MuiSliderTrack' }, + { muiName: 'MuiSlider-track' }, )((props) => ({ display: 'block', position: 'absolute', @@ -151,7 +151,7 @@ export const SliderTrack = experimentalStyled( export const SliderThumb = experimentalStyled( 'span', {}, - { muiName: 'MuiSliderThumb' }, + { muiName: 'MuiSlider-thumb' }, )((props) => ({ position: 'absolute', width: 12, @@ -233,7 +233,7 @@ export const SliderValueLabel = experimentalStyled(ValueLabelStyled)({ export const SliderMark = experimentalStyled( 'span', {}, - { muiName: 'MuiSliderMark' }, + { muiName: 'MuiSlider-mark' }, )((props) => ({ position: 'absolute', width: 2, @@ -249,7 +249,7 @@ export const SliderMark = experimentalStyled( export const SliderMarkLabel = experimentalStyled( 'span', {}, - { muiName: 'MuiSliderMarkLabel' }, + { muiName: 'MuiSlider-markLabel' }, )((props) => ({ ...props.theme.typography.body2, color: props.theme.palette.text.secondary, From b185f33ab32f7a1b0d2abe01bc714691d6be2195 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 12 Nov 2020 13:06:16 +0100 Subject: [PATCH 068/102] lint --- docs/src/pages/components/slider-styled/UnstyledSlider.js | 3 +-- docs/src/pages/components/slider-styled/UnstyledSlider.tsx | 3 +-- packages/material-ui-lab/src/SliderStyled/SliderStyled.js | 4 ++-- .../material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js | 1 - 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.js b/docs/src/pages/components/slider-styled/UnstyledSlider.js index 7b2b49194ff5c1..54ec4326a4dea6 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.js +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.js @@ -1,6 +1,5 @@ import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import { alpha } from '@material-ui/core/styles'; +import { experimentalStyled as styled, alpha } from '@material-ui/core/styles'; import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; import Box from '@material-ui/core/Box'; diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx index 7b2b49194ff5c1..54ec4326a4dea6 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; -import { alpha } from '@material-ui/core/styles'; +import { experimentalStyled as styled, alpha } from '@material-ui/core/styles'; import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled'; import Box from '@material-ui/core/Box'; diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js index 0ba6732b40fe22..faec1f4317e20b 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js @@ -196,8 +196,8 @@ export const SliderThumb = experimentalStyled( boxShadow: 'none', }, ...(props.styleProps.orientation === 'vertical' && { - marginLeft: -3, //-5 - marginBottom: -4, //-6 + marginLeft: -3, + marginBottom: -4, }), }, ...(props.styleProps.color === 'secondary' && { diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js index 1e983c121f15af..6a76f446fdd452 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js @@ -196,7 +196,6 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { 'aria-labelledby': ariaLabelledby, 'aria-valuetext': ariaValuetext, className, - classes: classesProp = {}, color = 'primary', component: Component = 'span', defaultValue, From 170e2f0b7c86a718db4f0e3d629d9cc2f70234f6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 12 Nov 2020 13:30:21 +0100 Subject: [PATCH 069/102] style lint --- docs/src/pages/components/slider-styled/UnstyledSlider.js | 4 ++-- docs/src/pages/components/slider-styled/UnstyledSlider.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.js b/docs/src/pages/components/slider-styled/UnstyledSlider.js index 54ec4326a4dea6..68c799ea325d86 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.js +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.js @@ -59,11 +59,11 @@ const StyledSlider = styled(SliderUnstyled)` :hover, &.Mui-focusVisible { - box-shadow: 0px 0px 0px 8px ${alpha('#000', 0.16)}; + box-shadow: 0 0 0 8px ${alpha('#000', 0.16)}; } &.mui-active: { - boxshadow: 0px 0px 0px 14px ${alpha('#000', 0.16)}; + boxshadow: 0 0 0 14px ${alpha('#000', 0.16)}; } } `; diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx index 54ec4326a4dea6..68c799ea325d86 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx @@ -59,11 +59,11 @@ const StyledSlider = styled(SliderUnstyled)` :hover, &.Mui-focusVisible { - box-shadow: 0px 0px 0px 8px ${alpha('#000', 0.16)}; + box-shadow: 0 0 0 8px ${alpha('#000', 0.16)}; } &.mui-active: { - boxshadow: 0px 0px 0px 14px ${alpha('#000', 0.16)}; + boxshadow: 0 0 0 14px ${alpha('#000', 0.16)}; } } `; From 541eac5c4a15546659e39c1e393a734a54054bfe Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 12 Nov 2020 14:22:52 +0100 Subject: [PATCH 070/102] small fixes --- .../material-ui-lab/src/SliderStyled/SliderStyled.js | 12 ++++++++---- .../src/SliderUnstyled/SliderUnstyled.js | 1 + 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js index faec1f4317e20b..462617149069a7 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js @@ -195,10 +195,14 @@ export const SliderThumb = experimentalStyled( ':hover': { boxShadow: 'none', }, - ...(props.styleProps.orientation === 'vertical' && { - marginLeft: -3, - marginBottom: -4, - }), + }, + '&.MuiSlider-vertical': { + marginLeft: -5, + marginBottom: -6, + }, + '&.MuiSlider-vertical .Mui-disabled': { + marginLeft: -3, + marginBottom: -4, }, ...(props.styleProps.color === 'secondary' && { ':hover, &.Mui-focusVisible': { diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js index 6a76f446fdd452..d9e79868f4fd73 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js @@ -614,6 +614,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { // consider extracting to hook an reusing the lint rule for the varints const stateAndProps = { ...props, + classes: {}, color, disabled, max, From 2486fa3a7376f69adb83bedf2bef9a34dc19057d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 12 Nov 2020 14:24:24 +0100 Subject: [PATCH 071/102] Update docs/src/pages/components/slider-styled/UnstyledSlider.js --- docs/src/pages/components/slider-styled/UnstyledSlider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.js b/docs/src/pages/components/slider-styled/UnstyledSlider.js index 68c799ea325d86..dda936bdea581b 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.js +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.js @@ -62,7 +62,7 @@ const StyledSlider = styled(SliderUnstyled)` box-shadow: 0 0 0 8px ${alpha('#000', 0.16)}; } - &.mui-active: { + &.Mui-active: { boxshadow: 0 0 0 14px ${alpha('#000', 0.16)}; } } From 9c8a3fe5ca1186268af0a7f412ab84dbe17f741a Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 12 Nov 2020 14:24:39 +0100 Subject: [PATCH 072/102] Update docs/src/pages/components/slider-styled/UnstyledSlider.tsx --- docs/src/pages/components/slider-styled/UnstyledSlider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx index 68c799ea325d86..dda936bdea581b 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx @@ -62,7 +62,7 @@ const StyledSlider = styled(SliderUnstyled)` box-shadow: 0 0 0 8px ${alpha('#000', 0.16)}; } - &.mui-active: { + &.Mui-active: { boxshadow: 0 0 0 14px ${alpha('#000', 0.16)}; } } From afadb89e10d53e412b56474593770fa26c129d2d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 12 Nov 2020 14:40:25 +0100 Subject: [PATCH 073/102] prettier & docs:typescript:formatted --- docs/src/pages/components/slider-styled/UnstyledSlider.js | 2 +- docs/src/pages/components/slider-styled/UnstyledSlider.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.js b/docs/src/pages/components/slider-styled/UnstyledSlider.js index dda936bdea581b..68c799ea325d86 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.js +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.js @@ -62,7 +62,7 @@ const StyledSlider = styled(SliderUnstyled)` box-shadow: 0 0 0 8px ${alpha('#000', 0.16)}; } - &.Mui-active: { + &.mui-active: { boxshadow: 0 0 0 14px ${alpha('#000', 0.16)}; } } diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx index dda936bdea581b..68c799ea325d86 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx @@ -62,7 +62,7 @@ const StyledSlider = styled(SliderUnstyled)` box-shadow: 0 0 0 8px ${alpha('#000', 0.16)}; } - &.Mui-active: { + &.mui-active: { boxshadow: 0 0 0 14px ${alpha('#000', 0.16)}; } } From 53a1d6112658756c9b693224bfa4432ee1e9e974 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 12 Nov 2020 18:00:06 +0100 Subject: [PATCH 074/102] fix broken CSS --- docs/src/pages/components/slider-styled/UnstyledSlider.js | 4 ++-- docs/src/pages/components/slider-styled/UnstyledSlider.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.js b/docs/src/pages/components/slider-styled/UnstyledSlider.js index 68c799ea325d86..a33367f3c4b490 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.js +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.js @@ -62,8 +62,8 @@ const StyledSlider = styled(SliderUnstyled)` box-shadow: 0 0 0 8px ${alpha('#000', 0.16)}; } - &.mui-active: { - boxshadow: 0 0 0 14px ${alpha('#000', 0.16)}; + &.Mui-active { + box-shadow: 0 0 0 14px ${alpha('#000', 0.16)}; } } `; diff --git a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx index 68c799ea325d86..a33367f3c4b490 100644 --- a/docs/src/pages/components/slider-styled/UnstyledSlider.tsx +++ b/docs/src/pages/components/slider-styled/UnstyledSlider.tsx @@ -62,8 +62,8 @@ const StyledSlider = styled(SliderUnstyled)` box-shadow: 0 0 0 8px ${alpha('#000', 0.16)}; } - &.mui-active: { - boxshadow: 0 0 0 14px ${alpha('#000', 0.16)}; + &.Mui-active { + box-shadow: 0 0 0 14px ${alpha('#000', 0.16)}; } } `; From ae1f99db8c82865c9009451195a3ec63c7419c02 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 12 Nov 2020 18:07:58 +0100 Subject: [PATCH 075/102] fixed vertical problem --- .../src/SliderStyled/SliderStyled.js | 25 ++++--------------- .../src/SliderUnstyled/SliderUnstyled.js | 1 + 2 files changed, 6 insertions(+), 20 deletions(-) diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js index 462617149069a7..48a998162420a1 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js @@ -168,7 +168,7 @@ export const SliderThumb = experimentalStyled( transition: props.theme.transitions.create(['box-shadow'], { duration: props.theme.transitions.duration.shortest, }), - '::after': { + '&::after': { position: 'absolute', content: '""', borderRadius: '50%', @@ -178,7 +178,7 @@ export const SliderThumb = experimentalStyled( right: -15, bottom: -15, }, - ':hover, &.Mui-focusVisible': { + '&:hover, &.Mui-focusVisible': { boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.primary.main, 0.16)}`, '@media (hover: none)': { boxShadow: 'none', @@ -192,7 +192,7 @@ export const SliderThumb = experimentalStyled( height: 8, marginLeft: -4, marginTop: -3, - ':hover': { + '&:hover': { boxShadow: 'none', }, }, @@ -200,33 +200,18 @@ export const SliderThumb = experimentalStyled( marginLeft: -5, marginBottom: -6, }, - '&.MuiSlider-vertical .Mui-disabled': { + '&.MuiSlider-vertical &.Mui-disabled': { marginLeft: -3, marginBottom: -4, }, ...(props.styleProps.color === 'secondary' && { - ':hover, &.Mui-focusVisible': { + '&:hover, &.Mui-focusVisible': { boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.secondary.main, 0.16)}`, }, '&.Mui-active': { boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.secondary.main, 0.16)}`, }, }), - '& .MuiSlider-valueLabel': { - // IE11 centering bug, to remove from the customization demos once no longer supported - left: 'calc(-50% - 4px)', - }, - '& .MuiSlider-mark': { - position: 'absolute', - width: 2, - height: 2, - borderRadius: 1, - backgroundColor: 'currentColor', - '&.MuiSlider-markActive': { - backgroundColor: props.theme.palette.background.paper, - opacity: 0.8, - }, - }, })); export const SliderValueLabel = experimentalStyled(ValueLabelStyled)({ diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js index d9e79868f4fd73..250b03642b664a 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js @@ -181,6 +181,7 @@ const useSliderClasses = (props) => { classes[`thumbColor${capitalize(color)}`], { 'Mui-disabled': disabled, + [getUtilityClass('vertical')]: orientation === 'vertical', }, ), }; From 55ef2869bd127b903d21e394224853deabf7fc0b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 12 Nov 2020 18:40:22 +0100 Subject: [PATCH 076/102] fixed disabled vertical slider --- packages/material-ui-lab/src/SliderStyled/SliderStyled.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js index 48a998162420a1..5a2fa1e087a01c 100644 --- a/packages/material-ui-lab/src/SliderStyled/SliderStyled.js +++ b/packages/material-ui-lab/src/SliderStyled/SliderStyled.js @@ -200,7 +200,7 @@ export const SliderThumb = experimentalStyled( marginLeft: -5, marginBottom: -6, }, - '&.MuiSlider-vertical &.Mui-disabled': { + '&.MuiSlider-vertical&.Mui-disabled': { marginLeft: -3, marginBottom: -4, }, From 6e76e8c57961475f0655a4d6784b09cd5bc4f1af Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 13 Nov 2020 13:42:14 +0100 Subject: [PATCH 077/102] fixes --- .../components/slider/CustomizedSlider.js | 6 +- .../components/slider/CustomizedSlider.tsx | 6 +- packages/material-ui/src/Slider/Slider.d.ts | 13 + packages/material-ui/src/Slider/Slider.js | 368 +++++++++++------- packages/material-ui/src/Slider/index.js | 1 + 5 files changed, 244 insertions(+), 150 deletions(-) diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js index 108b5236a27b09..7fce104c4515c8 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.js +++ b/docs/src/pages/components/slider/CustomizedSlider.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; +import Slider, { SliderThumb } from '@material-ui/core/Slider'; import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Slider from '@material-ui/core/Slider'; import Typography from '@material-ui/core/Typography'; import Tooltip from '@material-ui/core/Tooltip'; @@ -162,11 +162,11 @@ const AirbnbSlider = styled(Slider)({ function AirbnbThumbComponent(props) { return ( - + - + ); } diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx index adf3374e20967a..8eb717bb020abb 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.tsx +++ b/docs/src/pages/components/slider/CustomizedSlider.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; +import Slider, { SliderThumb } from '@material-ui/core/Slider'; import { experimentalStyled as styled } from '@material-ui/core/styles'; -import Slider from '@material-ui/core/Slider'; import Typography from '@material-ui/core/Typography'; import Tooltip from '@material-ui/core/Tooltip'; @@ -161,11 +161,11 @@ const AirbnbSlider = styled(Slider)({ function AirbnbThumbComponent(props: any) { return ( - + - + ); } diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts index baec485b0efc98..91c0bce1bab27d 100644 --- a/packages/material-ui/src/Slider/Slider.d.ts +++ b/packages/material-ui/src/Slider/Slider.d.ts @@ -17,7 +17,20 @@ export type SliderTypeMap< }>; type SliderRootProps = NonNullable['root']; +type SliderMarkProps = NonNullable['mark']; +type SliderMarkLabelProps = NonNullable['markLabel']; +type SliderRailProps = NonNullable['rail']; +type SliderTrackProps = NonNullable['track']; +type SliderThumbProps = NonNullable['thumb']; +type SliderValueLabel = NonNullable['valueLabel']; + export const SliderRoot: React.FC; +export const SliderMark: React.FC; +export const SliderMarkLabel: React.FC; +export const SliderRail: React.FC; +export const SliderTrack: React.FC; +export const SliderThumb: React.FC; +export const SliderValueLabel: React.FC; /** * diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 1c9ecba32bfe1f..fe042bde9da48a 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,9 +1,15 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { chainPropTypes } from '@material-ui/utils'; +import { + useThemeProps, + experimentalStyled, + alpha, + lighten, + darken, +} from '@material-ui/core/styles'; +import { capitalize } from '@material-ui/core/utils'; import SliderUnstyled, { SliderValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled'; -import { useThemeProps, experimentalStyled, alpha, lighten, darken } from '../styles'; -import capitalize from '../utils/capitalize'; const overridesResolver = (props, styles, name) => { const { @@ -48,7 +54,7 @@ const overridesResolver = (props, styles, name) => { return styleOverrides; }; -const SliderRoot = experimentalStyled( +export const SliderRoot = experimentalStyled( 'span', {}, { muiName: 'MuiSlider', overridesResolver }, @@ -94,125 +100,138 @@ const SliderRoot = experimentalStyled( marginRight: 20, }), }), - '& .MuiSlider-rail': { - display: 'block', +})); + +export const SliderRail = experimentalStyled( + 'span', + {}, + { muiName: 'MuiSlider-rail' }, +)((props) => ({ + display: 'block', + position: 'absolute', + width: '100%', + height: 2, + borderRadius: 1, + backgroundColor: 'currentColor', + opacity: 0.38, + ...(props.styleProps.orientation === 'vertical' && { + height: '100%', + width: 2, + }), + ...(props.styleProps.track === 'inverted' && { + opacity: 1, + }), +})); + +export const SliderTrack = experimentalStyled( + 'span', + {}, + { muiName: 'MuiSlider-track' }, +)((props) => ({ + display: 'block', + position: 'absolute', + height: 2, + borderRadius: 1, + backgroundColor: 'currentColor', + ...(props.styleProps.orientation === 'vertical' && { + width: 2, + }), + ...(props.styleProps.track === false && { + display: 'none', + }), + ...(props.styleProps.track === 'inverted' && { + backgroundColor: + // Same logic as the LinearProgress track color + props.theme.palette.mode === 'light' + ? lighten(props.theme.palette.primary.main, 0.62) + : darken(props.theme.palette.primary.main, 0.5), + }), +})); + +export const SliderThumb = experimentalStyled( + 'span', + {}, + { muiName: 'MuiSlider-thumb' }, +)((props) => ({ + position: 'absolute', + width: 12, + height: 12, + marginLeft: -6, + marginTop: -5, + boxSizing: 'border-box', + borderRadius: '50%', + outline: 0, + backgroundColor: 'currentColor', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + transition: props.theme.transitions.create(['box-shadow'], { + duration: props.theme.transitions.duration.shortest, + }), + '&::after': { position: 'absolute', - width: '100%', - height: 2, - borderRadius: 1, - backgroundColor: 'currentColor', - opacity: 0.38, - ...(props.styleProps.orientation === 'vertical' && { - height: '100%', - width: 2, - }), - ...(props.styleProps.track === 'inverted' && { - opacity: 1, - }), + content: '""', + borderRadius: '50%', + // reach 42px hit target (2 * 15 + thumb diameter) + left: -15, + top: -15, + right: -15, + bottom: -15, }, - '& .MuiSlider-track': { - display: 'block', - position: 'absolute', - height: 2, - borderRadius: 1, - backgroundColor: 'currentColor', - ...(props.styleProps.orientation === 'vertical' && { - width: 2, - }), - ...(props.styleProps.track === false && { - display: 'none', - }), - ...(props.styleProps.track === 'inverted' && { - backgroundColor: - // Same logic as the LinearProgress track color - props.theme.palette.mode === 'light' - ? lighten(props.theme.palette.primary.main, 0.62) - : darken(props.theme.palette.primary.main, 0.5), - }), + '&:hover, &.Mui-focusVisible': { + boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.primary.main, 0.16)}`, + '@media (hover: none)': { + boxShadow: 'none', + }, }, - '& .MuiSlider-thumb': { - position: 'absolute', - width: 12, - height: 12, - marginLeft: -6, - marginTop: -5, - boxSizing: 'border-box', - borderRadius: '50%', - outline: 0, - backgroundColor: 'currentColor', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - transition: props.theme.transitions.create(['box-shadow'], { - duration: props.theme.transitions.duration.shortest, - }), - '::after': { - position: 'absolute', - content: '""', - borderRadius: '50%', - // reach 42px hit target (2 * 15 + thumb diameter) - left: -15, - top: -15, - right: -15, - bottom: -15, + '&.Mui-active': { + boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.primary.main, 0.16)}`, + }, + '&.Mui-disabled': { + width: 8, + height: 8, + marginLeft: -4, + marginTop: -3, + '&:hover': { + boxShadow: 'none', }, - ':hover, &.Mui-focusVisible': { - boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.primary.main, 0.16)}`, - '@media (hover: none)': { - boxShadow: 'none', - }, + }, + '&.MuiSlider-vertical': { + marginLeft: -5, + marginBottom: -6, + }, + '&.MuiSlider-vertical&.Mui-disabled': { + marginLeft: -3, + marginBottom: -4, + }, + ...(props.styleProps.color === 'secondary' && { + '&:hover, &.Mui-focusVisible': { + boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.secondary.main, 0.16)}`, }, '&.Mui-active': { - boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.primary.main, 0.16)}`, + boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.secondary.main, 0.16)}`, }, - '&.Mui-disabled': { - width: 8, - height: 8, - marginLeft: -4, - marginTop: -3, - ':hover': { - boxShadow: 'none', - }, - ...(props.styleProps.orientation === 'vertical' && { - marginLeft: -3, - marginBottom: -4, - }), + }), +})); + +export const SliderValueLabel = experimentalStyled(SliderValueLabelUnstyled)((props) => ({ + // IE 11 centering bug, to remove from the customization demos once no longer supported + left: 'calc(-50% - 4px)', + '&.MuiSlider-valueLabelOffset': { + '&.MuiSlider-valueLabelOpen': { + transform: 'scale(1) translateY(-10px)', }, - ...(props.styleProps.orientation === 'vertical' && { - marginLeft: -5, - marginBottom: -6, - }), - ...(props.styleProps.color === 'secondary' && { - ':hover': { - boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.secondary.main, 0.16)}`, - }, - '&.Mui-focusVisible': { - boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.secondary.main, 0.16)}`, - }, - '&.Mui-active': { - boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.secondary.main, 0.16)}`, - }, + zIndex: 1, + ...props.theme.typography.body2, + fontSize: props.theme.typography.pxToRem(12), + lineHeight: 1.2, + transition: props.theme.transitions.create(['transform'], { + duration: props.theme.transitions.duration.shortest, }), - }, - '& .MuiSlider-valueLabel': { - // IE11 centering bug, to remove from the customization demos once no longer supported - left: 'calc(-50% - 4px)', - '&.MuiSlider-valueLabelOffset': { - '&.MuiSlider-valueLabelOpen': { - transform: 'scale(1) translateY(-10px)', - }, - zIndex: 1, - ...props.theme.typography.body2, - fontSize: props.theme.typography.pxToRem(12), - lineHeight: 1.2, - transition: props.theme.transitions.create(['transform'], { - duration: props.theme.transitions.duration.shortest, - }), - top: -34, - transformOrigin: 'bottom center', - transform: 'scale(0)', - position: 'absolute', - }, + top: -34, + transformOrigin: 'bottom center', + transform: 'scale(0)', + position: 'absolute', }, '& .MuiSlider-valueLabelCircle': { display: 'flex', @@ -229,42 +248,98 @@ const SliderRoot = experimentalStyled( transform: 'rotate(45deg)', textAlign: 'center', }, - '& .MuiSlider-mark': { - position: 'absolute', - width: 2, - height: 2, - borderRadius: 1, - backgroundColor: 'currentColor', - '&.MuiSlider-markActive': { - backgroundColor: props.theme.palette.background.paper, - opacity: 0.8, - }, +})); + +export const SliderMark = experimentalStyled( + 'span', + {}, + { muiName: 'MuiSlider-mark' }, +)((props) => ({ + position: 'absolute', + width: 2, + height: 2, + borderRadius: 1, + backgroundColor: 'currentColor', + '&.MuiSlider-markActive': { + backgroundColor: props.theme.palette.background.paper, + opacity: 0.8, }, - '& .MuiSlider-markLabel': { - ...props.theme.typography.body2, - color: props.theme.palette.text.secondary, - position: 'absolute', - top: 26, - transform: 'translateX(-50%)', - whiteSpace: 'nowrap', +})); + +export const SliderMarkLabel = experimentalStyled( + 'span', + {}, + { muiName: 'MuiSlider-markLabel' }, +)((props) => ({ + ...props.theme.typography.body2, + color: props.theme.palette.text.secondary, + position: 'absolute', + top: 26, + transform: 'translateX(-50%)', + whiteSpace: 'nowrap', + ...(props.styleProps.orientation === 'vertical' && { + top: 'auto', + left: 26, + transform: 'translateY(50%)', + }), + '@media (pointer: coarse)': { + top: 40, ...(props.styleProps.orientation === 'vertical' && { - top: 'auto', - left: 26, - transform: 'translateY(50%)', + left: 31, }), - '@media (pointer: coarse)': { - top: 40, - ...(props.styleProps.orientation === 'vertical' && { - top: 'auto', - left: 31, - }), - }, - '&.MuiSlider-markLabelActive': { - color: props.theme.palette.text.primary, - }, + }, + '&.MuiSlider-markLabelActive': { + color: props.theme.palette.text.primary, }, })); +SliderRoot.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * @ignore + */ + children: PropTypes.node, + /** + * @ignore + */ + styleProps: PropTypes.shape({ + 'aria-label': PropTypes.string, + 'aria-labelledby': PropTypes.string, + 'aria-valuetext': PropTypes.string, + classes: PropTypes.object, + color: PropTypes.oneOf(['primary', 'secondary']), + defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), + disabled: PropTypes.bool, + getAriaLabel: PropTypes.func, + getAriaValueText: PropTypes.func, + isRtl: PropTypes.bool, + marks: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.node, + value: PropTypes.number.isRequired, + }), + ), + PropTypes.bool, + ]), + max: PropTypes.number, + min: PropTypes.number, + name: PropTypes.string, + onChange: PropTypes.func, + onChangeCommitted: PropTypes.func, + orientation: PropTypes.oneOf(['horizontal', 'vertical']), + scale: PropTypes.func, + step: PropTypes.number, + track: PropTypes.oneOf(['inverted', 'normal', false]), + value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), + valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), + valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + }), +}; + const Slider = React.forwardRef(function Slider(inputProps, ref) { const props = useThemeProps({ props: inputProps, name: 'MuiSlider' }); const { components = {}, ...other } = props; @@ -273,7 +348,12 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { {...other} components={{ Root: SliderRoot, - ValueLabel: SliderValueLabelUnstyled, + Rail: SliderRail, + Track: SliderTrack, + Thumb: SliderThumb, + ValueLabel: SliderValueLabel, + Mark: SliderMark, + MarkLabel: SliderMarkLabel, ...components, }} ref={ref} diff --git a/packages/material-ui/src/Slider/index.js b/packages/material-ui/src/Slider/index.js index 9898d6a85d1d01..006f966fe2404f 100644 --- a/packages/material-ui/src/Slider/index.js +++ b/packages/material-ui/src/Slider/index.js @@ -1 +1,2 @@ export { default } from './Slider'; +export * from './Slider'; From c843f776ee21a02847d82983bb30b42ae1de9645 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 13 Nov 2020 13:47:55 +0100 Subject: [PATCH 078/102] docs:api --- docs/pages/api-docs/slider-unstyled.md | 1 + docs/pages/api-docs/slider.md | 1 + .../src/SliderUnstyled/SliderUnstyled.d.ts | 4 ++ .../src/SliderUnstyled/SliderUnstyled.js | 4 ++ packages/material-ui/src/Slider/Slider.d.ts | 50 ++++++++++++++++++- packages/material-ui/src/Slider/Slider.js | 4 ++ 6 files changed, 63 insertions(+), 1 deletion(-) diff --git a/docs/pages/api-docs/slider-unstyled.md b/docs/pages/api-docs/slider-unstyled.md index 583f664a09a7d7..6f1cac08f8c8e8 100644 --- a/docs/pages/api-docs/slider-unstyled.md +++ b/docs/pages/api-docs/slider-unstyled.md @@ -29,6 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | aria-label | string | | The label of the slider. | | aria-labelledby | string | | The id of the element containing a label for the slider. | | aria-valuetext | string | | A string value that provides a user-friendly name for the current value of the slider. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | | component | elementType | 'span' | The component used for the root node. Either a string to use a HTML element or a component. | | components | { Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType } | {} | The components used for each slot inside the Slider. Either a string to use a HTML element or a component. | diff --git a/docs/pages/api-docs/slider.md b/docs/pages/api-docs/slider.md index c6bddb4314aaa7..671ec19ad7bc80 100644 --- a/docs/pages/api-docs/slider.md +++ b/docs/pages/api-docs/slider.md @@ -31,6 +31,7 @@ The `MuiSlider` name can be used for providing [default props](/customization/gl | aria-label | string | | The label of the slider. | | aria-labelledby | string | | The id of the element containing a label for the slider. | | aria-valuetext | string | | A string value that provides a user-friendly name for the current value of the slider. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | | components | { Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType } | {} | The components used for each slot inside the Slider. Either a string to use a HTML element or a component. | | componentsProps | object | | The props used for each slot inside the Slider. | diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts index 2284d5e29716c5..130de4b515865b 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts @@ -26,6 +26,10 @@ export interface SliderUnstyledTypeMap

= ExtendSliderUnstyledTypeMap<{ props: P & { + /** + * Override or extend the styles applied to the component. + */ + classes?: { + /** Class name applied to the root element. */ + root?: string; + /** Class name applied to the root element if `color="primary"`. */ + colorPrimary?: string; + /** Class name applied to the root element if `color="secondary"`. */ + colorSecondary?: string; + /** Class name applied to the root element if `marks` is provided with at least one label. */ + marked?: string; + /** Class name applied to the root element if `orientation="vertical"`. */ + vertical?: string; + /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ + disabled?: string; + /** Class name applied to the rail element. */ + rail?: string; + /** Class name applied to the track element. */ + track?: string; + /** Class name applied to the track element if `track={false}`. */ + trackFalse?: string; + /** Class name applied to the track element if `track="inverted"`. */ + trackInverted?: string; + /** Class name applied to the thumb element. */ + thumb?: string; + /** Class name applied to the thumb element if `color="primary"`. */ + thumbColorPrimary?: string; + /** Class name applied to the thumb element if `color="secondary"`. */ + thumbColorSecondary?: string; + /** Pseudo-class applied to the thumb element if it's active. */ + active?: string; + /** Pseudo-class applied to the thumb element if keyboard focused. */ + focusVisible?: string; + /** Class name applied to the thumb label element. */ + valueLabel?: string; + /** Class name applied to the mark element. */ + mark?: string; + /** Class name applied to the mark element if active (depending on the value). */ + markActive?: string; + /** Class name applied to the mark label element. */ + markLabel?: string; + /** Class name applied to the mark label element if active (depending on the value). */ + markLabelActive?: string; + }; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index fe042bde9da48a..1333b6825ef62f 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -402,6 +402,10 @@ Slider.propTypes = { * @ignore */ children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + */ + classes: PropTypes.object, /** * The color of the component. It supports those theme colors that make sense for this component. * @default 'primary' From 814b2ecd6c4ce685afcfa46a7c9d4ba10cb5fd6f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 13 Nov 2020 14:59:30 +0100 Subject: [PATCH 079/102] docs:api fixes --- docs/data/slider-unstyled.json | 84 +++++++++++++++++++ docs/pages/api-docs/slider-unstyled.md | 30 +++++++ docs/src/modules/utils/generateMarkdown.ts | 4 +- .../src/SliderUnstyled/SliderUnstyled.d.ts | 52 +++++++++++- 4 files changed, 166 insertions(+), 4 deletions(-) create mode 100644 docs/data/slider-unstyled.json diff --git a/docs/data/slider-unstyled.json b/docs/data/slider-unstyled.json new file mode 100644 index 00000000000000..fce0b51669b0e1 --- /dev/null +++ b/docs/data/slider-unstyled.json @@ -0,0 +1,84 @@ +{ + "css": { + "root": { + "class": ".MuiSlider-root", + "description": "Class name applied to the root element." + }, + "colorPrimary": { + "class": ".MuiSlider-colorPrimary", + "description": "Class name applied to the root element if `color=\"primary\"`." + }, + "colorSecondary": { + "class": ".MuiSlider-colorSecondary", + "description": "Class name applied to the root element if `color=\"secondary\"`." + }, + "marked": { + "class": ".MuiSlider-marked", + "description": "Class name applied to the root element if `marks` is provided with at least one label." + }, + "vertical": { + "class": ".MuiSlider-vertical", + "description": "Class name applied to the root element if `orientation=\"vertical\"`." + }, + "disabled": { + "class": ".Mui-disabled", + "description": "Pseudo-class applied to the root and thumb element if `disabled={true}`." + }, + "rail": { + "class": ".MuiSlider-rail", + "description": "Class name applied to the rail element." + }, + "track": { + "class": ".MuiSlider-track", + "description": "Class name applied to the track element." + }, + "trackFalse": { + "class": ".MuiSlider-trackFalse", + "description": "Class name applied to the track element if `track={false}`." + }, + "trackInverted": { + "class": ".MuiSlider-trackInverted", + "description": "Class name applied to the track element if `track=\"inverted\"`." + }, + "thumb": { + "class": ".MuiSlider-thumb", + "description": "Class name applied to the thumb element." + }, + "thumbColorPrimary": { + "class": ".MuiSlider-thumbColorPrimary", + "description": "Class name applied to the thumb element if `color=\"primary\"`." + }, + "thumbColorSecondary": { + "class": ".MuiSlider-thumbColorSecondary", + "description": "Class name applied to the thumb element if `color=\"secondary\"`." + }, + "active": { + "class": ".MuiSlider-active", + "description": "Pseudo-class applied to the thumb element if it's active." + }, + "focusVisible": { + "class": ".Mui-focusVisible", + "description": "Pseudo-class applied to the thumb element if keyboard focused." + }, + "valueLabel": { + "class": ".MuiSlider-valueLabel", + "description": "Class name applied to the thumb label element." + }, + "mark": { + "class": ".MuiSlider-mark", + "description": "Class name applied to the mark element." + }, + "markActive": { + "class": ".MuiSlider-markActive", + "description": "Class name applied to the mark element if active (depending on the value)." + }, + "markLabel": { + "class": ".MuiSlider-markLabel", + "description": "Class name applied to the mark label element." + }, + "markLabelActive": { + "class": ".MuiSlider-markLabelActive", + "description": "Class name applied to the mark label element if active (depending on the value)." + } + } +} diff --git a/docs/pages/api-docs/slider-unstyled.md b/docs/pages/api-docs/slider-unstyled.md index 6f1cac08f8c8e8..a221a13588f369 100644 --- a/docs/pages/api-docs/slider-unstyled.md +++ b/docs/pages/api-docs/slider-unstyled.md @@ -57,6 +57,36 @@ The `ref` is forwarded to the root element. Any other props supplied will be provided to the root element (native element). +## CSS + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .root-1 | Class name applied to the root element. +| colorPrimary | .colorPrimary-2 | Class name applied to the root element if `color="primary"`. +| colorSecondary | .colorSecondary-3 | Class name applied to the root element if `color="secondary"`. +| marked | .marked-4 | Class name applied to the root element if `marks` is provided with at least one label. +| vertical | .vertical-5 | Class name applied to the root element if `orientation="vertical"`. +| disabled | .disabled-6 | Pseudo-class applied to the root and thumb element if `disabled={true}`. +| rail | .rail-7 | Class name applied to the rail element. +| track | .track-8 | Class name applied to the track element. +| trackFalse | .trackFalse-9 | Class name applied to the track element if `track={false}`. +| trackInverted | .trackInverted-10 | Class name applied to the track element if `track="inverted"`. +| thumb | .thumb-11 | Class name applied to the thumb element. +| thumbColorPrimary | .thumbColorPrimary-12 | Class name applied to the thumb element if `color="primary"`. +| thumbColorSecondary | .thumbColorSecondary-13 | Class name applied to the thumb element if `color="secondary"`. +| active | .active-14 | Pseudo-class applied to the thumb element if it's active. +| focusVisible | .focusVisible-15 | Pseudo-class applied to the thumb element if keyboard focused. +| valueLabel | .valueLabel-16 | Class name applied to the thumb label element. +| mark | .mark-17 | Class name applied to the mark element. +| markActive | .markActive-18 | Class name applied to the mark element if active (depending on the value). +| markLabel | .markLabel-19 | Class name applied to the mark label element. +| markLabelActive | .markLabelActive-20 | Class name applied to the mark label element if active (depending on the value). + +You can override the style of the component thanks to one of these customization points: + +- With a [global class name](/guides/interoperability/#global-css). +- With a rule name as part of the component's [`styleOverrides` property](/customization/components/#global-theme-override) in a custom theme. + ## Demos - [Slider](/components/slider/) diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 0e8da04b383ba1..010879665d9bbe 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -287,7 +287,7 @@ function generatePropType(type: PropTypeDescriptor): string | undefined { } function generateName(reactAPI: ReactApi) { - if (reactAPI.styles.classes.length && !reactAPI.styles.name) { + if (reactAPI.styles.classes.length && !reactAPI.styles.name && reactAPI.name.indexOf('Unstyled') === -1) { throw new Error(`Missing styles name on ${reactAPI.name} component`); } @@ -445,7 +445,7 @@ function generateClasses(reactAPI: ReactApi, styledComponent: boolean) { return ''; } - if (!reactAPI.styles.name) { + if (!reactAPI.styles.name && reactAPI.name.indexOf('Unstyled') === -1) { throw new Error(`Missing styles name on ${reactAPI.name} component`); } diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts index 130de4b515865b..95c123362ae5d3 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts @@ -1,4 +1,4 @@ -import { OverridableComponent, OverridableTypeMap } from '../OverridableComponent'; +import { OverridableComponent, OverridableTypeMap, OverrideProps } from '../OverridableComponent'; export interface Mark { value: number; @@ -29,7 +29,48 @@ export interface SliderUnstyledTypeMap

= OverridableComp */ declare const SliderUnstyled: OverridableComponent; +export type SliderUnstyledProps< + D extends React.ElementType = SliderUnstyledTypeMap['defaultComponent'], + P = {} +> = OverrideProps, D>; + +export type SliderUnstyledClassKey = keyof NonNullable; + export default SliderUnstyled; From 5ce5b30ebcf6b0beaeaad5f8ca3d686eecdfe4da Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 13 Nov 2020 15:05:31 +0100 Subject: [PATCH 080/102] removed migration guide around classes & prettier --- docs/src/modules/utils/generateMarkdown.ts | 6 ++- .../pages/guides/migration-v4/migration-v4.md | 38 ------------------- 2 files changed, 5 insertions(+), 39 deletions(-) diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 010879665d9bbe..c95019ed6f9c94 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -287,7 +287,11 @@ function generatePropType(type: PropTypeDescriptor): string | undefined { } function generateName(reactAPI: ReactApi) { - if (reactAPI.styles.classes.length && !reactAPI.styles.name && reactAPI.name.indexOf('Unstyled') === -1) { + if ( + reactAPI.styles.classes.length && + !reactAPI.styles.name && + reactAPI.name.indexOf('Unstyled') === -1 + ) { throw new Error(`Missing styles name on ${reactAPI.name} component`); } diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 6af38d2e143dc9..2dab4bb855cd2d 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -751,44 +751,6 @@ const classes = makeStyles(theme => ({ + ``` -- The `classes` prop is no longer available for styling the component. You can fix this by one of these options: - - 1. Move these overrides to the theme's components overrides section - - ```diff - - const useStyles = makeStyles({ - - root: { - - margin: '10px', - - }, - - colorPrimary: { - - backgroundColor: '#232323', - - } - - }); - + const theme = createMuiTheme({ - + components: { - + MuiSlider: { - + styleOverrides: { - + root: { - + margin: '10px', - + }, - + colorPrimary: { - + backgroundColor: '#232323', - + }, - + }, - + }, - + }, - + }); - // ... - - const classes = useStyles(); - // ... - + - // ... - - - + - ``` - - or 2. you can follow one of the overrides approach described on the ([Style Library Interoperability](/guides/interoperability/)) page. The class names for the Slider component can be find on the [API page](/api/slider/#css). - ### Snackbar - The notification now displays at the bottom left on large screens. From 1a69bcd7cf6ea7a94d0f135fdf5b3267d99b8265 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 14 Nov 2020 08:20:05 +0100 Subject: [PATCH 081/102] prettier --- .../material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js index 899c0c0c606065..8a9b000bb3c6a3 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js @@ -687,7 +687,6 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { Date: Sat, 14 Nov 2020 08:24:19 +0100 Subject: [PATCH 082/102] cleanup --- .../material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js index 8a9b000bb3c6a3..30c97bebe2b3a2 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js @@ -727,7 +727,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { key={index} valueLabelFormat={valueLabelFormat} valueLabelDisplay={valueLabelDisplay} - {...(isComponent(ValueLabel) && { + {...(!isHostComponent(ValueLabel) && { styleProps: stateAndProps, theme, })} From 418afb1e1ee3d4ed90b96c6b3d729dbd5eca1c70 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 14 Nov 2020 08:29:10 +0100 Subject: [PATCH 083/102] Removed duplicated code --- .../material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js index 30c97bebe2b3a2..20a7e9534ccce5 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js @@ -727,10 +727,6 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { key={index} valueLabelFormat={valueLabelFormat} valueLabelDisplay={valueLabelDisplay} - {...(!isHostComponent(ValueLabel) && { - styleProps: stateAndProps, - theme, - })} value={ typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) From 18590bda49be15a9a132d34ab04613d50b4f38ee Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 14 Nov 2020 08:45:56 +0100 Subject: [PATCH 084/102] fixed imports --- packages/material-ui/src/Slider/Slider.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 1333b6825ef62f..fa5628c489cde6 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,15 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { chainPropTypes } from '@material-ui/utils'; -import { - useThemeProps, - experimentalStyled, - alpha, - lighten, - darken, -} from '@material-ui/core/styles'; -import { capitalize } from '@material-ui/core/utils'; import SliderUnstyled, { SliderValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled'; +import useThemeProps from '../styles/useThemeProps'; +import experimentalStyled from '../styles/experimentalStyled'; +import { alpha, lighten, darken } from '../styles/colorManipulator'; +import capitalize from '../utils/capitalize'; const overridesResolver = (props, styles, name) => { const { From 7cf858c165583528f425c434e71165f3097a1d83 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 14 Nov 2020 08:49:25 +0100 Subject: [PATCH 085/102] overrides --- docs/src/pages/components/slider/CustomizedSlider.js | 4 +++- docs/src/pages/components/slider/CustomizedSlider.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js index 7fce104c4515c8..795a12ecb95788 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.js +++ b/docs/src/pages/components/slider/CustomizedSlider.js @@ -74,8 +74,10 @@ const IOSSlider = styled(Slider)({ '& .MuiSlider-valueLabel': { left: 'calc(-50% + 12px)', top: -22, - '& *': { + '& .MuiSlider-valueLabelCircle': { background: 'transparent', + }, + '& .MuiSlider-valueLabelLabel': { color: '#000', }, }, diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx index 8eb717bb020abb..2111018a76d27d 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.tsx +++ b/docs/src/pages/components/slider/CustomizedSlider.tsx @@ -73,8 +73,10 @@ const IOSSlider = styled(Slider)({ '& .MuiSlider-valueLabel': { left: 'calc(-50% + 12px)', top: -22, - '& *': { + '& .MuiSlider-valueLabelCircle': { background: 'transparent', + }, + '& .MuiSlider-valueLabelLabel': { color: '#000', }, }, From b5e8dc239352bb3d815733335705ce8243554295 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sat, 14 Nov 2020 09:09:42 +0100 Subject: [PATCH 086/102] Removed wrong specificity increasion --- packages/material-ui/src/Slider/Slider.js | 28 +++++++++++------------ 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index fa5628c489cde6..1f124392859516 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -213,22 +213,20 @@ export const SliderThumb = experimentalStyled( export const SliderValueLabel = experimentalStyled(SliderValueLabelUnstyled)((props) => ({ // IE 11 centering bug, to remove from the customization demos once no longer supported left: 'calc(-50% - 4px)', - '&.MuiSlider-valueLabelOffset': { - '&.MuiSlider-valueLabelOpen': { - transform: 'scale(1) translateY(-10px)', - }, - zIndex: 1, - ...props.theme.typography.body2, - fontSize: props.theme.typography.pxToRem(12), - lineHeight: 1.2, - transition: props.theme.transitions.create(['transform'], { - duration: props.theme.transitions.duration.shortest, - }), - top: -34, - transformOrigin: 'bottom center', - transform: 'scale(0)', - position: 'absolute', + '&.MuiSlider-valueLabelOpen': { + transform: 'scale(1) translateY(-10px)', }, + zIndex: 1, + ...props.theme.typography.body2, + fontSize: props.theme.typography.pxToRem(12), + lineHeight: 1.2, + transition: props.theme.transitions.create(['transform'], { + duration: props.theme.transitions.duration.shortest, + }), + top: -34, + transformOrigin: 'bottom center', + transform: 'scale(0)', + position: 'absolute', '& .MuiSlider-valueLabelCircle': { display: 'flex', alignItems: 'center', From 4a2942c10c40fb172a289cda8a9c424110ef80a1 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 16 Nov 2020 10:18:58 +0100 Subject: [PATCH 087/102] updated version --- packages/material-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json index 40133cf8af49a9..d959f8aaf33da2 100644 --- a/packages/material-ui/package.json +++ b/packages/material-ui/package.json @@ -64,7 +64,7 @@ "@material-ui/styles": "^5.0.0-alpha.15", "@material-ui/system": "^5.0.0-alpha.16", "@material-ui/types": "^5.1.0", - "@material-ui/unstyled": "^5.0.0-alpha.15", + "@material-ui/unstyled": "^5.0.0-alpha.16", "@material-ui/utils": "^5.0.0-alpha.15", "@popperjs/core": "^2.4.4", "@types/react-transition-group": "^4.2.0", From 80f576986007cd9610bc5bb7ebfa031181891d9b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 16 Nov 2020 14:09:59 +0100 Subject: [PATCH 088/102] Update test/regressions/index.js --- test/regressions/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/regressions/index.js b/test/regressions/index.js index 89d1ca1898f986..a768232f7b89f6 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -93,7 +93,6 @@ const blacklist = [ 'docs-components-skeleton/Facebook.png', // Flaky image loading 'docs-components-skeleton/SkeletonChildren.png', // flaky image loading 'docs-components-skeleton/YouTube.png', // Flaky image loading - 'docs-components-slider/UnstyledSlider.png', // Unstyled 'docs-components-snackbars/ConsecutiveSnackbars.png', // Needs interaction 'docs-components-snackbars/CustomizedSnackbars.png', // Redundant 'docs-components-snackbars/DirectionSnackbar.png', // Needs interaction From c436db71b2b50c0e494598c6d2914d5ed0cf5fb3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 17 Nov 2020 13:00:08 +0100 Subject: [PATCH 089/102] merge conflicts --- docs/data/slider-unstyled.json | 84 --------------------------------- docs/data/slider.json | 85 ---------------------------------- 2 files changed, 169 deletions(-) delete mode 100644 docs/data/slider-unstyled.json delete mode 100644 docs/data/slider.json diff --git a/docs/data/slider-unstyled.json b/docs/data/slider-unstyled.json deleted file mode 100644 index fce0b51669b0e1..00000000000000 --- a/docs/data/slider-unstyled.json +++ /dev/null @@ -1,84 +0,0 @@ -{ - "css": { - "root": { - "class": ".MuiSlider-root", - "description": "Class name applied to the root element." - }, - "colorPrimary": { - "class": ".MuiSlider-colorPrimary", - "description": "Class name applied to the root element if `color=\"primary\"`." - }, - "colorSecondary": { - "class": ".MuiSlider-colorSecondary", - "description": "Class name applied to the root element if `color=\"secondary\"`." - }, - "marked": { - "class": ".MuiSlider-marked", - "description": "Class name applied to the root element if `marks` is provided with at least one label." - }, - "vertical": { - "class": ".MuiSlider-vertical", - "description": "Class name applied to the root element if `orientation=\"vertical\"`." - }, - "disabled": { - "class": ".Mui-disabled", - "description": "Pseudo-class applied to the root and thumb element if `disabled={true}`." - }, - "rail": { - "class": ".MuiSlider-rail", - "description": "Class name applied to the rail element." - }, - "track": { - "class": ".MuiSlider-track", - "description": "Class name applied to the track element." - }, - "trackFalse": { - "class": ".MuiSlider-trackFalse", - "description": "Class name applied to the track element if `track={false}`." - }, - "trackInverted": { - "class": ".MuiSlider-trackInverted", - "description": "Class name applied to the track element if `track=\"inverted\"`." - }, - "thumb": { - "class": ".MuiSlider-thumb", - "description": "Class name applied to the thumb element." - }, - "thumbColorPrimary": { - "class": ".MuiSlider-thumbColorPrimary", - "description": "Class name applied to the thumb element if `color=\"primary\"`." - }, - "thumbColorSecondary": { - "class": ".MuiSlider-thumbColorSecondary", - "description": "Class name applied to the thumb element if `color=\"secondary\"`." - }, - "active": { - "class": ".MuiSlider-active", - "description": "Pseudo-class applied to the thumb element if it's active." - }, - "focusVisible": { - "class": ".Mui-focusVisible", - "description": "Pseudo-class applied to the thumb element if keyboard focused." - }, - "valueLabel": { - "class": ".MuiSlider-valueLabel", - "description": "Class name applied to the thumb label element." - }, - "mark": { - "class": ".MuiSlider-mark", - "description": "Class name applied to the mark element." - }, - "markActive": { - "class": ".MuiSlider-markActive", - "description": "Class name applied to the mark element if active (depending on the value)." - }, - "markLabel": { - "class": ".MuiSlider-markLabel", - "description": "Class name applied to the mark label element." - }, - "markLabelActive": { - "class": ".MuiSlider-markLabelActive", - "description": "Class name applied to the mark label element if active (depending on the value)." - } - } -} diff --git a/docs/data/slider.json b/docs/data/slider.json deleted file mode 100644 index 7eb1be301beea7..00000000000000 --- a/docs/data/slider.json +++ /dev/null @@ -1,85 +0,0 @@ -{ - "name": "MuiSlider", - "css": { - "root": { - "class": ".MuiSlider-root", - "description": "Class name applied to the root element." - }, - "colorPrimary": { - "class": ".MuiSlider-colorPrimary", - "description": "Class name applied to the root element if `color=\"primary\"`." - }, - "colorSecondary": { - "class": ".MuiSlider-colorSecondary", - "description": "Class name applied to the root element if `color=\"secondary\"`." - }, - "marked": { - "class": ".MuiSlider-marked", - "description": "Class name applied to the root element if `marks` is provided with at least one label." - }, - "vertical": { - "class": ".MuiSlider-vertical", - "description": "Class name applied to the root element if `orientation=\"vertical\"`." - }, - "disabled": { - "class": ".Mui-disabled", - "description": "Pseudo-class applied to the root and thumb element if `disabled={true}`." - }, - "rail": { - "class": ".MuiSlider-rail", - "description": "Class name applied to the rail element." - }, - "track": { - "class": ".MuiSlider-track", - "description": "Class name applied to the track element." - }, - "trackFalse": { - "class": ".MuiSlider-trackFalse", - "description": "Class name applied to the track element if `track={false}`." - }, - "trackInverted": { - "class": ".MuiSlider-trackInverted", - "description": "Class name applied to the track element if `track=\"inverted\"`." - }, - "thumb": { - "class": ".MuiSlider-thumb", - "description": "Class name applied to the thumb element." - }, - "thumbColorPrimary": { - "class": ".MuiSlider-thumbColorPrimary", - "description": "Class name applied to the thumb element if `color=\"primary\"`." - }, - "thumbColorSecondary": { - "class": ".MuiSlider-thumbColorSecondary", - "description": "Class name applied to the thumb element if `color=\"secondary\"`." - }, - "active": { - "class": ".MuiSlider-active", - "description": "Pseudo-class applied to the thumb element if it's active." - }, - "focusVisible": { - "class": ".Mui-focusVisible", - "description": "Pseudo-class applied to the thumb element if keyboard focused." - }, - "valueLabel": { - "class": ".MuiSlider-valueLabel", - "description": "Class name applied to the thumb label element." - }, - "mark": { - "class": ".MuiSlider-mark", - "description": "Class name applied to the mark element." - }, - "markActive": { - "class": ".MuiSlider-markActive", - "description": "Class name applied to the mark element if active (depending on the value)." - }, - "markLabel": { - "class": ".MuiSlider-markLabel", - "description": "Class name applied to the mark label element." - }, - "markLabelActive": { - "class": ".MuiSlider-markLabelActive", - "description": "Class name applied to the mark label element if active (depending on the value)." - } - } -} From 717a1f55c414e282df6d88c5523d3da7d4c524dc Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 17 Nov 2020 13:19:15 +0100 Subject: [PATCH 090/102] docs --- docs/pages/api-docs/slider-styled.json | 108 ----------------------- docs/pages/api-docs/slider-unstyled.json | 2 +- docs/pages/api-docs/slider.json | 45 +++++----- docs/translations/prop-descriptions.json | 27 ------ 4 files changed, 21 insertions(+), 161 deletions(-) delete mode 100644 docs/pages/api-docs/slider-styled.json diff --git a/docs/pages/api-docs/slider-styled.json b/docs/pages/api-docs/slider-styled.json deleted file mode 100644 index 5c436ff60a35ec..00000000000000 --- a/docs/pages/api-docs/slider-styled.json +++ /dev/null @@ -1,108 +0,0 @@ -{ - "props": { - "aria-label": { "type": { "name": "string" } }, - "aria-labelledby": { "type": { "name": "string" } }, - "aria-valuetext": { "type": { "name": "string" } }, - "children": { "type": { "name": "node" }, "required": false, "description": "@ignore" }, - "classes": { "type": { "name": "object" } }, - "color": { "type": { "name": "enum", "description": "'primary'
| 'secondary'" } }, - "components": { - "type": { - "name": "shape", - "description": "{ Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }" - }, - "default": "{}" - }, - "componentsProps": { "type": { "name": "object" } }, - "defaultValue": { - "type": { "name": "union", "description": "Array<number>
| number" } - }, - "disabled": { "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" - } - }, - "max": { "type": { "name": "number" } }, - "min": { "type": { "name": "number" } }, - "name": { "type": { "name": "string" } }, - "onChange": { "type": { "name": "func" } }, - "onChangeCommitted": { "type": { "name": "func" } }, - "orientation": { - "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" } - }, - "scale": { "type": { "name": "func" } }, - "step": { "type": { "name": "number" } }, - "sx": { "type": { "name": "object" } }, - "track": { - "type": { - "name": "enum", - "description": "'inverted'
| 'normal'
| false" - } - }, - "value": { - "type": { "name": "union", "description": "Array<number>
| number" } - }, - "valueLabelDisplay": { - "type": { "name": "enum", "description": "'auto'
| 'off'
| 'on'" } - }, - "valueLabelFormat": { "type": { "name": "union", "description": "func
| string" } } - }, - "name": "SliderStyled", - "styles": { - "classes": [ - "root", - "colorPrimary", - "colorSecondary", - "marked", - "vertical", - "disabled", - "rail", - "track", - "trackFalse", - "trackInverted", - "thumb", - "thumbColorPrimary", - "thumbColorSecondary", - "active", - "focusVisible", - "valueLabel", - "mark", - "markActive", - "markLabel", - "markLabelActive" - ], - "globalClasses": { - "root": "MuiSlider-root", - "colorPrimary": "MuiSlider-colorPrimary", - "colorSecondary": "MuiSlider-colorSecondary", - "marked": "MuiSlider-marked", - "vertical": "MuiSlider-vertical", - "disabled": "Mui-disabled", - "rail": "MuiSlider-rail", - "track": "MuiSlider-track", - "trackFalse": "MuiSlider-trackFalse", - "trackInverted": "MuiSlider-trackInverted", - "thumb": "MuiSlider-thumb", - "thumbColorPrimary": "MuiSlider-thumbColorPrimary", - "thumbColorSecondary": "MuiSlider-thumbColorSecondary", - "active": "MuiSlider-active", - "focusVisible": "Mui-focusVisible", - "valueLabel": "MuiSlider-valueLabel", - "mark": "MuiSlider-mark", - "markActive": "MuiSlider-markActive", - "markLabel": "MuiSlider-markLabel", - "markLabelActive": "MuiSlider-markLabelActive" - } - }, - "spread": true, - "forwardsRefTo": "HTMLSpanElement", - "filename": "/packages/material-ui-lab/src/SliderStyled/SliderStyled.js", - "inheritance": null, - "demos": "

", - "styledComponent": true -} diff --git a/docs/pages/api-docs/slider-unstyled.json b/docs/pages/api-docs/slider-unstyled.json index 1d39608f7c1449..68d798f645b572 100644 --- a/docs/pages/api-docs/slider-unstyled.json +++ b/docs/pages/api-docs/slider-unstyled.json @@ -115,6 +115,6 @@ "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js", "inheritance": null, - "demos": "", + "demos": "", "styledComponent": true } diff --git a/docs/pages/api-docs/slider.json b/docs/pages/api-docs/slider.json index f017179b7a6ad4..331101bfd4d420 100644 --- a/docs/pages/api-docs/slider.json +++ b/docs/pages/api-docs/slider.json @@ -5,57 +5,52 @@ "aria-valuetext": { "type": { "name": "custom", "description": "string" } }, "children": { "type": { "name": "node" }, "required": false, "description": "@ignore" }, "classes": { "type": { "name": "object" } }, - "className": { "type": { "name": "string" }, "required": false, "description": "@ignore" }, - "color": { - "type": { "name": "enum", "description": "'primary'
| 'secondary'" }, - "default": "'primary'" + "color": { "type": { "name": "enum", "description": "'primary'
| 'secondary'" } }, + "components": { + "type": { + "name": "shape", + "description": "{ Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType }" + }, + "default": "{}" }, - "component": { "type": { "name": "elementType" } }, + "componentsProps": { "type": { "name": "object" } }, "defaultValue": { "type": { "name": "union", "description": "Array<number>
| number" } }, "disabled": { "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" }, + "max": { "type": { "name": "number" } }, + "min": { "type": { "name": "number" } }, "name": { "type": { "name": "string" } }, "onChange": { "type": { "name": "func" } }, "onChangeCommitted": { "type": { "name": "func" } }, - "onMouseDown": { "type": { "name": "func" }, "required": false, "description": "@ignore" }, "orientation": { - "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" }, - "default": "'horizontal'" + "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" } }, - "scale": { "type": { "name": "func" }, "default": "(x) => x" }, - "step": { "type": { "name": "number" }, "default": "1" }, - "ThumbComponent": { "type": { "name": "elementType" }, "default": "'span'" }, + "scale": { "type": { "name": "func" } }, + "step": { "type": { "name": "number" } }, + "sx": { "type": { "name": "object" } }, "track": { "type": { "name": "enum", "description": "'inverted'
| 'normal'
| false" - }, - "default": "'normal'" + } }, "value": { "type": { "name": "union", "description": "Array<number>
| number" } }, - "ValueLabelComponent": { "type": { "name": "elementType" }, "default": "ValueLabel" }, "valueLabelDisplay": { - "type": { "name": "enum", "description": "'auto'
| 'off'
| 'on'" }, - "default": "'off'" + "type": { "name": "enum", "description": "'auto'
| 'off'
| 'on'" } }, - "valueLabelFormat": { - "type": { "name": "union", "description": "func
| string" }, - "default": "(x) => x" - } + "valueLabelFormat": { "type": { "name": "union", "description": "func
| string" } } }, "name": "Slider", "styles": { @@ -88,5 +83,5 @@ "filename": "/packages/material-ui/src/Slider/Slider.js", "inheritance": null, "demos": "", - "styledComponent": false + "styledComponent": true } diff --git a/docs/translations/prop-descriptions.json b/docs/translations/prop-descriptions.json index 9706b48312de80..ec65050fc7b78f 100644 --- a/docs/translations/prop-descriptions.json +++ b/docs/translations/prop-descriptions.json @@ -998,33 +998,6 @@ "timeout": "The duration for the transition, in milliseconds.\nYou may specify a single timeout for all transitions, or individually with an object.\n@default {\n enter: duration.enteringScreen,\n exit: duration.leavingScreen,\n}" }, "Slider": { - "aria-label": "The label of the slider.", - "aria-labelledby": "The id of the element containing a label for the slider.", - "aria-valuetext": "A string value that provides a user-friendly name for the current value of the slider.", - "classes": "Override or extend the styles applied to the component. See CSS API below for more details.", - "color": "The color of the component. It supports those theme colors that make sense for this component.", - "component": "The component used for the root node.\nEither a string to use a HTML element or a component.", - "defaultValue": "The default element value. Use when the component is not controlled.", - "disabled": "If `true`, the slider is disabled.", - "getAriaLabel": "Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.\n\n@param {number} index The thumb label's index to format.\n@returns {string}", - "getAriaValueText": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.\n\n@param {number} value The thumb label's value to format.\n@param {number} index The thumb label's index to format.\n@returns {string}", - "marks": "Marks indicate predetermined values to which the user can move the slider.\nIf `true` the marks are spaced according the value of the `step` prop.\nIf an array, it should contain objects with `value` and an optional `label` keys.", - "max": "The maximum allowed value of the slider.\nShould not be equal to min.", - "min": "The minimum allowed value of the slider.\nShould not be equal to max.", - "name": "Name attribute of the hidden `input` element.", - "onChange": "Callback function that is fired when the slider's value changed.\n\n@param {object} event The event source of the callback. **Warning**: This is a generic event not a change event.\n@param {number | number[]} value The new value.", - "onChangeCommitted": "Callback function that is fired when the `mouseup` is triggered.\n\n@param {object} event The event source of the callback. **Warning**: This is a generic event not a change event.\n@param {number | number[]} value The new value.", - "orientation": "The slider orientation.", - "scale": "A transformation function, to change the scale of the slider.", - "step": "The granularity with which the slider can step through values. (A \"discrete\" slider.)\nThe `min` prop serves as the origin for the valid values.\nWe recommend (max - min) to be evenly divisible by the step.\n\nWhen step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.", - "ThumbComponent": "The component used to display the value label.", - "track": "The track presentation:\n\n- `normal` the track will render a bar representing the slider value.\n- `inverted` the track will render a bar representing the remaining slider value.\n- `false` the track will render without a bar.", - "value": "The value of the slider.\nFor ranged sliders, provide an array with two values.", - "ValueLabelComponent": "The value label component.", - "valueLabelDisplay": "Controls when the value label is displayed:\n\n- `auto` the value label will display when the thumb is hovered or focused.\n- `on` will display persistently.\n- `off` will never display.", - "valueLabelFormat": "The format function the value label's value.\n\nWhen a function is provided, it should have the following signature:\n\n- {number} value The value label's value to format\n- {number} index The value label's index to format" - }, - "SliderStyled": { "aria-label": "The label of the slider.", "aria-labelledby": "The id of the element containing a label for the slider.", "aria-valuetext": "A string value that provides a user-friendly name for the current value of the slider.", From 74a8d85484554f2400821e513a4fe22a1bc32ee7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 17 Nov 2020 13:28:49 +0100 Subject: [PATCH 091/102] merge conflicts --- .../components/slider/CustomizedSlider.js | 4 +- .../components/slider/CustomizedSlider.tsx | 4 +- packages/material-ui/src/Slider/Slider.d.ts | 72 ++----------------- packages/material-ui/src/Slider/Slider.js | 30 ++++---- 4 files changed, 22 insertions(+), 88 deletions(-) diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js index 795a12ecb95788..7fce104c4515c8 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.js +++ b/docs/src/pages/components/slider/CustomizedSlider.js @@ -74,10 +74,8 @@ const IOSSlider = styled(Slider)({ '& .MuiSlider-valueLabel': { left: 'calc(-50% + 12px)', top: -22, - '& .MuiSlider-valueLabelCircle': { + '& *': { background: 'transparent', - }, - '& .MuiSlider-valueLabelLabel': { color: '#000', }, }, diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx index 2111018a76d27d..8eb717bb020abb 100644 --- a/docs/src/pages/components/slider/CustomizedSlider.tsx +++ b/docs/src/pages/components/slider/CustomizedSlider.tsx @@ -73,10 +73,8 @@ const IOSSlider = styled(Slider)({ '& .MuiSlider-valueLabel': { left: 'calc(-50% + 12px)', top: -22, - '& .MuiSlider-valueLabelCircle': { + '& *': { background: 'transparent', - }, - '& .MuiSlider-valueLabelLabel': { color: '#000', }, }, diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts index 218ddd590f5735..3d7b675013c7f0 100644 --- a/packages/material-ui/src/Slider/Slider.d.ts +++ b/packages/material-ui/src/Slider/Slider.d.ts @@ -1,6 +1,9 @@ import * as React from 'react'; import { SxProps } from '@material-ui/core/Box'; -import { ExtendSliderUnstyledTypeMap, ExtendSliderUnstyled } from '@material-ui/unstyled'; +import { + ExtendSliderUnstyledTypeMap, + ExtendSliderUnstyled, +} from '@material-ui/unstyled/SliderUnstyled'; import { OverrideProps } from '../OverridableComponent'; export type SliderTypeMap< @@ -8,51 +11,6 @@ export type SliderTypeMap< P = {} > = ExtendSliderUnstyledTypeMap<{ props: P & { - /** - * Override or extend the styles applied to the component. - */ - classes?: { - /** Class name applied to the root element. */ - root?: string; - /** Class name applied to the root element if `color="primary"`. */ - colorPrimary?: string; - /** Class name applied to the root element if `color="secondary"`. */ - colorSecondary?: string; - /** Class name applied to the root element if `marks` is provided with at least one label. */ - marked?: string; - /** Class name applied to the root element if `orientation="vertical"`. */ - vertical?: string; - /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */ - disabled?: string; - /** Class name applied to the rail element. */ - rail?: string; - /** Class name applied to the track element. */ - track?: string; - /** Class name applied to the track element if `track={false}`. */ - trackFalse?: string; - /** Class name applied to the track element if `track="inverted"`. */ - trackInverted?: string; - /** Class name applied to the thumb element. */ - thumb?: string; - /** Class name applied to the thumb element if `color="primary"`. */ - thumbColorPrimary?: string; - /** Class name applied to the thumb element if `color="secondary"`. */ - thumbColorSecondary?: string; - /** Pseudo-class applied to the thumb element if it's active. */ - active?: string; - /** Pseudo-class applied to the thumb element if keyboard focused. */ - focusVisible?: string; - /** Class name applied to the thumb label element. */ - valueLabel?: string; - /** Class name applied to the mark element. */ - mark?: string; - /** Class name applied to the mark element if active (depending on the value). */ - markActive?: string; - /** Class name applied to the mark label element. */ - markLabel?: string; - /** Class name applied to the mark label element if active (depending on the value). */ - markLabelActive?: string; - }; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ @@ -89,27 +47,7 @@ export const SliderValueLabel: React.FC; */ declare const Slider: ExtendSliderUnstyled; -export type SliderClassKey = - | 'root' - | 'colorPrimary' - | 'colorSecondary' - | 'marked' - | 'vertical' - | 'disabled' - | 'rail' - | 'track' - | 'trackFalse' - | 'trackInverted' - | 'thumb' - | 'thumbColorPrimary' - | 'thumbColorSecondary' - | 'active' - | 'focusVisible' - | 'valueLabel' - | 'mark' - | 'markActive' - | 'markLabel' - | 'markLabelActive'; +export type SliderClassKey = keyof NonNullable; export type SliderProps< D extends React.ElementType = SliderTypeMap['defaultComponent'], diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 1f124392859516..bde8a108359f0e 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -96,6 +96,21 @@ export const SliderRoot = experimentalStyled( marginRight: 20, }), }), + '& .MuiSlider-valueLabelCircle': { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: 32, + height: 32, + borderRadius: '50% 50% 50% 0', + backgroundColor: 'currentColor', + transform: 'rotate(-45deg)', + }, + '& .MuiSlider-valueLabelLabel': { + color: props.theme.palette.primary.contrastText, + transform: 'rotate(45deg)', + textAlign: 'center', + }, })); export const SliderRail = experimentalStyled( @@ -227,21 +242,6 @@ export const SliderValueLabel = experimentalStyled(SliderValueLabelUnstyled)((pr transformOrigin: 'bottom center', transform: 'scale(0)', position: 'absolute', - '& .MuiSlider-valueLabelCircle': { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: 32, - height: 32, - borderRadius: '50% 50% 50% 0', - backgroundColor: 'currentColor', - transform: 'rotate(-45deg)', - }, - '& .MuiSlider-valueLabelLabel': { - color: props.theme.palette.primary.contrastText, - transform: 'rotate(45deg)', - textAlign: 'center', - }, })); export const SliderMark = experimentalStyled( From fa3258fbc1981137cdebf07c5bae21ae43640c7f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 17 Nov 2020 13:37:28 +0100 Subject: [PATCH 092/102] reverted some changes --- scripts/generateProptypes.ts | 27 --------------------------- 1 file changed, 27 deletions(-) diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index 67ace986bac233..712cce5f2ab7e6 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -195,33 +195,6 @@ const prettierConfig = prettier.resolveConfig.sync(process.cwd(), { config: path.join(__dirname, '../prettier.config.js'), }); -const getUnstyledFile = (tsFile: string) => { - let unstyledFile = ''; - - if (tsFile.endsWith('.d.ts') && tsFile.indexOf('material-ui-unstyled') === -1) { - unstyledFile = tsFile; - - const pathParts = unstyledFile.split('/'); - const componentName = pathParts[pathParts.length - 1].replace('.d.ts', ''); - const directoryName = pathParts[pathParts.length - 2]; - - const componentNameReg = new RegExp(componentName, 'g'); - - unstyledFile = unstyledFile.replace( - /packages\/material-ui-lab|packages\/material-ui/g, - 'packages/material-ui-unstyled', - ); - unstyledFile = unstyledFile.replace(componentNameReg, `${componentName}Unstyled`); - - if (directoryName !== componentName) { - const directoryNameReg = new RegExp(directoryName, 'g'); - unstyledFile = unstyledFile.replace(directoryNameReg, `${directoryName}Unstyled`); - } - } - - return unstyledFile; -}; - async function generateProptypes( program: ttp.ts.Program, sourceFile: string, From db20a1c882b2e741efc2c710173a36a9a081a466 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 17 Nov 2020 14:37:34 +0100 Subject: [PATCH 093/102] exported slideClasses --- docs/translations/class-descriptions.json | 55 ------------------- .../src/SliderUnstyled/SliderUnstyled.js | 47 ++++++++-------- .../SliderValueLabelUnstyled.js | 14 ++--- .../src/SliderUnstyled/index.d.ts | 1 + .../src/SliderUnstyled/index.js | 1 + .../src/SliderUnstyled/sliderClasses.d.ts | 30 ++++++++++ .../src/SliderUnstyled/sliderClasses.js | 32 +++++++++++ packages/material-ui/src/Slider/Slider.js | 46 ++++++++-------- .../material-ui/src/Slider/Slider.test.js | 32 +++++------ 9 files changed, 131 insertions(+), 127 deletions(-) create mode 100644 packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts create mode 100644 packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js diff --git a/docs/translations/class-descriptions.json b/docs/translations/class-descriptions.json index 36e5493307745d..097e9e1cbf0ae2 100644 --- a/docs/translations/class-descriptions.json +++ b/docs/translations/class-descriptions.json @@ -2095,61 +2095,6 @@ }, "Slide": {}, "Slider": { - "root": { "description": "Styles applied to the root element." }, - "colorPrimary": { - "description": "Styles applied to the root element if {{conditions}}.", - "conditions": "color=\"primary\"" - }, - "colorSecondary": { - "description": "Styles applied to the root element if {{conditions}}.", - "conditions": "color=\"secondary\"" - }, - "marked": { - "description": "Styles applied to the root element if {{conditions}}.", - "conditions": "marks is provided with at least one label" - }, - "vertical": { - "description": "Pseudo-class applied to the root element if {{conditions}}.", - "conditions": "orientation=\"vertical\"" - }, - "disabled": { - "description": "Pseudo-class applied to the root and thumb element if {{conditions}}.", - "conditions": "disabled={true}" - }, - "rail": { "description": "Styles applied to the rail element." }, - "track": { "description": "Styles applied to the track element." }, - "trackFalse": { - "description": "Styles applied to the track element if {{conditions}}.", - "conditions": "track={false}" - }, - "trackInverted": { - "description": "Styles applied to the track element if {{conditions}}.", - "conditions": "track=\"inverted\"" - }, - "thumb": { "description": "Styles applied to the thumb element." }, - "thumbColorPrimary": { - "description": "Styles applied to the thumb element if {{conditions}}.", - "conditions": "color=\"primary\"" - }, - "thumbColorSecondary": { - "description": "Styles applied to the thumb element if {{conditions}}.", - "conditions": "color=\"secondary\"" - }, - "active": { "description": "Pseudo-class applied to the thumb element if it's active." }, - "focusVisible": { - "description": "Pseudo-class applied to the thumb element if keyboard focused." - }, - "valueLabel": { "description": "Styles applied to the thumb label element." }, - "mark": { "description": "Styles applied to the mark element." }, - "markActive": { - "description": "Styles applied to the mark element if active (depending on the value)." - }, - "markLabel": { "description": "Styles applied to the mark label element." }, - "markLabelActive": { - "description": "Styles applied to the mark label element if active (depending on the value)." - } - }, - "SliderStyled": { "root": { "description": "Class name applied to the root element." }, "colorPrimary": { "description": "Class name applied to the root element if {{conditions}}.", diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js index 20a7e9534ccce5..e7a8d22eeb364a 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js @@ -11,6 +11,7 @@ import { unstable_capitalize as capitalize, unstable_useControlled as useControlled, } from '@material-ui/utils'; +import sliderClasses from './sliderClasses'; import SliderValueLabelUnstyled from './SliderValueLabelUnstyled'; function asc(a, b) { @@ -144,44 +145,40 @@ function doesSupportTouchActionNone() { return cachedSupportsTouchActionNone; } -const getUtilityClass = (name) => { - return `MuiSlider-${name}`; -}; - const useSliderClasses = (props) => { const { color, disabled, marked, orientation, track, classes = {} } = props; const utilityClasses = { root: clsx( - getUtilityClass('root'), + sliderClasses['root'], classes['root'], - getUtilityClass(`color${capitalize(color)}`), + sliderClasses[`color${capitalize(color)}`], classes[`color${capitalize(color)}`], { - 'Mui-disabled': disabled, - [getUtilityClass('marked')]: marked, + [sliderClasses['disabled']]: disabled, + [sliderClasses['marked']]: marked, [classes['marked']]: marked, - [getUtilityClass('vertical')]: orientation === 'vertical', + [sliderClasses['vertical']]: orientation === 'vertical', [classes['vertical']]: orientation === 'vertical', - [getUtilityClass('trackInverted')]: track === 'inverted', + [sliderClasses['trackInverted']]: track === 'inverted', [classes['trackInverted']]: track === 'inverted', - [getUtilityClass('trackFalse')]: track === false, + [sliderClasses['trackFalse']]: track === false, [classes['trackFalse']]: track === false, }, ), - rail: clsx(getUtilityClass('rail'), classes['rail']), - track: clsx(getUtilityClass('track'), classes['track']), - mark: clsx(getUtilityClass('mark'), classes['mark']), - markLabel: clsx(getUtilityClass('markLabel'), classes['markLabel']), - valueLabel: clsx(getUtilityClass('valueLabel'), classes['valueLabel']), + rail: clsx(sliderClasses['rail'], classes['rail']), + track: clsx(sliderClasses['track'], classes['track']), + mark: clsx(sliderClasses['mark'], classes['mark']), + markLabel: clsx(sliderClasses['markLabel'], classes['markLabel']), + valueLabel: clsx(sliderClasses['valueLabel'], classes['valueLabel']), thumb: clsx( - getUtilityClass('thumb'), + sliderClasses['thumb'], classes['thumb'], - getUtilityClass(`thumbColor${capitalize(color)}`), + sliderClasses[`thumbColor${capitalize(color)}`], classes[`thumbColor${capitalize(color)}`], { - 'Mui-disabled': disabled, - [getUtilityClass('vertical')]: orientation === 'vertical', + [sliderClasses['disabled']]: disabled, + [sliderClasses['vertical']]: orientation === 'vertical', }, ), }; @@ -693,7 +690,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { })} style={{ ...style, ...markProps.style }} className={clsx(utilityClasses.mark, markProps.className, { - [getUtilityClass('markActive')]: markActive, + [sliderClasses['markActive']]: markActive, })} /> {mark.label != null ? ( @@ -707,7 +704,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { })} style={{ ...style, ...markLabelProps.style }} className={clsx(utilityClasses.markLabel, markLabelProps.className, { - [getUtilityClass('markLabelActive')]: markActive, + [sliderClasses['markLabelActive']]: markActive, })} > {mark.label} @@ -745,9 +742,9 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) { { - return `MuiSlider-valueLabel${capitalize(name)}`; -}; +import sliderClasses from './sliderClasses'; const useValueLabelClasses = (props) => { const { open } = props; const utilityClasses = { - offset: clsx('MuiSlider-valueLabel', getUtilityClass('offset'), { - [getUtilityClass('open')]: open, + offset: clsx(sliderClasses.valueLabel, sliderClasses.valueLabelOffset, { + [sliderClasses.valueLabelOpen]: open, }), - circle: getUtilityClass('circle'), - label: getUtilityClass('label'), + circle: sliderClasses.valueLabelCircle, + label: sliderClasses.valueLabelLabel, }; return utilityClasses; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/index.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/index.d.ts index cda85365ff6a40..71c0ac588b2498 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/index.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/index.d.ts @@ -2,3 +2,4 @@ export { default } from './SliderUnstyled'; export * from './SliderUnstyled'; export { default as SliderValueLabelUnstyled } from './SliderValueLabelUnstyled'; export * from './SliderValueLabelUnstyled'; +export { default as sliderClasses } from './sliderClasses'; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/index.js b/packages/material-ui-unstyled/src/SliderUnstyled/index.js index b9d290c2a2a125..a24522a18caa6e 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/index.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/index.js @@ -1,2 +1,3 @@ export { default } from './SliderUnstyled'; export { default as SliderValueLabelUnstyled } from './SliderValueLabelUnstyled'; +export { default as sliderClasses } from './sliderClasses'; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts new file mode 100644 index 00000000000000..dd4816f50a30ca --- /dev/null +++ b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts @@ -0,0 +1,30 @@ +type SliderClasses = { + root: string; + active: string; + focusVisible: string; + colorPrimary: string; + colorSecondary: string; + disabled: string; + marked: string; + vertical: string; + trackInverted: string; + trackFalse: string; + rail: string; + track: string; + mark: string; + markActive: string; + markLabel: string; + markLabelActive: string; + thumb: string; + thumbPrimary: string; + thumbSecondary: string; + valueLabel: string; + valueLabelOffset: string; + valueLabelOpen: string; + valueLabelCircle: string; + valueLabelLabel: string; +} + +declare const sliderClasses: SliderClasses; + +export default sliderClasses; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js new file mode 100644 index 00000000000000..f09b44b949a9af --- /dev/null +++ b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js @@ -0,0 +1,32 @@ +const getUtilityClass = (name) => { + return `MuiSlider-${name}`; +}; + +const sliderClasses = { + root: getUtilityClass('root'), + active: 'Mui-active', + focusVisible: 'Mui-focusVisible', + colorPrimary: getUtilityClass('colorPrimary'), + colorSecondary: getUtilityClass('colorSecondary'), + disabled: 'Mui-disabled', + marked: getUtilityClass('marked'), + vertical: getUtilityClass('vertical'), + trackInverted: getUtilityClass('trackInverted'), + trackFalse: getUtilityClass('trackFalse'), + rail: getUtilityClass('rail'), + track: getUtilityClass('track'), + mark: getUtilityClass('mark'), + markActive: getUtilityClass('markActive'), + markLabel: getUtilityClass('markLabel'), + markLabelActive: getUtilityClass('markLabelActive'), + thumb: getUtilityClass('thumb'), + thumbPrimary: getUtilityClass('thumbColorPrimary'), + thumbSecondary: getUtilityClass('thumbColorPrimary'), + valueLabel: getUtilityClass('valueLabel'), + valueLabelOffset: getUtilityClass('valueLabelOffset'), + valueLabelOpen: getUtilityClass('valueLabelOpen'), + valueLabelCircle: getUtilityClass('valueLabelCircle'), + valueLabelLabel: getUtilityClass('valueLabelLabel'), +}; + +export default sliderClasses; diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index bde8a108359f0e..758d7a52590b9b 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,11 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { chainPropTypes } from '@material-ui/utils'; -import SliderUnstyled, { SliderValueLabelUnstyled } from '@material-ui/unstyled/SliderUnstyled'; +import SliderUnstyled, { SliderValueLabelUnstyled, sliderClasses } from '@material-ui/unstyled/SliderUnstyled'; import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { alpha, lighten, darken } from '../styles/colorManipulator'; import capitalize from '../utils/capitalize'; +export { sliderClasses } from '@material-ui/unstyled/SliderUnstyled'; const overridesResolver = (props, styles, name) => { const { @@ -30,20 +31,20 @@ const overridesResolver = (props, styles, name) => { const styleOverrides = { ...styles.root, ...styles[`color${capitalize(color)}`], - '&.Mui-disabled': styles.disabled, + [`&.${sliderClasses.disabled}`]: styles.disabled, ...(marked && styles.marked), ...(orientation === 'vertical' && styles.vertical), ...(track === 'inverted' && styles.trackInverted), ...(track === false && styles.trackFalse), - [`& .${name}-rail`]: styles.rail, - [`& .${name}-track`]: styles.track, - [`& .${name}-mark`]: styles.mark, - [`& .${name}-markLabel`]: styles.markLabel, - [`& .${name}-valueLabel`]: styles.valueLabel, - [`& .${name}-thumb`]: { + [`& .${sliderClasses.rail}`]: styles.rail, + [`& .${sliderClasses.track}`]: styles.track, + [`& .${sliderClasses.mark}`]: styles.mark, + [`& .${sliderClasses.markLabel}`]: styles.markLabel, + [`& .${sliderClasses.valueLabel}`]: styles.valueLabel, + [`& .${sliderClasses.thumb}`]: { ...styles.thumb, ...styles[`thumbColor${capitalize(color)}`], - '&.Mui-disabled': styles.disabled, + [`&.${sliderClasses.disabled}`]: styles.disabled, }, }; @@ -68,7 +69,7 @@ export const SliderRoot = experimentalStyled( ...(props.styleProps.color === 'secondary' && { color: props.theme.palette.secondary.main, }), - '&.Mui-disabled': { + [`&.${sliderClasses.disabled}`]: { pointerEvents: 'none', cursor: 'default', color: props.theme.palette.grey[400], @@ -96,7 +97,7 @@ export const SliderRoot = experimentalStyled( marginRight: 20, }), }), - '& .MuiSlider-valueLabelCircle': { + [`& .${sliderClasses.valueLabelCircle}`]: { display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -106,7 +107,7 @@ export const SliderRoot = experimentalStyled( backgroundColor: 'currentColor', transform: 'rotate(-45deg)', }, - '& .MuiSlider-valueLabelLabel': { + [`& .${sliderClasses.valueLabelLabel}`]: { color: props.theme.palette.primary.contrastText, transform: 'rotate(45deg)', textAlign: 'center', @@ -189,16 +190,16 @@ export const SliderThumb = experimentalStyled( right: -15, bottom: -15, }, - '&:hover, &.Mui-focusVisible': { + [`&:hover, &.${sliderClasses.focusVisible}`]: { boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.primary.main, 0.16)}`, '@media (hover: none)': { boxShadow: 'none', }, }, - '&.Mui-active': { + [`&.${sliderClasses.active}`]: { boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.primary.main, 0.16)}`, }, - '&.Mui-disabled': { + [`&.${sliderClasses.disabled}`]: { width: 8, height: 8, marginLeft: -4, @@ -207,19 +208,19 @@ export const SliderThumb = experimentalStyled( boxShadow: 'none', }, }, - '&.MuiSlider-vertical': { + [`&.${sliderClasses.vertical}`]: { marginLeft: -5, marginBottom: -6, }, - '&.MuiSlider-vertical&.Mui-disabled': { + [`&.${sliderClasses.vertical}&.${sliderClasses.disabled}`]: { marginLeft: -3, marginBottom: -4, }, ...(props.styleProps.color === 'secondary' && { - '&:hover, &.Mui-focusVisible': { + [`&:hover, &.${sliderClasses.focusVisible}`]: { boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.secondary.main, 0.16)}`, }, - '&.Mui-active': { + [`&.${sliderClasses.active}`]: { boxShadow: `0px 0px 0px 14px ${alpha(props.theme.palette.secondary.main, 0.16)}`, }, }), @@ -228,7 +229,7 @@ export const SliderThumb = experimentalStyled( export const SliderValueLabel = experimentalStyled(SliderValueLabelUnstyled)((props) => ({ // IE 11 centering bug, to remove from the customization demos once no longer supported left: 'calc(-50% - 4px)', - '&.MuiSlider-valueLabelOpen': { + [`&.${sliderClasses.valueLabelOpen}`]: { transform: 'scale(1) translateY(-10px)', }, zIndex: 1, @@ -254,7 +255,7 @@ export const SliderMark = experimentalStyled( height: 2, borderRadius: 1, backgroundColor: 'currentColor', - '&.MuiSlider-markActive': { + [`&.${sliderClasses.markActive}`]: { backgroundColor: props.theme.palette.background.paper, opacity: 0.8, }, @@ -282,7 +283,7 @@ export const SliderMarkLabel = experimentalStyled( left: 31, }), }, - '&.MuiSlider-markLabelActive': { + [`&.${sliderClasses.markLabelActive}`]: { color: props.theme.palette.text.primary, }, })); @@ -556,4 +557,5 @@ Slider.propTypes = { valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), }; + export default Slider; diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js index b67a66ed5f1d30..1e9a3ba4d3f7b4 100644 --- a/packages/material-ui/src/Slider/Slider.test.js +++ b/packages/material-ui/src/Slider/Slider.test.js @@ -5,7 +5,7 @@ import { expect } from 'chai'; import { createMount, describeConformance, act, createClientRender, fireEvent } from 'test/utils'; import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import clsx from 'clsx'; -import Slider from './Slider'; +import Slider, { sliderClasses as classes } from './Slider'; function createTouches(touches) { return { @@ -120,7 +120,7 @@ describe('', () => { describe('prop: orientation', () => { it('should render with the vertical classes', () => { const { container, getByRole } = render(); - expect(container.firstChild).to.have.class('MuiSlider-vertical'); + expect(container.firstChild).to.have.class(classes.vertical); expect(getByRole('slider')).to.have.attribute('aria-orientation', 'vertical'); }); @@ -289,7 +289,7 @@ describe('', () => { describe('prop: disabled', () => { it('should render the disabled classes', () => { const { container, getByRole } = render(); - expect(container.firstChild).to.have.class('Mui-disabled'); + expect(container.firstChild).to.have.class(classes.disabled); expect(getByRole('slider')).to.not.have.attribute('tabIndex'); }); @@ -320,7 +320,7 @@ describe('', () => { setProps({ disabled: true }); expect(thumb).not.toHaveFocus(); - expect(thumb).to.not.have.class('Mui-active'); + expect(thumb).to.not.have.class(classes.active); fireEvent.touchMove( container.firstChild, @@ -344,19 +344,19 @@ describe('', () => { }); setProps({ disabled: true }); expect(thumb).not.toHaveFocus(); - expect(thumb).to.not.have.class('Mui-focusVisible'); + expect(thumb).to.not.have.class(classes.focusVisible); }); }); describe('prop: track', () => { it('should render the track classes for false', () => { const { container } = render(); - expect(container.firstChild).to.have.class('MuiSlider-trackFalse'); + expect(container.firstChild).to.have.class(classes.trackFalse); }); it('should render the track classes for inverted', () => { const { container } = render(); - expect(container.firstChild).to.have.class('MuiSlider-trackInverted'); + expect(container.firstChild).to.have.class(classes.trackInverted); }); }); @@ -518,7 +518,7 @@ describe('', () => { it('should always display the value label according to on and off', () => { const { getByRole, setProps } = render(); const thumb = getByRole('slider'); - expect(thumb.firstChild).to.have.class('MuiSlider-valueLabelOpen'); + expect(thumb.firstChild).to.have.class(classes.valueLabelOpen); setProps({ valueLabelDisplay: 'off', @@ -531,11 +531,11 @@ describe('', () => { it('should display the value label only on hover for auto', () => { const { getByRole } = render(); const thumb = getByRole('slider'); - expect(thumb.firstChild).not.to.have.class('MuiSlider-valueLabelOpen'); + expect(thumb.firstChild).not.to.have.class(classes.valueLabelOpen); fireEvent.mouseOver(thumb); - expect(thumb.firstChild).to.have.class('MuiSlider-valueLabelOpen'); + expect(thumb.firstChild).to.have.class(classes.valueLabelOpen); }); it('should be respected when using custom value label', () => { @@ -569,8 +569,8 @@ describe('', () => { describe('markActive state', () => { function getActives(container) { - return Array.from(container.querySelectorAll('.MuiSlider-mark')).map((node) => - node.classList.contains('MuiSlider-markActive'), + return Array.from(container.querySelectorAll(`.${classes.mark}`)).map((node) => + node.classList.contains(classes.markActive), ); } @@ -734,10 +734,10 @@ describe('', () => { defaultValue={0} />, ); - expect(container.querySelectorAll('.MuiSlider-markLabel').length).to.equal(3); - expect(container.querySelectorAll('.MuiSlider-mark').length).to.equal(3); - expect(container.querySelectorAll('.MuiSlider-markLabel[data-index="2"]').length).to.equal(1); - expect(container.querySelectorAll('.MuiSlider-mark[data-index="2"]').length).to.equal(1); + expect(container.querySelectorAll(`.${classes.markLabel}`).length).to.equal(3); + expect(container.querySelectorAll(`.${classes.mark}`).length).to.equal(3); + expect(container.querySelectorAll(`.${classes.markLabel}[data-index="2"]`).length).to.equal(1); + expect(container.querySelectorAll(`.${classes.mark}[data-index="2"]`).length).to.equal(1); }); it('should pass "name" and "value" as part of the event.target for onChange', () => { From b5e2840e27512bd4d92744914cb6847235d2678d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 17 Nov 2020 14:52:41 +0100 Subject: [PATCH 094/102] prettier --- .../src/SliderUnstyled/sliderClasses.d.ts | 2 +- .../src/SliderUnstyled/sliderClasses.js | 2 +- packages/material-ui/src/Slider/Slider.js | 6 ++++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts index dd4816f50a30ca..2ff61ca14b266e 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts @@ -1,4 +1,4 @@ -type SliderClasses = { +interface SliderClasses { root: string; active: string; focusVisible: string; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js index f09b44b949a9af..58d3d400277ced 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js @@ -16,7 +16,7 @@ const sliderClasses = { rail: getUtilityClass('rail'), track: getUtilityClass('track'), mark: getUtilityClass('mark'), - markActive: getUtilityClass('markActive'), + markActive: getUtilityClass('markActive'), markLabel: getUtilityClass('markLabel'), markLabelActive: getUtilityClass('markLabelActive'), thumb: getUtilityClass('thumb'), diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 758d7a52590b9b..f04e043840b78d 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -1,7 +1,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { chainPropTypes } from '@material-ui/utils'; -import SliderUnstyled, { SliderValueLabelUnstyled, sliderClasses } from '@material-ui/unstyled/SliderUnstyled'; +import SliderUnstyled, { + SliderValueLabelUnstyled, + sliderClasses, +} from '@material-ui/unstyled/SliderUnstyled'; import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { alpha, lighten, darken } from '../styles/colorManipulator'; @@ -557,5 +560,4 @@ Slider.propTypes = { valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), }; - export default Slider; From bdf9a0fec4cc25033054aa1438304ae7050c9fcd Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 17 Nov 2020 15:23:42 +0100 Subject: [PATCH 095/102] lint --- packages/material-ui/src/Slider/Slider.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index f04e043840b78d..5e1aa452117f06 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -9,9 +9,10 @@ import useThemeProps from '../styles/useThemeProps'; import experimentalStyled from '../styles/experimentalStyled'; import { alpha, lighten, darken } from '../styles/colorManipulator'; import capitalize from '../utils/capitalize'; + export { sliderClasses } from '@material-ui/unstyled/SliderUnstyled'; -const overridesResolver = (props, styles, name) => { +const overridesResolver = (props, styles) => { const { color = 'primary', marks: marksProp = false, From 28336f1f12ae3f65edc6ad473bec626d0f56bc41 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 17 Nov 2020 16:43:08 +0100 Subject: [PATCH 096/102] docs:api --- docs/pages/api-docs/slider-styled.md | 95 -------------------------- docs/pages/api-docs/slider-unstyled.md | 2 +- docs/pages/api-docs/slider.md | 70 +++++++++---------- 3 files changed, 35 insertions(+), 132 deletions(-) delete mode 100644 docs/pages/api-docs/slider-styled.md diff --git a/docs/pages/api-docs/slider-styled.md b/docs/pages/api-docs/slider-styled.md deleted file mode 100644 index 9b3bad3e60ed7d..00000000000000 --- a/docs/pages/api-docs/slider-styled.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -filename: /packages/material-ui-lab/src/SliderStyled/SliderStyled.js ---- - - - -# SliderStyled API - -

The API documentation of the SliderStyled React component. Learn more about the props and the CSS customization points.

- -## Import - -```js -import SliderStyled from '@material-ui/lab/SliderStyled'; -// or -import { SliderStyled } from '@material-ui/lab'; -``` - -You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). - - - -## Component name - -The `MuiSlider` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| aria-label | string | | The label of the slider. | -| aria-labelledby | string | | The id of the element containing a label for the slider. | -| aria-valuetext | string | | A string value that provides a user-friendly name for the current value of the slider. | -| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | -| components | { Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType } | {} | The components used for each slot inside the Slider. Either a string to use a HTML element or a component. | -| componentsProps | object | | The props used for each slot inside the Slider. | -| defaultValue | Array<number>
| number | | The default element value. Use when the component is not controlled. | -| disabled | bool | | If `true`, the slider is disabled. | -| getAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.

**Signature:**
`function(index: number) => string`
*index:* The thumb label's index to format. | -| getAriaValueText | func | | Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.

**Signature:**
`function(value: number, index: number) => string`
*value:* The thumb label's value to format.
*index:* The thumb label's index to format. | -| isRtl | bool | | Indicates whether the theme context has rtl direction. It is set automatically. | -| marks | Array<{ label?: node, value: number }>
| bool | | Marks indicate predetermined values to which the user can move the slider. If `true` the marks are spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys. | -| max | number | | The maximum allowed value of the slider. Should not be equal to min. | -| min | number | | The minimum allowed value of the slider. Should not be equal to max. | -| name | string | | Name attribute of the hidden `input` element. | -| onChange | func | | Callback function that is fired when the slider's value changed.

**Signature:**
`function(event: object, value: number \| number[]) => void`
*event:* The event source of the callback. **Warning**: This is a generic event not a change event.
*value:* The new value. | -| onChangeCommitted | func | | Callback function that is fired when the `mouseup` is triggered.

**Signature:**
`function(event: object, value: number \| number[]) => void`
*event:* The event source of the callback. **Warning**: This is a generic event not a change event.
*value:* The new value. | -| orientation | 'horizontal'
| 'vertical' | | The slider orientation. | -| scale | func | | A transformation function, to change the scale of the slider. | -| step | number | | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. | -| sx | object | | The system prop that allows defining system overrides as well as additional CSS styles. | -| track | 'inverted'
| 'normal'
| false | | The track presentation:
- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. | -| value | Array<number>
| number | | The value of the slider. For ranged sliders, provide an array with two values. | -| valueLabelDisplay | 'auto'
| 'off'
| 'on' | | Controls when the value label is displayed:
- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. | -| valueLabelFormat | func
| string | | The format function the value label's value.
When a function is provided, it should have the following signature:
- {number} value The value label's value to format - {number} index The value label's index to format | - -The `ref` is forwarded to the root element. - -Any other props supplied will be provided to the root element (native element). - -## CSS - -| Rule name | Global class | Description | -|:-----|:-------------|:------------| -| root | .MuiSlider-root | Class name applied to the root element. -| colorPrimary | .MuiSlider-colorPrimary | Class name applied to the root element if `color="primary"`. -| colorSecondary | .MuiSlider-colorSecondary | Class name applied to the root element if `color="secondary"`. -| marked | .MuiSlider-marked | Class name applied to the root element if `marks` is provided with at least one label. -| vertical | .MuiSlider-vertical | Class name applied to the root element if `orientation="vertical"`. -| disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. -| rail | .MuiSlider-rail | Class name applied to the rail element. -| track | .MuiSlider-track | Class name applied to the track element. -| trackFalse | .MuiSlider-trackFalse | Class name applied to the track element if `track={false}`. -| trackInverted | .MuiSlider-trackInverted | Class name applied to the track element if `track="inverted"`. -| thumb | .MuiSlider-thumb | Class name applied to the thumb element. -| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Class name applied to the thumb element if `color="primary"`. -| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Class name applied to the thumb element if `color="secondary"`. -| active | .MuiSlider-active | Pseudo-class applied to the thumb element if it's active. -| focusVisible | .Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. -| valueLabel | .MuiSlider-valueLabel | Class name applied to the thumb label element. -| mark | .MuiSlider-mark | Class name applied to the mark element. -| markActive | .MuiSlider-markActive | Class name applied to the mark element if active (depending on the value). -| markLabel | .MuiSlider-markLabel | Class name applied to the mark label element. -| markLabelActive | .MuiSlider-markLabelActive | Class name applied to the mark label element if active (depending on the value). - -You can override the style of the component thanks to one of these customization points: - -- With a [global class name](/guides/interoperability/#global-css). -- With a rule name as part of the component's [`styleOverrides` property](/customization/components/#global-theme-override) in a custom theme. - -## Demos - -- [Slider Styled](/components/slider-styled/) - diff --git a/docs/pages/api-docs/slider-unstyled.md b/docs/pages/api-docs/slider-unstyled.md index 5e9f892309cae2..497db4ac579731 100644 --- a/docs/pages/api-docs/slider-unstyled.md +++ b/docs/pages/api-docs/slider-unstyled.md @@ -89,5 +89,5 @@ You can override the style of the component thanks to one of these customization ## Demos -- [Slider Styled](/components/slider-styled/) +- [Slider](/components/slider/) diff --git a/docs/pages/api-docs/slider.md b/docs/pages/api-docs/slider.md index 6e029129be5ee9..671ec19ad7bc80 100644 --- a/docs/pages/api-docs/slider.md +++ b/docs/pages/api-docs/slider.md @@ -32,27 +32,28 @@ The `MuiSlider` name can be used for providing [default props](/customization/gl | aria-labelledby | string | | The id of the element containing a label for the slider. | | aria-valuetext | string | | A string value that provides a user-friendly name for the current value of the slider. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | -| component | elementType | 'span' | The component used for the root node. Either a string to use a HTML element or a component. | +| color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | +| components | { Mark?: elementType, MarkLabel?: elementType, Rail?: elementType, Root?: elementType, Thumb?: elementType, Track?: elementType, ValueLabel?: elementType } | {} | The components used for each slot inside the Slider. Either a string to use a HTML element or a component. | +| componentsProps | object | | The props used for each slot inside the Slider. | | defaultValue | Array<number>
| number | | The default element value. Use when the component is not controlled. | -| disabled | bool | false | If `true`, the slider is disabled. | +| disabled | bool | | If `true`, the slider is disabled. | | getAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.

**Signature:**
`function(index: number) => string`
*index:* The thumb label's index to format. | | getAriaValueText | func | | Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.

**Signature:**
`function(value: number, index: number) => string`
*value:* The thumb label's value to format.
*index:* The thumb label's index to format. | -| marks | Array<{ label?: node, value: number }>
| bool | false | Marks indicate predetermined values to which the user can move the slider. If `true` the marks are spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys. | -| max | number | 100 | The maximum allowed value of the slider. Should not be equal to min. | -| min | number | 0 | The minimum allowed value of the slider. Should not be equal to max. | +| isRtl | bool | | Indicates whether the theme context has rtl direction. It is set automatically. | +| marks | Array<{ label?: node, value: number }>
| bool | | Marks indicate predetermined values to which the user can move the slider. If `true` the marks are spaced according the value of the `step` prop. If an array, it should contain objects with `value` and an optional `label` keys. | +| max | number | | The maximum allowed value of the slider. Should not be equal to min. | +| min | number | | The minimum allowed value of the slider. Should not be equal to max. | | name | string | | Name attribute of the hidden `input` element. | | onChange | func | | Callback function that is fired when the slider's value changed.

**Signature:**
`function(event: object, value: number \| number[]) => void`
*event:* The event source of the callback. **Warning**: This is a generic event not a change event.
*value:* The new value. | | onChangeCommitted | func | | Callback function that is fired when the `mouseup` is triggered.

**Signature:**
`function(event: object, value: number \| number[]) => void`
*event:* The event source of the callback. **Warning**: This is a generic event not a change event.
*value:* The new value. | -| orientation | 'horizontal'
| 'vertical' | 'horizontal' | The slider orientation. | -| scale | func | (x) => x | A transformation function, to change the scale of the slider. | -| step | number | 1 | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. | -| ThumbComponent | elementType | 'span' | The component used to display the value label. | -| track | 'inverted'
| 'normal'
| false | 'normal' | The track presentation:
- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. | +| orientation | 'horizontal'
| 'vertical' | | The slider orientation. | +| scale | func | | A transformation function, to change the scale of the slider. | +| step | number | | The granularity with which the slider can step through values. (A "discrete" slider.) The `min` prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. | +| sx | object | | The system prop that allows defining system overrides as well as additional CSS styles. | +| track | 'inverted'
| 'normal'
| false | | The track presentation:
- `normal` the track will render a bar representing the slider value. - `inverted` the track will render a bar representing the remaining slider value. - `false` the track will render without a bar. | | value | Array<number>
| number | | The value of the slider. For ranged sliders, provide an array with two values. | -| ValueLabelComponent | elementType | ValueLabel | The value label component. | -| valueLabelDisplay | 'auto'
| 'off'
| 'on' | 'off' | Controls when the value label is displayed:
- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. | -| valueLabelFormat | func
| string | (x) => x | The format function the value label's value.
When a function is provided, it should have the following signature:
- {number} value The value label's value to format - {number} index The value label's index to format | +| valueLabelDisplay | 'auto'
| 'off'
| 'on' | | Controls when the value label is displayed:
- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. | +| valueLabelFormat | func
| string | | The format function the value label's value.
When a function is provided, it should have the following signature:
- {number} value The value label's value to format - {number} index The value label's index to format | The `ref` is forwarded to the root element. @@ -62,34 +63,31 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| -| root | .MuiSlider-root | Styles applied to the root element. -| colorPrimary | .MuiSlider-colorPrimary | Styles applied to the root element if `color="primary"`. -| colorSecondary | .MuiSlider-colorSecondary | Styles applied to the root element if `color="secondary"`. -| marked | .MuiSlider-marked | Styles applied to the root element if `marks` is provided with at least one label. -| vertical | .MuiSlider-vertical | Pseudo-class applied to the root element if `orientation="vertical"`. +| root | .MuiSlider-root | Class name applied to the root element. +| colorPrimary | .MuiSlider-colorPrimary | Class name applied to the root element if `color="primary"`. +| colorSecondary | .MuiSlider-colorSecondary | Class name applied to the root element if `color="secondary"`. +| marked | .MuiSlider-marked | Class name applied to the root element if `marks` is provided with at least one label. +| vertical | .MuiSlider-vertical | Class name applied to the root element if `orientation="vertical"`. | disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. -| rail | .MuiSlider-rail | Styles applied to the rail element. -| track | .MuiSlider-track | Styles applied to the track element. -| trackFalse | .MuiSlider-trackFalse | Styles applied to the track element if `track={false}`. -| trackInverted | .MuiSlider-trackInverted | Styles applied to the track element if `track="inverted"`. -| thumb | .MuiSlider-thumb | Styles applied to the thumb element. -| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Styles applied to the thumb element if `color="primary"`. -| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Styles applied to the thumb element if `color="secondary"`. +| rail | .MuiSlider-rail | Class name applied to the rail element. +| track | .MuiSlider-track | Class name applied to the track element. +| trackFalse | .MuiSlider-trackFalse | Class name applied to the track element if `track={false}`. +| trackInverted | .MuiSlider-trackInverted | Class name applied to the track element if `track="inverted"`. +| thumb | .MuiSlider-thumb | Class name applied to the thumb element. +| thumbColorPrimary | .MuiSlider-thumbColorPrimary | Class name applied to the thumb element if `color="primary"`. +| thumbColorSecondary | .MuiSlider-thumbColorSecondary | Class name applied to the thumb element if `color="secondary"`. | active | .MuiSlider-active | Pseudo-class applied to the thumb element if it's active. | focusVisible | .Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. -| valueLabel | .MuiSlider-valueLabel | Styles applied to the thumb label element. -| mark | .MuiSlider-mark | Styles applied to the mark element. -| markActive | .MuiSlider-markActive | Styles applied to the mark element if active (depending on the value). -| markLabel | .MuiSlider-markLabel | Styles applied to the mark label element. -| markLabelActive | .MuiSlider-markLabelActive | Styles applied to the mark label element if active (depending on the value). +| valueLabel | .MuiSlider-valueLabel | Class name applied to the thumb label element. +| mark | .MuiSlider-mark | Class name applied to the mark element. +| markActive | .MuiSlider-markActive | Class name applied to the mark element if active (depending on the value). +| markLabel | .MuiSlider-markLabel | Class name applied to the mark label element. +| markLabelActive | .MuiSlider-markLabelActive | Class name applied to the mark label element if active (depending on the value). You can override the style of the component thanks to one of these customization points: -- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). -- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). -- With a theme and an [`overrides` property](/customization/globals/#css). - -If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Slider/Slider.js) for more detail. +- With a [global class name](/guides/interoperability/#global-css). +- With a rule name as part of the component's [`styleOverrides` property](/customization/components/#global-theme-override) in a custom theme. ## Demos From 6bad28d49afb07958bb519e8643162f358463647 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 17 Nov 2020 17:05:11 +0100 Subject: [PATCH 097/102] trigger build From 663df7b2d3da75ef46cf52d15cbccb5d1ce450f8 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 18 Nov 2020 11:00:19 +0100 Subject: [PATCH 098/102] converted sliderClasses to ts --- .../src/SliderUnstyled/sliderClasses.d.ts | 30 ------------------- .../{sliderClasses.js => sliderClasses.ts} | 15 ++++++++-- 2 files changed, 13 insertions(+), 32 deletions(-) delete mode 100644 packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts rename packages/material-ui-unstyled/src/SliderUnstyled/{sliderClasses.js => sliderClasses.ts} (74%) diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts deleted file mode 100644 index 2ff61ca14b266e..00000000000000 --- a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts +++ /dev/null @@ -1,30 +0,0 @@ -interface SliderClasses { - root: string; - active: string; - focusVisible: string; - colorPrimary: string; - colorSecondary: string; - disabled: string; - marked: string; - vertical: string; - trackInverted: string; - trackFalse: string; - rail: string; - track: string; - mark: string; - markActive: string; - markLabel: string; - markLabelActive: string; - thumb: string; - thumbPrimary: string; - thumbSecondary: string; - valueLabel: string; - valueLabelOffset: string; - valueLabelOpen: string; - valueLabelCircle: string; - valueLabelLabel: string; -} - -declare const sliderClasses: SliderClasses; - -export default sliderClasses; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.ts similarity index 74% rename from packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js rename to packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.ts index 58d3d400277ced..9c9eff9f7effee 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js +++ b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.ts @@ -1,8 +1,19 @@ -const getUtilityClass = (name) => { +import { SliderUnstyledTypeMap } from './SliderUnstyled'; + +const getUtilityClass = (name: string): string => { return `MuiSlider-${name}`; }; -const sliderClasses = { +const sliderClasses: NonNullable< + SliderUnstyledTypeMap['props']['classes'] & { + thumbPrimary: string; + thumbSecondary: string; + valueLabelOffset: string; + valueLabelOpen: string; + valueLabelCircle: string; + valueLabelLabel: string; + } +> = { root: getUtilityClass('root'), active: 'Mui-active', focusVisible: 'Mui-focusVisible', From 654419efe0aae027bdb6c27e177c7ba1118b3375 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 18 Nov 2020 11:14:07 +0100 Subject: [PATCH 099/102] broke circular dep --- .../src/SliderUnstyled/sliderClasses.ts | 38 +++++++++++++------ 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.ts b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.ts index 9c9eff9f7effee..6ce72554b643df 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.ts @@ -1,19 +1,35 @@ -import { SliderUnstyledTypeMap } from './SliderUnstyled'; +interface SliderClasses { + root: string; + active: string; + focusVisible: string; + colorPrimary: string; + colorSecondary: string; + disabled: string; + marked: string; + vertical: string; + trackInverted: string; + trackFalse: string; + rail: string; + track: string; + mark: string; + markActive: string; + markLabel: string; + markLabelActive: string; + thumb: string; + thumbPrimary: string; + thumbSecondary: string; + valueLabel: string; + valueLabelOffset: string; + valueLabelOpen: string; + valueLabelCircle: string; + valueLabelLabel: string; +} const getUtilityClass = (name: string): string => { return `MuiSlider-${name}`; }; -const sliderClasses: NonNullable< - SliderUnstyledTypeMap['props']['classes'] & { - thumbPrimary: string; - thumbSecondary: string; - valueLabelOffset: string; - valueLabelOpen: string; - valueLabelCircle: string; - valueLabelLabel: string; - } -> = { +const sliderClasses: SliderClasses = { root: getUtilityClass('root'), active: 'Mui-active', focusVisible: 'Mui-focusVisible', From ac5e3c3531f1358b37b4f52d0d1884e12b6201f1 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 18 Nov 2020 11:52:20 +0100 Subject: [PATCH 100/102] reverted slider classes changes --- .../src/SliderUnstyled/sliderClasses.d.ts | 30 ++++++++++++++++++ .../{sliderClasses.ts => sliderClasses.js} | 31 ++----------------- 2 files changed, 32 insertions(+), 29 deletions(-) create mode 100644 packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts rename packages/material-ui-unstyled/src/SliderUnstyled/{sliderClasses.ts => sliderClasses.js} (63%) diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts new file mode 100644 index 00000000000000..576ec8a862b438 --- /dev/null +++ b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts @@ -0,0 +1,30 @@ +interface SliderClasses { + root: string; + active: string; + focusVisible: string; + colorPrimary: string; + colorSecondary: string; + disabled: string; + marked: string; + vertical: string; + trackInverted: string; + trackFalse: string; + rail: string; + track: string; + mark: string; + markActive: string; + markLabel: string; + markLabelActive: string; + thumb: string; + thumbPrimary: string; + thumbSecondary: string; + valueLabel: string; + valueLabelOffset: string; + valueLabelOpen: string; + valueLabelCircle: string; + valueLabelLabel: string; +} + +declare const sliderClasses: SliderClasses; + +export default sliderClasses; diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.ts b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js similarity index 63% rename from packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.ts rename to packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js index 6ce72554b643df..58d3d400277ced 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.js @@ -1,35 +1,8 @@ -interface SliderClasses { - root: string; - active: string; - focusVisible: string; - colorPrimary: string; - colorSecondary: string; - disabled: string; - marked: string; - vertical: string; - trackInverted: string; - trackFalse: string; - rail: string; - track: string; - mark: string; - markActive: string; - markLabel: string; - markLabelActive: string; - thumb: string; - thumbPrimary: string; - thumbSecondary: string; - valueLabel: string; - valueLabelOffset: string; - valueLabelOpen: string; - valueLabelCircle: string; - valueLabelLabel: string; -} - -const getUtilityClass = (name: string): string => { +const getUtilityClass = (name) => { return `MuiSlider-${name}`; }; -const sliderClasses: SliderClasses = { +const sliderClasses = { root: getUtilityClass('root'), active: 'Mui-active', focusVisible: 'Mui-focusVisible', From c042f825cbbb1ebf93323cb7d57ce60bb8dbfc10 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 18 Nov 2020 12:01:35 +0100 Subject: [PATCH 101/102] prettier --- .../src/SliderUnstyled/sliderClasses.d.ts | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts index 576ec8a862b438..2ff61ca14b266e 100644 --- a/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts +++ b/packages/material-ui-unstyled/src/SliderUnstyled/sliderClasses.d.ts @@ -1,30 +1,30 @@ -interface SliderClasses { - root: string; - active: string; - focusVisible: string; - colorPrimary: string; - colorSecondary: string; - disabled: string; - marked: string; - vertical: string; - trackInverted: string; - trackFalse: string; - rail: string; - track: string; - mark: string; - markActive: string; - markLabel: string; - markLabelActive: string; - thumb: string; - thumbPrimary: string; - thumbSecondary: string; - valueLabel: string; - valueLabelOffset: string; - valueLabelOpen: string; - valueLabelCircle: string; - valueLabelLabel: string; -} +interface SliderClasses { + root: string; + active: string; + focusVisible: string; + colorPrimary: string; + colorSecondary: string; + disabled: string; + marked: string; + vertical: string; + trackInverted: string; + trackFalse: string; + rail: string; + track: string; + mark: string; + markActive: string; + markLabel: string; + markLabelActive: string; + thumb: string; + thumbPrimary: string; + thumbSecondary: string; + valueLabel: string; + valueLabelOffset: string; + valueLabelOpen: string; + valueLabelCircle: string; + valueLabelLabel: string; +} -declare const sliderClasses: SliderClasses; +declare const sliderClasses: SliderClasses; -export default sliderClasses; +export default sliderClasses; From 19f7742efde475899bd2bbca2d511109ce9a1938 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 18 Nov 2020 22:13:08 +0100 Subject: [PATCH 102/102] prettier --- packages/material-ui/src/Slider/Slider.d.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts index aa51270f4f5175..e5aeba5abab978 100644 --- a/packages/material-ui/src/Slider/Slider.d.ts +++ b/packages/material-ui/src/Slider/Slider.d.ts @@ -7,8 +7,6 @@ import { import { Theme } from '@material-ui/core/styles'; import { OverrideProps } from '../OverridableComponent'; - - export type SliderTypeMap< D extends React.ElementType = 'span', P = {}