Skip to content

Commit 12d319d

Browse files
authored
feat(ArraySelection): add size property (#4603)
1 parent c8b57b0 commit 12d319d

File tree

5 files changed

+60
-5
lines changed

5 files changed

+60
-5
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import type { SkeletonShow } from '../Skeleton';
99
import type { SpacingProps } from '../space/types';
1010
import type { GlobalStatusConfigObject } from '../GlobalStatus';
1111
export type RadioGroupLabelPosition = 'left' | 'right';
12-
export type RadioGroupSize = 'default' | 'medium' | 'large';
12+
export type RadioGroupSize = 'default' | 'medium' | 'large' | number;
1313
export type RadioGroupSuffix =
1414
| string
1515
| ((...args: any[]) => any)

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

+16-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { mapOptions, Data } from '../Selection'
1313
import DataContext from '../../DataContext/Context'
1414
import useDataValue from '../../hooks/useDataValue'
1515
import { FormError } from '../../utils'
16-
import type { RadioProps } from '../../../../components/Radio'
16+
import type { CheckboxProps } from '../../../../components/Checkbox'
1717
import type { ToggleButtonProps } from '../../../../components/ToggleButton'
1818

1919
type OptionProps = React.ComponentProps<
@@ -25,7 +25,7 @@ type OptionProps = React.ComponentProps<
2525
className: string
2626
children: React.ReactNode
2727
handleSelect: () => void
28-
size?: ToggleButtonProps['size'] | RadioProps['size']
28+
size?: ToggleButtonProps['size'] | CheckboxProps['size']
2929
}>
3030
>
3131

@@ -47,6 +47,11 @@ export type Props = FieldProps<Array<OptionValue> | undefined> & {
4747
*/
4848
data?: Data
4949

50+
/**
51+
* The size of the component.
52+
*/
53+
size?: ToggleButtonProps['size'] | CheckboxProps['size']
54+
5055
errorMessages?: DefaultErrorMessages & {
5156
minItems?: string
5257
maxItems?: string
@@ -68,6 +73,7 @@ function ArraySelection(props: Props) {
6873
info,
6974
warning,
7075
disabled,
76+
size,
7177
emptyValue,
7278
htmlAttributes,
7379
handleChange,
@@ -90,10 +96,12 @@ function ArraySelection(props: Props) {
9096
className
9197
),
9298
contentClassName: 'dnb-forms-field-array-selection__options',
93-
labelHeight: 'small',
9499
disableStatusSummary: true,
95100
...pickSpacingProps(props),
96101
}
102+
if (!size) {
103+
fieldBlockProps.labelHeight = 'small'
104+
}
97105

98106
const options = useCheckboxOrToggleOptions({
99107
id,
@@ -107,6 +115,7 @@ function ArraySelection(props: Props) {
107115
children,
108116
value,
109117
disabled,
118+
size,
110119
hasError,
111120
handleChange,
112121
handleActiveData: ({ labels }) => {
@@ -124,6 +133,7 @@ function ArraySelection(props: Props) {
124133
value={{
125134
status: hasError ? 'error' : undefined,
126135
disabled,
136+
size,
127137
}}
128138
>
129139
{options}
@@ -145,6 +155,7 @@ export function useCheckboxOrToggleOptions({
145155
children,
146156
value,
147157
disabled,
158+
size,
148159
hasError,
149160
handleChange,
150161
handleActiveData,
@@ -160,6 +171,7 @@ export function useCheckboxOrToggleOptions({
160171
children?: Props['children']
161172
value?: Props['value']
162173
disabled?: Props['disabled']
174+
size?: Props['size']
163175
hasError?: ReturnAdditional<Props['value']>['hasError']
164176
handleChange?: ReturnAdditional<Props['value']>['handleChange']
165177
handleActiveData?: (item: { labels: Array<Props['children']> }) => void
@@ -219,6 +231,7 @@ export function useCheckboxOrToggleOptions({
219231
}`,
220232
className
221233
)}
234+
size={size}
222235
label={variant === 'checkbox' ? label : undefined}
223236
text={variant !== 'checkbox' ? label : undefined}
224237
value={value}

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

+5
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ export const arraySelectionProperties: PropertiesTableProps = {
1818
type: 'React.Node',
1919
status: 'optional',
2020
},
21+
size: {
22+
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.',
23+
type: 'string',
24+
status: 'optional',
25+
},
2126
data: {
2227
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.',
2328
type: 'array',

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

+37
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,24 @@ describe('ArraySelection', () => {
2222
expect(screen.getByText('Option 2')).toBeInTheDocument()
2323
})
2424

25+
it('should support size', () => {
26+
render(
27+
<Field.ArraySelection size="large">
28+
<Field.Option value="option2">Option 2</Field.Option>
29+
</Field.ArraySelection>
30+
)
31+
32+
const fieldArraySelectionElement: HTMLInputElement =
33+
document.querySelector('.dnb-forms-field-array-selection')
34+
expect(fieldArraySelectionElement.classList).toContain(
35+
'dnb-forms-field-block--label-height-large'
36+
)
37+
38+
const checkboxElement: HTMLInputElement =
39+
document.querySelector('.dnb-checkbox')
40+
expect(checkboxElement.classList).toContain('dnb-checkbox--large')
41+
})
42+
2543
it('renders help', () => {
2644
render(
2745
<Field.ArraySelection
@@ -540,6 +558,25 @@ describe('ArraySelection', () => {
540558
expect(option2).toBeInTheDocument()
541559
})
542560

561+
it('should support size', () => {
562+
render(
563+
<Field.ArraySelection variant={testVariant} size="large">
564+
<Field.Option value="option2">Option 2</Field.Option>
565+
</Field.ArraySelection>
566+
)
567+
568+
const fieldArraySelectionElement: HTMLInputElement =
569+
document.querySelector('.dnb-forms-field-array-selection')
570+
expect(fieldArraySelectionElement.classList).toContain(
571+
'dnb-forms-field-block--label-height-large'
572+
)
573+
574+
const buttonElement: HTMLInputElement = document.querySelector(
575+
'.dnb-toggle-button__button'
576+
)
577+
expect(buttonElement.classList).toContain('dnb-button--size-large')
578+
})
579+
543580
it('should render options in nested elements', () => {
544581
render(
545582
<Field.ArraySelection variant={testVariant}>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const SelectionProperties: PropertiesTableProps = {
4848
},
4949
size: {
5050
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.',
51-
type: ['string', 'number'],
51+
type: 'string',
5252
status: 'optional',
5353
},
5454
children: {

0 commit comments

Comments
 (0)