From c2d31cc5a68a171548064198c16c34cc64b59995 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 25 Sep 2020 17:15:54 +0200 Subject: [PATCH 01/20] 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 02/20] 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 03/20] 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 04/20] 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, 12 Nov 2020 12:23:45 +0100 Subject: [PATCH 05/20] 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 06/20] 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 07/20] 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 08/20] 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 09/20] 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 10/20] 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 11/20] 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 12/20] 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 13/20] 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 14/20] 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 15/20] 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 16/20] 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 17/20] 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 18/20] 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 19/20] 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 20/20] 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.