From 5f3a400a4f031ec52eb82ca6f2fbe8eb4328d39b Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 17 Oct 2019 13:40:22 +0200 Subject: [PATCH 01/29] Revert package-lock.json --- packages/block-library/src/index.native.js | 1 + .../block-library/src/spacer/edit.native.js | 62 +++++++++++++++++++ .../src/spacer/editor.native.scss | 11 ++++ 3 files changed, 74 insertions(+) create mode 100644 packages/block-library/src/spacer/edit.native.js create mode 100644 packages/block-library/src/spacer/editor.native.scss diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 41806df19dc178..4819e55dc6d4bc 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -144,6 +144,7 @@ export const registerCoreBlocks = () => { !! __DEV__ ? mediaText : null, // eslint-disable-next-line no-undef !! __DEV__ ? group : null, + spacer, ].forEach( registerBlock ); setDefaultBlockName( paragraph.name ); diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js new file mode 100644 index 00000000000000..e2862a57a2e8c3 --- /dev/null +++ b/packages/block-library/src/spacer/edit.native.js @@ -0,0 +1,62 @@ + +/** + * External dependencies + */ +import React from 'react'; +import { View } from 'react-native'; +/** + * WordPress dependencies + */ +import { + PanelBody, + BottomSheet, +} from '@wordpress/components'; +import { useState } from '@wordpress/element'; +import { + InspectorControls, +} from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import styles from './editor.scss'; + +const minSpacerHeight = 20; +const maxSpacerHeight = 500; + +const SpacerEdit = ( { isSelected } ) => { + const [ spacerHeight, setSpacerHeight ] = useState( 20 ); + + const changeSpacerHeight = ( value ) => { + if ( value < minSpacerHeight ) { + return setSpacerHeight( minSpacerHeight ); + } else if ( value > maxSpacerHeight ) { + return setSpacerHeight( maxSpacerHeight ); + } return setSpacerHeight( value ); + }; + + const getInspectorControls = () => ( + + + changeSpacerHeight( value ) } + /> + + + ); + + return ( + + { getInspectorControls() } + + ); +}; + +export default SpacerEdit; diff --git a/packages/block-library/src/spacer/editor.native.scss b/packages/block-library/src/spacer/editor.native.scss new file mode 100644 index 00000000000000..be73b29bde5841 --- /dev/null +++ b/packages/block-library/src/spacer/editor.native.scss @@ -0,0 +1,11 @@ +.staticSpacer { + height: 20px; + max-height: 500px; + background-color: $white; + border: $border-width dashed $light-gray-500; + border-radius: 1px; +} + +.selectedSpacer { + border: $border-width solid $blue-wordpress; +} From 335154d000bd539a70621708b37e8af00cfec518 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 18 Oct 2019 12:54:47 +0200 Subject: [PATCH 02/29] Setting attributes for spacer height --- .../block-library/src/spacer/edit.native.js | 53 ++++++++++--------- .../src/spacer/editor.native.scss | 1 - 2 files changed, 28 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index e2862a57a2e8c3..c7e75a1dfd7181 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -2,7 +2,6 @@ /** * External dependencies */ -import React from 'react'; import { View } from 'react-native'; /** * WordPress dependencies @@ -25,36 +24,40 @@ import styles from './editor.scss'; const minSpacerHeight = 20; const maxSpacerHeight = 500; -const SpacerEdit = ( { isSelected } ) => { - const [ spacerHeight, setSpacerHeight ] = useState( 20 ); +const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { + const { height } = attributes; + const [ sliderSpacerHeight, setSpacerHeight ] = useState( height ); const changeSpacerHeight = ( value ) => { - if ( value < minSpacerHeight ) { - return setSpacerHeight( minSpacerHeight ); - } else if ( value > maxSpacerHeight ) { - return setSpacerHeight( maxSpacerHeight ); - } return setSpacerHeight( value ); + let spacerHeight = value; + setSpacerHeight( spacerHeight ); + if ( spacerHeight < minSpacerHeight ) { + spacerHeight = minSpacerHeight; + } else if ( spacerHeight > maxSpacerHeight ) { + spacerHeight = maxSpacerHeight; + } + setAttributes( { + height: spacerHeight, + } ); }; - const getInspectorControls = () => ( - - - changeSpacerHeight( value ) } - /> - - - ); + const maximumValue = height > maxSpacerHeight ? height * 2 : maxSpacerHeight; return ( - - { getInspectorControls() } + + + + changeSpacerHeight( value ) } + /> + + ); }; diff --git a/packages/block-library/src/spacer/editor.native.scss b/packages/block-library/src/spacer/editor.native.scss index be73b29bde5841..a71ba3341755af 100644 --- a/packages/block-library/src/spacer/editor.native.scss +++ b/packages/block-library/src/spacer/editor.native.scss @@ -1,6 +1,5 @@ .staticSpacer { height: 20px; - max-height: 500px; background-color: $white; border: $border-width dashed $light-gray-500; border-radius: 1px; From d137d38125130b0899c7c6d01d765b6058544c86 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 21 Oct 2019 12:09:26 +0200 Subject: [PATCH 03/29] Correct the condition for setting maximum value --- .../block-library/src/spacer/edit.native.js | 20 ++++++++++++------- .../mobile/bottom-sheet/range-cell.native.js | 2 +- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index c7e75a1dfd7181..a9938e51b1c48a 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -10,7 +10,7 @@ import { PanelBody, BottomSheet, } from '@wordpress/components'; -import { useState } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; import { InspectorControls, } from '@wordpress/block-editor'; @@ -27,32 +27,38 @@ const maxSpacerHeight = 500; const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { const { height } = attributes; const [ sliderSpacerHeight, setSpacerHeight ] = useState( height ); + const [ sliderSpacerMaxHeight, setSpacerMaxHeight ] = useState( height ); + + // Height defined on the web can be higher than + // `maxSpacerHeight`, so there is a need to `setSpacerMaxHeight` + // after the initial render. + useEffect( () => { + setSpacerMaxHeight( height > maxSpacerHeight ? height * 2 : maxSpacerHeight ); + }, [] ); const changeSpacerHeight = ( value ) => { let spacerHeight = value; setSpacerHeight( spacerHeight ); if ( spacerHeight < minSpacerHeight ) { spacerHeight = minSpacerHeight; - } else if ( spacerHeight > maxSpacerHeight ) { - spacerHeight = maxSpacerHeight; + } else if ( spacerHeight > sliderSpacerMaxHeight ) { + spacerHeight = sliderSpacerMaxHeight; } setAttributes( { height: spacerHeight, } ); }; - const maximumValue = height > maxSpacerHeight ? height * 2 : maxSpacerHeight; - return ( changeSpacerHeight( value ) } /> diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 07b343e9ec0781..573b2a958744bc 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -20,7 +20,7 @@ export default function BottomSheetRangeCell( props ) { step = 1, minimumTrackTintColor = '#00669b', maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', - thumbTintColor = Platform.OS === 'ios' ? '#fff' : '#00669b', + thumbTintColor = Platform.OS === 'android' && '#00669b', ...cellProps } = props; From ae5715f841b9d4f98c01a67307abbcf11a9a48a0 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 23 Oct 2019 10:34:40 +0200 Subject: [PATCH 04/29] Small code refactor --- packages/block-library/src/spacer/edit.native.js | 2 +- packages/block-library/src/spacer/editor.native.scss | 2 +- packages/components/src/mobile/slider/index.native.js | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index a9938e51b1c48a..975773a4be7e19 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -52,7 +52,7 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { return ( - + Date: Wed, 23 Oct 2019 14:13:08 +0200 Subject: [PATCH 05/29] Improve Accessibility in range-cell --- .../src/mobile/bottom-sheet/cell.native.js | 3 ++- .../mobile/bottom-sheet/range-cell.native.js | 26 +++++++++++++++++-- .../src/mobile/slider/index.native.js | 2 ++ 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 52ff00b6b5b856..8e36025ad47071 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -34,6 +34,7 @@ class BottomSheetCell extends Component { render() { const { + accessible, accessibilityLabel, accessibilityHint, accessibilityRole, @@ -160,7 +161,7 @@ class BottomSheetCell extends Component { return ( { + onChangeAccessible( false ); + if ( this.sliderRef ) { + const reactTag = findNodeHandle( this.sliderRef ); + AccessibilityInfo.setAccessibilityFocus( reactTag ); + } + }; return ( { + this.sliderRef = slider; + } } + accessibilityRole={ 'adjustable' } /> ); diff --git a/packages/components/src/mobile/slider/index.native.js b/packages/components/src/mobile/slider/index.native.js index 286e68aaa3f2aa..42907d22b4f50c 100644 --- a/packages/components/src/mobile/slider/index.native.js +++ b/packages/components/src/mobile/slider/index.native.js @@ -87,6 +87,7 @@ class Slider extends Component { minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, + ...sliderProps } = this.props; const { hasFocus, sliderValue } = this.state; @@ -105,6 +106,7 @@ class Slider extends Component { thumbTintColor={ thumbTintColor } onValueChange={ this.handleChange } onSlidingComplete={ this.handleValueSave } + { ...sliderProps } /> Date: Wed, 23 Oct 2019 15:57:25 +0200 Subject: [PATCH 06/29] More accessibility improvements --- .../src/mobile/bottom-sheet/range-cell.native.js | 16 ++++++++++++++-- .../components/src/mobile/slider/index.native.js | 4 ++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index bb9c28663d65e6..cca34227120c20 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -5,7 +5,7 @@ import { Platform, AccessibilityInfo, findNodeHandle } from 'react-native'; /** * WordPress dependencies */ -import { sprintf } from '@wordpress/i18n'; +import { _x, __, sprintf } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; /** @@ -38,6 +38,13 @@ export default function BottomSheetRangeCell( props ) { } }; + const accessibilityLabel = + sprintf( + /* translators: accessibility text. Inform about current spacer height value. %2$s: Spacer height current value. */ + _x( '%1$s. Current value is %2$s px', 'range cell' ), + cellProps.label, value + ); + return ( ); diff --git a/packages/components/src/mobile/slider/index.native.js b/packages/components/src/mobile/slider/index.native.js index 42907d22b4f50c..19827c8b9a4294 100644 --- a/packages/components/src/mobile/slider/index.native.js +++ b/packages/components/src/mobile/slider/index.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { Slider as RNSlider, TextInput, View } from 'react-native'; +import { Slider as RNSlider, TextInput, View, Platform } from 'react-native'; /** * WordPress dependencies @@ -93,7 +93,7 @@ class Slider extends Component { const { hasFocus, sliderValue } = this.state; return ( - + Date: Wed, 23 Oct 2019 17:40:19 +0200 Subject: [PATCH 07/29] Small code refactor --- packages/block-library/src/index.native.js | 3 ++- .../components/src/mobile/bottom-sheet/range-cell.native.js | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index ca673bf13c0bc3..c5485580538d18 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -144,7 +144,8 @@ export const registerCoreBlocks = () => { mediaText, // eslint-disable-next-line no-undef !! __DEV__ ? group : null, - spacer, + // eslint-disable-next-line no-undef + !! __DEV__ ? spacer : null, ].forEach( registerBlock ); setDefaultBlockName( paragraph.name ); diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index cca34227120c20..09089c11753bae 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -40,8 +40,8 @@ export default function BottomSheetRangeCell( props ) { const accessibilityLabel = sprintf( - /* translators: accessibility text. Inform about current spacer height value. %2$s: Spacer height current value. */ - _x( '%1$s. Current value is %2$s px', 'range cell' ), + /* translators: accessibility text. Inform about current value. %2$s: Current value. */ + _x( '%1$s. Current value is %2$s', 'Slider for picking a number inside a range' ), cellProps.label, value ); From a390d8878f0b1f1ed02f96f7a3ca36f2e641dd0a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 24 Oct 2019 10:53:42 +0200 Subject: [PATCH 08/29] Styling spacer refactor --- packages/block-library/src/spacer/edit.native.js | 10 +++++++--- packages/block-library/src/spacer/editor.native.scss | 10 +++++++++- packages/components/src/mobile/slider/index.native.js | 3 ++- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index 975773a4be7e19..65b3a67bd75588 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -10,6 +10,7 @@ import { PanelBody, BottomSheet, } from '@wordpress/components'; +import { withPreferredColorScheme } from '@wordpress/compose'; import { useState, useEffect } from '@wordpress/element'; import { InspectorControls, @@ -24,7 +25,7 @@ import styles from './editor.scss'; const minSpacerHeight = 20; const maxSpacerHeight = 500; -const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { +const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColorScheme } ) => { const { height } = attributes; const [ sliderSpacerHeight, setSpacerHeight ] = useState( height ); const [ sliderSpacerMaxHeight, setSpacerMaxHeight ] = useState( height ); @@ -49,8 +50,10 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { } ); }; + const defaultStyle = getStylesFromColorScheme( styles.staticSpacer, styles.staticDarkSpacer ); + return ( - + { maximumValue={ sliderSpacerMaxHeight } separatorType={ 'fullWidth' } onChangeValue={ ( value ) => changeSpacerHeight( value ) } + style={ styles.rangeCellContainer } /> @@ -68,4 +72,4 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes } ) => { ); }; -export default SpacerEdit; +export default withPreferredColorScheme( SpacerEdit ); diff --git a/packages/block-library/src/spacer/editor.native.scss b/packages/block-library/src/spacer/editor.native.scss index 2ce8c8e356c38f..cc8f941a968b18 100644 --- a/packages/block-library/src/spacer/editor.native.scss +++ b/packages/block-library/src/spacer/editor.native.scss @@ -5,6 +5,14 @@ border-radius: 1px; } +.staticDarkSpacer { + border: $border-width dashed rgba($color: $light-gray-500, $alpha: 0.3); +} + .selectedSpacer { - border: $border-width solid $blue-wordpress; + border: $border-width * 2 solid $blue-30; +} + +.rangeCellContainer { + padding-bottom: 16px; } diff --git a/packages/components/src/mobile/slider/index.native.js b/packages/components/src/mobile/slider/index.native.js index 19827c8b9a4294..283a28af900382 100644 --- a/packages/components/src/mobile/slider/index.native.js +++ b/packages/components/src/mobile/slider/index.native.js @@ -113,7 +113,8 @@ class Slider extends Component { onChangeText={ this.handleChange } onFocus={ this.handleToggleFocus } onBlur={ this.handleToggleFocus } - keyboardType="numeric" + keyboardType="number-pad" + returnKeyType="done" value={ `${ sliderValue }` } /> From 90fe027edb61331d507903be699db768af9c35cb Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 24 Oct 2019 14:34:50 +0200 Subject: [PATCH 09/29] Move logic to RangeCell --- .../block-library/src/spacer/edit.native.js | 19 +++---------------- .../mobile/bottom-sheet/range-cell.native.js | 15 ++++++++++++++- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index 65b3a67bd75588..0eda5a5921eeb2 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -27,7 +27,6 @@ const maxSpacerHeight = 500; const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColorScheme } ) => { const { height } = attributes; - const [ sliderSpacerHeight, setSpacerHeight ] = useState( height ); const [ sliderSpacerMaxHeight, setSpacerMaxHeight ] = useState( height ); // Height defined on the web can be higher than @@ -37,19 +36,6 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor setSpacerMaxHeight( height > maxSpacerHeight ? height * 2 : maxSpacerHeight ); }, [] ); - const changeSpacerHeight = ( value ) => { - let spacerHeight = value; - setSpacerHeight( spacerHeight ); - if ( spacerHeight < minSpacerHeight ) { - spacerHeight = minSpacerHeight; - } else if ( spacerHeight > sliderSpacerMaxHeight ) { - spacerHeight = sliderSpacerMaxHeight; - } - setAttributes( { - height: spacerHeight, - } ); - }; - const defaultStyle = getStylesFromColorScheme( styles.staticSpacer, styles.staticDarkSpacer ); return ( @@ -59,11 +45,12 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor changeSpacerHeight( value ) } + value={ height } + attribute="height" + setAttributes={ setAttributes } style={ styles.rangeCellContainer } /> diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 09089c11753bae..02a330f74abf13 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -17,8 +17,8 @@ import Slider from '../slider'; export default function BottomSheetRangeCell( props ) { const { value, + setAttributes, defaultValue, - onChangeValue, minimumValue = 0, maximumValue = 10, disabled, @@ -26,10 +26,23 @@ export default function BottomSheetRangeCell( props ) { minimumTrackTintColor = '#00669b', maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', thumbTintColor = Platform.OS === 'android' && '#00669b', + attribute, ...cellProps } = props; const [ accessible, onChangeAccessible ] = useState( true ); + const onChangeValue = ( initialValue ) => { + let sliderValue = initialValue; + if ( sliderValue < minimumValue ) { + sliderValue = minimumValue; + } else if ( sliderValue > maximumValue ) { + sliderValue = maximumValue; + } + setAttributes( { + [ attribute ]: sliderValue, + } ); + }; + const onCellPress = () => { onChangeAccessible( false ); if ( this.sliderRef ) { From a1d9a10c832741ec81a20ed962896ab396dffc29 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 24 Oct 2019 16:37:02 +0200 Subject: [PATCH 10/29] Keep Slider along with TextInput within RangeCell --- .../mobile/bottom-sheet/range-cell.native.js | 206 ++++++++++++------ .../range-cell.native.scss} | 7 - .../src/mobile/slider/index.native.js | 125 ----------- 3 files changed, 143 insertions(+), 195 deletions(-) rename packages/components/src/mobile/{slider/styles.scss => bottom-sheet/range-cell.native.scss} (72%) delete mode 100644 packages/components/src/mobile/slider/index.native.js diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 02a330f74abf13..1bf4c81b05b14c 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -1,37 +1,87 @@ /** * External dependencies */ -import { Platform, AccessibilityInfo, findNodeHandle } from 'react-native'; +import { Platform, AccessibilityInfo, findNodeHandle, TextInput, Slider } from 'react-native'; + /** * WordPress dependencies */ import { _x, __, sprintf } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; +import { Component } from '@wordpress/element'; /** * Internal dependencies */ import Cell from './cell'; -import Slider from '../slider'; - -export default function BottomSheetRangeCell( props ) { - const { - value, - setAttributes, - defaultValue, - minimumValue = 0, - maximumValue = 10, - disabled, - step = 1, - minimumTrackTintColor = '#00669b', - maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', - thumbTintColor = Platform.OS === 'android' && '#00669b', - attribute, - ...cellProps - } = props; - const [ accessible, onChangeAccessible ] = useState( true ); - - const onChangeValue = ( initialValue ) => { +// import Slider from '../slider'; +import styles from './range-cell.scss'; + +class BottomSheetRangeCell extends Component { + constructor( props ) { + super( props ); + this.handleToggleFocus = this.handleToggleFocus.bind( this ); + this.handleChange = this.handleChange.bind( this ); + this.handleValueSave = this.handleValueSave.bind( this ); + this.handleReset = this.handleReset.bind( this ); + + const initialValue = this.validateInput( props.value || props.defaultValue || props.minimumValue ); + + this.state = { accessible: true, sliderValue: initialValue, initialValue, hasFocus: false }; + } + + componentDidUpdate( ) { + const reset = this.props.value === null; + if ( reset ) { + this.handleReset(); + } + } + + componentWillUnmount() { + this.handleToggleFocus(); + } + + handleChange( text ) { + if ( ! isNaN( Number( text ) ) ) { + this.setState( { sliderValue: text } ); + } + } + + handleReset() { + this.handleValueSave( this.props.defaultValue || this.state.initialValue ); + } + + handleToggleFocus( validateInput = true ) { + const newState = { hasFocus: ! this.state.hasFocus }; + + if ( validateInput ) { + const sliderValue = this.validateInput( this.state.sliderValue ); + this.handleValueSave( sliderValue ); + } + + this.setState( newState ); + } + + validateInput( text ) { + const { minimumValue, maximumValue } = this.props; + if ( ! text ) { + return minimumValue; + } + if ( typeof text === 'number' ) { + return Math.min( Math.max( text, minimumValue ), maximumValue ); + } + return Math.min( Math.max( text.replace( /[^0-9]/g, '' ).replace( /^0+(?=\d)/, '' ), minimumValue ), maximumValue ); + } + + handleValueSave( text ) { + if ( ! isNaN( Number( text ) ) ) { + this.onChangeValue( text ); + this.setState( { sliderValue: text } ); + } + } + + onChangeValue = ( initialValue ) => { + const { minimumValue, maximumValue, setAttributes, attribute } = this.props; + let sliderValue = initialValue; if ( sliderValue < minimumValue ) { sliderValue = minimumValue; @@ -43,51 +93,81 @@ export default function BottomSheetRangeCell( props ) { } ); }; - const onCellPress = () => { - onChangeAccessible( false ); + onCellPress = () => { + this.setState( { accessible: false } ); if ( this.sliderRef ) { const reactTag = findNodeHandle( this.sliderRef ); AccessibilityInfo.setAccessibilityFocus( reactTag ); } }; - const accessibilityLabel = - sprintf( - /* translators: accessibility text. Inform about current value. %2$s: Current value. */ - _x( '%1$s. Current value is %2$s', 'Slider for picking a number inside a range' ), - cellProps.label, value - ); - - return ( - - { - this.sliderRef = slider; - } } - accessibilityRole={ 'adjustable' } - accessible={ true } - /> - - ); + render() { + const { + value, + defaultValue, + minimumValue = 0, + maximumValue = 10, + disabled, + step = 1, + minimumTrackTintColor = '#00669b', + maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', + thumbTintColor = Platform.OS === 'android' && '#00669b', + ...cellProps + } = this.props; + + const { hasFocus, sliderValue } = this.state; + + const accessibilityLabel = + sprintf( + /* translators: accessibility text. Inform about current value. %2$s: Current value. */ + _x( '%1$s. Current value is %2$s', 'Slider for picking a number inside a range' ), + cellProps.label, value + ); + + return ( + + { + this.sliderRef = slider; + } } + style={ styles.slider } + accessibilityRole={ 'adjustable' } + accessible={ true } + /> + + + ); + } } + +export default BottomSheetRangeCell; diff --git a/packages/components/src/mobile/slider/styles.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss similarity index 72% rename from packages/components/src/mobile/slider/styles.scss rename to packages/components/src/mobile/bottom-sheet/range-cell.native.scss index 326880b621807a..93099e7a8a6415 100644 --- a/packages/components/src/mobile/slider/styles.scss +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss @@ -1,10 +1,3 @@ -.sliderContainer { - flex: 1; - flex-direction: row; - align-content: center; - justify-content: space-evenly; -} - .slider { flex-grow: 1; } diff --git a/packages/components/src/mobile/slider/index.native.js b/packages/components/src/mobile/slider/index.native.js deleted file mode 100644 index 283a28af900382..00000000000000 --- a/packages/components/src/mobile/slider/index.native.js +++ /dev/null @@ -1,125 +0,0 @@ -/** - * External dependencies - */ -import { Slider as RNSlider, TextInput, View, Platform } from 'react-native'; - -/** - * WordPress dependencies - */ -import { Component } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import styles from './styles.scss'; - -class Slider extends Component { - constructor( props ) { - super( props ); - this.handleToggleFocus = this.handleToggleFocus.bind( this ); - this.handleChange = this.handleChange.bind( this ); - this.handleValueSave = this.handleValueSave.bind( this ); - this.handleReset = this.handleReset.bind( this ); - - const initialValue = this.validateInput( props.value || props.defaultValue || props.minimumValue ); - - this.state = { hasFocus: false, initialValue, sliderValue: initialValue }; - } - - componentDidUpdate( ) { - const reset = this.props.value === null; - if ( reset ) { - this.handleReset(); - } - } - - componentWillUnmount() { - this.handleToggleFocus(); - } - - handleToggleFocus( validateInput = true ) { - const newState = { hasFocus: ! this.state.hasFocus }; - - if ( validateInput ) { - const sliderValue = this.validateInput( this.state.sliderValue ); - this.handleValueSave( sliderValue ); - } - - this.setState( newState ); - } - - validateInput( text ) { - const { minimumValue, maximumValue } = this.props; - if ( ! text ) { - return minimumValue; - } - if ( typeof text === 'number' ) { - return Math.min( Math.max( text, minimumValue ), maximumValue ); - } - return Math.min( Math.max( text.replace( /[^0-9]/g, '' ).replace( /^0+(?=\d)/, '' ), minimumValue ), maximumValue ); - } - - handleChange( text ) { - if ( ! isNaN( Number( text ) ) ) { - this.setState( { sliderValue: text } ); - } - } - - handleValueSave( text ) { - if ( ! isNaN( Number( text ) ) ) { - if ( this.props.onChangeValue ) { - this.props.onChangeValue( text ); - } - this.setState( { sliderValue: text } ); - } - } - - handleReset() { - this.handleValueSave( this.props.defaultValue || this.state.initialValue ); - } - - render() { - const { - minimumValue, - maximumValue, - disabled, - step, - minimumTrackTintColor, - maximumTrackTintColor, - thumbTintColor, - ...sliderProps - } = this.props; - - const { hasFocus, sliderValue } = this.state; - - return ( - - - - - ); - } -} - -export default Slider; From 833cc762504adb75bb1c3328a4c3cd0665d65b3e Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 24 Oct 2019 16:50:21 +0200 Subject: [PATCH 11/29] Small cleanup --- .../components/src/mobile/bottom-sheet/range-cell.native.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 1bf4c81b05b14c..707dc97e8dd804 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -13,7 +13,6 @@ import { Component } from '@wordpress/element'; * Internal dependencies */ import Cell from './cell'; -// import Slider from '../slider'; import styles from './range-cell.scss'; class BottomSheetRangeCell extends Component { @@ -115,7 +114,7 @@ class BottomSheetRangeCell extends Component { ...cellProps } = this.props; - const { hasFocus, sliderValue } = this.state; + const { hasFocus, sliderValue, accessible } = this.state; const accessibilityLabel = sprintf( @@ -129,7 +128,7 @@ class BottomSheetRangeCell extends Component { { ...cellProps } accessibilityRole={ 'none' } editable={ true } - accessible={ this.state.accessible } + accessible={ accessible } onPress={ this.onCellPress } accessibilityLabel={ accessibilityLabel } accessibilityHint={ @@ -154,7 +153,6 @@ class BottomSheetRangeCell extends Component { } } style={ styles.slider } accessibilityRole={ 'adjustable' } - accessible={ true } /> Date: Thu, 24 Oct 2019 20:52:23 +0200 Subject: [PATCH 12/29] Fix missing binds --- packages/block-library/src/spacer/edit.native.js | 2 +- .../src/mobile/bottom-sheet/range-cell.native.js | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index 0eda5a5921eeb2..8a638245dde845 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -47,7 +47,7 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor label={ __( 'Height in pixels' ) } minimumValue={ minSpacerHeight } maximumValue={ sliderSpacerMaxHeight } - separatorType={ 'fullWidth' } + separatorType={ 'none' } value={ height } attribute="height" setAttributes={ setAttributes } diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 707dc97e8dd804..2403cb3ea788dd 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -22,6 +22,8 @@ class BottomSheetRangeCell extends Component { this.handleChange = this.handleChange.bind( this ); this.handleValueSave = this.handleValueSave.bind( this ); this.handleReset = this.handleReset.bind( this ); + this.onChangeValue = this.onChangeValue.bind( this ); + this.onCellPress = this.onCellPress.bind( this ); const initialValue = this.validateInput( props.value || props.defaultValue || props.minimumValue ); @@ -78,7 +80,7 @@ class BottomSheetRangeCell extends Component { } } - onChangeValue = ( initialValue ) => { + onChangeValue( initialValue ) { const { minimumValue, maximumValue, setAttributes, attribute } = this.props; let sliderValue = initialValue; @@ -90,15 +92,15 @@ class BottomSheetRangeCell extends Component { setAttributes( { [ attribute ]: sliderValue, } ); - }; + } - onCellPress = () => { + onCellPress() { this.setState( { accessible: false } ); if ( this.sliderRef ) { const reactTag = findNodeHandle( this.sliderRef ); AccessibilityInfo.setAccessibilityFocus( reactTag ); } - }; + } render() { const { From 8c127b93cbc2c2b5de3ce74c05f9759fb103ef42 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 28 Oct 2019 14:00:47 +0100 Subject: [PATCH 13/29] Fix focusing slider on iphoneX when VO is on --- packages/components/src/mobile/bottom-sheet/cell.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 8e36025ad47071..56859d5bbce4e2 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -175,7 +175,7 @@ class BottomSheetCell extends Component { { drawTopSeparator && ( ) } - + { icon && ( From 84ade89432d31f9856ee86686187f8ea63e5cee1 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 28 Oct 2019 15:10:49 +0100 Subject: [PATCH 14/29] Adjust a11y voice over --- .../components/src/mobile/bottom-sheet/range-cell.native.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 2403cb3ea788dd..15dfefdde409a2 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -42,8 +42,10 @@ class BottomSheetRangeCell extends Component { } handleChange( text ) { + const announcement = sprintf( __( 'Current value is %s' ), text ); if ( ! isNaN( Number( text ) ) ) { this.setState( { sliderValue: text } ); + AccessibilityInfo.announceForAccessibility( announcement ); } } @@ -129,7 +131,7 @@ class BottomSheetRangeCell extends Component { Date: Mon, 28 Oct 2019 17:20:52 +0100 Subject: [PATCH 15/29] Refactor RangeCell styles --- .../bottom-sheet/borderStyles.android.scss | 8 +++ .../mobile/bottom-sheet/borderStyles.ios.scss | 9 +++ .../src/mobile/bottom-sheet/cell.native.js | 41 +++++++---- .../mobile/bottom-sheet/range-cell.native.js | 72 +++++++++++-------- .../bottom-sheet/range-cell.native.scss | 26 ++++++- .../mobile/bottom-sheet/styles.native.scss | 5 ++ 6 files changed, 116 insertions(+), 45 deletions(-) create mode 100644 packages/components/src/mobile/bottom-sheet/borderStyles.android.scss create mode 100644 packages/components/src/mobile/bottom-sheet/borderStyles.ios.scss diff --git a/packages/components/src/mobile/bottom-sheet/borderStyles.android.scss b/packages/components/src/mobile/bottom-sheet/borderStyles.android.scss new file mode 100644 index 00000000000000..e96055892d0803 --- /dev/null +++ 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 new file mode 100644 index 00000000000000..0d36f6d51973e3 --- /dev/null +++ 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 index 56859d5bbce4e2..4a581373ae50f2 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { TouchableOpacity, Text, View, TextInput, I18nManager } from 'react-native'; +import { TouchableOpacity, Text, View, TextInput, I18nManager, Platform } from 'react-native'; import { isEmpty } from 'lodash'; /** @@ -46,12 +46,15 @@ class BottomSheetCell extends Component { leftAlign, labelStyle = {}, valueStyle = {}, + cellContainerStyle = {}, + cellRowContainerStyle = {}, onChangeValue, children, editable = true, separatorType, style = {}, getStylesFromColorScheme, + allowReset, ...valueProps } = this.props; @@ -66,6 +69,9 @@ class BottomSheetCell extends Component { 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(); @@ -158,6 +164,7 @@ class BottomSheetCell extends Component { }; const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark ); + const resetButtonText = Platform.OS === 'ios' ? 'RESET' : 'Reset'; return ( { drawTopSeparator && ( ) } - - - { icon && ( - - - - - ) } - - { label } - + + + + { icon && ( + + + + + ) } + + { label } + + + { allowReset && + { sprintf( + /* translators: %s: reset */ + __( '%s' ), resetButtonText ) } + + } { 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 index 15dfefdde409a2..17186d7cb8db90 100644 --- 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 } 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 ) { @@ -115,6 +117,7 @@ class BottomSheetRangeCell extends Component { minimumTrackTintColor = '#00669b', maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', thumbTintColor = Platform.OS === 'android' && '#00669b', + getStylesFromColorScheme, ...cellProps } = this.props; @@ -127,49 +130,60 @@ class BottomSheetRangeCell extends Component { cellProps.label, value ); + const defaultSliderStyle = getStylesFromColorScheme( styles.sliderTextInput, styles.sliderDarkTextInput ); + return ( - { - this.sliderRef = slider; - } } - style={ styles.slider } - accessibilityRole={ 'adjustable' } - /> - + + { + this.sliderRef = slider; + } } + style={ styles.slider } + accessibilityRole={ 'adjustable' } + /> + + ); } } -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 index 93099e7a8a6415..db9311a73ab035 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss @@ -7,14 +7,34 @@ 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; + 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 index 86422f3228cac4..785cc8293b6c65 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -76,6 +76,11 @@ padding: 5px; } +.resetButton { + font-size: 17px; + color: $blue-wordpress; +} + // Cell .cellContainer { From 1debc8ccdf13001e40279e42bc19f552504a4815 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 28 Oct 2019 17:38:18 +0100 Subject: [PATCH 16/29] Refactor pointerEvents when screen reader is on --- .../src/mobile/bottom-sheet/cell.native.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 56859d5bbce4e2..b6b3334a222cad 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { TouchableOpacity, Text, View, TextInput, I18nManager } from 'react-native'; +import { TouchableOpacity, Text, View, TextInput, I18nManager, AccessibilityInfo } from 'react-native'; import { isEmpty } from 'lodash'; /** @@ -23,6 +23,7 @@ class BottomSheetCell extends Component { super( ...arguments ); this.state = { isEditingValue: props.autoFocus || false, + isScreenReaderEnabled: false, }; } @@ -32,6 +33,13 @@ class BottomSheetCell extends Component { } } + componentDidMount() { + AccessibilityInfo.isScreenReaderEnabled().then( + ( isScreenReaderEnabled ) => + this.setState( { isScreenReaderEnabled } ) + ); + } + render() { const { accessible, @@ -158,6 +166,7 @@ class BottomSheetCell extends Component { }; const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark ); + const containerPointerEvents = this.state.isScreenReaderEnabled && accessible ? 'none' : 'auto'; return ( ) } - + { icon && ( From 4a897fd98823b879d010ab77d6f14e5115c44f22 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 28 Oct 2019 18:25:09 +0100 Subject: [PATCH 17/29] Announce current value when finished --- .../src/mobile/bottom-sheet/range-cell.native.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 15dfefdde409a2..ac62dc61e17717 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -42,10 +42,9 @@ class BottomSheetRangeCell extends Component { } handleChange( text ) { - const announcement = sprintf( __( 'Current value is %s' ), text ); if ( ! isNaN( Number( text ) ) ) { this.setState( { sliderValue: text } ); - AccessibilityInfo.announceForAccessibility( announcement ); + this.announceCurrentValue( text ); } } @@ -79,6 +78,7 @@ class BottomSheetRangeCell extends Component { if ( ! isNaN( Number( text ) ) ) { this.onChangeValue( text ); this.setState( { sliderValue: text } ); + this.announceCurrentValue( text ); } } @@ -104,6 +104,11 @@ class BottomSheetRangeCell extends Component { } } + announceCurrentValue( value ) { + const announcement = sprintf( __( 'Current value is %s' ), value ); + AccessibilityInfo.announceForAccessibility( announcement ); + } + render() { const { value, From 047a08eb69b9bd18166d280b8dda8d7cae62057a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 29 Oct 2019 10:45:40 +0100 Subject: [PATCH 18/29] Small cleanup --- packages/components/src/mobile/bottom-sheet/cell.native.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 0f0b3e3412d07c..3d8b614e7ac062 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -172,7 +172,7 @@ class BottomSheetCell extends Component { }; const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark ); - const resetButtonText = Platform.OS === 'ios' ? 'RESET' : 'Reset'; + const resetButtonText = Platform.OS === 'ios' ? 'Reset' : 'RESET'; const containerPointerEvents = this.state.isScreenReaderEnabled && accessible ? 'none' : 'auto'; return ( @@ -193,7 +193,7 @@ class BottomSheetCell extends Component { ) } - + { icon && ( @@ -204,7 +204,7 @@ class BottomSheetCell extends Component { { label } - { allowReset && + { allowReset && { sprintf( /* translators: %s: reset */ __( '%s' ), resetButtonText ) } From 7ee822e47a127c355a5c201c9c6e2cb3340f57c8 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 29 Oct 2019 12:13:13 +0100 Subject: [PATCH 19/29] Improve a11y --- .../src/mobile/bottom-sheet/cell.native.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index b6b3334a222cad..b332af11407965 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -34,12 +34,23 @@ class BottomSheetCell extends Component { } componentDidMount() { - AccessibilityInfo.isScreenReaderEnabled().then( - ( isScreenReaderEnabled ) => - this.setState( { isScreenReaderEnabled } ) + AccessibilityInfo.addEventListener( + 'screenReaderChanged', + this.handleScreenReaderToggled, ); } + componentWillUnmount() { + AccessibilityInfo.removeEventListener( + 'screenReaderChanged', + this.handleScreenReaderToggled, + ); + } + + handleScreenReaderToggled( isScreenReaderEnabled ) { + this.setState( { isScreenReaderEnabled } ); + } + render() { const { accessible, From 014cd209f431c483f1588a3d3589c4d8a6fa9fe4 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 30 Oct 2019 11:03:38 +0100 Subject: [PATCH 20/29] Fix a11y on iPhoneX --- packages/components/src/mobile/bottom-sheet/cell.native.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index b332af11407965..7f44944060a56e 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -25,6 +25,8 @@ class BottomSheetCell extends Component { isEditingValue: props.autoFocus || false, isScreenReaderEnabled: false, }; + + this.handleScreenReaderToggled = this.handleScreenReaderToggled.bind( this ); } componentDidUpdate() { @@ -38,6 +40,10 @@ class BottomSheetCell extends Component { 'screenReaderChanged', this.handleScreenReaderToggled, ); + + AccessibilityInfo.isScreenReaderEnabled().then( ( isScreenReaderEnabled ) => { + this.setState( { isScreenReaderEnabled } ); + } ); } componentWillUnmount() { From 2e5c346c9604031e8a42c79ebcd2971dc713b14b Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 30 Oct 2019 14:08:08 +0100 Subject: [PATCH 21/29] Refactor after CR --- packages/block-library/src/spacer/edit.native.js | 1 - packages/components/src/mobile/bottom-sheet/cell.native.js | 5 +++-- .../components/src/mobile/bottom-sheet/range-cell.native.js | 3 ++- .../src/mobile/bottom-sheet/range-cell.native.scss | 2 +- .../components/src/mobile/bottom-sheet/styles.native.scss | 4 ++++ 5 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index 8a638245dde845..02b3b13ee3d322 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -43,7 +43,6 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor { allowReset && - { sprintf( + { sprintf( /* translators: %s: reset */ __( '%s' ), resetButtonText ) } diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index d2c9bcabe004b2..7cfc773887361b 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -119,7 +119,8 @@ 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, diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss index db9311a73ab035..ce24ad6489242b 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss @@ -34,7 +34,7 @@ } .cellRowStyles { - min-height: 48px; + min-height: 40px; 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 index 785cc8293b6c65..478eaeee214802 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -81,6 +81,10 @@ color: $blue-wordpress; } +.resetButtonDark { + color: $blue-30; +} + // Cell .cellContainer { From 2d643c07bdb1fec502a0c321efb3f471f541683b Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 30 Oct 2019 14:43:16 +0100 Subject: [PATCH 22/29] Update info for translators --- .../components/src/mobile/bottom-sheet/range-cell.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index ac62dc61e17717..e3eb50a6e4e216 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -127,7 +127,7 @@ class BottomSheetRangeCell extends Component { const accessibilityLabel = sprintf( - /* translators: accessibility text. Inform about current value. %2$s: Current value. */ + /* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: Current value. */ _x( '%1$s. Current value is %2$s', 'Slider for picking a number inside a range' ), cellProps.label, value ); From 80104f183faff1a9e8702e7ffe186829e5f813b5 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 30 Oct 2019 16:39:55 +0100 Subject: [PATCH 23/29] Correct styles --- .../components/src/mobile/bottom-sheet/range-cell.native.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss index ce24ad6489242b..c045179be3e047 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss @@ -34,7 +34,8 @@ } .cellRowStyles { - min-height: 40px; + min-height: 48px; + margin-bottom: -13px; width: 100%; justify-content: space-between; } From 26e79397fc685253881a249e8a1bb459b24fdc7b Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 5 Nov 2019 12:08:34 +0100 Subject: [PATCH 24/29] Refactor texts localizing --- .../src/mobile/bottom-sheet/cell.native.js | 6 ++--- .../bottom-sheet/range-cell.native.scss | 27 ++++++++++++++++--- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 38cde0fd6ac4fe..103d79b2020c54 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -190,7 +190,7 @@ class BottomSheetCell extends Component { const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark ); const resetButtonStyle = getStylesFromColorScheme( styles.resetButton, styles.resetButtonDark ); - const resetButtonText = Platform.OS === 'ios' ? 'Reset' : 'RESET'; + const resetButtonText = Platform.OS === 'ios' ? __( 'Reset' ) : __( 'RESET' ); const containerPointerEvents = this.state.isScreenReaderEnabled && accessible ? 'none' : 'auto'; return ( @@ -223,9 +223,7 @@ class BottomSheetCell extends Component { { allowReset && - { sprintf( - /* translators: %s: reset */ - __( '%s' ), resetButtonText ) } + { resetButtonText } } diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss index 93099e7a8a6415..c045179be3e047 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss @@ -7,14 +7,35 @@ 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; +} From b9c2b64f483ee9316f2da00fd8272dd3b32ed0d1 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Thu, 7 Nov 2019 10:45:22 +0100 Subject: [PATCH 25/29] fix allowReset prop --- packages/block-library/src/spacer/edit.native.js | 1 - packages/components/src/mobile/bottom-sheet/cell.native.js | 6 +++--- .../components/src/mobile/bottom-sheet/range-cell.native.js | 3 ++- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index 09fbb04e83a245..e0d0d3245cdd20 100644 --- 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 - { allowReset && + { onReset && { resetButtonText } } diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 3456e9d8b48cd0..99c153e261dd42 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -122,6 +122,7 @@ class BottomSheetRangeCell extends Component { maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', thumbTintColor = Platform.OS === 'android' && '#00669b', getStylesFromColorScheme, + allowReset, ...cellProps } = this.props; @@ -146,7 +147,7 @@ class BottomSheetRangeCell extends Component { accessible={ accessible } onPress={ this.onCellPress } accessibilityLabel={ accessibilityLabel } - allowReset={ this.handleReset } + onReset={ allowReset ? this.handleReset : undefined } accessibilityHint={ /* translators: accessibility text (hint for focusing a slider) */ __( 'Double tap to change the value using slider' ) From cf85c25c1f72fa92d3d5ef778eba4dfeccd6fe45 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 7 Nov 2019 13:43:15 +0100 Subject: [PATCH 26/29] Patch allowReset --- packages/block-library/src/spacer/edit.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index e0d0d3245cdd20..af56ec8c9a2a79 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -56,6 +56,7 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor value={ height } onChange={ changeAttribute } style={ styles.rangeCellContainer } + allowReset /> From 500d414d6399644c564719933ab54eee9716387c Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 7 Nov 2019 14:39:19 +0100 Subject: [PATCH 27/29] a11y improvements --- .../mobile/bottom-sheet/range-cell.native.js | 24 ++++++++++++++++--- .../bottom-sheet/range-cell.native.scss | 3 +-- .../mobile/bottom-sheet/styles.native.scss | 1 + 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 99c153e261dd42..0347524bb616f3 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { Platform, AccessibilityInfo, findNodeHandle, TextInput, Slider, View } from 'react-native'; +import { Platform, AccessibilityInfo, findNodeHandle, TextInput, Slider, View, PixelRatio, AppState } from 'react-native'; /** * WordPress dependencies @@ -26,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( ) { @@ -39,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 ) { @@ -126,7 +143,7 @@ class BottomSheetRangeCell extends Component { ...cellProps } = this.props; - const { hasFocus, sliderValue, accessible } = this.state; + const { hasFocus, sliderValue, accessible, fontScale } = this.state; const accessibilityLabel = sprintf( @@ -177,6 +194,7 @@ class BottomSheetRangeCell extends Component { defaultSliderStyle, borderStyles.borderStyle, hasFocus && borderStyles.isSelected, + { width: 40 * fontScale }, ] } onChangeText={ this.handleChange } onFocus={ this.handleToggleFocus } diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss index c045179be3e047..21a7051d20ced9 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.scss +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.scss @@ -3,8 +3,7 @@ } .sliderTextInput { - width: 40px; - height: 25px; + min-height: 25px; align-self: center; margin-left: 10px; border-color: $light-gray-400; diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 478eaeee214802..b098b4e5bdbf79 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -110,6 +110,7 @@ .cellRowContainer { flex-direction: row; align-items: center; + flex-shrink: 1; } .cellIcon { From 5d89738235204275b4594785f4a106156898d87f Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 8 Nov 2019 12:38:39 +0100 Subject: [PATCH 28/29] Refactor custom button --- packages/block-library/src/spacer/edit.native.js | 1 - .../src/mobile/bottom-sheet/cell.native.js | 12 ++++++------ .../src/mobile/bottom-sheet/range-cell.native.js | 6 ++++-- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js index af56ec8c9a2a79..e0d0d3245cdd20 100644 --- a/packages/block-library/src/spacer/edit.native.js +++ b/packages/block-library/src/spacer/edit.native.js @@ -56,7 +56,6 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor value={ height } onChange={ changeAttribute } style={ styles.rangeCellContainer } - allowReset /> diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 92de46fef53772..d3151ccfc2b623 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { TouchableOpacity, Text, View, TextInput, I18nManager, Platform, AccessibilityInfo } from 'react-native'; +import { TouchableOpacity, Text, View, TextInput, I18nManager, AccessibilityInfo } from 'react-native'; import { isEmpty } from 'lodash'; /** @@ -79,7 +79,7 @@ class BottomSheetCell extends Component { separatorType, style = {}, getStylesFromColorScheme, - onReset, + customActionButton, ...valueProps } = this.props; @@ -89,7 +89,7 @@ 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 || onReset ? cellLabelStyle : defaultMissingIconAndValue; + const defaultLabelStyle = showValue || icon !== undefined || customActionButton ? cellLabelStyle : defaultMissingIconAndValue; const drawSeparator = ( separatorType && separatorType !== 'none' ) || separatorStyle === undefined; const drawTopSeparator = drawSeparator && separatorType === 'topFullWidth'; @@ -190,8 +190,8 @@ class BottomSheetCell extends Component { const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark ); const resetButtonStyle = getStylesFromColorScheme( styles.resetButton, styles.resetButtonDark ); - const resetButtonText = Platform.OS === 'ios' ? __( 'Reset' ) : __( 'RESET' ); const containerPointerEvents = this.state.isScreenReaderEnabled && accessible ? 'none' : 'auto'; + const { title, handler } = customActionButton || {}; return ( - { onReset && - { resetButtonText } + { customActionButton && + { title } } diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 0347524bb616f3..3e59a80198401b 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -139,7 +139,7 @@ class BottomSheetRangeCell extends Component { maximumTrackTintColor = Platform.OS === 'ios' ? '#e9eff3' : '#909090', thumbTintColor = Platform.OS === 'android' && '#00669b', getStylesFromColorScheme, - allowReset, + allowReset = true, ...cellProps } = this.props; @@ -153,6 +153,8 @@ class BottomSheetRangeCell extends Component { ); const defaultSliderStyle = getStylesFromColorScheme( styles.sliderTextInput, styles.sliderDarkTextInput ); + const resetButtonText = Platform.OS === 'ios' ? __( 'Reset' ) : __( 'RESET' ); + const resetButton = { title: resetButtonText, handler: this.handleReset }; return ( Date: Fri, 8 Nov 2019 16:24:38 +0100 Subject: [PATCH 29/29] Remove numberOfLines from cell label --- packages/components/src/mobile/bottom-sheet/cell.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index d3151ccfc2b623..a0da5b6bb3d12a 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -218,7 +218,7 @@ class BottomSheetCell extends Component { ) } - + { label }