[Mobile] Update the bottom sheet header (#34309)

* Add new Header bottomSheet component

* Include the new Header component in buttomSheet

* Update NavigationHeader to use the new Header component for backwards compatibility

* Update all instances of NavigationHeader with Header

* Update BottomSheet Header documentation to reduce its size (#34339)

Leverage short, declarative statements when possible.

* Move Header to NavBar

* Update usage from Header to NavBar

* Remove the NavigationHeader component

* Fix space in the styles

Co-authored-by: David Calhoun <[email protected]>

packages/components/src/font-size-picker/index.native.js

@@ -84,10 +84,12 @@ function FontSizePicker( {
 			showSheet={ showSubSheet }
 		>
 			<>
-				<BottomSheet.NavigationHeader
-					screen={ label }
-					leftButtonOnPress={ goBack }
-				/>
+				<BottomSheet.NavBar>
+					<BottomSheet.NavBar.BackButton onPress={ goBack } />
+					<BottomSheet.NavBar.Heading>
+						{ label }
+					</BottomSheet.NavBar.Heading>
+				</BottomSheet.NavBar>
 				<View style={ styles[ 'components-font-size-picker' ] }>
 					<BottomSheet.Cell
 						customActionButton

packages/components/src/mobile/bottom-sheet-select-control/index.native.js

@@ -70,10 +70,12 @@ const BottomSheetSelectControl = ( {
 			showSheet={ showSubSheet }
 		>
 			<>
-				<BottomSheet.NavigationHeader
-					screen={ label }
-					leftButtonOnPress={ goBack }
-				/>
+				<BottomSheet.NavBar>
+					<BottomSheet.NavBar.BackButton onPress={ goBack } />
+					<BottomSheet.NavBar.Heading>
+						{ label }
+					</BottomSheet.NavBar.Heading>
+				</BottomSheet.NavBar>
 				<View style={ styles.selectControl }>
 					{ items.map( ( item, index ) => (
 						<BottomSheet.Cell

packages/components/src/mobile/bottom-sheet-text-control/index.native.js

@@ -68,10 +68,12 @@ const BottomSheetTextControl = ( {
 			showSheet={ showSubSheet }
 		>
 			<>
-				<BottomSheet.NavigationHeader
-					screen={ label }
-					leftButtonOnPress={ goBack }
-				/>
+				<BottomSheet.NavBar>
+					<BottomSheet.NavBar.BackButton onPress={ goBack } />
+					<BottomSheet.NavBar.Heading>
+						{ label }
+					</BottomSheet.NavBar.Heading>
+				</BottomSheet.NavBar>
 				<PanelBody style={ horizontalBorderStyle }>
 					<TextInput
 						label={ label }

packages/components/src/mobile/bottom-sheet/index.native.js

@@ -42,7 +42,7 @@ import NavigationScreen from './bottom-sheet-navigation/navigation-screen';
 import NavigationContainer from './bottom-sheet-navigation/navigation-container';
 import KeyboardAvoidingView from './keyboard-avoiding-view';
 import BottomSheetSubSheet from './sub-sheet';
-import NavigationHeader from './navigation-header';
+import NavBar from './nav-bar';
 import { BottomSheetProvider } from './bottom-sheet-context';
 
 const DEFAULT_LAYOUT_ANIMATION = LayoutAnimation.Presets.easeInEaseOut;
@@ -609,7 +609,7 @@ ThemedBottomSheet.getWidth = getWidth;
 ThemedBottomSheet.Button = Button;
 ThemedBottomSheet.Cell = Cell;
 ThemedBottomSheet.SubSheet = BottomSheetSubSheet;
-ThemedBottomSheet.NavigationHeader = NavigationHeader;
+ThemedBottomSheet.NavBar = NavBar;
 ThemedBottomSheet.CyclePickerCell = CyclePickerCell;
 ThemedBottomSheet.PickerCell = PickerCell;
 ThemedBottomSheet.SwitchCell = SwitchCell;

packages/components/src/mobile/bottom-sheet/nav-bar/README.md

@@ -0,0 +1,61 @@
+# BottomSheet Header
+
+BottomSheet Header components provide styled elements for composing header UI within a `BottomSheet`.
+
+## Usage
+
+```jsx
+import { BottomSheet } from '@wordpress/components';
+
+export default = () => (
+	<BottomSheet>
+		<BottomSheet.NavBar>
+			<BottomSheet.NavBar.BackButton onPress={ () => {} } />
+			<BottomSheet.NavBar.Title>A Sheet Title</BottomSheet.NavBar.Title>
+			<BottomSheet.NavBar.ApplyButton onPress={ () => {} } />
+		</BottomSheet.NavBar>
+	</BottomSheet>
+);
+```
+
+## BottomSheet.NavBar
+
+Provides structural styles for left-center-right layout for header UI.
+
+## BottomSheet.NavBar.Title
+
+Displays a styled title for a bottom sheet.
+
+## BottomSheet.NavBar.ApplyButton
+
+Displays a styled button to apply settings of bottom sheet controls.
+
+### Props
+
+#### onPress
+
+Callback invoked once the button is pressed.
+
+## BottomSheet.NavBar.BackButton
+
+Displays a styled button to navigate backwards from a bottom sheet.
+
+### Props
+
+#### onPress
+
+Callback invoked once the button is pressed.
+
+## BottomSheet.NavBar.DismissButton
+
+Displays a styled button to dismiss a full screen bottom sheet.
+
+### Props
+
+#### onPress
+
+Callback invoked once the button is pressed.
+
+#### iosText 
+
+Used to display iOS text if different from "Cancel". 

packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { View, TouchableWithoutFeedback } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+// Action button component is used by both Back and Apply Button componenets.
+function ActionButton( {
+	onPress,
+	accessibilityLabel,
+	accessibilityHint,
+	children,
+} ) {
+	return (
+		<TouchableWithoutFeedback
+			onPress={ onPress }
+			accessibilityRole={ 'button' }
+			accessibilityLabel={ accessibilityLabel }
+			accessibilityHint={ accessibilityHint }
+		>
+			<View style={ styles[ 'action-button' ] }>{ children }</View>
+		</TouchableWithoutFeedback>
+	);
+}
+
+export default ActionButton;

packages/components/src/mobile/bottom-sheet/nav-bar/apply-button.native.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { View, Text, Platform } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, check } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+import ActionButton from './action-button';
+
+function ApplyButton( { onPress } ) {
+	const buttonTextStyle = usePreferredColorSchemeStyle(
+		styles[ 'button-text' ],
+		styles[ 'button-text-dark' ]
+	);
+
+	const applyButtonStyle = usePreferredColorSchemeStyle(
+		styles[ 'apply-button-icon' ],
+		styles[ 'apply-button-icon-dark' ]
+	);
+
+	return (
+		<View style={ styles[ 'apply-button' ] }>
+			<ActionButton
+				onPress={ onPress }
+				accessibilityLabel={ __( 'Apply' ) }
+				accessibilityHint={ __( 'Applies the setting' ) }
+			>
+				{ Platform.OS === 'ios' ? (
+					<Text style={ buttonTextStyle } maxFontSizeMultiplier={ 2 }>
+						{ __( 'Apply' ) }
+					</Text>
+				) : (
+					<Icon
+						icon={ check }
+						size={ 24 }
+						style={ applyButtonStyle }
+					/>
+				) }
+			</ActionButton>
+		</View>
+	);
+}
+
+export default ApplyButton;

packages/components/src/mobile/bottom-sheet/nav-bar/back-button.native.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { View, Platform, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, arrowLeft, close } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+import ActionButton from './action-button';
+import chevronBack from './../chevron-back';
+
+function Button( { onPress, icon, text } ) {
+	const buttonTextStyle = usePreferredColorSchemeStyle(
+		styles[ 'button-text' ],
+		styles[ 'button-text-dark' ]
+	);
+
+	return (
+		<View style={ styles[ 'back-button' ] }>
+			<ActionButton
+				onPress={ onPress }
+				accessibilityLabel={ __( 'Go back' ) }
+				accessibilityHint={ __(
+					'Navigates to the previous content sheet'
+				) }
+			>
+				{ icon }
+				{ text && (
+					<Text style={ buttonTextStyle } maxFontSizeMultiplier={ 2 }>
+						{ text }
+					</Text>
+				) }
+			</ActionButton>
+		</View>
+	);
+}
+
+function BackButton( { onPress } ) {
+	const chevronLeftStyle = usePreferredColorSchemeStyle(
+		styles[ 'chevron-left-icon' ],
+		styles[ 'chevron-left-icon-dark' ]
+	);
+	const arrowLeftStyle = usePreferredColorSchemeStyle(
+		styles[ 'arrow-left-icon' ],
+		styles[ 'arrow-right-icon-dark' ]
+	);
+
+	let backIcon;
+	let backText;
+
+	if ( Platform.OS === 'ios' ) {
+		backIcon = (
+			<Icon icon={ chevronBack } size={ 21 } style={ chevronLeftStyle } />
+		);
+		backText = __( 'Back' );
+	} else {
+		backIcon = (
+			<Icon icon={ arrowLeft } size={ 24 } style={ arrowLeftStyle } />
+		);
+	}
+
+	return <Button onPress={ onPress } icon={ backIcon } text={ backText } />;
+}
+
+function DismissButton( { onPress, iosText } ) {
+	const arrowLeftStyle = usePreferredColorSchemeStyle(
+		styles[ 'arrow-left-icon' ],
+		styles[ 'arrow-right-icon-dark' ]
+	);
+
+	let backIcon;
+	let backText;
+
+	if ( Platform.OS === 'ios' ) {
+		backText = iosText ? iosText : __( 'Cancel' );
+	} else {
+		backIcon = <Icon icon={ close } size={ 24 } style={ arrowLeftStyle } />;
+	}
+
+	return <Button onPress={ onPress } icon={ backIcon } text={ backText } />;
+}
+
+Button.Back = BackButton;
+Button.Dismiss = DismissButton; // Cancel or Close Button
+
+export default Button;

packages/components/src/mobile/bottom-sheet/nav-bar/heading.native.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+function Heading( { children } ) {
+	const headingStyle = usePreferredColorSchemeStyle(
+		styles.heading,
+		styles[ 'heading-dark' ]
+	);
+
+	return (
+		<Text
+			accessibilityRole="header"
+			style={ headingStyle }
+			maxFontSizeMultiplier={ 3 }
+		>
+			{ children }
+		</Text>
+	);
+}
+
+export default Heading;

packages/components/src/mobile/bottom-sheet/nav-bar/index.native.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import ApplyButton from './apply-button';
+import Button from './back-button';
+import Heading from './heading';
+import styles from './styles.scss';
+function NavBar( { children } ) {
+	return <View style={ styles[ 'nav-bar' ] }>{ children }</View>;
+}
+
+NavBar.ApplyButton = ApplyButton;
+NavBar.BackButton = Button.Back;
+NavBar.DismissButton = Button.Dismiss;
+
+NavBar.Heading = Heading;
+
+export default NavBar;