feat(Forms): add support for inline style to Field.Option when us…

…ed inside `Field.Selection` (#4515)
dnbexperience · Jan 29, 2025 · 3801d1e · 3801d1e
1 parent bd3bd25
commit 3801d1e
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 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
@@ -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
@@ -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,14 +437,15 @@ 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>,
         selected_value: transformSelection
           ? 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
@@ -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(