[Mobile] Improve keyboard hide button (#13415)

* Allow passing style to toolbar container * Replace right border with left border * Add keyboard-hide icon * Fix lint issue
WordPress · Mar 6, 2019 · 435c559 · 435c559
1 parent e884509
commit 435c559
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/packages/components/src/dashicon/index.js b/packages/components/src/dashicon/index.js
@@ -568,6 +568,9 @@ export default class Dashicon extends Component {
 			case 'instagram':
 				path = 'M12.67 10A2.67 2.67 0 1 0 10 12.67 2.68 2.68 0 0 0 12.67 10zm1.43 0A4.1 4.1 0 1 1 10 5.9a4.09 4.09 0 0 1 4.1 4.1zm1.13-4.27a1 1 0 1 1-1-1 1 1 0 0 1 1 1zM10 3.44c-1.17 0-3.67-.1-4.72.32a2.67 2.67 0 0 0-1.52 1.52c-.42 1-.32 3.55-.32 4.72s-.1 3.67.32 4.72a2.74 2.74 0 0 0 1.52 1.52c1 .42 3.55.32 4.72.32s3.67.1 4.72-.32a2.83 2.83 0 0 0 1.52-1.52c.42-1.05.32-3.55.32-4.72s.1-3.67-.32-4.72a2.74 2.74 0 0 0-1.52-1.52c-1.05-.42-3.55-.32-4.72-.32zM18 10c0 1.1 0 2.2-.05 3.3a4.84 4.84 0 0 1-1.29 3.36A4.8 4.8 0 0 1 13.3 18H6.7a4.84 4.84 0 0 1-3.36-1.29 4.84 4.84 0 0 1-1.29-3.41C2 12.2 2 11.1 2 10V6.7a4.84 4.84 0 0 1 1.34-3.36A4.8 4.8 0 0 1 6.7 2.05C7.8 2 8.9 2 10 2h3.3a4.84 4.84 0 0 1 3.36 1.29A4.8 4.8 0 0 1 18 6.7V10z';
 				break;
+			case 'keyboard-hide':
+				path = 'M18,0 L2,0 C0.9,0 0.01,0.9 0.01,2 L0,12 C0,13.1 0.9,14 2,14 L18,14 C19.1,14 20,13.1 20,12 L20,2 C20,0.9 19.1,0 18,0 Z M18,12 L2,12 L2,2 L18,2 L18,12 Z M9,3 L11,3 L11,5 L9,5 L9,3 Z M9,6 L11,6 L11,8 L9,8 L9,6 Z M6,3 L8,3 L8,5 L6,5 L6,3 Z M6,6 L8,6 L8,8 L6,8 L6,6 Z M3,6 L5,6 L5,8 L3,8 L3,6 Z M3,3 L5,3 L5,5 L3,5 L3,3 Z M6,9 L14,9 L14,11 L6,11 L6,9 Z M12,6 L14,6 L14,8 L12,8 L12,6 Z M12,3 L14,3 L14,5 L12,5 L12,3 Z M15,6 L17,6 L17,8 L15,8 L15,6 Z M15,3 L17,3 L17,5 L15,5 L15,3 Z M10,20 L14,16 L6,16 L10,20 Z';
+				break;
 			case 'laptop':
 				path = 'M3 3h14c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V4c0-.6.4-1 1-1zm13 2H4v8h12V5zm-3 1H5v4zm6 11v-1H1v1c0 .6.5 1 1.1 1h15.8c.6 0 1.1-.4 1.1-1z';
 				break;

diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js
@@ -41,7 +41,7 @@ import ToolbarContainer from './toolbar-container';
  *
  * @return {ReactElement} The rendered toolbar.
  */
-function Toolbar( { controls = [], children, className, isCollapsed, icon, label } ) {
+function Toolbar( { controls = [], children, className, isCollapsed, icon, label, ...otherProps } ) {
 	if (
 		( ! controls || ! controls.length ) &&
 		! children
@@ -67,7 +67,7 @@ function Toolbar( { controls = [], children, className, isCollapsed, icon, label
 	}
 
 	return (
-		<ToolbarContainer className={ classnames( 'components-toolbar', className ) }>
+		<ToolbarContainer className={ classnames( 'components-toolbar', className ) } { ...otherProps }>
 			{ flatMap( controlSets, ( controlSet, indexOfSet ) => (
 				controlSet.map( ( control, indexOfControl ) => (
 					<ToolbarButton

diff --git a/packages/components/src/toolbar/style.native.scss b/packages/components/src/toolbar/style.native.scss
@@ -1,7 +1,7 @@
 .container {
 	flex-direction: row;
-	border-right-width: 1px;
-	border-right-color: #e9eff3;
+	border-left-width: 1px;
+	border-color: #e9eff3;
 	padding-left: 5px;
 	padding-right: 5px;
 }
diff --git a/packages/components/src/toolbar/toolbar-container.native.js b/packages/components/src/toolbar/toolbar-container.native.js
@@ -6,7 +6,7 @@ import { View } from 'react-native';
 import styles from './style.scss';
 
 const ToolbarContainer = ( props ) => (
-	<View style={ styles.container }>
+	<View style={ [ styles.container, props.passedStyle ] }>
 		{ props.children }
 	</View>
 );