Font sizes differ between chips used in the variations options table and variations list (#40447)

* Fix font sizes difference between chips used in the variations options table and variations list

* Add changelog file

* Fix unit test

packages/js/product-editor/changelog/fix-40202

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix font sizes difference between chips used in the variations options table and variations list

packages/js/product-editor/src/components/attribute-control/test/attribute-field.spec.tsx

@@ -79,6 +79,7 @@ jest.mock( '@woocommerce/components', () => ( {
 	__esModule: true,
 	__experimentalSelectControlMenuSlot: () => <div></div>,
 	ListItem: ( { children }: { children: JSX.Element } ) => children,
+	Tag: ( { label }: { label: string } ) => <span>{ label }</span>,
 	Sortable: ( {
 		onOrderChange,
 		children,

packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.scss

@@ -16,20 +16,6 @@
 		margin-bottom: -1px;
 	}
 
-	&__options {
-		display: flex;
-		flex-direction: row;
-		gap: $gap-smallest;
-	}
-
-	&__option-chip {
-		padding: $gap-smallest $gap-smaller;
-		gap: 2px;
-
-		background: $gray-100;
-		border-radius: 2px;
-	}
-
 	&__actions {
 		display: flex;
 		flex-direction: row;

packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { DragEventHandler } from 'react';
-import { ListItem } from '@woocommerce/components';
+import { ListItem, Tag } from '@woocommerce/components';
 import { ProductAttribute } from '@woocommerce/data';
 import { sprintf, __ } from '@wordpress/i18n';
 import { Button, Tooltip } from '@wordpress/components';
@@ -47,24 +47,19 @@ export const AttributeListItem: React.FC< AttributeListItemProps > = ( {
 			onDragEnd={ onDragEnd }
 		>
 			<div>{ attribute.name }</div>
-			<div className="woocommerce-attribute-list-item__options">
+			<div>
 				{ attribute.options
 					.slice( 0, attribute.options.length > 3 ? 2 : 3 )
-					.map( ( option, index ) => (
-						<div
-							className="woocommerce-attribute-list-item__option-chip"
-							key={ index }
-						>
-							{ option }
-						</div>
+					.map( ( option ) => (
+						<Tag key={ option } label={ option } />
 					) ) }
 				{ attribute.options.length > 3 && (
-					<div className="woocommerce-attribute-list-item__option-chip">
-						{ sprintf(
+					<Tag
+						label={ sprintf(
 							__( '+ %i more', 'woocommerce' ),
 							attribute.options.length - 2
 						) }
-					</div>
+					/>
 				) }
 			</div>
 			<div className="woocommerce-attribute-list-item__actions">