From 1578cd2425f0a9f3d400e18a912ba57edec5f989 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Wed, 26 Mar 2025 20:32:42 +0000
Subject: [PATCH] chore(ui): added selected option as a class to list table
 cell (#11750)

In the Cell component for a select field such as our `_status` fields it
will now add a class eg. `selected--published` for the selected option
so it can be easily targeted with CSS.

---------

Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>
---
 .../src/elements/Table/DefaultCell/index.tsx  | 14 +++++++++
 test/admin/collections/Posts.ts               | 31 +++++++++++++++++++
 test/admin/e2e/list-view/e2e.spec.ts          | 26 ++++++++++++++++
 3 files changed, 71 insertions(+)

diff --git a/packages/ui/src/elements/Table/DefaultCell/index.tsx b/packages/ui/src/elements/Table/DefaultCell/index.tsx
index 57847eba1b..51f6769502 100644
--- a/packages/ui/src/elements/Table/DefaultCell/index.tsx
+++ b/packages/ui/src/elements/Table/DefaultCell/index.tsx
@@ -148,5 +148,19 @@ export const DefaultCell: React.FC<DefaultCellComponentProps> = (props) => {
     }
   }
 
+  if ((field.type === 'select' || field.type === 'radio') && field.options.length && cellData) {
+    const classes = Array.isArray(cellData)
+      ? cellData.map((value) => `selected--${value}`).join(' ')
+      : `selected--${cellData}`
+
+    const className = [wrapElementProps.className, classes].filter(Boolean).join(' ')
+
+    return (
+      <WrapElement {...wrapElementProps} className={className}>
+        {CellComponent}
+      </WrapElement>
+    )
+  }
+
   return <WrapElement {...wrapElementProps}>{CellComponent}</WrapElement>
 }
diff --git a/test/admin/collections/Posts.ts b/test/admin/collections/Posts.ts
index 257cbb9692..eeac32a803 100644
--- a/test/admin/collections/Posts.ts
+++ b/test/admin/collections/Posts.ts
@@ -205,6 +205,37 @@ export const Posts: CollectionConfig = {
         position: 'sidebar',
       },
     },
+    {
+      type: 'radio',
+      name: 'wavelengths',
+      defaultValue: 'fm',
+      options: [
+        {
+          label: 'FM',
+          value: 'fm',
+        },
+        {
+          label: 'AM',
+          value: 'am',
+        },
+      ],
+    },
+    {
+      type: 'select',
+      name: 'selectField',
+      hasMany: true,
+      defaultValue: ['option1', 'option2'],
+      options: [
+        {
+          label: 'Option 1',
+          value: 'option1',
+        },
+        {
+          label: 'Option 2',
+          value: 'option2',
+        },
+      ],
+    },
   ],
   labels: {
     plural: slugPluralLabel,
diff --git a/test/admin/e2e/list-view/e2e.spec.ts b/test/admin/e2e/list-view/e2e.spec.ts
index 796a21b3c8..567a7fdfd7 100644
--- a/test/admin/e2e/list-view/e2e.spec.ts
+++ b/test/admin/e2e/list-view/e2e.spec.ts
@@ -413,6 +413,7 @@ describe('List View', () => {
       await expect(whereBuilder.locator('.condition__value input')).toHaveValue('')
     })
 
+    // eslint-disable-next-line playwright/expect-expect
     test('should remove condition from URL when value is cleared', async () => {
       await page.goto(postsUrl.list)
 
@@ -1285,6 +1286,31 @@ describe('List View', () => {
       await expect(page.locator('#heading-_status')).toBeVisible()
       await expect(page.locator('.cell-_status').first()).toBeVisible()
 
+      await toggleColumn(page, {
+        columnLabel: 'Wavelengths',
+        targetState: 'on',
+        columnName: 'wavelengths',
+      })
+
+      await toggleColumn(page, {
+        columnLabel: 'Select Field',
+        targetState: 'on',
+        columnName: 'selectField',
+      })
+
+      // check that the cells have the classes added per value selected
+      await expect(
+        page.locator('.cell-_status').first().locator("[class*='selected--']"),
+      ).toBeVisible()
+
+      await expect(
+        page.locator('.cell-wavelengths').first().locator("[class*='selected--']"),
+      ).toBeVisible()
+
+      await expect(
+        page.locator('.cell-selectField').first().locator("[class*='selected--']"),
+      ).toBeVisible()
+
       // sort by title again in descending order
       await page.locator('#heading-title button.sort-column__desc').click()
       await page.waitForURL(/sort=-title/)