From b54def688ceb1a0ed1615663f7332e738b03efd3 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Thu, 4 Aug 2022 22:57:59 +0100 Subject: [PATCH 1/5] Set tintColor on action sheets for iOS --- packages/components/src/mobile/picker/index.ios.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js index bd99917ec4042..5aee5af49ad53 100644 --- a/packages/components/src/mobile/picker/index.ios.js +++ b/packages/components/src/mobile/picker/index.ios.js @@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n'; import { Component, forwardRef, useContext } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { BottomSheetContext } from '@wordpress/components'; +import { usePreferredColorScheme } from '@wordpress/compose'; class Picker extends Component { presentPicker() { @@ -23,6 +24,7 @@ class Picker extends Component { isBottomSheetOpened, closeBottomSheet, onHandleClosingBottomSheet, + tintColor, } = this.props; const labels = options.map( ( { label } ) => label ); const fullOptions = [ __( 'Cancel' ) ].concat( labels ); @@ -35,6 +37,7 @@ class Picker extends Component { destructiveButtonIndex, disabledButtonIndices, anchor: getAnchor && getAnchor(), + tintColor, }, ( buttonIndex ) => { if ( buttonIndex === 0 ) { @@ -66,6 +69,8 @@ const PickerComponent = forwardRef( ( props, ref ) => { const { closeGeneralSidebar } = useDispatch( 'core/edit-post' ); const { onHandleClosingBottomSheet } = useContext( BottomSheetContext ); + const darkModeEnabled = usePreferredColorScheme() === 'dark'; + return ( { isBottomSheetOpened={ isBottomSheetOpened } closeBottomSheet={ closeGeneralSidebar } onHandleClosingBottomSheet={ onHandleClosingBottomSheet } + tintColor={ darkModeEnabled ? '#5198d9' : '#2271b1' } /> ); } ); From 5cedf9bb4a6091cc81fa3962d106770ba8ee53bb Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 5 Aug 2022 09:47:09 +0100 Subject: [PATCH 2/5] [Code quality] Replace hex codes with CSS --- packages/components/src/mobile/picker/index.ios.js | 14 +++++++++++--- .../src/mobile/picker/styles.native.scss | 8 ++++++++ 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js index 5aee5af49ad53..aa0438cde3c60 100644 --- a/packages/components/src/mobile/picker/index.ios.js +++ b/packages/components/src/mobile/picker/index.ios.js @@ -10,7 +10,12 @@ import { __ } from '@wordpress/i18n'; import { Component, forwardRef, useContext } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { BottomSheetContext } from '@wordpress/components'; -import { usePreferredColorScheme } from '@wordpress/compose'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import styles from './styles.scss'; class Picker extends Component { presentPicker() { @@ -69,7 +74,10 @@ const PickerComponent = forwardRef( ( props, ref ) => { const { closeGeneralSidebar } = useDispatch( 'core/edit-post' ); const { onHandleClosingBottomSheet } = useContext( BottomSheetContext ); - const darkModeEnabled = usePreferredColorScheme() === 'dark'; + const buttonTitle = usePreferredColorSchemeStyle( + styles[ 'components-picker__button-title' ], + styles[ 'components-picker__button-title--dark' ] + ); return ( { isBottomSheetOpened={ isBottomSheetOpened } closeBottomSheet={ closeGeneralSidebar } onHandleClosingBottomSheet={ onHandleClosingBottomSheet } - tintColor={ darkModeEnabled ? '#5198d9' : '#2271b1' } + tintColor={ buttonTitle.color } /> ); } ); diff --git a/packages/components/src/mobile/picker/styles.native.scss b/packages/components/src/mobile/picker/styles.native.scss index 0e3bc40cd388e..de3e504e6257e 100644 --- a/packages/components/src/mobile/picker/styles.native.scss +++ b/packages/components/src/mobile/picker/styles.native.scss @@ -19,3 +19,11 @@ padding-left: 0; padding-right: 0; } + +.components-picker__button-title { + color: $blue-50; +} + +.components-picker__button-title--dark { + color: $blue-30; +} From de203bfc4a351a017bc9662f0631cf57007009cd Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 5 Aug 2022 10:38:52 +0100 Subject: [PATCH 3/5] [Code quality] Refine 'buttonTitleColor' const --- packages/components/src/mobile/picker/index.ios.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js index aa0438cde3c60..28cfc4ef51992 100644 --- a/packages/components/src/mobile/picker/index.ios.js +++ b/packages/components/src/mobile/picker/index.ios.js @@ -74,10 +74,10 @@ const PickerComponent = forwardRef( ( props, ref ) => { const { closeGeneralSidebar } = useDispatch( 'core/edit-post' ); const { onHandleClosingBottomSheet } = useContext( BottomSheetContext ); - const buttonTitle = usePreferredColorSchemeStyle( + const buttonTitleColor = usePreferredColorSchemeStyle( styles[ 'components-picker__button-title' ], styles[ 'components-picker__button-title--dark' ] - ); + ).color; return ( { isBottomSheetOpened={ isBottomSheetOpened } closeBottomSheet={ closeGeneralSidebar } onHandleClosingBottomSheet={ onHandleClosingBottomSheet } - tintColor={ buttonTitle.color } + tintColor={ buttonTitleColor } /> ); } ); From 413c198a8c020182b91e499b628466ad8bdee506 Mon Sep 17 00:00:00 2001 From: Siobhan Date: Fri, 5 Aug 2022 17:21:30 +0100 Subject: [PATCH 4/5] Refactor code to use 'usePreferredColorScheme' 'usePreferredColorScheme' is used instead of 'usePreferredColorSchemeStyle' as only a hex code needs to be passed as a tintColor. --- packages/components/src/mobile/picker/index.ios.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/components/src/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js index 28cfc4ef51992..a74f2203bdc52 100644 --- a/packages/components/src/mobile/picker/index.ios.js +++ b/packages/components/src/mobile/picker/index.ios.js @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; import { Component, forwardRef, useContext } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { BottomSheetContext } from '@wordpress/components'; -import { usePreferredColorSchemeStyle } from '@wordpress/compose'; +import { usePreferredColorScheme } from '@wordpress/compose'; /** * Internal dependencies @@ -74,10 +74,11 @@ const PickerComponent = forwardRef( ( props, ref ) => { const { closeGeneralSidebar } = useDispatch( 'core/edit-post' ); const { onHandleClosingBottomSheet } = useContext( BottomSheetContext ); - const buttonTitleColor = usePreferredColorSchemeStyle( - styles[ 'components-picker__button-title' ], - styles[ 'components-picker__button-title--dark' ] - ).color; + const colorScheme = usePreferredColorScheme(); + const buttonTitleColor = + colorScheme === 'light' + ? styles[ 'components-picker__button-title' ].color + : styles[ 'components-picker__button-title--dark' ].color; return ( Date: Fri, 5 Aug 2022 18:34:15 +0100 Subject: [PATCH 5/5] Refactor to workaround test failures The UI tests in Gutenberg Mobile were failing as 'styles' returns 'undefined' (in the tests) when called from the 'PickerComponent' function. Example: https://app.circleci.com/pipelines/github/wordpress-mobile/gutenberg-mobile/18255/workflows/16df0260-7972-465b-b400-ec37603dfd9e/jobs/100060 This commit seeks to workaround that error by only calling the internal styles from the main Picker class. --- .../components/src/mobile/picker/index.ios.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/components/src/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js index a74f2203bdc52..dac31ded159be 100644 --- a/packages/components/src/mobile/picker/index.ios.js +++ b/packages/components/src/mobile/picker/index.ios.js @@ -29,11 +29,16 @@ class Picker extends Component { isBottomSheetOpened, closeBottomSheet, onHandleClosingBottomSheet, - tintColor, + colorScheme, } = this.props; const labels = options.map( ( { label } ) => label ); const fullOptions = [ __( 'Cancel' ) ].concat( labels ); + const buttonTitleColor = + colorScheme === 'light' + ? styles[ 'components-picker__button-title' ].color + : styles[ 'components-picker__button-title--dark' ].color; + ActionSheetIOS.showActionSheetWithOptions( { title, @@ -42,7 +47,7 @@ class Picker extends Component { destructiveButtonIndex, disabledButtonIndices, anchor: getAnchor && getAnchor(), - tintColor, + tintColor: buttonTitleColor, }, ( buttonIndex ) => { if ( buttonIndex === 0 ) { @@ -75,10 +80,6 @@ const PickerComponent = forwardRef( ( props, ref ) => { const { onHandleClosingBottomSheet } = useContext( BottomSheetContext ); const colorScheme = usePreferredColorScheme(); - const buttonTitleColor = - colorScheme === 'light' - ? styles[ 'components-picker__button-title' ].color - : styles[ 'components-picker__button-title--dark' ].color; return ( { isBottomSheetOpened={ isBottomSheetOpened } closeBottomSheet={ closeGeneralSidebar } onHandleClosingBottomSheet={ onHandleClosingBottomSheet } - tintColor={ buttonTitleColor } + colorScheme={ colorScheme } /> ); } );