make Density enum a type

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

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

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

@@ -6,21 +6,16 @@ import { useViewportMatch } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import type { ViewGrid } from '../../types';
-import { Density } from '../../types';
+import type { Density, ViewGrid } 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,
+	// The `medium` density (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
-		)
-	) {
+	if ( ! [ 'comfortable', 'compact' ].includes( view.density as Density ) ) {
 		return;
 	}
 
@@ -39,7 +34,7 @@ export default function useGridStyle( view: ViewGrid ) {
 	}
 	return {
 		gridTemplateColumns: `repeat(${
-			view.density === Density.compact ? gridColumns.max : gridColumns.min
+			view.density === 'compact' ? gridColumns.max : gridColumns.min
 		}, minmax(0, 1fr))`,
 	};
 }

packages/dataviews/src/types.ts

@@ -247,11 +247,7 @@ export interface NormalizedFilter {
 	isPrimary: boolean;
 }
 
-export enum Density {
-	compact = 'compact',
-	medium = 'medium',
-	comfortable = 'comfortable',
-}
+export type Density = 'compact' | 'medium' | 'comfortable';
 
 interface ViewBase {
 	/**