fix(PhoneNumber): fix spacing prop support

Fixes #2807
dnbexperience · Oct 30, 2023 · 846c975 · 846c975
1 parent 594ea72
commit 846c975
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git 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)}
     >
       <Flex.Horizontal>
         <Autocomplete
@@ -136,7 +137,6 @@ function PhoneNumber(props: Props) {
           on_change={handleCountryCodeChange}
           independent_width
           search_numbers
-          {...pickSpacingProps(props)}
           stretch={width === 'stretch'}
         />
 

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
@@ -59,4 +59,22 @@ describe('Field.PhoneNumber', () => {
     expect(onCountryCodeChange).toHaveBeenLastCalledWith('+41')
     expect(onChange).toHaveBeenLastCalledWith('+41 99999999')
   })
+
+  it('should support spacing props', () => {
+    render(<PhoneNumber top="2rem" />)
+
+    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',
+    ])
+  })
 })