[RNMobile] RangeCell styling refactor (#18157)

* Revert package-lock.json * Setting attributes for spacer height * Correct the condition for setting maximum value * Small code refactor * Improve Accessibility in range-cell * More accessibility improvements * Small code refactor * Styling spacer refactor * Move logic to RangeCell * Keep Slider along with TextInput within RangeCell * Small cleanup * Fix missing binds * Fix focusing slider on iphoneX when VO is on * Adjust a11y voice over * Refactor RangeCell styles * Refactor pointerEvents when screen reader is on * Announce current value when finished * Small cleanup * Improve a11y * Fix a11y on iPhoneX * Refactor after CR * Update info for translators * Correct styles * Refactor texts localizing * fix allowReset prop * Patch allowReset * a11y improvements * Refactor custom button * Remove numberOfLines from cell label
WordPress · Nov 15, 2019 · 2e42f8c · 2e42f8c
1 parent 58d85bb
commit 2e42f8c
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 51 deletions.
diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js
@@ -49,7 +49,6 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor
 			<InspectorControls>
 				<PanelBody title={ __( 'Spacer Settings' ) } >
 					<RangeControl
-						icon={ 'admin-settings' }
 						label={ __( 'Height in pixels' ) }
 						minimumValue={ minSpacerHeight }
 						maximumValue={ sliderSpacerMaxHeight }

diff --git a/packages/components/src/mobile/bottom-sheet/borderStyles.android.scss b/packages/components/src/mobile/bottom-sheet/borderStyles.android.scss
@@ -0,0 +1,8 @@
+.borderStyle {
+	border-bottom-width: 1px;
+}
+
+.isSelected {
+	border-bottom-width: 2px;
+	border-color: $blue-wordpress;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/borderStyles.ios.scss b/packages/components/src/mobile/bottom-sheet/borderStyles.ios.scss
@@ -0,0 +1,9 @@
+.isSelected {
+	border-width: 2px;
+	border-color: $blue-wordpress;
+}
+
+.borderStyle {
+	border-width: 1px;
+	border-radius: 4px;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -71,12 +71,15 @@ class BottomSheetCell extends Component {
 			leftAlign,
 			labelStyle = {},
 			valueStyle = {},
+			cellContainerStyle = {},
+			cellRowContainerStyle = {},
 			onChangeValue,
 			children,
 			editable = true,
 			separatorType,
 			style = {},
 			getStylesFromColorScheme,
+			customActionButton,
 			...valueProps
 		} = this.props;
 
@@ -86,11 +89,14 @@ class BottomSheetCell extends Component {
 		const cellLabelCenteredStyle = getStylesFromColorScheme( styles.cellLabelCentered, styles.cellTextDark );
 		const cellLabelLeftAlignNoIconStyle = getStylesFromColorScheme( styles.cellLabelLeftAlignNoIcon, styles.cellTextDark );
 		const defaultMissingIconAndValue = leftAlign ? cellLabelLeftAlignNoIconStyle : cellLabelCenteredStyle;
-		const defaultLabelStyle = showValue || icon !== undefined ? cellLabelStyle : defaultMissingIconAndValue;
+		const defaultLabelStyle = showValue || icon !== undefined || customActionButton ? cellLabelStyle : defaultMissingIconAndValue;
 
 		const drawSeparator = ( separatorType && separatorType !== 'none' ) || separatorStyle === undefined;
 		const drawTopSeparator = drawSeparator && separatorType === 'topFullWidth';
 
+		const cellContainerStyles = [ styles.cellContainer, cellContainerStyle ];
+		const rowContainerStyles = [ styles.cellRowContainer, cellRowContainerStyle ];
+
 		const onCellPress = () => {
 			if ( isValueEditable ) {
 				startEditing();
@@ -183,7 +189,9 @@ class BottomSheetCell extends Component {
 		};
 
 		const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark );
+		const resetButtonStyle = getStylesFromColorScheme( styles.resetButton, styles.resetButtonDark );
 		const containerPointerEvents = this.state.isScreenReaderEnabled && accessible ? 'none' : 'auto';
+		const { title, handler } = customActionButton || {};
 
 		return (
 			<TouchableOpacity
@@ -196,22 +204,28 @@ class BottomSheetCell extends Component {
 					accessibilityHint
 				}
 				onPress={ onCellPress }
-				style={ { ...styles.clipToBounds, ...style } }
+				style={ [ styles.clipToBounds, style ] }
 			>
 				{ drawTopSeparator && (
 					<View style={ separatorStyle() } />
 				) }
-				<View style={ styles.cellContainer } pointerEvents={ containerPointerEvents }>
-					<View style={ styles.cellRowContainer }>
-						{ icon && (
-							<View style={ styles.cellRowContainer }>
-								<Dashicon icon={ icon } size={ 24 } color={ iconStyle.color } />
-								<View style={ platformStyles.labelIconSeparator } />
-							</View>
-						) }
-						<Text numberOfLines={ 1 } style={ [ defaultLabelStyle, labelStyle ] }>
-							{ label }
-						</Text>
+				<View style={ cellContainerStyles } pointerEvents={ containerPointerEvents }>
+					<View style={ rowContainerStyles }>
+						<View style={ styles.cellRowContainer }>
+							{ icon && (
+								<View style={ styles.cellRowContainer }>
+									<Dashicon icon={ icon } size={ 24 } color={ iconStyle.color } />
+									<View style={ platformStyles.labelIconSeparator } />
+								</View>
+							) }
+							<Text style={ [ defaultLabelStyle, labelStyle ] }>
+								{ label }
+							</Text>
+						</View>
+						{ customActionButton && <TouchableOpacity onPress={ handler } accessibilityRole={ 'button' }>
+							<Text style={ resetButtonStyle }>{ title }
+							</Text>
+						</TouchableOpacity> }
 					</View>
 					{ showValue && getValueComponent() }
 					{ children }

diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js
@@ -1,19 +1,21 @@
 /**
  * External dependencies
  */
-import { Platform, AccessibilityInfo, findNodeHandle, TextInput, Slider } from 'react-native';
+import { Platform, AccessibilityInfo, findNodeHandle, TextInput, Slider, View, PixelRatio, AppState } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { _x, __, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import Cell from './cell';
 import styles from './range-cell.scss';
+import borderStyles from './borderStyles.scss';
 
 class BottomSheetRangeCell extends Component {
 	constructor( props ) {
@@ -24,10 +26,12 @@ class BottomSheetRangeCell extends Component {
 		this.handleReset = this.handleReset.bind( this );
 		this.onChangeValue = this.onChangeValue.bind( this );
 		this.onCellPress = this.onCellPress.bind( this );
+		this.handleChangePixelRatio = this.handleChangePixelRatio.bind( this );
 
 		const initialValue = this.validateInput( props.value || props.defaultValue || props.minimumValue );
+		const fontScale = this.getFontScale();
 
-		this.state = { accessible: true, sliderValue: initialValue, initialValue, hasFocus: false };
+		this.state = { accessible: true, sliderValue: initialValue, initialValue, hasFocus: false, fontScale };
 	}
 
 	componentDidUpdate( ) {
@@ -37,8 +41,23 @@ class BottomSheetRangeCell extends Component {
 		}
 	}
 
+	componentDidMount() {
+		AppState.addEventListener( 'change', this.handleChangePixelRatio );
+	}
+
 	componentWillUnmount() {
 		this.handleToggleFocus();
+		AppState.removeEventListener( 'change', this.handleChangePixelRatio );
+	}
+
+	getFontScale() {
+		return PixelRatio.getFontScale() < 1 ? 1 : PixelRatio.getFontScale();
+	}
+
+	handleChangePixelRatio( nextAppState ) {
+		if ( nextAppState === 'active' ) {
+			this.setState( { fontScale: this.getFontScale() } );
+		}
 	}
 
 	handleChange( text ) {
@@ -115,13 +134,16 @@ class BottomSheetRangeCell extends Component {
 			maximumValue = 10,
 			disabled,
 			step = 1,
-			minimumTrackTintColor = '#00669b',
+			preferredColorScheme,
+			minimumTrackTintColor = preferredColorScheme === 'light' ? '#00669b' : '#5198d9',
 			maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090',
 			thumbTintColor = Platform.OS === 'android' && '#00669b',
+			getStylesFromColorScheme,
+			allowReset = true,
 			...cellProps
 		} = this.props;
 
-		const { hasFocus, sliderValue, accessible } = this.state;
+		const { hasFocus, sliderValue, accessible, fontScale } = this.state;
 
 		const accessibilityLabel =
 		sprintf(
@@ -130,49 +152,63 @@ class BottomSheetRangeCell extends Component {
 			cellProps.label, value
 		);
 
+		const defaultSliderStyle = getStylesFromColorScheme( styles.sliderTextInput, styles.sliderDarkTextInput );
+		const resetButtonText = Platform.OS === 'ios' ? __( 'Reset' ) : __( 'RESET' );
+		const resetButton = { title: resetButtonText, handler: this.handleReset };
+
 		return (
 			<Cell
 				{ ...cellProps }
+				cellContainerStyle={ styles.cellContainerStyles }
+				cellRowContainerStyle={ styles.cellRowStyles }
 				accessibilityRole={ 'none' }
 				editable={ false }
 				accessible={ accessible }
 				onPress={ this.onCellPress }
 				accessibilityLabel={ accessibilityLabel }
+				customActionButton={ allowReset ? resetButton : undefined }
 				accessibilityHint={
 					/* translators: accessibility text (hint for focusing a slider) */
 					__( 'Double tap to change the value using slider' )
 				}
 			>
-				<Slider
-					value={ this.validateInput( sliderValue ) }
-					defaultValue={ defaultValue }
-					disabled={ disabled }
-					step={ step }
-					minimumValue={ minimumValue }
-					maximumValue={ maximumValue }
-					minimumTrackTintColor={ minimumTrackTintColor }
-					maximumTrackTintColor={ maximumTrackTintColor }
-					thumbTintColor={ thumbTintColor }
-					onValueChange={ this.handleChange }
-					onSlidingComplete={ this.handleValueSave }
-					ref={ ( slider ) => {
-						this.sliderRef = slider;
-					} }
-					style={ styles.slider }
-					accessibilityRole={ 'adjustable' }
-				/>
-				<TextInput
-					style={ [ styles.sliderTextInput, hasFocus ? styles.isSelected : {} ] }
-					onChangeText={ this.handleChange }
-					onFocus={ this.handleToggleFocus }
-					onBlur={ this.handleToggleFocus }
-					keyboardType="number-pad"
-					returnKeyType="done"
-					value={ `${ sliderValue }` }
-				/>
+				<View style={ styles.container }>
+					<Slider
+						value={ this.validateInput( sliderValue ) }
+						defaultValue={ defaultValue }
+						disabled={ disabled }
+						step={ step }
+						minimumValue={ minimumValue }
+						maximumValue={ maximumValue }
+						minimumTrackTintColor={ minimumTrackTintColor }
+						maximumTrackTintColor={ maximumTrackTintColor }
+						thumbTintColor={ thumbTintColor }
+						onValueChange={ this.handleChange }
+						onSlidingComplete={ this.handleValueSave }
+						ref={ ( slider ) => {
+							this.sliderRef = slider;
+						} }
+						style={ styles.slider }
+						accessibilityRole={ 'adjustable' }
+					/>
+					<TextInput
+						style={ [
+							defaultSliderStyle,
+							borderStyles.borderStyle,
+							hasFocus && borderStyles.isSelected,
+							{ width: 40 * fontScale },
+						] }
+						onChangeText={ this.handleChange }
+						onFocus={ this.handleToggleFocus }
+						onBlur={ this.handleToggleFocus }
+						keyboardType="number-pad"
+						returnKeyType="done"
+						value={ `${ sliderValue }` }
+					/>
+				</View>
 			</Cell>
 		);
 	}
 }
 
-export default BottomSheetRangeCell;
+export default withPreferredColorScheme( BottomSheetRangeCell );
diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss
@@ -3,18 +3,38 @@
 }
 
 .sliderTextInput {
-	width: 40px;
-	height: 25px;
+	min-height: 25px;
 	align-self: center;
 	margin-left: 10px;
-	border-width: 1px;
-	border-radius: 4px;
-	border-color: $dark-gray-150;
+	border-color: $light-gray-400;
 	padding-top: 0;
 	padding-bottom: 0;
+	text-align: center;
+}
+
+.sliderDarkTextInput {
+	border-color: $gray-70;
 }
 
 .isSelected {
 	border-width: 2px;
 	border-color: $blue-wordpress;
 }
+
+.container {
+	flex-direction: row;
+	align-items: center;
+	min-height: 48px;
+}
+
+.cellContainerStyles {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.cellRowStyles {
+	min-height: 48px;
+	margin-bottom: -13px;
+	width: 100%;
+	justify-content: space-between;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss
@@ -76,6 +76,15 @@
 	padding: 5px;
 }
 
+.resetButton {
+	font-size: 17px;
+	color: $blue-wordpress;
+}
+
+.resetButtonDark {
+	color: $blue-30;
+}
+
 // Cell
 
 .cellContainer {
@@ -101,6 +110,7 @@
 .cellRowContainer {
 	flex-direction: row;
 	align-items: center;
+	flex-shrink: 1;
 }
 
 .cellIcon {