[RNMobile] Search Block: Styling (WordPress#30052)

Mamaduka · Mar 25, 2021 · c62ccd8 · c62ccd8
1 parent 268ee71
commit c62ccd8
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 73 deletions.
diff --git a/packages/base-styles/_colors.native.scss b/packages/base-styles/_colors.native.scss
@@ -66,12 +66,15 @@ $button-fallback-bg: #595959;
 
 // color-studio
 $gray-0: #f6f7f7;
+$gray-5: #dcdcde;
+$gray-10: #c3c4c7;
 $gray-20: #a7aaad;
 $gray-30: #8e9196;
 $gray-40: #787c82;
 $gray-50: #646970;
 $gray-60: #50575e;
 $gray-70: #3c434a;
+$gray-80: #2c3338;
 $gray-90: #1d2327;
 $gray-100: #101517;
 

diff --git a/packages/block-library/src/search/edit.native.js b/packages/block-library/src/search/edit.native.js
@@ -14,25 +14,26 @@ import {
 	InspectorControls,
 } from '@wordpress/block-editor';
 import {
-	Button,
 	PanelBody,
 	SelectControl,
 	ToggleControl,
+	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { search } from '@wordpress/icons';
 import { useRef, useEffect, useState } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
-import richTextStyles from './rich-text.scss';
 
 /**
  * Constants
  */
-const MIN_BUTTON_WIDTH = 100;
+const MIN_BUTTON_WIDTH = 75;
+
 const BUTTON_OPTIONS = [
 	{ value: 'button-inside', label: __( 'Button inside' ) },
 	{ value: 'button-outside', label: __( 'Button outside' ) },
@@ -154,16 +155,32 @@ export default function SearchEdit( {
 		</InspectorControls>
 	);
 
-	const mergeWithBorderStyle = ( style ) => {
-		return { ...style, ...styles.border };
-	};
+	const isButtonInside = buttonPosition === 'button-inside';
 
-	const renderTextField = () => {
-		const inputStyle =
-			buttonPosition === 'button-inside'
-				? styles.searchTextInput
-				: mergeWithBorderStyle( styles.searchTextInput );
+	const borderStyle = usePreferredColorSchemeStyle(
+		styles.border,
+		styles.borderDark
+	);
+
+	const inputStyle = [
+		usePreferredColorSchemeStyle(
+			styles.plainTextInput,
+			styles.plainTextInputDark
+		),
+		! isButtonInside && borderStyle,
+	];
+
+	const placeholderStyle = usePreferredColorSchemeStyle(
+		styles.plainTextPlaceholder,
+		styles.plainTextPlaceholderDark
+	);
+
+	const searchBarStyle = [
+		styles.searchBarContainer,
+		isButtonInside && borderStyle,
+	];
 
+	const renderTextField = () => {
 		return (
 			<PlainText
 				ref={ textInputRef }
@@ -185,28 +202,32 @@ export default function SearchEdit( {
 					onFocus();
 				} }
 				onBlur={ () => setIsPlaceholderSelected( false ) }
+				placeholderTextColor={ placeholderStyle.color }
 			/>
 		);
 	};
 
+	// To achieve proper expanding and shrinking `RichText` on Android, there is a need to set
+	// a `placeholder` as an empty string when `RichText` is focused,
+	// because `AztecView` is calculating a `minWidth` based on placeholder text.
+	const buttonPlaceholderText =
+		isButtonSelected ||
+		( ! isButtonSelected && buttonText && buttonText !== '' )
+			? ''
+			: __( 'Add button text' );
+
 	const renderButton = () => {
 		return (
 			<View style={ styles.buttonContainer }>
-				{ buttonUseIcon && (
-					<Button
-						className="wp-block-search__button"
-						icon={ search }
-						onFocus={ onFocus }
-					/>
-				) }
+				{ buttonUseIcon && <Icon icon={ search } { ...styles.icon } /> }
 
 				{ ! buttonUseIcon && (
 					<RichText
 						className="wp-block-search__button"
 						identifier="text"
 						tagName="p"
-						style={ richTextStyles.searchButton }
-						placeholder={ __( 'Add button text' ) }
+						style={ styles.richTextButton }
+						placeholder={ buttonPlaceholderText }
 						value={ buttonText }
 						withoutInteractiveFormatting
 						onChange={ ( html ) =>
@@ -222,17 +243,13 @@ export default function SearchEdit( {
 						onBlur={ () => {
 							setIsButtonSelected( false );
 						} }
+						selectionColor={ styles.richTextButtonCursor.color }
 					/>
 				) }
 			</View>
 		);
 	};
 
-	const searchBarStyle =
-		buttonPosition === 'button-inside'
-			? mergeWithBorderStyle( styles.searchBarContainer )
-			: styles.searchBarContainer;
-
 	return (
 		<View { ...blockProps } style={ styles.searchBlockContainer }>
 			{ isSelected && controls }
@@ -242,10 +259,7 @@ export default function SearchEdit( {
 					className="wp-block-search__label"
 					identifier="text"
 					tagName="p"
-					style={ {
-						...styles.searchLabel,
-						...richTextStyles.searchLabel,
-					} }
+					style={ styles.richTextLabel }
 					aria-label={ __( 'Label text' ) }
 					placeholder={ __( 'Add label…' ) }
 					withoutInteractiveFormatting

diff --git a/packages/block-library/src/search/rich-text.android.scss b/packages/block-library/src/search/rich-text.android.scss
diff --git a/packages/block-library/src/search/rich-text.ios.scss b/packages/block-library/src/search/rich-text.ios.scss
diff --git a/packages/block-library/src/search/style.native.scss b/packages/block-library/src/search/style.native.scss
@@ -11,31 +11,76 @@
 }
 
 .border {
-	border: 1px solid $gray-600;
-	border-width: $border-width;
+	border: $border-width solid $gray-5;
+	border-radius: $grid-unit-05;
 	padding: $grid-unit-05;
+	padding-left: $grid-unit-10;
+}
+
+.borderDark {
+	border: $border-width solid $gray-80;
 }
 
-.searchTextInput {
+.buttonContainer {
+	background: $button-fallback-bg;
+	padding: $grid-unit-10;
+	border: $border-width solid $button-fallback-bg;
+	margin-left: $grid-unit-05;
+	border-radius: $grid-unit-05;
+	align-content: center;
+	align-items: center;
+	flex-shrink: 1;
+}
+
+.icon {
+	fill: $white;
+	background-color: transparent;
+}
+
+.richTextLabel {
+	background-color: transparent;
+	margin-top: $grid-unit-10;
+	margin-bottom: $grid-unit-10;
+	font-size: $editor-font-size;
+	font-weight: 400;
+	font-family: $default-regular-font;
+	width: 100%;
+}
+
+.richTextButton {
+	color: $white;
+	font-size: $editor-font-size;
+	font-weight: 400;
+	background-color: transparent;
+	font-family: $default-regular-font;
+	padding: 0;
+	margin: 0;
+	text-align: center;
+	min-height: 24px;
+}
+
+.richTextButtonCursor {
+	color: #ddd;
+}
+
+.plainTextInput {
 	flex-grow: 1;
 	flex-shrink: 1;
+	min-height: 42px;
 	padding: $grid-unit-05;
+	padding-left: 0;
+	font-family: $default-regular-font;
+	color: $gray-90;
 }
 
-.searchLabel {
-	width: 100%;
+.plainTextInputDark {
+	color: $gray-10;
 }
 
-.buttonContainer {
-	background: #f7f7f7;
-	padding-left: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	padding-top: $grid-unit-10;
-	padding-bottom: $grid-unit-10;
-	border-width: $border-width;
-	border-color: #ccc;
-	border-style: solid;
-	margin-left: 10px;
-	align-content: center;
-	align-items: center;
+.plainTextPlaceholder {
+	color: $gray;
+}
+
+.plainTextPlaceholderDark {
+	color: $gray-50;
 }