Move Header to NavBar

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

@@ -43,7 +43,7 @@ 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 Header from './header';
+import NavBar from './nav-bar';
 import { BottomSheetProvider } from './bottom-sheet-context';
 
 const DEFAULT_LAYOUT_ANIMATION = LayoutAnimation.Presets.easeInEaseOut;
@@ -601,7 +601,7 @@ ThemedBottomSheet.Button = Button;
 ThemedBottomSheet.Cell = Cell;
 ThemedBottomSheet.SubSheet = BottomSheetSubSheet;
 ThemedBottomSheet.NavigationHeader = NavigationHeader;
-ThemedBottomSheet.Header = Header;
+ThemedBottomSheet.NavBar = NavBar;
 ThemedBottomSheet.CyclePickerCell = CyclePickerCell;
 ThemedBottomSheet.PickerCell = PickerCell;
 ThemedBottomSheet.SwitchCell = SwitchCell;

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

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

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

@@ -8,6 +8,7 @@ import { View, TouchableWithoutFeedback } from 'react-native';
  */
 import styles from './styles.scss';
 
+// Action button component is used by both Back and Apply Button componenets.
 function ActionButton( {
 	onPress,
 	accessibilityLabel,

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

@@ -70,7 +70,7 @@ function BackButton( { onPress } ) {
 	return <Button onPress={ onPress } icon={ backIcon } text={ backText } />;
 }
 
-function CancelButton( { onPress, text } ) {
+function DismissButton( { onPress, iosText } ) {
 	const arrowLeftStyle = usePreferredColorSchemeStyle(
 		styles[ 'arrow-left-icon' ],
 		styles[ 'arrow-right-icon-dark' ]
@@ -80,20 +80,15 @@ function CancelButton( { onPress, text } ) {
 	let backText;
 
 	if ( Platform.OS === 'ios' ) {
-		backText = text ? text : __( 'Cancel' );
+		backText = iosText ? iosText : __( 'Cancel' );
 	} else {
 		backIcon = <Icon icon={ close } size={ 24 } style={ arrowLeftStyle } />;
 	}
 
 	return <Button onPress={ onPress } icon={ backIcon } text={ backText } />;
 }
 
-function CloseButton( { onPress } ) {
-	return <CancelButton onPress={ onPress } text={ __( 'Close' ) } />;
-}
-
 Button.Back = BackButton;
-Button.Cancel = CancelButton;
-Button.Close = CloseButton;
+Button.Dismiss = DismissButton; // Cancel or Close Button
 
 export default Button;

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

@@ -13,21 +13,21 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './styles.scss';
 
-function Title( { children } ) {
-	const titleStyle = usePreferredColorSchemeStyle(
-		styles.title,
-		styles[ 'title-dark' ]
+function Heading( { children } ) {
+	const headingStyle = usePreferredColorSchemeStyle(
+		styles.heading,
+		styles[ 'heading-dark' ]
 	);
 
 	return (
 		<Text
 			accessibilityRole="header"
-			style={ titleStyle }
+			style={ headingStyle }
 			maxFontSizeMultiplier={ 3 }
 		>
 			{ children }
 		</Text>
 	);
 }
 
-export default Title;
+export default Heading;

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

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+import Button from './back-button';
+import ApplyButton from './apply-button';
+import Heading from './heading';
+
+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;

packages/components/src/mobile/bottom-sheet/header/styles.native.scss → packages/components/src/mobile/bottom-sheet/nav-bar/styles.native.scss

@@ -1,12 +1,11 @@
-
-.header {
+.nav-bar {
 	align-items: center;
 	flex-direction: row;
 	height: 44px;
 	justify-content: center;
 }
 
-.title {
+.heading {
 	color: $light-primary;
 	text-align: center;
 	font-weight: 600;
@@ -15,7 +14,7 @@
 	width: 100%;
 }
 
-.title-dark {
+.heading-dark {
 	color: $dark-primary;
 }
 
@@ -43,7 +42,6 @@
 	z-index: 2;
 }
 
-
 .button-text {
 	color: $blue-50;
 	font-size: 16px;