DataViews: Use Dropdown for views config dialog (WordPress#65314)

Co-authored-by: ntsekouras <[email protected]> Co-authored-by: jameskoster <[email protected]>
MaxMood96 · Sep 13, 2024 · 8a815ee · 8a815ee
1 parent 257d26a
commit 8a815ee
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 31 deletions.
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -8,7 +8,7 @@ import type { ChangeEvent } from 'react';
  */
 import {
 	Button,
-	Popover,
+	Dropdown,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
@@ -24,7 +24,7 @@ import {
 	BaseControl,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { memo, useContext, useState, useMemo } from '@wordpress/element';
+import { memo, useContext, useMemo } from '@wordpress/element';
 import { chevronDown, chevronUp, cog, seen, unseen } from '@wordpress/icons';
 import warning from '@wordpress/warning';
 
@@ -549,34 +549,32 @@ function _DataViewsViewConfig( {
 	setDensity: React.Dispatch< React.SetStateAction< number > >;
 	defaultLayouts?: SupportedLayouts;
 } ) {
-	const [ isShowingViewPopover, setIsShowingViewPopover ] =
-		useState< boolean >( false );
-
 	return (
 		<>
 			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
-			<div>
-				<Button
-					size="compact"
-					icon={ cog }
-					label={ _x( 'View options', 'View is used as a noun' ) }
-					onClick={ () => setIsShowingViewPopover( true ) }
-				/>
-				{ isShowingViewPopover && (
-					<Popover
-						placement="bottom-end"
-						onClose={ () => {
-							setIsShowingViewPopover( false );
-						} }
-						focusOnMount
-					>
-						<DataviewsViewConfigContent
-							density={ density }
-							setDensity={ setDensity }
+			<Dropdown
+				popoverProps={ { placement: 'bottom-end', offset: 9 } }
+				contentClassName="dataviews-view-config"
+				renderToggle={ ( { onToggle } ) => {
+					return (
+						<Button
+							size="compact"
+							icon={ cog }
+							label={ _x(
+								'View options',
+								'View is used as a noun'
+							) }
+							onClick={ onToggle }
 						/>
-					</Popover>
+					);
+				} }
+				renderContent={ () => (
+					<DataviewsViewConfigContent
+						density={ density }
+						setDensity={ setDensity }
+					/>
 				) }
-			</div>
+			/>
 		</>
 	);
 }

diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -1,11 +1,14 @@
 .dataviews-view-config {
-	width: 320px;
-	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
-	container-type: inline-size;
-	padding: $grid-unit-20;
-	font-size: $default-font-size;
-	line-height: $default-line-height;
+	.components-popover__content {
+		width: 320px;
+		/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
+		container-type: inline-size;
+		padding: $grid-unit-20;
+		font-size: $default-font-size;
+		line-height: $default-line-height;
+	}
 }
+
 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
 	text-transform: uppercase;
 }