fix(Forms): fix vertical gap between Field.ArraySelection toggle butt…

…ons with checkbox variant

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/Examples.tsx

@@ -303,6 +303,26 @@ export const CheckboxButtonEmpty = () => (
   </ComponentBox>
 )
 
+export const CheckboxButtonHorizontalOptionsLayout = () => (
+  <ComponentBox data-visual-test="array-selection-checkbox-button-options-horizontal">
+    <Field.ArraySelection
+      label="Label text"
+      value={['bar']}
+      variant="checkbox-button"
+      optionsLayout="horizontal"
+      onChange={(values) => console.log('onChange', values)}
+    >
+      <Field.Option value="foo" title="Foo!" />
+      <Field.Option value="bar" title="Baar!" />
+      <Field.Option value="baz" title="Bazz!" />
+      <Field.Option value="qux" title="Quxx!" />
+      <Field.Option value="quux" title="Quuux!" />
+      <Field.Option value="quuz" title="Quuuuz!" />
+      <Field.Option value="corge" title="Corge!" />
+    </Field.ArraySelection>
+  </ComponentBox>
+)
+
 export const ButtonLabel = () => (
   <ComponentBox data-visual-test="array-selection-button-options-vertical">
     <Field.ArraySelection

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/demos.mdx

@@ -133,3 +133,7 @@ You can nest other fields and show them based on your desired logic.
 You can nest other fields and show them based on your desired logic.
 
 <Examples.ButtonNestingWithLogic />
+
+#### Button with checkbox variant
+
+<Examples.CheckboxButtonHorizontalOptionsLayout />

packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx

@@ -144,8 +144,6 @@ function ArraySelection(props: Props) {
             value={{
               status: hasError ? 'error' : undefined,
               disabled,
-              variant:
-                variant === 'checkbox-button' ? 'checkbox' : 'default',
             }}
           >
             {options}
@@ -235,6 +233,7 @@ export function useCheckboxOrToggleOptions({
         <Component
           id={optionsCount === 1 ? id : undefined}
           key={`option-${i}-${value}`}
+          variant={variant === 'checkbox-button' ? 'checkbox' : undefined}
           className={classnames(
             `dnb-forms-field-array-selection__${
               variant === 'checkbox' ? 'checkbox' : 'button'

packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.screenshot.test.ts

@@ -3,122 +3,138 @@ import {
   setupPageScreenshot,
 } from '../../../../../core/jest/jestSetupScreenshots'
 
-describe('ArraySelection', () => {
-  setupPageScreenshot({
-    url: '/uilib/extensions/forms/base-fields/ArraySelection/demos',
-  })
+describe.each(['ui', 'sbanken'])(
+  'ArraySelection field for %s',
+  (themeName) => {
+    setupPageScreenshot({
+      pageViewport: {
+        width: 600,
+      },
+      themeName,
+      url: '/uilib/extensions/forms/base-fields/ArraySelection/demos',
+    })
 
-  describe('checkbox', () => {
-    it('have to match checkbox-options-vertical', async () => {
-      const screenshot = await makeScreenshot({
-        selector:
-          '[data-visual-test="array-selection-checkbox-options-vertical"]',
+    describe('checkbox', () => {
+      it('have to match checkbox-options-vertical', async () => {
+        const screenshot = await makeScreenshot({
+          selector:
+            '[data-visual-test="array-selection-checkbox-options-vertical"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match checkbox-options-horizontal', async () => {
-      const screenshot = await makeScreenshot({
-        selector:
-          '[data-visual-test="array-selection-checkbox-options-horizontal"]',
+      it('have to match checkbox-options-horizontal', async () => {
+        const screenshot = await makeScreenshot({
+          selector:
+            '[data-visual-test="array-selection-checkbox-options-horizontal"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match checkbox-horizontal', async () => {
-      const screenshot = await makeScreenshot({
-        selector:
-          '[data-visual-test="array-selection-checkbox-horizontal"]',
+      it('have to match checkbox-horizontal', async () => {
+        const screenshot = await makeScreenshot({
+          selector:
+            '[data-visual-test="array-selection-checkbox-horizontal"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match checkbox-horizontal-layout', async () => {
-      const screenshot = await makeScreenshot({
-        selector:
-          '[data-visual-test="array-selection-checkbox-horizontal-layout"]',
+      it('have to match checkbox-horizontal-layout', async () => {
+        const screenshot = await makeScreenshot({
+          selector:
+            '[data-visual-test="array-selection-checkbox-horizontal-layout"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match checkbox-help', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="array-selection-checkbox-help"]',
+      it('have to match checkbox-help', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="array-selection-checkbox-help"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match checkbox-nesting-logic', async () => {
-      const screenshot = await makeScreenshot({
-        selector:
-          '[data-visual-test="array-selection-checkbox-nesting-logic"]',
-        simulate: 'click',
-        simulateSelector:
-          '[data-visual-test="array-selection-checkbox-nesting-logic"] .dnb-checkbox:nth-of-type(2) input',
-        recalculateHeightAfterSimulate: true,
+      it('have to match checkbox-nesting-logic', async () => {
+        const screenshot = await makeScreenshot({
+          selector:
+            '[data-visual-test="array-selection-checkbox-nesting-logic"]',
+          simulate: 'click',
+          simulateSelector:
+            '[data-visual-test="array-selection-checkbox-nesting-logic"] .dnb-checkbox:nth-of-type(2) input',
+          recalculateHeightAfterSimulate: true,
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
     })
-  })
 
-  describe('button', () => {
-    it('have to match button-options-vertical', async () => {
-      const screenshot = await makeScreenshot({
-        selector:
-          '[data-visual-test="array-selection-button-options-vertical"]',
+    describe('button', () => {
+      it('have to match button-options-vertical', async () => {
+        const screenshot = await makeScreenshot({
+          selector:
+            '[data-visual-test="array-selection-button-options-vertical"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match button-options-horizontal', async () => {
-      const screenshot = await makeScreenshot({
-        selector:
-          '[data-visual-test="array-selection-button-options-horizontal"]',
+      it('have to match button-options-horizontal', async () => {
+        const screenshot = await makeScreenshot({
+          selector:
+            '[data-visual-test="array-selection-button-options-horizontal"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match button-horizontal', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="array-selection-button-horizontal"]',
+      it('have to match button-horizontal', async () => {
+        const screenshot = await makeScreenshot({
+          selector:
+            '[data-visual-test="array-selection-button-horizontal"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match button-horizontal-layout', async () => {
-      const screenshot = await makeScreenshot({
-        selector:
-          '[data-visual-test="array-selection-button-horizontal-layout"]',
+      it('have to match button-horizontal-layout', async () => {
+        const screenshot = await makeScreenshot({
+          selector:
+            '[data-visual-test="array-selection-button-horizontal-layout"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match button-help', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="array-selection-button-help"]',
+      it('have to match button-help', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="array-selection-button-help"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
-    })
 
-    it('have to match button-nesting-logic', async () => {
-      const screenshot = await makeScreenshot({
-        selector:
-          '[data-visual-test="array-selection-button-nesting-logic"]',
-        simulate: 'click',
-        simulateSelector:
-          '[data-visual-test="array-selection-button-nesting-logic"] .dnb-toggle-button:nth-of-type(2) button',
-        recalculateHeightAfterSimulate: true,
+      it('have to match button-nesting-logic', async () => {
+        const screenshot = await makeScreenshot({
+          selector:
+            '[data-visual-test="array-selection-button-nesting-logic"]',
+          simulate: 'click',
+          simulateSelector:
+            '[data-visual-test="array-selection-button-nesting-logic"] .dnb-toggle-button:nth-of-type(2) button',
+          recalculateHeightAfterSimulate: true,
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
     })
-  })
 
-  describe('checkbox-button', () => {
-    it('have to match simple checkbox-button', async () => {
-      const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="array-selection-checkbox-button"]',
+    describe('checkbox-button', () => {
+      it('have to match simple checkbox-button', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="array-selection-checkbox-button"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
+      })
+
+      it('have to match checkbox-button-options-horizontal', async () => {
+        const screenshot = await makeScreenshot({
+          selector:
+            '[data-visual-test="array-selection-checkbox-button-options-horizontal"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
       })
-      expect(screenshot).toMatchImageSnapshot()
     })
-  })
-})
+  }
+)

packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx

@@ -776,6 +776,22 @@ describe('ArraySelection', () => {
         })
       })
 
+      it('should render button element', () => {
+        render(
+          <Field.ArraySelection variant={testVariant}>
+            <Field.Option value="foo">Foo</Field.Option>
+            <Field.Option value="bar">Bar</Field.Option>
+          </Field.ArraySelection>
+        )
+
+        const [first, second] = Array.from(
+          document.querySelectorAll('.dnb-toggle-button')
+        )
+
+        expect(first.querySelector('.dnb-button').tagName).toBe('BUTTON')
+        expect(second.querySelector('.dnb-button').tagName).toBe('BUTTON')
+      })
+
       describe('ARIA', () => {
         it('should validate with ARIA rules', async () => {
           const result = render(
@@ -818,7 +834,7 @@ describe('ArraySelection', () => {
         it('should have aria-invalid', () => {
           render(
             <Field.ArraySelection
-              variant="button"
+              variant={testVariant}
               required
               validateInitially
             >

packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss

@@ -2,6 +2,10 @@
 
 .dnb-forms-field-array-selection {
   --row-gap: var(--spacing-x-small);
+  &--variant-button#{&}--options-layout-horizontal {
+    --row-gap: var(--spacing-small);
+  }
+
   &--options-layout-vertical &__options {
     display: flex;
     flex-flow: column;