Skip to content

Commit 58a45a6

Browse files
authored
feat(PhoneNumber): add size property (#4596)
1 parent 18d23d4 commit 58a45a6

File tree

4 files changed

+35
-2
lines changed

4 files changed

+35
-2
lines changed

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export type Props = Omit<
6464
* For internal testing purposes
6565
*/
6666
noAnimation?: boolean
67-
}
67+
} & Pick<StringFieldProps, 'size'>
6868

6969
// Important for the default value to be defined here, and not after the useFieldProps call, to avoid the UI jumping
7070
// back to +47 once the user empty the field so handleChange send out undefined.
@@ -192,6 +192,7 @@ function PhoneNumber(props: Props) {
192192
emptyValue,
193193
info,
194194
warning,
195+
size,
195196
error,
196197
hasError,
197198
disabled,
@@ -406,6 +407,7 @@ function PhoneNumber(props: Props) {
406407
autoComplete="tel-country-code"
407408
no_animation={props.noAnimation}
408409
stretch={width === 'stretch'}
410+
size={size}
409411
/>
410412
)}
411413

@@ -446,6 +448,7 @@ function PhoneNumber(props: Props) {
446448
}
447449
validateUnchanged={validateUnchanged}
448450
inputMode="tel"
451+
size={size}
449452
/>
450453
</Flex.Horizontal>
451454
</FieldBlock>

packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumberDocs.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { PropertiesTableProps } from '../../../../shared/types'
22
import { getFieldEventsWithTypes } from '../FieldDocs'
3+
import { stringProperties } from '../String/StringDocs'
34

45
export const PhoneNumberProperties: PropertiesTableProps = {
56
countries: {
@@ -52,6 +53,7 @@ export const PhoneNumberProperties: PropertiesTableProps = {
5253
type: 'string | false',
5354
status: 'optional',
5455
},
56+
size: stringProperties.size,
5557
'[Space](/uilib/layout/space/properties)': {
5658
doc: 'Spacing properties like `top` or `bottom` are supported.',
5759
type: ['string', 'object'],

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

+23
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,29 @@ describe('Field.PhoneNumber', () => {
5050
expect(selectedItemElement.textContent).toBe('+47 Norge')
5151
})
5252

53+
it('should support size', () => {
54+
render(<Field.PhoneNumber size="large" />)
55+
56+
const autocompleteElement: HTMLInputElement = document.querySelector(
57+
'.dnb-autocomplete'
58+
)
59+
expect(autocompleteElement.classList).toContain(
60+
'dnb-autocomplete--large'
61+
)
62+
63+
const fieldPhoneNumberElement: HTMLInputElement =
64+
document.querySelector('.dnb-forms-field-phone-number')
65+
expect(fieldPhoneNumberElement.classList).toContain(
66+
'dnb-forms-field-block--label-height-large'
67+
)
68+
69+
const fieldPhoneNumberNumberElement: HTMLInputElement =
70+
document.querySelector('.dnb-forms-field-phone-number__number')
71+
expect(fieldPhoneNumberNumberElement.classList).toContain(
72+
'dnb-forms-field-block--label-height-large'
73+
)
74+
})
75+
5376
it('should support disabled prop', () => {
5477
const { rerender } = render(
5578
<Field.PhoneNumber label="Disabled label" disabled />

packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import * as React from 'react';
22
import type { SpacingProps } from '../../shared/types';
33
export type DrawerListDirection = 'auto' | 'top' | 'bottom';
4-
export type DrawerListSize = 'default' | 'small' | 'medium' | 'large';
4+
export type DrawerListSize =
5+
| 'default'
6+
| 'small'
7+
| 'medium'
8+
| 'large'
9+
| number;
510
export type DrawerListAlignDrawer = 'left' | 'right';
611
export type DrawerListOptionsRender =
712
| Record<string, unknown>

0 commit comments

Comments
 (0)