feat(ArraySelection): add size property (#4603)

Author: langz

packages/dnb-eufemia/src/components/radio/RadioGroup.d.ts

@@ -9,7 +9,7 @@ import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
 import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type RadioGroupLabelPosition = 'left' | 'right';
-export type RadioGroupSize = 'default' | 'medium' | 'large';
+export type RadioGroupSize = 'default' | 'medium' | 'large' | number;
 export type RadioGroupSuffix =
   | string
   | ((...args: any[]) => any)

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

@@ -13,7 +13,7 @@ import { mapOptions, Data } from '../Selection'
 import DataContext from '../../DataContext/Context'
 import useDataValue from '../../hooks/useDataValue'
 import { FormError } from '../../utils'
-import type { RadioProps } from '../../../../components/Radio'
+import type { CheckboxProps } from '../../../../components/Checkbox'
 import type { ToggleButtonProps } from '../../../../components/ToggleButton'
 
 type OptionProps = React.ComponentProps<
@@ -25,7 +25,7 @@ type OptionProps = React.ComponentProps<
     className: string
     children: React.ReactNode
     handleSelect: () => void
-    size?: ToggleButtonProps['size'] | RadioProps['size']
+    size?: ToggleButtonProps['size'] | CheckboxProps['size']
   }>
 >
 
@@ -47,6 +47,11 @@ export type Props = FieldProps<Array<OptionValue> | undefined> & {
    */
   data?: Data
 
+  /**
+   * The size of the component.
+   */
+  size?: ToggleButtonProps['size'] | CheckboxProps['size']
+
   errorMessages?: DefaultErrorMessages & {
     minItems?: string
     maxItems?: string
@@ -68,6 +73,7 @@ function ArraySelection(props: Props) {
     info,
     warning,
     disabled,
+    size,
     emptyValue,
     htmlAttributes,
     handleChange,
@@ -90,10 +96,12 @@ function ArraySelection(props: Props) {
       className
     ),
     contentClassName: 'dnb-forms-field-array-selection__options',
-    labelHeight: 'small',
     disableStatusSummary: true,
     ...pickSpacingProps(props),
   }
+  if (!size) {
+    fieldBlockProps.labelHeight = 'small'
+  }
 
   const options = useCheckboxOrToggleOptions({
     id,
@@ -107,6 +115,7 @@ function ArraySelection(props: Props) {
     children,
     value,
     disabled,
+    size,
     hasError,
     handleChange,
     handleActiveData: ({ labels }) => {
@@ -124,6 +133,7 @@ function ArraySelection(props: Props) {
             value={{
               status: hasError ? 'error' : undefined,
               disabled,
+              size,
             }}
           >
             {options}
@@ -145,6 +155,7 @@ export function useCheckboxOrToggleOptions({
   children,
   value,
   disabled,
+  size,
   hasError,
   handleChange,
   handleActiveData,
@@ -160,6 +171,7 @@ export function useCheckboxOrToggleOptions({
   children?: Props['children']
   value?: Props['value']
   disabled?: Props['disabled']
+  size?: Props['size']
   hasError?: ReturnAdditional<Props['value']>['hasError']
   handleChange?: ReturnAdditional<Props['value']>['handleChange']
   handleActiveData?: (item: { labels: Array<Props['children']> }) => void
@@ -219,6 +231,7 @@ export function useCheckboxOrToggleOptions({
             }`,
             className
           )}
+          size={size}
           label={variant === 'checkbox' ? label : undefined}
           text={variant !== 'checkbox' ? label : undefined}
           value={value}

packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelectionDocs.ts

@@ -18,6 +18,11 @@ export const arraySelectionProperties: PropertiesTableProps = {
     type: 'React.Node',
     status: 'optional',
   },
+  size: {
+    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute.',
+    type: 'string',
+    status: 'optional',
+  },
   data: {
     doc: 'Data to be used for the component. The object needs to have a `value` and a `title` property. Provide the Dropdown or Autocomplete data in the format documented here: [Dropdown](/uilib/components/dropdown) and [Autocomplete](/uilib/components/autocomplete) documentation.',
     type: 'array',

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

@@ -22,6 +22,24 @@ describe('ArraySelection', () => {
       expect(screen.getByText('Option 2')).toBeInTheDocument()
     })
 
+    it('should support size', () => {
+      render(
+        <Field.ArraySelection size="large">
+          <Field.Option value="option2">Option 2</Field.Option>
+        </Field.ArraySelection>
+      )
+
+      const fieldArraySelectionElement: HTMLInputElement =
+        document.querySelector('.dnb-forms-field-array-selection')
+      expect(fieldArraySelectionElement.classList).toContain(
+        'dnb-forms-field-block--label-height-large'
+      )
+
+      const checkboxElement: HTMLInputElement =
+        document.querySelector('.dnb-checkbox')
+      expect(checkboxElement.classList).toContain('dnb-checkbox--large')
+    })
+
     it('renders help', () => {
       render(
         <Field.ArraySelection
@@ -540,6 +558,25 @@ describe('ArraySelection', () => {
         expect(option2).toBeInTheDocument()
       })
 
+      it('should support size', () => {
+        render(
+          <Field.ArraySelection variant={testVariant} size="large">
+            <Field.Option value="option2">Option 2</Field.Option>
+          </Field.ArraySelection>
+        )
+
+        const fieldArraySelectionElement: HTMLInputElement =
+          document.querySelector('.dnb-forms-field-array-selection')
+        expect(fieldArraySelectionElement.classList).toContain(
+          'dnb-forms-field-block--label-height-large'
+        )
+
+        const buttonElement: HTMLInputElement = document.querySelector(
+          '.dnb-toggle-button__button'
+        )
+        expect(buttonElement.classList).toContain('dnb-button--size-large')
+      })
+
       it('should render options in nested elements', () => {
         render(
           <Field.ArraySelection variant={testVariant}>

packages/dnb-eufemia/src/extensions/forms/Field/Selection/SelectionDocs.ts

@@ -48,7 +48,7 @@ export const SelectionProperties: PropertiesTableProps = {
   },
   size: {
     doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute.',
-    type: ['string', 'number'],
+    type: 'string',
     status: 'optional',
   },
   children: {