Update: Expand search on list view.

WordPress · Jul 22, 2024 · 74942dd · 74942dd
1 parent bced5e0
commit 74942dd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/packages/dataviews/src/components/dataviews-search/index.tsx b/packages/dataviews/src/components/dataviews-search/index.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -10,6 +15,7 @@ import { useDebouncedInput } from '@wordpress/compose';
  * Internal dependencies
  */
 import DataViewsContext from '../dataviews-context';
+import { LAYOUT_LIST } from '../../constants';
 
 interface SearchProps {
 	label?: string;
@@ -37,8 +43,12 @@ const DataViewsSearch = memo( function Search( { label }: SearchProps ) {
 		} );
 	}, [ debouncedSearch ] );
 	const searchLabel = label || __( 'Search' );
+
 	return (
 		<SearchControl
+			className={ classnames( 'dataviews-search', {
+				'is-expanded': view.type === LAYOUT_LIST,
+			} ) }
 			__nextHasNoMarginBottom
 			onChange={ setSearch }
 			value={ search }

diff --git a/packages/dataviews/src/components/dataviews-search/style.scss b/packages/dataviews/src/components/dataviews-search/style.scss
@@ -0,0 +1,3 @@
+.dataviews-search.is-expanded .components-base-control__field {
+	max-width: unset;
+}
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -2,6 +2,7 @@
 @import "./components/dataviews-bulk-actions/style.scss";
 @import "./components/dataviews-bulk-actions-toolbar/style.scss";
 @import "./components/dataviews-filters/style.scss";
+@import "./components/dataviews-search/style.scss";
 @import "./components/dataviews-pagination/style.scss";
 @import "./components/dataviews-item-actions/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";