From 174e343e0a6ea784ab26e02635d480988be9a43e Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Wed, 18 Dec 2024 16:38:56 +0100
Subject: [PATCH] Use Badge component in dataview grids. (#68062)

Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 .../dataviews/src/dataviews-layouts/grid/index.tsx    |  7 +++++--
 .../dataviews/src/dataviews-layouts/grid/style.scss   | 11 -----------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index cdb70219d229ad..e8f8a46002ebdf 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -13,6 +13,7 @@ import {
 	Spinner,
 	Flex,
 	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
@@ -20,6 +21,7 @@ import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import ItemActions from '../../components/dataviews-item-actions';
 import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
 import {
@@ -35,6 +37,7 @@ import type {
 import type { SetSelection } from '../../private-types';
 import getClickableItemProps from '../utils/get-clickable-item-props';
 import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
+const { Badge } = unlock( componentsPrivateApis );
 
 interface GridItemProps< Item > {
 	view: ViewGridType;
@@ -175,12 +178,12 @@ function GridItem< Item >( {
 					>
 						{ badgeFields.map( ( field ) => {
 							return (
-								<FlexItem
+								<Badge
 									key={ field.id }
 									className="dataviews-view-grid__field-value"
 								>
 									<field.render item={ item } />
-								</FlexItem>
+								</Badge>
 							);
 						} ) }
 					</HStack>
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index 8fa3d4463c4397..acabf35e9c41c8 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -111,17 +111,6 @@
 		&:not(:empty) {
 			padding-bottom: $grid-unit-15;
 		}
-
-		.dataviews-view-grid__field-value {
-			width: fit-content;
-			background: $gray-100;
-			padding: 0 $grid-unit-10;
-			min-height: $grid-unit-30;
-			border-radius: $radius-small;
-			display: flex;
-			align-items: center;
-			font-size: 12px;
-		}
 	}
 }