From d8413f8f4223402188692c434b9490c9e8510a0e Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 15 Aug 2018 09:32:36 +0200 Subject: [PATCH 01/10] [Slider] add thumb outline to hover, jumped and activated Follows material design spec. --- packages/material-ui-lab/src/Slider/Slider.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index 6371a2f38bdc3b..b59428185bab4f 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -24,6 +24,7 @@ export const styles = theme => { const colors = { primary: theme.palette.primary.main, disabled: theme.palette.grey[400], + thumbOutline: fade(theme.palette.primary.main, 0.16), }; return { @@ -100,12 +101,13 @@ export const styles = theme => { borderRadius: '50%', transition: commonTransitions, backgroundColor: colors.primary, - '&$focused': { - boxShadow: `0px 0px 0px 9px ${fade(colors.primary, 0.16)}`, + '&$focused, &:hover': { + boxShadow: `0px 0px 0px 9px ${colors.thumbOutline}`, }, '&$activated': { width: 17, height: 17, + boxShadow: `0px 0px 0px 18px ${colors.thumbOutline}`, transition: 'none', }, '&$disabled': { @@ -117,6 +119,7 @@ export const styles = theme => { '&$jumped': { width: 17, height: 17, + boxShadow: `0px 0px 0px 18px ${colors.thumbOutline}`, }, }, /* Class applied to the root element to trigger JSS nested styles if `reverse={true}` . */ From 0c6c3d835dd3880056b36f4960657275b5c640a8 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 15 Aug 2018 09:49:10 +0200 Subject: [PATCH 02/10] [Slider] fix box-shadow transitions Also fixes track outspacing thumb when using arrow keys while slider is focused. --- packages/material-ui-lab/src/Slider/Slider.js | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index b59428185bab4f..83f143b0080e5a 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -14,10 +14,14 @@ export const styles = theme => { easing: theme.transitions.easing.easeOut, }; - const commonTransitionsProperty = ['width', 'height', 'box-shadow', 'left', 'top']; - - const commonTransitions = theme.transitions.create( - commonTransitionsProperty, + const trackTransitions = theme.transitions.create(['width', 'height'], commonTransitionsOptions); + const thumbCommonTransitions = theme.transitions.create( + ['widh', 'height', 'left', 'top', 'box-shadow'], + commonTransitionsOptions, + ); + // no transition on the position + const thumbActivatedTransitions = theme.transitions.create( + ['widh', 'height', 'box-shadow'], commonTransitionsOptions, ); @@ -63,7 +67,7 @@ export const styles = theme => { top: '50%', height: 2, backgroundColor: colors.primary, - '&$focused, &$activated': { + '&$activated': { transition: 'none', }, '&$disabled': { @@ -80,13 +84,13 @@ export const styles = theme => { trackBefore: { zIndex: 1, left: 0, - transition: commonTransitions, + transition: trackTransitions, }, /* Styles applied to the track element after the thumb. */ trackAfter: { right: 0, opacity: 0.24, - transition: commonTransitions, + transition: trackTransitions, '&$vertical': { bottom: 0, }, @@ -99,7 +103,7 @@ export const styles = theme => { width: 12, height: 12, borderRadius: '50%', - transition: commonTransitions, + transition: thumbCommonTransitions, backgroundColor: colors.primary, '&$focused, &:hover': { boxShadow: `0px 0px 0px 9px ${colors.thumbOutline}`, @@ -108,7 +112,7 @@ export const styles = theme => { width: 17, height: 17, boxShadow: `0px 0px 0px 18px ${colors.thumbOutline}`, - transition: 'none', + transition: thumbActivatedTransitions, }, '&$disabled': { cursor: 'no-drop', From 0b0c61ed2301c1459f78b67693fed5d99407fddb Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 19 Aug 2018 17:03:14 +0200 Subject: [PATCH 03/10] [Slider] Adjust thumb size according to spec The thumb never resizes on any interaction in the new design spec. Only the outline changes. --- packages/material-ui-lab/src/Slider/Slider.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index 83f143b0080e5a..203deb647edd19 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -109,8 +109,6 @@ export const styles = theme => { boxShadow: `0px 0px 0px 9px ${colors.thumbOutline}`, }, '&$activated': { - width: 17, - height: 17, boxShadow: `0px 0px 0px 18px ${colors.thumbOutline}`, transition: thumbActivatedTransitions, }, @@ -121,8 +119,6 @@ export const styles = theme => { backgroundColor: colors.disabled, }, '&$jumped': { - width: 17, - height: 17, boxShadow: `0px 0px 0px 18px ${colors.thumbOutline}`, }, }, From 4fa3644a74c4f93d775ecff228872126feb180fe Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 23 Sep 2018 10:00:10 +0200 Subject: [PATCH 04/10] [Slider] Adjust root padding to accommodate for pressed outline --- packages/material-ui-lab/src/Slider/Slider.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index 382fcdde71be2e..09ccf56177ae4b 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -31,12 +31,18 @@ export const styles = theme => { thumbOutline: fade(theme.palette.primary.main, 0.16), }; + /** + * radius of the box-shadow when pressed + * hover should have a diameter equal to the pressed radius + */ + const pressedOutlineRadius = 9; + return { /* Styles applied to the root element. */ root: { position: 'relative', width: '100%', - padding: '16px 8px', + padding: pressedOutlineRadius * 2 + 2, cursor: 'pointer', WebkitTapHighlightColor: 'transparent', '&$disabled': { @@ -106,10 +112,10 @@ export const styles = theme => { transition: thumbCommonTransitions, backgroundColor: colors.primary, '&$focused, &:hover': { - boxShadow: `0px 0px 0px 9px ${colors.thumbOutline}`, + boxShadow: `0px 0px 0px ${pressedOutlineRadius}px ${colors.thumbOutline}`, }, '&$activated': { - boxShadow: `0px 0px 0px 18px ${colors.thumbOutline}`, + boxShadow: `0px 0px 0px ${pressedOutlineRadius * 2}px ${colors.thumbOutline}`, transition: thumbActivatedTransitions, }, '&$disabled': { @@ -119,7 +125,7 @@ export const styles = theme => { backgroundColor: colors.disabled, }, '&$jumped': { - boxShadow: `0px 0px 0px 18px ${colors.thumbOutline}`, + boxShadow: `0px 0px 0px ${pressedOutlineRadius * 2}px ${colors.thumbOutline}`, }, }, /* Class applied to the thumb element if custom thumb icon provided. */ From d77da83c04bd35804a3dea03d399d22ceba9be56 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 23 Sep 2018 14:33:15 +0200 Subject: [PATCH 05/10] [Slider] Use theme spacing instead of an arbitrary padding --- packages/material-ui-lab/src/Slider/Slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index 09ccf56177ae4b..6951dcaeaf4152 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -42,7 +42,7 @@ export const styles = theme => { root: { position: 'relative', width: '100%', - padding: pressedOutlineRadius * 2 + 2, + padding: pressedOutlineRadius * 2 + theme.spacing.unit, cursor: 'pointer', WebkitTapHighlightColor: 'transparent', '&$disabled': { From 3c706041d1739c7a8d262dbb2bd87eb81b1cc345 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Mon, 24 Sep 2018 01:06:47 +0200 Subject: [PATCH 06/10] [Slider] DO NOT MERGE Compare against crane theme --- docs/src/pages/lab/slider/SimpleSlider.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/pages/lab/slider/SimpleSlider.js b/docs/src/pages/lab/slider/SimpleSlider.js index b564e5a9116611..c6d98dc61554ad 100644 --- a/docs/src/pages/lab/slider/SimpleSlider.js +++ b/docs/src/pages/lab/slider/SimpleSlider.js @@ -6,6 +6,10 @@ import Slider from '@material-ui/lab/Slider'; const styles = { root: { + backgroundImage: + 'url(https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F19taN2gM0P-Iglvzq-i1853dQ-igWSaxB%2Fsliders-crane-ahero.png)', + backgroundPosition: '-190px -221px', + backgroundSize: '730px', width: 300, }, }; From fb8c6436d1db69f551e725aaeee71d58af6358d4 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Mon, 24 Sep 2018 14:23:04 +0200 Subject: [PATCH 07/10] Revert "[Slider] DO NOT MERGE Compare against crane theme" This reverts commit 3c706041d1739c7a8d262dbb2bd87eb81b1cc345. --- docs/src/pages/lab/slider/SimpleSlider.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/src/pages/lab/slider/SimpleSlider.js b/docs/src/pages/lab/slider/SimpleSlider.js index c6d98dc61554ad..b564e5a9116611 100644 --- a/docs/src/pages/lab/slider/SimpleSlider.js +++ b/docs/src/pages/lab/slider/SimpleSlider.js @@ -6,10 +6,6 @@ import Slider from '@material-ui/lab/Slider'; const styles = { root: { - backgroundImage: - 'url(https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F19taN2gM0P-Iglvzq-i1853dQ-igWSaxB%2Fsliders-crane-ahero.png)', - backgroundPosition: '-190px -221px', - backgroundSize: '730px', width: 300, }, }; From 1fd1e9dfdef0f4552c4a5515ffde5e8501e4a1ac Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Mon, 24 Sep 2018 14:48:40 +0200 Subject: [PATCH 08/10] [Slider] Remove padding to improve alignment capability --- docs/src/pages/lab/slider/CustomIconSlider.js | 5 +++++ docs/src/pages/lab/slider/DisabledSlider.js | 9 ++++++--- docs/src/pages/lab/slider/ReverseSlider.js | 7 +++++-- docs/src/pages/lab/slider/SimpleSlider.js | 10 +++++++++- docs/src/pages/lab/slider/StepSlider.js | 12 +++++++++++- docs/src/pages/lab/slider/VerticalSlider.js | 13 +++++++++++-- packages/material-ui-lab/src/Slider/Slider.js | 2 -- 7 files changed, 47 insertions(+), 11 deletions(-) diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js index faff39e7e32d4b..94cf4e782071ec 100644 --- a/docs/src/pages/lab/slider/CustomIconSlider.js +++ b/docs/src/pages/lab/slider/CustomIconSlider.js @@ -9,6 +9,9 @@ const styles = { root: { width: 300, }, + slider: { + padding: '22px 0px', + }, thumbIcon: { borderRadius: '50%', }, @@ -34,6 +37,7 @@ class CustomIconSlider extends React.Component {
Image thumb Icon thumb - - - + + +
); } diff --git a/docs/src/pages/lab/slider/ReverseSlider.js b/docs/src/pages/lab/slider/ReverseSlider.js index 6bf3ead624b9b2..5343f04007e90c 100644 --- a/docs/src/pages/lab/slider/ReverseSlider.js +++ b/docs/src/pages/lab/slider/ReverseSlider.js @@ -7,6 +7,9 @@ const styles = { root: { width: 300, }, + slider: { + padding: '22px 0px', + }, }; class ReverseSlider extends React.Component { @@ -24,8 +27,8 @@ class ReverseSlider extends React.Component { return (
- - + +
); } diff --git a/docs/src/pages/lab/slider/SimpleSlider.js b/docs/src/pages/lab/slider/SimpleSlider.js index b564e5a9116611..a95faf14812786 100644 --- a/docs/src/pages/lab/slider/SimpleSlider.js +++ b/docs/src/pages/lab/slider/SimpleSlider.js @@ -8,6 +8,9 @@ const styles = { root: { width: 300, }, + slider: { + padding: '22px 0px', + }, }; class SimpleSlider extends React.Component { @@ -26,7 +29,12 @@ class SimpleSlider extends React.Component { return (
Slider label - +
); } diff --git a/docs/src/pages/lab/slider/StepSlider.js b/docs/src/pages/lab/slider/StepSlider.js index 593b5800c9a108..be2c2faec09213 100644 --- a/docs/src/pages/lab/slider/StepSlider.js +++ b/docs/src/pages/lab/slider/StepSlider.js @@ -7,6 +7,9 @@ const styles = { root: { width: 300, }, + slider: { + padding: '22px 0px', + }, }; class StepSlider extends React.Component { @@ -24,7 +27,14 @@ class StepSlider extends React.Component { return (
- +
); } diff --git a/docs/src/pages/lab/slider/VerticalSlider.js b/docs/src/pages/lab/slider/VerticalSlider.js index 42fd8d6905a700..a02a674b44179a 100644 --- a/docs/src/pages/lab/slider/VerticalSlider.js +++ b/docs/src/pages/lab/slider/VerticalSlider.js @@ -8,6 +8,9 @@ const styles = { display: 'flex', height: 300, }, + slider: { + padding: '0px 22px', + }, }; class VerticalSlider extends React.Component { @@ -25,8 +28,14 @@ class VerticalSlider extends React.Component { return (
- - + +
); } diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index 6951dcaeaf4152..4236d75a119b59 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -42,7 +42,6 @@ export const styles = theme => { root: { position: 'relative', width: '100%', - padding: pressedOutlineRadius * 2 + theme.spacing.unit, cursor: 'pointer', WebkitTapHighlightColor: 'transparent', '&$disabled': { @@ -50,7 +49,6 @@ export const styles = theme => { }, '&$vertical': { height: '100%', - padding: '8px 16px', }, '&$reverse': { transform: 'scaleX(-1)', From 3da18d02998274e7478de69f0ecf091aa4ecc624 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Mon, 24 Sep 2018 14:50:12 +0200 Subject: [PATCH 09/10] [Slider] Remove box-shadow when disabled --- packages/material-ui-lab/src/Slider/Slider.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index 4236d75a119b59..9cf4dddc038805 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -76,6 +76,7 @@ export const styles = theme => { }, '&$disabled': { backgroundColor: colors.disabled, + boxShadow: 'none', }, '&$vertical': { transform: 'translate(-50%, 0)', From fbc79e4ff5d1055ff432281543df20327f28cd83 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 3 Oct 2018 11:49:02 +0200 Subject: [PATCH 10/10] [ci] Debug codecov failure