Update: Move filter UI into a toggle-able panel to improve experience…

… on narrow viewports/containers.
WordPress · Jul 5, 2024 · e657486 · e657486
1 parent 99798ec
commit e657486
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 8 deletions.
diff --git a/packages/dataviews/src/dataviews.tsx b/packages/dataviews/src/dataviews.tsx
@@ -6,8 +6,10 @@ import type { ComponentType } from 'react';
 /**
  * WordPress dependencies
  */
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import { __experimentalHStack as HStack, Button } from '@wordpress/components';
 import { useMemo, useState } from '@wordpress/element';
+import { funnel } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -71,6 +73,7 @@ export default function DataViews< Item >( {
 	onSelectionChange = defaultOnSelectionChange,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	const [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( true );
 	const isUncontrolled =
 		selectionProperty === undefined || setSelectionProperty === undefined;
 	const selection = isUncontrolled ? selectionState : selectionProperty;
@@ -120,13 +123,15 @@ export default function DataViews< Item >( {
 							onChangeView={ onChangeView }
 						/>
 					) }
-					<Filters
-						fields={ _fields }
-						view={ view }
-						onChangeView={ onChangeView }
-						openedFilter={ openedFilter }
-						setOpenedFilter={ setOpenedFilter }
-					/>
+					{ isShowingFilter && (
+						<Filters
+							fields={ _fields }
+							view={ view }
+							onChangeView={ onChangeView }
+							openedFilter={ openedFilter }
+							setOpenedFilter={ setOpenedFilter }
+						/>
+					) }
 				</HStack>
 				{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
 					hasPossibleBulkAction && (
@@ -144,6 +149,23 @@ export default function DataViews< Item >( {
 					onChangeView={ onChangeView }
 					supportedLayouts={ supportedLayouts }
 				/>
+				<div className="dataviews-filters-toggle__container">
+					<Button
+						size="compact"
+						icon={ funnel }
+						label={ __( 'Toggle filter display' ) }
+						onClick={ () =>
+							setIsShowingFilter( ! isShowingFilter )
+						}
+						isPressed={ isShowingFilter }
+						aria-expanded={ isShowingFilter }
+					/>
+					{ view.filters.length > 0 && (
+						<span className="dataviews-filters-toggle__count">
+							{ view.filters.length }
+						</span>
+					) }
+				</div>
 			</HStack>
 			<ViewComponent
 				actions={ actions }

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -905,3 +905,22 @@
 		margin: 0 $grid-unit-10 0 $grid-unit-10;
 	}
 }
+
+.dataviews-filters-toggle__container {
+	position: relative;
+}
+
+.dataviews-filters-toggle__count {
+	position: absolute;
+	top: -$grid-unit-15/2;
+	right: -$grid-unit-15;
+	background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+	height: $grid-unit-15 + 2*$border-width;
+	width: $grid-unit-15 + 2*$border-width;
+	line-height: $grid-unit-15 + 2*$border-width;
+	text-align: center;
+	border-radius: 50%;
+	font-size: 10px;
+	outline: $border-width solid white;
+	color: white;
+}