children before title for all options

dnbexperience · Oct 18, 2024 · 7ba6752 · 7ba6752
1 parent 16e614f
commit 7ba6752
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 22 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx
@@ -194,7 +194,7 @@ export function useCheckboxOrToggleOptions({
         collectedData.push(props)
       }
 
-      const label = title ?? children
+      const label = children ?? title
       const status = getStatus(error, info, warning)
       const suffix = help ? (
         <HelpButton size="small" title={help.title}>

diff --git a/...s/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx b/...s/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx
@@ -33,6 +33,22 @@ describe('ArraySelection', () => {
       ).toBe(document.querySelector('.dnb-tooltip__content').id)
     })
 
+    it('precede option children over title', async () => {
+      render(
+        <Field.ArraySelection>
+          <Field.Option value="foo" title="title a">
+            child a
+          </Field.Option>
+          <Field.Option value="bar" title="title a">
+            child b
+          </Field.Option>
+        </Field.ArraySelection>
+      )
+      const options = document.querySelectorAll('.dnb-checkbox')
+      expect(options[0].textContent).toBe('child a')
+      expect(options[1].textContent).toBe('child b')
+    })
+
     it('handles selection correctly', () => {
       const handleChange = jest.fn()
       render(
@@ -315,6 +331,23 @@ describe('ArraySelection', () => {
   describe.each(['button', 'checkbox-button'])(
     '%s variant',
     (testVariant: 'button' | 'checkbox-button') => {
+      it('precede option children over title', async () => {
+        render(
+          <Field.ArraySelection variant={testVariant}>
+            <Field.Option value="foo" title="title a">
+              child a
+            </Field.Option>
+            <Field.Option value="bar" title="title a">
+              child b
+            </Field.Option>
+          </Field.ArraySelection>
+        )
+
+        const options = document.querySelectorAll('.dnb-button__text')
+        expect(options[0].textContent).toBe('child a')
+        expect(options[1].textContent).toBe('child b')
+      })
+
       it(`has correct elements when "${testVariant}" is provided provided`, () => {
         render(
           <Field.ArraySelection variant={testVariant}>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx
@@ -327,7 +327,7 @@ function renderRadioItems({
   const createOption = (props: OptionProps, i: number) => {
     const { error, title, help, children, ...rest } = props
 
-    const label = title ?? children
+    const label = children ?? title
     const status = getStatus(error, info, warning)
     const suffix = help ? (
       <HelpButton size="small" title={help.title}>

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
@@ -94,26 +94,6 @@ describe('Selection', () => {
     // getByText instead of getByPlaceholderText since eufemia adds placeholder as tag, not placeholder-attribute
     expect(screen.getByText('Select something')).toBeInTheDocument()
   })
-
-  it('precede option children over title', async () => {
-    render(
-      <Field.Selection>
-        <Field.Option value="foo" title="title a">
-          child a
-        </Field.Option>
-        <Field.Option value="bar" title="title a">
-          child b
-        </Field.Option>
-      </Field.Selection>
-    )
-
-    const selectionButton = document.querySelector('button')
-    await userEvent.click(selectionButton)
-    const options = document.querySelectorAll('.dnb-drawer-list__option')
-
-    expect(options[0].textContent).toBe('child a')
-    expect(options[1].textContent).toBe('child b')
-  })
 })
 
 describe('variants', () => {
@@ -131,6 +111,24 @@ describe('variants', () => {
       expect(radioButtons[1]).toBeChecked()
     })
 
+    it('precede option children over title', async () => {
+      render(
+        <Field.Selection variant="radio">
+          <Field.Option value="foo" title="title a">
+            child a
+          </Field.Option>
+          <Field.Option value="bar" title="title a">
+            child b
+          </Field.Option>
+        </Field.Selection>
+      )
+
+      const options = document.querySelectorAll('.dnb-radio')
+
+      expect(options[0].textContent).toBe('child a')
+      expect(options[1].textContent).toBe('child b')
+    })
+
     it('renders help', () => {
       render(
         <Field.Selection variant="radio">
@@ -716,6 +714,25 @@ describe('variants', () => {
       expect(options[1].getAttribute('aria-selected')).toBe('false')
     })
 
+    it('precede option children over title', async () => {
+      render(
+        <Field.Selection variant="dropdown">
+          <Field.Option value="foo" title="title a">
+            child a
+          </Field.Option>
+          <Field.Option value="bar" title="title a">
+            child b
+          </Field.Option>
+        </Field.Selection>
+      )
+
+      open()
+      const options = document.querySelectorAll('[role="option"]')
+
+      expect(options[0].textContent).toBe('child a')
+      expect(options[1].textContent).toBe('child b')
+    })
+
     it('renders help', () => {
       render(
         <Field.Selection