Use Badge component in dataview grids. (WordPress#68062)

Co-authored-by: juanfra <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: jameskoster <[email protected]>
MaxMood96 · Dec 18, 2024 · 174e343 · 174e343
1 parent 2e3e6e4
commit 174e343
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 13 deletions.
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -13,13 +13,15 @@ import {
 	Spinner,
 	Flex,
 	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 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
@@ -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;
-		}
 	}
 }