[RNMobile] Introduce a common API to style Button from both web and mobile

packages/block-editor/src/components/block-list/breadcrumb.native.js

@@ -2,14 +2,15 @@
  * WordPress dependencies
  */
 import { Icon } from '@wordpress/components';
+import { PrimitiveButton } from '@wordpress/primitives';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { getBlockType } from '@wordpress/blocks';
 
 /**
  * External dependencies
  */
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text } from 'react-native';
 
 /**
  * Internal dependencies
@@ -27,8 +28,9 @@ const BlockBreadcrumb = ( {
 } ) => {
 	return (
 		<View style={ styles.breadcrumbContainer }>
-			<TouchableOpacity
-				style={ styles.button }
+			<PrimitiveButton
+				flexDirection="row"
+				alignItems="center"
 				onPress={ () => {
 					/* Open BottomSheet with markup */
 				} }
@@ -61,7 +63,7 @@ const BlockBreadcrumb = ( {
 				>
 					<BlockTitle clientId={ clientId } />
 				</Text>
-			</TouchableOpacity>
+			</PrimitiveButton>
 		</View>
 	);
 };

packages/block-editor/src/components/block-list/breadcrumb.native.scss

@@ -17,11 +17,6 @@
 	color: $white;
 }
 
-.button {
-	flex-direction: row;
-	align-items: center;
-}
-
 .arrow {
 	color: $light-opacity-light-700;
 	margin-top: -4px;

packages/block-editor/src/components/button-block-appender/index.native.js

@@ -38,6 +38,8 @@ function ButtonBlockAppender( {
 				rootClientId={ rootClientId }
 				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
 					<Button
+						isLarge
+						isPrimary
 						onClick={ onToggle }
 						aria-expanded={ isOpen }
 						disabled={ disabled }

packages/components/src/button/index.native.js

@@ -1,20 +1,15 @@
 /**
  * External dependencies
  */
-import {
-	StyleSheet,
-	TouchableOpacity,
-	Text,
-	View,
-	Platform,
-} from 'react-native';
+import { StyleSheet, Text, View, Platform } from 'react-native';
 import { isArray } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Children, cloneElement } from '@wordpress/element';
 import { withPreferredColorScheme } from '@wordpress/compose';
+import { PrimitiveButton } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -24,16 +19,9 @@ import Icon from '../icon';
 
 const isAndroid = Platform.OS === 'android';
 const marginBottom = isAndroid ? -0.5 : 0;
-const marginLeft = -3;
 
 const styles = StyleSheet.create( {
-	container: {
-		flex: 1,
-		padding: 3,
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
-	buttonInactive: {
+	button: {
 		flex: 1,
 		flexDirection: 'row',
 		justifyContent: 'center',
@@ -43,32 +31,23 @@ const styles = StyleSheet.create( {
 		aspectRatio: 1,
 	},
 	buttonActive: {
-		flex: 1,
-		flexDirection: 'row',
-		justifyContent: 'center',
-		alignItems: 'center',
 		borderRadius: 6,
 		borderColor: '#2e4453',
 		backgroundColor: '#2e4453',
 	},
-	subscriptInactive: {
+	subscript: {
 		color: '#7b9ab1', // $toolbar-button
 		fontWeight: 'bold',
 		fontSize: 13,
 		alignSelf: 'flex-end',
-		marginLeft,
+		marginLeft: -3,
 		marginBottom,
 	},
-	subscriptInactiveDark: {
+	subscriptDark: {
 		color: '#a7aaad', // $gray_20
 	},
 	subscriptActive: {
 		color: 'white',
-		fontWeight: 'bold',
-		fontSize: 13,
-		alignSelf: 'flex-end',
-		marginLeft,
-		marginBottom,
 	},
 } );
 
@@ -82,6 +61,9 @@ export function Button( props ) {
 		fixedRatio = true,
 		getStylesFromColorScheme,
 		isPressed,
+		isLarge,
+		isSmall,
+		isPrimary,
 		'aria-disabled': ariaDisabled,
 		'data-subscript': subscript,
 		testID,
@@ -91,15 +73,26 @@ export function Button( props ) {
 		label,
 		shortcut,
 		tooltipPosition,
+		...otherProps
 	} = props;
 
+	// Support some of props from the web just to demonstrate.
+	// The markup is a bit different than on the web and we style the View inside the Touchable instead.
+	let pd = 3;
+	if ( isSmall ) {
+		pd = 8;
+	} else if ( isLarge ) {
+		pd = 12;
+	}
+
 	const isDisabled = ariaDisabled || disabled;
 
-	const buttonViewStyle = {
-		opacity: isDisabled ? 0.3 : 1,
-		...( fixedRatio && styles.fixedRatio ),
-		...( isPressed ? styles.buttonActive : styles.buttonInactive ),
-	};
+	const buttonViewStyle = [
+		styles.button,
+		{ opacity: isDisabled ? 0.3 : 1 },
+		fixedRatio && styles.fixedRatio,
+		isPressed && styles.buttonActive,
+	];
 
 	const states = [];
 	if ( isPressed ) {
@@ -110,9 +103,9 @@ export function Button( props ) {
 		states.push( 'disabled' );
 	}
 
-	const subscriptInactive = getStylesFromColorScheme(
-		styles.subscriptInactive,
-		styles.subscriptInactiveDark
+	const subscriptDefault = getStylesFromColorScheme(
+		styles.subscript,
+		styles.subscriptDark
 	);
 
 	const newChildren = Children.map( children, ( child ) => {
@@ -147,37 +140,42 @@ export function Button( props ) {
 		: null;
 
 	const element = (
-		<TouchableOpacity
+		<PrimitiveButton
+			flex={ 1 }
 			activeOpacity={ 0.7 }
 			accessible={ true }
 			accessibilityLabel={ label }
 			accessibilityStates={ states }
 			accessibilityRole={ 'button' }
 			accessibilityHint={ hint }
 			onPress={ onClick }
-			onLongPress={ onLongPress }
-			style={ styles.container }
+			p={ pd }
+			color={ isPrimary && 'white' }
+			backgroundColor={ isPrimary && 'primary' }
+			justifyContent={ 'center' }
+			alignItems={ 'center' }
 			disabled={ isDisabled }
+			onLongPress={ onLongPress }
 			testID={ testID }
+			{ ...otherProps }
 		>
 			<View style={ buttonViewStyle }>
 				<View style={ { flexDirection: 'row' } }>
 					{ newIcon }
 					{ newChildren }
 					{ subscript && (
 						<Text
-							style={
-								isPressed
-									? styles.subscriptActive
-									: subscriptInactive
-							}
+							style={ [
+								subscriptDefault,
+								isPressed && styles.subscriptActive,
+							] }
 						>
 							{ subscript }
 						</Text>
 					) }
 				</View>
 			</View>
-		</TouchableOpacity>
+		</PrimitiveButton>
 	);
 
 	if ( ! shouldShowTooltip ) {

packages/components/src/index.native.js

@@ -7,6 +7,7 @@ export {
 	G,
 	HorizontalRule,
 	BlockQuotation,
+	PrimitiveButton,
 } from '@wordpress/primitives';
 export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
@@ -44,6 +45,7 @@ export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+export { useTheme, default as ThemeProvider } from './theme-provider';
 
 // Mobile Components
 export { default as BottomSheet } from './mobile/bottom-sheet';

packages/edit-post/src/editor.native.js

@@ -13,7 +13,7 @@ import { EditorProvider } from '@wordpress/editor';
 import { parse, serialize } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { SlotFillProvider } from '@wordpress/components';
+import { SlotFillProvider, ThemeProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -134,7 +134,9 @@ class Editor extends Component {
 					useSubRegistry={ false }
 					{ ...props }
 				>
-					<Layout setTitleRef={ this.setTitleRef } />
+					<ThemeProvider>
+						<Layout setTitleRef={ this.setTitleRef } />
+					</ThemeProvider>
 				</EditorProvider>
 			</SlotFillProvider>
 		);

packages/primitives/package.json

@@ -25,6 +25,7 @@
 	"dependencies": {
 		"@babel/runtime": "^7.8.3",
 		"@emotion/core": "^10.0.22",
+		"@emotion/native": "^10.0.22",
 		"@emotion/styled": "^10.0.23",
 		"@wordpress/element": "file:../element",
 		"classnames": "^2.2.5",

packages/primitives/src/button/index.native.js

@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/native';
+import {
+	color,
+	space,
+	layout,
+	flexbox,
+	background,
+	border,
+	position,
+	shadow,
+} from 'styled-system';
+
+export const PrimitiveButton = styled.TouchableOpacity`
+${ color }
+${ space }
+${ layout }
+${ flexbox }
+${ background }
+${ border }
+${ position }
+${ shadow }
+`;