Commit e1d988e745d for woocommerce

commit e1d988e745d6bb2f834a7235cc46878b4eb7f2cd
Author: verofasulo <98944206+verofasulo@users.noreply.github.com>
Date:   Fri May 8 12:15:34 2026 +0200

    Render the Stock column as a Badge (#64706)

    Replace the plain coloured-text stock label in the products list with a
    Badge component. Intents map to stock_status: instock -> none,
    outofstock -> high, onbackorder -> draft.

diff --git a/packages/js/experimental-products-app/changelog/update-stock-column-badge b/packages/js/experimental-products-app/changelog/update-stock-column-badge
new file mode 100644
index 00000000000..f1acd93afe4
--- /dev/null
+++ b/packages/js/experimental-products-app/changelog/update-stock-column-badge
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Render the Stock column in the products list as a Badge, with intents reflecting in stock, out of stock, and on backorder states.
diff --git a/packages/js/experimental-products-app/src/fields/stock/field.tsx b/packages/js/experimental-products-app/src/fields/stock/field.tsx
index ed33eeb476a..055c3c3444c 100644
--- a/packages/js/experimental-products-app/src/fields/stock/field.tsx
+++ b/packages/js/experimental-products-app/src/fields/stock/field.tsx
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { SelectControl } from '@wordpress/components';
+import { Badge } from '@wordpress/ui';
 import type { Field } from '@wordpress/dataviews';

 /**
@@ -10,12 +11,23 @@ import type { Field } from '@wordpress/dataviews';
  */
 import type { ProductEntityRecord } from '../types';

-function isValidStockStatus( value: string ) {
+type StockStatus = 'instock' | 'outofstock' | 'onbackorder';
+
+function isValidStockStatus( value: string ): value is StockStatus {
 	return (
 		value === 'instock' || value === 'outofstock' || value === 'onbackorder'
 	);
 }

+const stockStatusBadgeIntent: Record<
+	StockStatus,
+	React.ComponentProps< typeof Badge >[ 'intent' ]
+> = {
+	instock: 'none',
+	outofstock: 'high',
+	onbackorder: 'draft',
+};
+
 const fieldDefinition = {
 	label: __( 'Stock', 'woocommerce' ),
 	enableSorting: false,
@@ -40,21 +52,22 @@ export const fieldExtensions: Partial< Field< ProductEntityRecord > > = {
 		const match = field?.elements?.find(
 			( status ) => status.value === item.stock_status
 		);
-		return match ? (
+
+		if ( ! match || ! isValidStockStatus( match.value ) ) {
+			return item.stock_status;
+		}
+
+		return (
 			<div className="woocommerce-fields-field__stock">
-				<span
-					className={ `woocommerce-fields-field__stock-label woocommerce-fields-field__stock-label--${ match.value }` }
-				>
+				<Badge intent={ stockStatusBadgeIntent[ match.value ] }>
 					{ match.label }
-				</span>
+				</Badge>
 				{ item.stock_quantity && item.stock_quantity > 0 && (
 					<span className="woocommerce-fields-field__stock-quantity">
 						({ item.stock_quantity })
 					</span>
 				) }
 			</div>
-		) : (
-			item.stock_status
 		);
 	},
 	Edit: ( { data, onChange, field } ) => (
diff --git a/packages/js/experimental-products-app/src/fields/stock/style.scss b/packages/js/experimental-products-app/src/fields/stock/style.scss
index 9d1d8a3a1f2..ca907cc1359 100644
--- a/packages/js/experimental-products-app/src/fields/stock/style.scss
+++ b/packages/js/experimental-products-app/src/fields/stock/style.scss
@@ -1,14 +1,5 @@
 .woocommerce-fields-field__stock {
 	display: flex;
+	align-items: center;
 	gap: 5px;
-
-	.woocommerce-fields-field__stock-label {
-		&--outofstock {
-			color: #cc1818;
-		}
-
-		&--onbackorder {
-			color: #ffa500;
-		}
-	}
 }