feedback and polish

packages/components/src/toggle-group-control/toggle-group-control/component.tsx

@@ -52,7 +52,7 @@ function UnconnectedToggleGroupControl(
 	const [ controlElement, setControlElement ] = useState< HTMLElement >();
 	const refs = useMergeRefs( [ setControlElement, forwardedRef ] );
 	const selectedRect = useTrackElementOffsetRect(
-		value || value === 0 ? selectedElement : undefined
+		value ? selectedElement : undefined
 	);
 	useAnimatedOffsetRect( controlElement, selectedRect, {
 		prefix: 'selected',

packages/dataviews/src/components/dataviews-view-config/index.tsx

@@ -45,7 +45,7 @@ import {
 	getVisibleFieldIds,
 	getHiddenFieldIds,
 } from '../../dataviews-layouts';
-import { DensityOptions } from '../../types';
+import { Density } from '../../types';
 import type { SupportedLayouts, View, Field } from '../../types';
 import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
@@ -251,31 +251,31 @@ function DensityPicker() {
 			__nextHasNoMarginBottom
 			size="__unstable-large"
 			label={ __( 'Density' ) }
-			value={ view.density || DensityOptions.medium }
+			value={ view.density || Density.medium }
 			onChange={ ( value ) => {
 				onChangeView( {
 					...view,
-					density: value as DensityOptions,
+					density: value as Density,
 				} );
 			} }
 			isBlock
 		>
 			<ToggleGroupControlOption
 				key="comfortable"
-				value={ DensityOptions.comfortable }
+				value={ Density.comfortable }
 				label={ _x(
 					'Comfortable',
 					'Density option for DataView layout'
 				) }
 			/>
 			<ToggleGroupControlOption
 				key="medium"
-				value={ DensityOptions.medium }
+				value={ Density.medium }
 				label={ _x( 'Medium', 'Density option for DataView layout' ) }
 			/>
 			<ToggleGroupControlOption
 				key="compact"
-				value={ DensityOptions.compact }
+				value={ Density.compact }
 				label={ _x( 'Compact', 'Density option for DataView layout' ) }
 			/>
 		</ToggleGroupControl>

packages/dataviews/src/dataviews-layouts/grid/index.tsx

@@ -22,11 +22,10 @@ import { __ } from '@wordpress/i18n';
 import ItemActions from '../../components/dataviews-item-actions';
 import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
 import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
-import { DensityOptions } from '../../types';
 import type { Action, NormalizedField, ViewGridProps } from '../../types';
 import type { SetSelection } from '../../private-types';
 import getClickableItemProps from '../utils/get-clickable-item-props';
-import useDensityOptions from './use-density-options';
+import useGridStyle from './use-grid-style';
 
 interface GridItemProps< Item > {
 	selection: string[];
@@ -226,22 +225,7 @@ export default function ViewGrid< Item >( {
 		{ visibleFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
-	// The `DensityOptions.medium` (default) is handled with css. If another density is selected,
-	// we query the viewport to determine the number of columns to display per option.
-	const densityOptions = useDensityOptions();
-	const gridStyle =
-		!! view.density &&
-		[ DensityOptions.comfortable, DensityOptions.compact ].includes(
-			view.density as DensityOptions
-		)
-			? {
-					gridTemplateColumns: `repeat(${
-						view.density === DensityOptions.compact
-							? densityOptions.max
-							: densityOptions.min
-					}, minmax(0, 1fr))`,
-			  }
-			: {};
+	const gridStyle = useGridStyle( view );
 	return (
 		<>
 			{ hasData && (

packages/dataviews/src/dataviews-layouts/grid/use-grid-style.ts

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import type { ViewGrid } from '../../types';
+import { Density } from '../../types';
+
+export default function useGridStyle( view: ViewGrid ) {
+	const isXHuge = useViewportMatch( 'xhuge' );
+	const isHuge = useViewportMatch( 'huge' );
+	const isXlarge = useViewportMatch( 'xlarge' );
+	const isMedium = useViewportMatch( 'small' );
+	// The `Density.medium` (default) is handled with css. If another density is selected,
+	// we query the viewport to determine the number of columns to display per option.
+	if (
+		! [ Density.comfortable, Density.compact ].includes(
+			view.density as Density
+		)
+	) {
+		return;
+	}
+
+	let gridColumns;
+	if ( isXHuge ) {
+		gridColumns = { min: 4, max: 6 };
+	} else if ( isHuge ) {
+		gridColumns = { min: 3, max: 5 };
+	} else if ( isXlarge ) {
+		gridColumns = { min: 2, max: 4 };
+	} else if ( isMedium ) {
+		gridColumns = { min: 1, max: 3 };
+	} else {
+		// Default to mobile.
+		gridColumns = { min: 1, max: 2 };
+	}
+	return {
+		gridTemplateColumns: `repeat(${
+			view.density === Density.compact ? gridColumns.max : gridColumns.min
+		}, minmax(0, 1fr))`,
+	};
+}

packages/dataviews/src/types.ts

@@ -247,10 +247,10 @@ export interface NormalizedFilter {
 	isPrimary: boolean;
 }
 
-export enum DensityOptions {
-	medium = 0,
-	compact = 1,
-	comfortable = 2,
+export enum Density {
+	compact = 'compact',
+	medium = 'medium',
+	comfortable = 'comfortable',
 }
 
 interface ViewBase {
@@ -302,8 +302,7 @@ interface ViewBase {
 	/**
 	 * The density of the view.
 	 */
-	// TODO: maybe move to `layout` object?
-	density?: DensityOptions;
+	density?: Density;
 }
 
 export interface CombinedField {