From 62806a5571cdb4a7196efa8bc1e9a79ee1082788 Mon Sep 17 00:00:00 2001 From: Matt Hooper Date: Wed, 23 Oct 2019 15:14:16 -0600 Subject: [PATCH 1/3] move & to front of selector --- packages/material-ui/src/Slider/Slider.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 615a16162b421a..646765b746e24c 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -183,7 +183,7 @@ export const styles = theme => ({ borderRadius: 1, backgroundColor: 'currentColor', opacity: 0.38, - '$vertical &': { + '&$vertical': { height: '100%', width: 2, }, @@ -195,7 +195,7 @@ export const styles = theme => ({ height: 2, borderRadius: 1, backgroundColor: 'currentColor', - '$vertical &': { + '& $vertical': { width: 2, }, }, @@ -244,7 +244,7 @@ export const styles = theme => ({ '&$active': { boxShadow: `0px 0px 0px 14px ${fade(theme.palette.primary.main, 0.16)}`, }, - '$disabled &': { + '& $disabled': { pointerEvents: 'none', width: 8, height: 8, @@ -254,11 +254,11 @@ export const styles = theme => ({ boxShadow: 'none', }, }, - '$vertical &': { + '& $vertical': { marginLeft: -5, marginBottom: -6, }, - '$vertical$disabled &': { + '& $vertical$disabled': { marginLeft: -3, marginBottom: -4, }, @@ -303,7 +303,7 @@ export const styles = theme => ({ top: 22, transform: 'translateX(-50%)', whiteSpace: 'nowrap', - '$vertical &': { + '& $vertical': { top: 'auto', left: 22, transform: 'translateY(50%)', From 46f349e9efdd9481057c8ae6fd669ffb30879a28 Mon Sep 17 00:00:00 2001 From: Matt Hooper Date: Wed, 23 Oct 2019 15:15:32 -0600 Subject: [PATCH 2/3] add space --- 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 646765b746e24c..57bc193897d6bf 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -183,7 +183,7 @@ export const styles = theme => ({ borderRadius: 1, backgroundColor: 'currentColor', opacity: 0.38, - '&$vertical': { + '& $vertical': { height: '100%', width: 2, }, From fdbc01b090ad3fff03b49341c39307fe5c3f3fcf Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 24 Oct 2019 11:34:36 +0200 Subject: [PATCH 3/3] avoid leak --- docs/pages/api/slider.md | 2 +- packages/material-ui/src/Slider/Slider.js | 27 +++++++++-------------- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/docs/pages/api/slider.md b/docs/pages/api/slider.md index 50e1b02278b984..6b653336e4a71a 100644 --- a/docs/pages/api/slider.md +++ b/docs/pages/api/slider.md @@ -65,7 +65,7 @@ Any other props supplied will be provided to the root element (native element). | 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 element if `disabled={true}`. +| 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}`. diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 57bc193897d6bf..9d7a6bde311b7a 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -145,6 +145,7 @@ export const styles = theme => ({ // Remove grey highlight WebkitTapHighlightColor: 'transparent', '&$disabled': { + pointerEvents: 'none', cursor: 'default', color: theme.palette.grey[400], }, @@ -172,7 +173,7 @@ export const styles = theme => ({ }, /* Pseudo-class applied to the root element if `orientation="vertical"`. */ vertical: {}, - /* Pseudo-class applied to the root element if `disabled={true}`. */ + /* Pseudo-class applied to the root and thumb element if `disabled={true}`. */ disabled: {}, /* Styles applied to the rail element. */ rail: { @@ -183,7 +184,7 @@ export const styles = theme => ({ borderRadius: 1, backgroundColor: 'currentColor', opacity: 0.38, - '& $vertical': { + '$vertical &': { height: '100%', width: 2, }, @@ -195,7 +196,7 @@ export const styles = theme => ({ height: 2, borderRadius: 1, backgroundColor: 'currentColor', - '& $vertical': { + '$vertical &': { width: 2, }, }, @@ -244,8 +245,7 @@ export const styles = theme => ({ '&$active': { boxShadow: `0px 0px 0px 14px ${fade(theme.palette.primary.main, 0.16)}`, }, - '& $disabled': { - pointerEvents: 'none', + '&$disabled': { width: 8, height: 8, marginLeft: -4, @@ -254,11 +254,11 @@ export const styles = theme => ({ boxShadow: 'none', }, }, - '& $vertical': { + '$vertical &': { marginLeft: -5, marginBottom: -6, }, - '& $vertical$disabled': { + '$vertical &$disabled': { marginLeft: -3, marginBottom: -4, }, @@ -303,7 +303,7 @@ export const styles = theme => ({ top: 22, transform: 'translateX(-50%)', whiteSpace: 'nowrap', - '& $vertical': { + '$vertical &': { top: 'auto', left: 22, transform: 'translateY(50%)', @@ -617,10 +617,6 @@ const Slider = React.forwardRef(function Slider(props, ref) { }); React.useEffect(() => { - if (disabled) { - return () => {}; - } - const { current: slider } = sliderRef; slider.addEventListener('touchstart', handleTouchStart); @@ -632,7 +628,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { document.body.removeEventListener('touchmove', handleTouchMove); document.body.removeEventListener('touchend', handleTouchEnd); }; - }, [disabled, handleMouseEnter, handleTouchEnd, handleTouchMove, handleTouchStart]); + }, [handleMouseEnter, handleTouchEnd, handleTouchMove, handleTouchStart]); if (process.env.NODE_ENV !== 'production') { // eslint-disable-next-line react-hooks/rules-of-hooks @@ -658,10 +654,6 @@ const Slider = React.forwardRef(function Slider(props, ref) { onMouseDown(event); } - if (disabled) { - return; - } - event.preventDefault(); const finger = trackFinger(event, touchId); const { newValue, activeIndex } = getFingerNewValue({ finger, values, source: valueDerived }); @@ -764,6 +756,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {