From 1b3bbbc71b0f0b2a98b158aa48512c678b8d3f7d Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 10 Jul 2024 16:36:52 +0100
Subject: [PATCH] Update: Data views grid layout: Allow users to adjust grid
 density, and consumers to set default density

---
 .../src/hooks/use-viewport-match/index.js     |  3 +-
 packages/dataviews/src/dataviews.tsx          |  9 +++
 packages/dataviews/src/density-picker.tsx     | 67 +++++++++++++++++++
 packages/dataviews/src/layouts/grid/index.tsx |  6 ++
 packages/dataviews/src/style.scss             | 33 +++++----
 packages/dataviews/src/types.ts               |  1 +
 6 files changed, 105 insertions(+), 14 deletions(-)
 create mode 100644 packages/dataviews/src/density-picker.tsx

diff --git a/packages/compose/src/hooks/use-viewport-match/index.js b/packages/compose/src/hooks/use-viewport-match/index.js
index ebec934b480123..70b215fc38cec6 100644
--- a/packages/compose/src/hooks/use-viewport-match/index.js
+++ b/packages/compose/src/hooks/use-viewport-match/index.js
@@ -9,7 +9,7 @@ import { createContext, useContext } from '@wordpress/element';
 import useMediaQuery from '../use-media-query';
 
 /**
- * @typedef {"huge" | "wide" | "large" | "medium" | "small" | "mobile"} WPBreakpoint
+ * @typedef {"huge" | "wide" | "xlarge" | "large" | "medium" | "small" | "mobile"} WPBreakpoint
  */
 
 /**
@@ -22,6 +22,7 @@ import useMediaQuery from '../use-media-query';
 const BREAKPOINTS = {
 	huge: 1440,
 	wide: 1280,
+	xlarge: 1080,
 	large: 960,
 	medium: 782,
 	small: 600,
diff --git a/packages/dataviews/src/dataviews.tsx b/packages/dataviews/src/dataviews.tsx
index d6a1d5194ba9d1..2420a47da48a3f 100644
--- a/packages/dataviews/src/dataviews.tsx
+++ b/packages/dataviews/src/dataviews.tsx
@@ -32,6 +32,7 @@ import type {
 	SupportedLayouts,
 } from './types';
 import type { SetSelection, SelectionOrUpdater } from './private-types';
+import DensityPicker from './density-picker';
 
 type ItemWithId = { id: string };
 
@@ -77,6 +78,7 @@ export default function DataViews< Item >( {
 	onSelectionChange = defaultOnSelectionChange,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	const [ densityDelta, setDensityDelta ] = useState< number >( 0 );
 	const isUncontrolled =
 		selectionProperty === undefined || setSelectionProperty === undefined;
 	const selection = isUncontrolled ? selectionState : selectionProperty;
@@ -134,6 +136,12 @@ export default function DataViews< Item >( {
 						setOpenedFilter={ setOpenedFilter }
 					/>
 				</HStack>
+				{ view.type === LAYOUT_GRID && (
+					<DensityPicker
+						densityDelta={ densityDelta }
+						setDensityDelta={ setDensityDelta }
+					/>
+				) }
 				{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
 					hasPossibleBulkAction && (
 						<BulkActions
@@ -162,6 +170,7 @@ export default function DataViews< Item >( {
 				selection={ _selection }
 				setOpenedFilter={ setOpenedFilter }
 				view={ view }
+				densityDelta={ densityDelta }
 			/>
 			<Pagination
 				view={ view }
diff --git a/packages/dataviews/src/density-picker.tsx b/packages/dataviews/src/density-picker.tsx
new file mode 100644
index 00000000000000..122cf7d28671b3
--- /dev/null
+++ b/packages/dataviews/src/density-picker.tsx
@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { plus, lineSolid } from '@wordpress/icons';
+
+export function useDensityValue( densityDelta: number ) {
+	const isHuge = useViewportMatch( 'huge', '>=' );
+	const isXlarge = useViewportMatch( 'xlarge', '>=' );
+	const isMobile = useViewportMatch( 'mobile', '>=' );
+	if ( isHuge ) {
+		return 4 + densityDelta;
+	}
+	if ( isXlarge ) {
+		return 3 + densityDelta;
+	}
+	if ( isMobile ) {
+		return 2 + densityDelta;
+	}
+	return 1 + densityDelta;
+}
+
+export default function DensityPicker( {
+	densityDelta,
+	setDensityDelta,
+}: {
+	densityDelta: number;
+	setDensityDelta: ( delta: number ) => void;
+} ) {
+	const densityValue = useDensityValue( densityDelta );
+	const sumValue = densityValue - densityDelta;
+	return (
+		<>
+			<Button
+				size="compact"
+				icon={ lineSolid }
+				label={ __( 'Decrease density' ) }
+				onClick={ () => {
+					setDensityDelta( densityDelta - 1 );
+				} }
+			/>
+			<RangeControl
+				className="dataviews-density-picker__range-control"
+				label={ __( 'Density' ) }
+				hideLabelFromVision
+				value={ densityValue }
+				min={ 1 }
+				max={ 10 }
+				withInputField={ false }
+				onChange={ ( value = 0 ) => {
+					setDensityDelta( value - sumValue );
+				} }
+				step={ 1 }
+			/>
+			<Button
+				size="compact"
+				icon={ plus }
+				label={ __( 'Increase density' ) }
+				onClick={ () => {
+					setDensityDelta( densityDelta + 1 );
+				} }
+			/>
+		</>
+	);
+}
diff --git a/packages/dataviews/src/layouts/grid/index.tsx b/packages/dataviews/src/layouts/grid/index.tsx
index fbcf93124190d1..2a11588a259a04 100644
--- a/packages/dataviews/src/layouts/grid/index.tsx
+++ b/packages/dataviews/src/layouts/grid/index.tsx
@@ -24,6 +24,7 @@ import SingleSelectionCheckbox from '../../single-selection-checkbox';
 import { useHasAPossibleBulkAction } from '../../bulk-actions';
 import type { Action, NormalizedField, ViewGridProps } from '../../types';
 import type { SetSelection } from '../../private-types';
+import { useDensityValue } from './density-picker';
 
 interface GridItemProps< Item > {
 	selection: string[];
@@ -172,6 +173,7 @@ export default function ViewGrid< Item >( {
 	onSelectionChange,
 	selection,
 	view,
+	densityDelta,
 }: ViewGridProps< Item > ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout?.mediaField
@@ -202,6 +204,7 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
+	const densityValue = useDensityValue( densityDelta );
 	return (
 		<>
 			{ hasData && (
@@ -210,6 +213,9 @@ export default function ViewGrid< Item >( {
 					columns={ 2 }
 					alignment="top"
 					className="dataviews-view-grid"
+					style={ {
+						gridTemplateColumns: `repeat(${ densityValue }, minmax(0, 1fr))`,
+					} }
 					aria-busy={ isLoading }
 				>
 					{ data.map( ( item ) => {
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index ce0e4c812ff03a..2007fd7a508a07 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -292,24 +292,11 @@
 
 .dataviews-view-grid {
 	margin-bottom: auto;
-	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
 	grid-template-rows: max-content;
 	padding: 0 $grid-unit-60 $grid-unit-30;
 	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
 
-	@include break-mobile() {
-		grid-template-columns: repeat(2, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-xlarge() {
-		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
-	@include break-huge() {
-		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
-	}
-
 	.dataviews-view-grid__card {
 		height: 100%;
 		justify-content: flex-start;
@@ -414,6 +401,22 @@
 	}
 }
 
+.dataviews-view-grid.dataviews-view-grid {
+	grid-template-columns: repeat(1, minmax(0, 1fr));
+		
+	@include break-mobile() {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	@include break-xlarge() {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
+	@include break-huge() {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+}
+
 .dataviews-view-list {
 	margin: 0 0 auto;
 
@@ -949,3 +952,7 @@
 		margin: 0 $grid-unit-10 0 $grid-unit-10;
 	}
 }
+
+.dataviews-density-picker__range-control {
+	width: 200px;
+}
\ No newline at end of file
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index b7947ae8883a3c..edd123faeb2edc 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -434,6 +434,7 @@ export interface ViewBaseProps< Item > {
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
 	view: View;
+	densityDelta: number;
 }
 
 export interface ViewTableProps< Item > extends ViewBaseProps< Item > {