[Mobile] Update the bottom sheet header

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

@@ -70,10 +70,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;
@@ -599,7 +599,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;