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 <[email protected]>

Author: paulpopus

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>
 }

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,

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/)