feat(PhoneNumber): add size property (#4596)

Author: langz

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

@@ -64,7 +64,7 @@ export type Props = Omit<
    * For internal testing purposes
    */
   noAnimation?: boolean
-}
+} & Pick<StringFieldProps, 'size'>
 
 // Important for the default value to be defined here, and not after the useFieldProps call, to avoid the UI jumping
 // back to +47 once the user empty the field so handleChange send out undefined.
@@ -192,6 +192,7 @@ function PhoneNumber(props: Props) {
     emptyValue,
     info,
     warning,
+    size,
     error,
     hasError,
     disabled,
@@ -406,6 +407,7 @@ function PhoneNumber(props: Props) {
             autoComplete="tel-country-code"
             no_animation={props.noAnimation}
             stretch={width === 'stretch'}
+            size={size}
           />
         )}
 
@@ -446,6 +448,7 @@ function PhoneNumber(props: Props) {
           }
           validateUnchanged={validateUnchanged}
           inputMode="tel"
+          size={size}
         />
       </Flex.Horizontal>
     </FieldBlock>

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

@@ -1,5 +1,6 @@
 import { PropertiesTableProps } from '../../../../shared/types'
 import { getFieldEventsWithTypes } from '../FieldDocs'
+import { stringProperties } from '../String/StringDocs'
 
 export const PhoneNumberProperties: PropertiesTableProps = {
   countries: {
@@ -52,6 +53,7 @@ export const PhoneNumberProperties: PropertiesTableProps = {
     type: 'string | false',
     status: 'optional',
   },
+  size: stringProperties.size,
   '[Space](/uilib/layout/space/properties)': {
     doc: 'Spacing properties like `top` or `bottom` are supported.',
     type: ['string', 'object'],

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

@@ -50,6 +50,29 @@ describe('Field.PhoneNumber', () => {
     expect(selectedItemElement.textContent).toBe('+47 Norge')
   })
 
+  it('should support size', () => {
+    render(<Field.PhoneNumber size="large" />)
+
+    const autocompleteElement: HTMLInputElement = document.querySelector(
+      '.dnb-autocomplete'
+    )
+    expect(autocompleteElement.classList).toContain(
+      'dnb-autocomplete--large'
+    )
+
+    const fieldPhoneNumberElement: HTMLInputElement =
+      document.querySelector('.dnb-forms-field-phone-number')
+    expect(fieldPhoneNumberElement.classList).toContain(
+      'dnb-forms-field-block--label-height-large'
+    )
+
+    const fieldPhoneNumberNumberElement: HTMLInputElement =
+      document.querySelector('.dnb-forms-field-phone-number__number')
+    expect(fieldPhoneNumberNumberElement.classList).toContain(
+      'dnb-forms-field-block--label-height-large'
+    )
+  })
+
   it('should support disabled prop', () => {
     const { rerender } = render(
       <Field.PhoneNumber label="Disabled label" disabled />

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

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import type { SpacingProps } from '../../shared/types';
 export type DrawerListDirection = 'auto' | 'top' | 'bottom';
-export type DrawerListSize = 'default' | 'small' | 'medium' | 'large';
+export type DrawerListSize =
+  | 'default'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | number;
 export type DrawerListAlignDrawer = 'left' | 'right';
 export type DrawerListOptionsRender =
   | Record<string, unknown>