RangeControl: Improve disabled rendering and interactions (#20723)

This update improves the UI rendering of the RangeControl, sepcifically by muting the Rail, Track, and Marks. The disabled prop is also passed along to the inner (number) Input and Reset value button.
WordPress · Mar 18, 2020 · f1b60d2 · f1b60d2
1 parent e6ad4bd
commit f1b60d2
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 5 deletions.
diff --git a/packages/components/src/range-control/index.js b/packages/components/src/range-control/index.js
@@ -203,6 +203,7 @@ const BaseRangeControl = forwardRef(
 						/>
 						<RangeRail
 							aria-hidden={ true }
+							disabled={ disabled }
 							marks={ marks }
 							max={ max }
 							min={ min }
@@ -212,6 +213,7 @@ const BaseRangeControl = forwardRef(
 						<Track
 							aria-hidden={ true }
 							className="components-range-control__track"
+							disabled={ disabled }
 							style={ { width: fillValueOffset } }
 						/>
 						<ThumbWrapper style={ offsetStyle }>
@@ -240,6 +242,7 @@ const BaseRangeControl = forwardRef(
 						<InputNumber
 							aria-label={ label }
 							className="components-range-control__number"
+							disabled={ disabled }
 							inputMode="decimal"
 							max={ max }
 							min={ min }
@@ -253,7 +256,7 @@ const BaseRangeControl = forwardRef(
 						<ActionRightWrapper>
 							<Button
 								className="components-range-control__reset"
-								disabled={ value === undefined }
+								disabled={ disabled || value === undefined }
 								isSecondary
 								isSmall
 								onClick={ handleOnReset }

diff --git a/packages/components/src/range-control/rail.js b/packages/components/src/range-control/rail.js
@@ -9,6 +9,7 @@ import RangeMark from './mark';
 import { MarksWrapper, Rail } from './styles/range-control-styles';
 
 export default function RangeRail( {
+	disabled = false,
 	marks = false,
 	min = 0,
 	max = 100,
@@ -18,9 +19,10 @@ export default function RangeRail( {
 } ) {
 	return (
 		<>
-			<Rail { ...restProps } />
+			<Rail disabled={ disabled } { ...restProps } />
 			{ marks && (
 				<Marks
+					disabled={ disabled }
 					marks={ marks }
 					min={ min }
 					max={ max }
@@ -32,7 +34,14 @@ export default function RangeRail( {
 	);
 }
 
-function Marks( { marks = false, min = 0, max = 100, step = 1, value = 0 } ) {
+function Marks( {
+	disabled = false,
+	marks = false,
+	min = 0,
+	max = 100,
+	step = 1,
+	value = 0,
+} ) {
 	const marksData = useMarks( { marks, min, max, step, value } );
 
 	return (
@@ -41,7 +50,12 @@ function Marks( { marks = false, min = 0, max = 100, step = 1, value = 0 } ) {
 			className="components-range-control__marks"
 		>
 			{ marksData.map( ( mark ) => (
-				<RangeMark { ...mark } key={ mark.key } aria-hidden="true" />
+				<RangeMark
+					{ ...mark }
+					key={ mark.key }
+					aria-hidden="true"
+					disabled={ disabled }
+				/>
 			) ) }
 		</MarksWrapper>
 	);

diff --git a/packages/components/src/range-control/stories/index.js b/packages/components/src/range-control/stories/index.js
@@ -25,10 +25,11 @@ const RangeControlWithState = ( props ) => {
 
 const DefaultExample = () => {
 	const [ isRtl, setIsRtl ] = useState( false );
+	const [ value, setValue ] = useState( undefined );
 
-	const rtl = boolean( 'RTL', false );
 	const props = {
 		allowReset: boolean( 'allowReset', false ),
+		disabled: boolean( 'disabled', false ),
 		label: text( 'label', 'Range Label' ),
 		help: text( 'help', '' ),
 		min: number( 'min', 0 ),
@@ -39,8 +40,12 @@ const DefaultExample = () => {
 		beforeIcon: text( 'beforeIcon', '' ),
 		afterIcon: text( 'afterIcon', '' ),
 		withInputField: boolean( 'withInputField', true ),
+		value,
+		onChange: setValue,
 	};
 
+	const rtl = boolean( 'RTL', false );
+
 	useEffect( () => {
 		if ( rtl !== isRtl ) {
 			setIsRtl( rtl );

diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js
@@ -53,6 +53,13 @@ export const AfterIconWrapper = styled.span`
 	${rtl( { marginLeft: 16 } )}
 `;
 
+const disabledRailBackgroundColor = ( { disabled } ) => {
+	if ( ! disabled ) return '';
+	return css( {
+		backgroundColor: color( 'lightGray.400' ),
+	} );
+};
+
 export const Rail = styled.span`
 	background-color: ${color( 'lightGray.600' )};
 	box-sizing: border-box;
@@ -64,8 +71,17 @@ export const Rail = styled.span`
 	position: absolute;
 	margin-top: 14px;
 	top: 0;
+
+	${disabledRailBackgroundColor};
 `;
 
+const disabledBackgroundColor = ( { disabled } ) => {
+	if ( ! disabled ) return '';
+	return css( {
+		backgroundColor: color( 'lightGray.800' ),
+	} );
+};
+
 export const Track = styled.span`
 	background-color: currentColor;
 	border-radius: 1px;
@@ -76,6 +92,8 @@ export const Track = styled.span`
 	position: absolute;
 	margin-top: 14px;
 	top: 0;
+
+	${disabledBackgroundColor};
 `;
 
 export const MarksWrapper = styled.span`
@@ -101,6 +119,7 @@ export const Mark = styled.span`
 	width: 1px;
 
 	${markFill};
+	${disabledBackgroundColor};
 `;
 
 const markLabelFill = ( { isFilled } ) => {