fix(forms): ensure help button is rendered only once in Toggle and Bo…

…olean fields (#3675) Supports `labelDescription` as well: <img width="413" alt="Screenshot 2024-06-06 at 14 55 56" src="https://github.com/dnbexperience/eufemia/assets/1501870/a2a2bb0f-1101-494c-b7f7-4fe37d254d9b">
dnbexperience · Jun 7, 2024 · d9e9478 · d9e9478
1 parent 97ca056
commit d9e9478
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 8 deletions.
diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx b/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx
@@ -213,3 +213,19 @@ export const VariantButtons = () => {
     </ComponentBox>
   )
 }
+
+export const VariantButtonsWithHelp = () => {
+  return (
+    <ComponentBox data-visual-test="toggle-variant-buttons-with-help">
+      <Field.Toggle
+        valueOn="on"
+        valueOff="off"
+        variant="buttons"
+        label="Buttons variant"
+        help={{ title: 'Help title', content: 'Help content' }}
+        value="on"
+        onChange={(value) => console.log('onChange', value)}
+      />
+    </ComponentBox>
+  )
+}
diff --git a/...sign-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/demos.mdx b/...sign-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/demos.mdx
@@ -62,6 +62,10 @@ import * as Examples from './Examples'
 
 <Examples.VariantButtons />
 
+#### Buttons with help
+
+<Examples.VariantButtonsWithHelp />
+
 #### Checkbox button
 
 <Examples.VariantCheckboxButton />
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx
@@ -18,6 +18,7 @@ describe('Field.Boolean', () => {
           help={{ title: 'Help title', content: 'Help content' }}
         />
       )
+      expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(1)
       expect(document.querySelector('input')).toHaveAttribute(
         'aria-describedby'
       )
@@ -169,6 +170,7 @@ describe('Field.Boolean', () => {
           help={{ title: 'Help title', content: 'Help content' }}
         />
       )
+      expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(1)
       expect(document.querySelector('button')).toHaveAttribute(
         'aria-describedby'
       )
@@ -308,6 +310,7 @@ describe('Field.Boolean', () => {
           help={{ title: 'Help title', content: 'Help content' }}
         />
       )
+      expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(1)
       expect(document.querySelector('button')).toHaveAttribute(
         'aria-describedby'
       )
@@ -457,12 +460,10 @@ describe('Field.Boolean', () => {
           help={{ title: 'Help title', content: 'Help content' }}
         />
       )
+      expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(1)
       expect(document.querySelector('button')).toHaveAttribute(
         'aria-describedby'
       )
-      expect(
-        document.querySelector('button').getAttribute('aria-describedby')
-      ).toBe(document.querySelector('.dnb-toggle-button__suffix').id)
       expect(
         document
           .querySelector('.dnb-help-button')

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx
@@ -135,15 +135,31 @@ function Toggle(props: Props) {
       )
     case 'buttons':
       return (
-        <FieldBlock {...fieldSectionProps} asFieldset>
+        <FieldBlock
+          {...fieldSectionProps}
+          asFieldset
+          labelDescription={
+            <>
+              {labelDescription}
+              {help ? (
+                <HelpButton
+                  size="small"
+                  left={labelDescription ? 'x-small' : false}
+                  title={help.title}
+                >
+                  {help.content}
+                </HelpButton>
+              ) : undefined}
+            </>
+          }
+        >
           <ButtonRow bottom="x-small">
             <ToggleButtonGroupContext.Provider
               value={{
                 value: isOn ? 'on' : isOff ? 'off' : null, // use "null" to reset the value
                 onChange: handleToggleChange,
                 status: hasError ? 'error' : undefined,
                 disabled,
-                suffix,
               }}
             >
               <ToggleButton
@@ -154,6 +170,7 @@ function Toggle(props: Props) {
               <ToggleButton
                 text={textOff ?? translations.no}
                 value="off"
+                // suffix={suffix}
                 {...htmlAttributes}
               />
             </ToggleButtonGroupContext.Provider>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/Toggle.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/Toggle.screenshot.test.ts
@@ -0,0 +1,18 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we don't require any related files
+ */
+
+import { makeScreenshot } from '../../../../../core/jest/jestSetupScreenshots'
+
+describe('Field.Toggle', () => {
+  const url = '/uilib/extensions/forms/base-fields/Toggle/demos'
+
+  it('have to match buttons variant with help', async () => {
+    const screenshot = await makeScreenshot({
+      url,
+      selector: '[data-visual-test="toggle-variant-buttons-with-help"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/Toggle.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/Toggle.test.tsx
@@ -59,6 +59,9 @@ describe('Field.Toggle', () => {
             help={{ title: 'Help title', content: 'Help content' }}
           />
         )
+        expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(
+          1
+        )
         expect(document.querySelector('button')).toHaveAttribute(
           'aria-describedby'
         )
@@ -222,12 +225,12 @@ describe('Field.Toggle', () => {
             help={{ title: 'Help title', content: 'Help content' }}
           />
         )
+        expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(
+          1
+        )
         expect(document.querySelector('button')).toHaveAttribute(
           'aria-describedby'
         )
-        expect(
-          document.querySelector('button').getAttribute('aria-describedby')
-        ).toBe(document.querySelector('.dnb-toggle-button__suffix').id)
         expect(
           document
             .querySelector('.dnb-help-button')
@@ -431,6 +434,9 @@ describe('Field.Toggle', () => {
             help={{ title: 'Help title', content: 'Help content' }}
           />
         )
+        expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(
+          1
+        )
         expect(document.querySelector('button')).toHaveAttribute(
           'aria-describedby'
         )
@@ -596,6 +602,9 @@ describe('Field.Toggle', () => {
             help={{ title: 'Help title', content: 'Help content' }}
           />
         )
+        expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(
+          1
+        )
         expect(document.querySelector('input')).toHaveAttribute(
           'aria-describedby'
         )

diff --git a/..._image_snapshots__/fieldtoggle-have-to-match-buttons-variant-with-help.snap.png b/..._image_snapshots__/fieldtoggle-have-to-match-buttons-variant-with-help.snap.png