Fix alignment for Search & AddFilters

WordPress · Nov 14, 2023 · 1e99ee9 · 1e99ee9
1 parent e3777f2
commit 1e99ee9
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 73 deletions.
diff --git a/packages/edit-site/src/components/dataviews/add-filter.js b/packages/edit-site/src/components/dataviews/add-filter.js
@@ -4,7 +4,6 @@
 import {
 	privateApis as componentsPrivateApis,
 	Button,
-	BaseControl,
 	Icon,
 } from '@wordpress/components';
 import { chevronRightSmall, plus } from '@wordpress/icons';
@@ -59,81 +58,81 @@ export default function AddFilter( { fields, view, onChangeView } ) {
 	}
 
 	return (
-		<BaseControl>
-			<DropdownMenuV2
-				label={ __( 'Add filter' ) }
-				trigger={
-					<Button icon={ plus } variant="tertiary">
-						{ __( 'Add filter' ) }
-					</Button>
-				}
-			>
-				{ filters.map( ( filter ) => {
-					if ( filter.isVisible ) {
-						return (
-							<DropdownMenuItemV2
-								key={ filter.field }
-								disabled={ true }
-							>
-								{ filter.name }
-							</DropdownMenuItemV2>
-						);
-					}
-
+		<DropdownMenuV2
+			label={ __( 'Add filter' ) }
+			trigger={
+				<Button
+					__next40pxDefaultSize={ true }
+					icon={ plus }
+					variant="tertiary"
+				>
+					{ __( 'Add filter' ) }
+				</Button>
+			}
+		>
+			{ filters.map( ( filter ) => {
+				if ( filter.isVisible ) {
 					return (
-						<DropdownSubMenuV2
+						<DropdownMenuItemV2
 							key={ filter.field }
-							trigger={
-								<DropdownSubMenuTriggerV2
-									suffix={
-										<Icon icon={ chevronRightSmall } />
-									}
-								>
-									{ filter.name }
-								</DropdownSubMenuTriggerV2>
-							}
+							disabled={ true }
 						>
-							{ filter.elements.map( ( element ) => (
-								<DropdownMenuItemV2
-									key={ element.value }
-									onSelect={ () => {
-										onChangeView( ( currentView ) => ( {
-											...currentView,
-											page: 1,
-											filters: [
-												...currentView.filters,
-												{
-													field: filter.field,
-													operator: 'in',
-													value: element.value,
-												},
-											],
-										} ) );
-									} }
-									role="menuitemcheckbox"
-								>
-									{ element.label }
-								</DropdownMenuItemV2>
-							) ) }
-						</DropdownSubMenuV2>
+							{ filter.name }
+						</DropdownMenuItemV2>
 					);
-				} ) }
-				<DropdownMenuSeparatorV2 />
-				<DropdownMenuItemV2
-					key={ 'reset-filters' }
-					disabled={ view.filters?.length === 0 }
-					onSelect={ () => {
-						onChangeView( ( currentView ) => ( {
-							...currentView,
-							page: 1,
-							filters: [],
-						} ) );
-					} }
-					role="menuitemcheckbox"
-				>
-					{ __( 'Reset filters' ) }
-				</DropdownMenuItemV2>
-			</DropdownMenuV2>
-		</BaseControl>
+				}
+
+				return (
+					<DropdownSubMenuV2
+						key={ filter.field }
+						trigger={
+							<DropdownSubMenuTriggerV2
+								suffix={ <Icon icon={ chevronRightSmall } /> }
+							>
+								{ filter.name }
+							</DropdownSubMenuTriggerV2>
+						}
+					>
+						{ filter.elements.map( ( element ) => (
+							<DropdownMenuItemV2
+								key={ element.value }
+								onSelect={ () => {
+									onChangeView( ( currentView ) => ( {
+										...currentView,
+										page: 1,
+										filters: [
+											...currentView.filters,
+											{
+												field: filter.field,
+												operator: 'in',
+												value: element.value,
+											},
+										],
+									} ) );
+								} }
+								role="menuitemcheckbox"
+							>
+								{ element.label }
+							</DropdownMenuItemV2>
+						) ) }
+					</DropdownSubMenuV2>
+				);
+			} ) }
+			<DropdownMenuSeparatorV2 />
+			<DropdownMenuItemV2
+				key={ 'reset-filters' }
+				disabled={ view.filters?.length === 0 }
+				onSelect={ () => {
+					onChangeView( ( currentView ) => ( {
+						...currentView,
+						page: 1,
+						filters: [],
+					} ) );
+				} }
+				role="menuitemcheckbox"
+			>
+				{ __( 'Reset filters' ) }
+			</DropdownMenuItemV2>
+		</DropdownMenuV2>
 	);
 }
diff --git a/packages/edit-site/src/components/dataviews/search.js b/packages/edit-site/src/components/dataviews/search.js
@@ -35,6 +35,7 @@ export default function Search( { label, view, onChangeView } ) {
 			value={ search }
 			label={ searchLabel }
 			placeholder={ searchLabel }
+			className="dataviews-control"
 			size="compact"
 		/>
 	);

diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss
@@ -8,6 +8,9 @@
 		min-height: 100%;
 	}
 }
+.dataviews-control > .components-base-control__field {
+	margin-bottom: 0;
+}
 
 .dataviews-pagination {
 	margin-top: auto;