Fix native styles and remove old native search form file

WordPress · Jun 28, 2021 · 11c7322 · 11c7322
1 parent 6bfbce1
commit 11c7322
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 126 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -9,13 +9,12 @@ import { LayoutAnimation, TouchableHighlight } from 'react-native';
 import { useEffect, useState, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
+import { BottomSheet, BottomSheetConsumer, SearchControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import InserterSearchResults from './search-results';
-import InserterSearchForm from './search-form';
 import { store as blockEditorStore } from '../../store';
 import InserterTabs from './tabs';
 import styles from './style.scss';
@@ -175,7 +174,7 @@ function InserterMenu( {
 			header={
 				<>
 					{ showSearchForm && (
-						<InserterSearchForm
+						<SearchControl
 							onChange={ onChangeSearch }
 							value={ filterValue }
 						/>

diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js
diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
@@ -13,37 +13,6 @@
 	padding-top: 8;
 }
 
-.searchForm {
-	height: 46px;
-	border-radius: 8px;
-	color: $gray-dark;
-	margin: $grid-unit-30;
-	background-color: $gray-light;
-	flex-direction: row;
-	justify-content: space-between;
-}
-
-.searchFormDark {
-	background-color: rgba($white, 0.07);
-}
-
-.searchFormInput {
-	color: $gray-dark;
-	flex: 2;
-}
-
-.searchFormInputDark {
-	color: $white;
-}
-
-.searchFormPlaceholder {
-	color: $gray;
-}
-
-.searchFormPlaceholderDark {
-	color: rgba($white, 0.8);
-}
-
 .inserter-tabs__wrapper {
 	overflow: hidden;
 }

diff --git a/packages/components/src/search-control/style.native.scss b/packages/components/src/search-control/style.native.scss
@@ -0,0 +1,30 @@
+.searchForm {
+	height: 46px;
+	border-radius: 8px;
+	color: $gray-dark;
+	margin: $grid-unit-30;
+	background-color: $gray-light;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.searchFormDark {
+	background-color: rgba($white, 0.07);
+}
+
+.searchFormInput {
+	color: $gray-dark;
+	flex: 2;
+}
+
+.searchFormInputDark {
+	color: $white;
+}
+
+.searchFormPlaceholder {
+	color: $gray;
+}
+
+.searchFormPlaceholderDark {
+	color: rgba($white, 0.8);
+}