From d9e947892a87ee7d227cd478aa7e9535df5e7ce5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Fri, 7 Jun 2024 12:36:33 +0200 Subject: [PATCH] fix(forms): ensure help button is rendered only once in Toggle and Boolean fields (#3675) Supports `labelDescription` as well: Screenshot 2024-06-06 at 14 55 56 --- .../forms/base-fields/Toggle/Examples.tsx | 16 +++++++++++++ .../forms/base-fields/Toggle/demos.mdx | 4 ++++ .../Field/Boolean/__tests__/Boolean.test.tsx | 7 +++--- .../extensions/forms/Field/Toggle/Toggle.tsx | 21 ++++++++++++++++-- .../__tests__/Toggle.screenshot.test.ts | 18 +++++++++++++++ .../Field/Toggle/__tests__/Toggle.test.tsx | 15 ++++++++++--- ...o-match-buttons-variant-with-help.snap.png | Bin 0 -> 7123 bytes 7 files changed, 73 insertions(+), 8 deletions(-) create mode 100644 packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/Toggle.screenshot.test.ts create mode 100644 packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/__image_snapshots__/fieldtoggle-have-to-match-buttons-variant-with-help.snap.png diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx index 7ce864a8305..f4ee195cd67 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx @@ -213,3 +213,19 @@ export const VariantButtons = () => { ) } + +export const VariantButtonsWithHelp = () => { + return ( + + console.log('onChange', value)} + /> + + ) +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/demos.mdx index 3b9f6c3c743..7cf5d993727 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/demos.mdx @@ -62,6 +62,10 @@ import * as Examples from './Examples' +#### Buttons with help + + + #### Checkbox button 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 index 68135b93018..1676cbb1710 100644 --- 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 index ae30c839b0b..ded797753c4 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx @@ -135,7 +135,24 @@ function Toggle(props: Props) { ) case 'buttons': return ( - + + {labelDescription} + {help ? ( + + {help.content} + + ) : undefined} + + } + > 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 new file mode 100644 index 00000000000..895688a55dc --- /dev/null +++ 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 index e7ab9a202d4..613ca010362 100644 --- 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/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/__image_snapshots__/fieldtoggle-have-to-match-buttons-variant-with-help.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/__image_snapshots__/fieldtoggle-have-to-match-buttons-variant-with-help.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..3f61bbdd6d769ed721512cc72c526d77df1dc1d6 GIT binary patch literal 7123 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 literal 0 HcmV?d00001