Update filter control position

WordPress · Feb 21, 2024 · c18a42b · c18a42b
1 parent a04a8e9
commit c18a42b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 26 deletions.
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
@@ -79,17 +79,30 @@ export default function DataViews( {
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 3 } justify="flex-start">
 				<HStack
-					alignment="flex-start"
+					alignment="top"
 					justify="start"
 					className="dataviews-filters__view-actions"
 				>
-					{ search && (
-						<Search
-							label={ searchLabel }
+					<HStack
+						justify="start"
+						className="dataviews-filters__container"
+						wrap
+					>
+						{ search && (
+							<Search
+								label={ searchLabel }
+								view={ view }
+								onChangeView={ onChangeView }
+							/>
+						) }
+						<Filters
+							fields={ _fields }
 							view={ view }
 							onChangeView={ onChangeView }
+							openedFilter={ openedFilter }
+							setOpenedFilter={ setOpenedFilter }
 						/>
-					) }
+					</HStack>
 					{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) && (
 						<BulkActions
 							actions={ actions }
@@ -106,19 +119,6 @@ export default function DataViews( {
 						supportedLayouts={ supportedLayouts }
 					/>
 				</HStack>
-				<HStack
-					justify="start"
-					className="dataviews-filters__container"
-					wrap
-				>
-					<Filters
-						fields={ _fields }
-						view={ view }
-						onChangeView={ onChangeView }
-						openedFilter={ openedFilter }
-						setOpenedFilter={ setOpenedFilter }
-					/>
-				</HStack>
 				<ViewComponent
 					fields={ _fields }
 					view={ view }

diff --git a/packages/dataviews/src/filters.js b/packages/dataviews/src/filters.js
@@ -11,6 +11,7 @@ import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
 import { sanitizeOperators } from './utils';
 import { ENUMERATION_TYPE, OPERATOR_IN, OPERATOR_NOT_IN } from './constants';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 const Filters = memo( function Filters( {
 	fields,
@@ -108,7 +109,11 @@ const Filters = memo( function Filters( {
 		);
 	}
 
-	return filterComponents;
+	return (
+		<HStack justify="flex-start" style={ { width: 'fit-content' } } wrap>
+			{ filterComponents }
+		</HStack>
+	);
 } );
 
 export default Filters;
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -13,20 +13,14 @@
 .dataviews-filters__view-actions {
 	padding: $grid-unit-15 $grid-unit-40 0;
 	.components-search-control {
-		flex-grow: 1;
-
 		.components-base-control__field {
 			max-width: 240px;
 		}
 	}
 }
 
 .dataviews-filters__container {
-	padding: 0 $grid-unit-40;
-}
-
-.dataviews-filters__view-actions.components-h-stack {
-	align-items: center;
+	padding-right: $grid-unit-40;
 }
 
 .dataviews-filters-button {