diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx index 616907fd160..76cc5ddea96 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx @@ -115,6 +115,7 @@ function PhoneNumber(props: Props) { info={info} warning={warning} error={error} + {...pickSpacingProps(props)} > diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx index 44e59272ebc..def04dd723b 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx @@ -59,4 +59,22 @@ describe('Field.PhoneNumber', () => { expect(onCountryCodeChange).toHaveBeenLastCalledWith('+41') expect(onChange).toHaveBeenLastCalledWith('+41 99999999') }) + + it('should support spacing props', () => { + render() + + const element = document.querySelector('.dnb-forms-field-phone-number') + const attributes = Array.from(element.attributes).map( + (attr) => attr.name + ) + + expect(attributes).toEqual(['class']) + expect(Array.from(element.classList)).toEqual([ + 'dnb-space', + 'dnb-space__top--large', + 'dnb-forms-field-block', + 'dnb-forms-field-phone-number', + 'dnb-forms-field-block--width-large', + ]) + }) })