From 3801d1e8474ea018c6a5380454cd11d4ad8c012b Mon Sep 17 00:00:00 2001
From: Anders <anderslangseth@gmail.com>
Date: Wed, 29 Jan 2025 09:04:09 +0100
Subject: [PATCH] feat(Forms): add support for inline `style` to `Field.Option`
 when used inside `Field.Selection` (#4515)

---
 .../extensions/forms/Field/Option/Option.tsx  |  1 +
 .../forms/Field/Selection/Selection.tsx       |  7 +-
 .../Selection/__tests__/Selection.test.tsx    | 70 +++++++++++++++++++
 3 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Option/Option.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Option/Option.tsx
index f499fb390e1..453709515b4 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Option/Option.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Option/Option.tsx
@@ -6,6 +6,7 @@ export type Props = FieldProps<number | string> & {
   title?: React.ReactNode
   text?: React.ReactNode
   children?: React.ReactNode
+  style?: React.CSSProperties
 }
 
 export default function Option({
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx
index 8464da73a27..2e6d5ff6575 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx
@@ -42,6 +42,7 @@ export type Data = Array<{
   title: React.ReactNode
   text?: React.ReactNode
   disabled?: boolean
+  style?: React.CSSProperties
 }>
 
 export type Props = FieldProps<IOption['value']> & {
@@ -416,8 +417,9 @@ export function makeOptions<T = DrawerListProps['data']>(
         : undefined
       const selectedKey = String(props.value ?? '')
       const disabled = props.disabled
+      const style = props.style
 
-      return { selectedKey, selected_value, content, disabled }
+      return { selectedKey, selected_value, content, disabled, style }
     }
 
     // For other children, just show them as content
@@ -435,7 +437,7 @@ function renderDropdownItems(
 ) {
   return (
     data?.map((props) => {
-      const { value, title, text, disabled } = props
+      const { value, title, text, disabled, style } = props
       return {
         selectedKey: value,
         content: (text ? [title, text] : title) || <em>Untitled</em>,
@@ -443,6 +445,7 @@ function renderDropdownItems(
           ? transformSelection(props)
           : undefined,
         disabled,
+        style,
       }
     }) || []
   )
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/Selection.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/Selection.test.tsx
index a269604e23e..38d9f73d0d0 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/Selection.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/Selection.test.tsx
@@ -1279,6 +1279,41 @@ describe('variants', () => {
       })
     })
 
+    it('should support inline styling using Field.Option', () => {
+      render(
+        <Field.Selection variant="dropdown">
+          <Field.Option value="foo" style={{ color: 'red' }}>
+            Foo
+          </Field.Option>
+        </Field.Selection>
+      )
+
+      open()
+
+      const option = document.querySelector('[role="option"]')
+      expect(option.getAttribute('style')).toBe('color: red;')
+    })
+
+    it('should support inline styling using data', () => {
+      render(
+        <Field.Selection
+          variant="dropdown"
+          data={[
+            {
+              title: 'Foo',
+              value: 'foo',
+              style: { color: 'red' },
+            },
+          ]}
+        />
+      )
+
+      open()
+
+      const option = document.querySelector('[role="option"]')
+      expect(option.getAttribute('style')).toBe('color: red;')
+    })
+
     describe('ARIA', () => {
       it('should validate with ARIA rules', async () => {
         const result = render(
@@ -1647,6 +1682,41 @@ describe('variants', () => {
       })
     })
 
+    it('should support inline styling using Field.Option', () => {
+      render(
+        <Field.Selection variant="autocomplete">
+          <Field.Option value="foo" style={{ color: 'red' }}>
+            Foo
+          </Field.Option>
+        </Field.Selection>
+      )
+
+      open()
+
+      const option = document.querySelector('[role="option"]')
+      expect(option.getAttribute('style')).toBe('color: red;')
+    })
+
+    it('should support inline styling using data', () => {
+      render(
+        <Field.Selection
+          variant="autocomplete"
+          data={[
+            {
+              title: 'Foo',
+              value: 'foo',
+              style: { color: 'red' },
+            },
+          ]}
+        />
+      )
+
+      open()
+
+      const option = document.querySelector('[role="option"]')
+      expect(option.getAttribute('style')).toBe('color: red;')
+    })
+
     describe('ARIA', () => {
       it('should validate with ARIA rules', async () => {
         const result = render(