From 66c86e664656c9c2f4783eb5aca2eb05aa4ccf7e Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 29 Jan 2020 09:23:08 -0500 Subject: [PATCH] Remove color prop and shadow. Improve focus interaction Also add comments for hooks and functions --- .../components/src/range-control/README.md | 8 -- .../components/src/range-control/index.js | 17 ++- .../styles/range-control-styles.js | 11 +- storybook/test/__snapshots__/index.js.snap | 117 +++--------------- 4 files changed, 36 insertions(+), 117 deletions(-) diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md index e4157ab2906a51..5e82619709fa9b 100644 --- a/packages/components/src/range-control/README.md +++ b/packages/components/src/range-control/README.md @@ -152,14 +152,6 @@ If this property is true, a button to reset the the slider is rendered. - Required: No - Platform: Web | Mobile -#### color - -Color to render the filled range UI. - -- Type: `String` -- Required: No -- Platform: Web - #### disabled Disables the `input`, preventing new values from being applied. diff --git a/packages/components/src/range-control/index.js b/packages/components/src/range-control/index.js index d371588628cf80..a6cfbb1c98bd2f 100644 --- a/packages/components/src/range-control/index.js +++ b/packages/components/src/range-control/index.js @@ -79,6 +79,7 @@ const BaseRangeControlNext = forwardRef( const sliderValue = initialPosition || valueProp; const [ value, setValue ] = useControlledRangeValue( { min, max, value: sliderValue } ); const [ showTooltip, setShowTooltip ] = useState( showTooltipProp ); + const [ isFocused, setIsFocused ] = useState( false ); const originalValueRef = useRef( value ); const inputRef = useRef(); @@ -91,7 +92,7 @@ const BaseRangeControlNext = forwardRef( } }; - const isFocused = ! disabled && showTooltip; + const isThumbFocused = ! disabled && isFocused; const fillValue = ( ( value - min ) / ( max - min ) ) * 100; const fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`; @@ -130,11 +131,13 @@ const BaseRangeControlNext = forwardRef( const handleOnBlur = ( event ) => { onBlur( event ); + setIsFocused( false ); handleHideTooltip(); }; const handleOnFocus = ( event ) => { onFocus( event ); + setIsFocused( true ); handleShowTooltip(); }; @@ -197,7 +200,7 @@ const BaseRangeControlNext = forwardRef( style={ { width: fillValueOffset } } /> - + { enableTooltip && ( { return parseFloat( clamp( value, min, max ) ); }; } +/** + * Hook to store a clamped value, derived from props. + */ function useControlledRangeValue( { min, max, value: valueProp = 0 } ) { const clampValue = createClampValue( { min, max } ); @@ -279,6 +288,10 @@ function useControlledRangeValue( { min, max, value: valueProp = 0 } ) { return [ value, setValue ]; } +/** + * Hook to encapsulate the debouncing "hover" to better handle the showing + * and hiding of the Tooltip. + */ function useDebouncedHoverInteraction( { onShow = noop, onHide = noop, diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js index 876cafda17544e..dd4c31c03a4885 100644 --- a/packages/components/src/range-control/styles/range-control-styles.js +++ b/packages/components/src/range-control/styles/range-control-styles.js @@ -29,11 +29,11 @@ export const Root = styled.span` ${ rootWidth }; `; -const wrapperColor = ( { color: colorProp } ) => css( { color: colorProp } ); const wrapperMargin = ( { marks } ) => css( { marginBottom: marks ? 16 : null } ); export const Wrapper = styled.span` box-sizing: border-box; + color: ${ color( 'blue.medium.focus' ) }; display: block; padding-top: 15px; position: relative; @@ -41,7 +41,6 @@ export const Wrapper = styled.span` width: 100%; ${ rangeHeight }; - ${ wrapperColor }; ${ wrapperMargin }; [dir=rtl] & { @@ -167,14 +166,12 @@ const handleReducedMotion = () => { const thumbFocus = ( { isFocused } ) => { return css( { - borderColor: isFocused ? color( 'darkGray.400' ) : color( 'darkGray.200' ), + borderColor: isFocused ? color( 'blue.medium.focus' ) : color( 'darkGray.200' ), boxShadow: isFocused ? ` - 0 1px 2px rgba(0, 0, 0, 0.1), - 0 4px 8px rgba(0, 0, 0, 0.2) + 0 0 0 1px ${ color( 'blue.medium.focus' ) } ` : ` - 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0) `, } ); @@ -190,12 +187,10 @@ export const Thumb = styled.span` outline: 0; pointer-events: none; position: absolute; - transition: box-shadow 60ms linear; user-select: none; width: 100%; ${ thumbFocus }; - ${ handleReducedMotion }; `; export const InputRange = styled.input` diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 28ad3fc1e5a30d..d658ee2a2d93ee 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -3190,6 +3190,7 @@ exports[`Storyshots Components/FontSizePicker With Slider 1`] = ` .emotion-14 { box-sizing: border-box; + color: #007cba; display: block; padding-top: 15px; position: relative; @@ -3197,7 +3198,6 @@ exports[`Storyshots Components/FontSizePicker With Slider 1`] = ` width: 100%; height: 30px; min-height: 30px; - color: #00669b; } [dir=rtl] .emotion-14 { @@ -3290,22 +3290,13 @@ exports[`Storyshots Components/FontSizePicker With Slider 1`] = ` outline: 0; pointer-events: none; position: absolute; - -webkit-transition: box-shadow 60ms linear; - transition: box-shadow 60ms linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; border-color: #7e8993; - box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); -} - -@media (prefers-reduced-motion:reduce) { - .emotion-8 { - -webkit-transition: none !important; - transition: none !important; - } + box-shadow: 0 0 0 rgba(0,0,0,0); } .emotion-12 { @@ -4902,22 +4893,13 @@ exports[`Storyshots Components/RangeControl Custom Marks 1`] = ` outline: 0; pointer-events: none; position: absolute; - -webkit-transition: box-shadow 60ms linear; - transition: box-shadow 60ms linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; border-color: #7e8993; - box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); -} - -@media (prefers-reduced-motion:reduce) { - .emotion-28 { - -webkit-transition: none !important; - transition: none !important; - } + box-shadow: 0 0 0 rgba(0,0,0,0); } .emotion-32 { @@ -5000,6 +4982,7 @@ input[type="number"].emotion-36 { .emotion-34 { box-sizing: border-box; + color: #007cba; display: block; padding-top: 15px; position: relative; @@ -5007,7 +4990,6 @@ input[type="number"].emotion-36 { width: 100%; height: 30px; min-height: 30px; - color: #00669b; margin-bottom: 16px; } @@ -5303,6 +5285,7 @@ exports[`Storyshots Components/RangeControl Default 1`] = ` .emotion-10 { box-sizing: border-box; + color: #007cba; display: block; padding-top: 15px; position: relative; @@ -5310,7 +5293,6 @@ exports[`Storyshots Components/RangeControl Default 1`] = ` width: 100%; height: 30px; min-height: 30px; - color: #00669b; } [dir=rtl] .emotion-10 { @@ -5403,22 +5385,13 @@ exports[`Storyshots Components/RangeControl Default 1`] = ` outline: 0; pointer-events: none; position: absolute; - -webkit-transition: box-shadow 60ms linear; - transition: box-shadow 60ms linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; border-color: #7e8993; - box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); -} - -@media (prefers-reduced-motion:reduce) { - .emotion-6 { - -webkit-transition: none !important; - transition: none !important; - } + box-shadow: 0 0 0 rgba(0,0,0,0); } .emotion-12 { @@ -5553,6 +5526,7 @@ exports[`Storyshots Components/RangeControl Initial Value Zero 1`] = ` .emotion-12 { box-sizing: border-box; + color: #007cba; display: block; padding-top: 15px; position: relative; @@ -5560,7 +5534,6 @@ exports[`Storyshots Components/RangeControl Initial Value Zero 1`] = ` width: 100%; height: 30px; min-height: 30px; - color: #00669b; } [dir=rtl] .emotion-12 { @@ -5653,22 +5626,13 @@ exports[`Storyshots Components/RangeControl Initial Value Zero 1`] = ` outline: 0; pointer-events: none; position: absolute; - -webkit-transition: box-shadow 60ms linear; - transition: box-shadow 60ms linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; border-color: #7e8993; - box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); -} - -@media (prefers-reduced-motion:reduce) { - .emotion-6 { - -webkit-transition: none !important; - transition: none !important; - } + box-shadow: 0 0 0 rgba(0,0,0,0); } .emotion-10 { @@ -5868,6 +5832,7 @@ exports[`Storyshots Components/RangeControl With Help 1`] = ` .emotion-12 { box-sizing: border-box; + color: #007cba; display: block; padding-top: 15px; position: relative; @@ -5875,7 +5840,6 @@ exports[`Storyshots Components/RangeControl With Help 1`] = ` width: 100%; height: 30px; min-height: 30px; - color: #00669b; } [dir=rtl] .emotion-12 { @@ -5968,22 +5932,13 @@ exports[`Storyshots Components/RangeControl With Help 1`] = ` outline: 0; pointer-events: none; position: absolute; - -webkit-transition: box-shadow 60ms linear; - transition: box-shadow 60ms linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; border-color: #7e8993; - box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); -} - -@media (prefers-reduced-motion:reduce) { - .emotion-6 { - -webkit-transition: none !important; - transition: none !important; - } + box-shadow: 0 0 0 rgba(0,0,0,0); } .emotion-10 { @@ -6190,6 +6145,7 @@ exports[`Storyshots Components/RangeControl With Icon After 1`] = ` .emotion-12 { box-sizing: border-box; + color: #007cba; display: block; padding-top: 15px; position: relative; @@ -6197,7 +6153,6 @@ exports[`Storyshots Components/RangeControl With Icon After 1`] = ` width: 100%; height: 30px; min-height: 30px; - color: #00669b; } [dir=rtl] .emotion-12 { @@ -6290,22 +6245,13 @@ exports[`Storyshots Components/RangeControl With Icon After 1`] = ` outline: 0; pointer-events: none; position: absolute; - -webkit-transition: box-shadow 60ms linear; - transition: box-shadow 60ms linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; border-color: #7e8993; - box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); -} - -@media (prefers-reduced-motion:reduce) { - .emotion-6 { - -webkit-transition: none !important; - transition: none !important; - } + box-shadow: 0 0 0 rgba(0,0,0,0); } .emotion-10 { @@ -6541,6 +6487,7 @@ exports[`Storyshots Components/RangeControl With Icon Before 1`] = ` .emotion-14 { box-sizing: border-box; + color: #007cba; display: block; padding-top: 15px; position: relative; @@ -6548,7 +6495,6 @@ exports[`Storyshots Components/RangeControl With Icon Before 1`] = ` width: 100%; height: 30px; min-height: 30px; - color: #00669b; } [dir=rtl] .emotion-14 { @@ -6641,22 +6587,13 @@ exports[`Storyshots Components/RangeControl With Icon Before 1`] = ` outline: 0; pointer-events: none; position: absolute; - -webkit-transition: box-shadow 60ms linear; - transition: box-shadow 60ms linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; border-color: #7e8993; - box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); -} - -@media (prefers-reduced-motion:reduce) { - .emotion-8 { - -webkit-transition: none !important; - transition: none !important; - } + box-shadow: 0 0 0 rgba(0,0,0,0); } .emotion-12 { @@ -6874,6 +6811,7 @@ exports[`Storyshots Components/RangeControl With Minimum And Maximum Limits 1`] .emotion-12 { box-sizing: border-box; + color: #007cba; display: block; padding-top: 15px; position: relative; @@ -6881,7 +6819,6 @@ exports[`Storyshots Components/RangeControl With Minimum And Maximum Limits 1`] width: 100%; height: 30px; min-height: 30px; - color: #00669b; } [dir=rtl] .emotion-12 { @@ -6974,22 +6911,13 @@ exports[`Storyshots Components/RangeControl With Minimum And Maximum Limits 1`] outline: 0; pointer-events: none; position: absolute; - -webkit-transition: box-shadow 60ms linear; - transition: box-shadow 60ms linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; border-color: #7e8993; - box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); -} - -@media (prefers-reduced-motion:reduce) { - .emotion-6 { - -webkit-transition: none !important; - transition: none !important; - } + box-shadow: 0 0 0 rgba(0,0,0,0); } .emotion-10 { @@ -7189,6 +7117,7 @@ exports[`Storyshots Components/RangeControl With Reset 1`] = ` .emotion-12 { box-sizing: border-box; + color: #007cba; display: block; padding-top: 15px; position: relative; @@ -7196,7 +7125,6 @@ exports[`Storyshots Components/RangeControl With Reset 1`] = ` width: 100%; height: 30px; min-height: 30px; - color: #00669b; } [dir=rtl] .emotion-12 { @@ -7289,22 +7217,13 @@ exports[`Storyshots Components/RangeControl With Reset 1`] = ` outline: 0; pointer-events: none; position: absolute; - -webkit-transition: box-shadow 60ms linear; - transition: box-shadow 60ms linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; border-color: #7e8993; - box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); -} - -@media (prefers-reduced-motion:reduce) { - .emotion-6 { - -webkit-transition: none !important; - transition: none !important; - } + box-shadow: 0 0 0 rgba(0,0,0,0); } .emotion-10 {