fix(FormLabel): don't apply margin-right when no content was given (#…

…2927)
dnbexperience · Nov 22, 2023 · 057f957 · 057f957
1 parent 693f9d4
commit 057f957
Show file tree

Hide file tree

Showing 28 changed files with 33 additions and 30 deletions.
diff --git a/...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -805,7 +805,6 @@ html[data-visual-test] .dnb-tooltip--hide {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;
@@ -1930,7 +1929,6 @@ button.dnb-button::-moz-focus-inner {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -26,7 +26,6 @@ exports[`Checkbox scss has to match style dependencies css 1`] = `
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/...s/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/...s/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -805,7 +805,6 @@ html[data-visual-test] .dnb-tooltip--hide {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;
@@ -1844,7 +1843,6 @@ button.dnb-button::-moz-focus-inner {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;
@@ -2447,7 +2445,6 @@ button.dnb-button::-moz-focus-inner {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;
@@ -2851,7 +2848,6 @@ html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;
@@ -3510,7 +3506,6 @@ button .dnb-form-status__text {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -666,7 +666,6 @@ button.dnb-button::-moz-focus-inner {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx b/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx
@@ -16,8 +16,9 @@ import {
   skeletonDOMAttributes,
 } from '../skeleton/SkeletonHelper'
 import { pickFormElementProps } from '../../shared/helpers/filterValidProps'
+import { omitSpacingProps } from '../flex/utils'
 import Context from '../../shared/Context'
-import {
+import type {
   DynamicElement,
   DynamicElementParams,
   SpacingProps,
@@ -83,6 +84,8 @@ export default function FormLabel(localProps: FormLabelAllProps) {
     ...attributes
   } = props
 
+  const content = text || children
+
   const isInteractive =
     !props.disabled &&
     !srOnly &&
@@ -97,7 +100,9 @@ export default function FormLabel(localProps: FormLabelAllProps) {
       size && `dnb-h--${size}`,
       isInteractive && 'dnb-form-label--interactive',
       createSkeletonClass('font', skeleton, context),
-      createSpacingClasses(props),
+      createSpacingClasses(
+        content ? { right: 'small', ...props } : omitSpacingProps(props)
+      ),
       className
     ),
     htmlFor: forId || for_id,
@@ -109,7 +114,7 @@ export default function FormLabel(localProps: FormLabelAllProps) {
   skeletonDOMAttributes(params, skeleton, context)
   validateDOMAttributes(localProps, params)
 
-  return <Element {...params}>{text || children}</Element>
+  return <Element {...params}>{content}</Element>
 }
 
 FormLabel._formElement = true

diff --git a/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx b/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx
@@ -21,8 +21,22 @@ describe('FormLabel component', () => {
     )
   })
 
+  it('should have default spacing', () => {
+    const { rerender } = render(<FormLabel forId="input" text="Label" />)
+
+    const element = document.querySelector('.dnb-form-label')
+
+    expect(Array.from(element.classList)).toContain(
+      'dnb-space__right--small'
+    )
+
+    rerender(<FormLabel forId="input" text="Label" />)
+
+    expect(Array.from(element.classList)).not.toContain('dnb-space__right')
+  })
+
   it('should support spacing props', () => {
-    render(<FormLabel forId="input" top="large" />)
+    render(<FormLabel forId="input" top="large" text="Label" />)
 
     const element = document.querySelector('.dnb-form-label')
 
@@ -31,6 +45,14 @@ describe('FormLabel component', () => {
     )
   })
 
+  it('should remove spacing props when no label was given', () => {
+    render(<FormLabel forId="input" top="large" />)
+
+    const element = document.querySelector('.dnb-form-label')
+
+    expect(Array.from(element.classList)).not.toContain('dnb-space')
+  })
+
   it('should set correct class when srOnly is set', () => {
     render(<FormLabel forId="input" srOnly />)
 

diff --git a/...ge_snapshots__/formlabel-for-sbanken-have-to-match-vertical-form-label.snap.png b/...ge_snapshots__/formlabel-for-sbanken-have-to-match-vertical-form-label.snap.png
diff --git a/...__image_snapshots__/formlabel-for-ui-have-to-match-vertical-form-label.snap.png b/...__image_snapshots__/formlabel-for-ui-have-to-match-vertical-form-label.snap.png
diff --git a/...ges/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.tsx.snap b/...ges/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.tsx.snap
@@ -19,7 +19,6 @@ exports[`FormLabel scss has to match style dependencies css 1`] = `
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/packages/dnb-eufemia/src/components/form-label/style/dnb-form-label.scss b/packages/dnb-eufemia/src/components/form-label/style/dnb-form-label.scss
@@ -10,7 +10,6 @@
 
   width: auto;
   padding: 0;
-  margin-right: 1rem;
 
   text-align: left;
   vertical-align: baseline;
@@ -27,10 +26,6 @@
     margin-bottom: 0.5rem;
   }
 
-  // Is not in use
-  // &--vertical-label {
-  // }
-
   &[for]:not([disabled]) {
     user-select: none; // Safari / Touch fix
   }

diff --git a/...dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap b/...dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap
@@ -805,7 +805,6 @@ html[data-visual-test] .dnb-tooltip--hide {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/...napshots__/input-for-sbanken-have-to-match-stretched-input-with-status.snap.png b/...napshots__/input-for-sbanken-have-to-match-stretched-input-with-status.snap.png
diff --git a/...age_snapshots__/input-for-ui-have-to-match-stretched-input-with-status.snap.png b/...age_snapshots__/input-for-ui-have-to-match-stretched-input-with-status.snap.png
diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -798,7 +798,6 @@ html[data-visual-test] .dnb-tooltip--hide {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.tsx.snap b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.tsx.snap
@@ -26,7 +26,6 @@ exports[`Radio scss has to match style dependencies css 1`] = `
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
@@ -712,7 +712,6 @@ html[data-visual-test] .dnb-tooltip--hide {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.tsx.snap b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.tsx.snap
@@ -26,7 +26,6 @@ exports[`Switch scss has to match style dependencies css 1`] = `
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -26,7 +26,6 @@ exports[`Textarea scss has to match style dependencies css 1`] = `
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/...b-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/...b-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -26,7 +26,6 @@ exports[`ToggleButton scss has to match style dependencies css 1`] = `
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;
@@ -629,7 +628,6 @@ button.dnb-button::-moz-focus-inner {
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;
@@ -1033,7 +1031,6 @@ html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:
   display: inline-block;
   width: auto;
   padding: 0;
-  margin-right: 1rem;
   text-align: left;
   vertical-align: baseline;
   white-space: pre-wrap;

diff --git a/...e_snapshots__/anchor-for-sbanken-have-to-match-expiry-with-help-button.snap.png b/...e_snapshots__/anchor-for-sbanken-have-to-match-expiry-with-help-button.snap.png
diff --git a/..._image_snapshots__/anchor-for-sbanken-have-to-match-the-disabled-state.snap.png b/..._image_snapshots__/anchor-for-sbanken-have-to-match-the-disabled-state.snap.png
diff --git a/..._/__image_snapshots__/anchor-for-sbanken-have-to-match-the-empty-state.snap.png b/..._/__image_snapshots__/anchor-for-sbanken-have-to-match-the-empty-state.snap.png
diff --git a/...snapshots__/anchor-for-sbanken-have-to-match-the-input-filled-in-value.snap.png b/...snapshots__/anchor-for-sbanken-have-to-match-the-input-filled-in-value.snap.png
diff --git a/..._image_snapshots__/anchor-for-ui-have-to-match-expiry-with-help-button.snap.png b/..._image_snapshots__/anchor-for-ui-have-to-match-expiry-with-help-button.snap.png
diff --git a/...s__/__image_snapshots__/anchor-for-ui-have-to-match-the-disabled-state.snap.png b/...s__/__image_snapshots__/anchor-for-ui-have-to-match-the-disabled-state.snap.png
diff --git a/...ests__/__image_snapshots__/anchor-for-ui-have-to-match-the-empty-state.snap.png b/...ests__/__image_snapshots__/anchor-for-ui-have-to-match-the-empty-state.snap.png
diff --git a/...mage_snapshots__/anchor-for-ui-have-to-match-the-input-filled-in-value.snap.png b/...mage_snapshots__/anchor-for-ui-have-to-match-the-input-filled-in-value.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
@@ -109,7 +109,7 @@ describe('FieldBlock', () => {
 
     expect(labelElement).toBeInTheDocument()
     expect(labelElement.className).toBe(
-      'dnb-form-label dnb-space__top--zero dnb-space__bottom--x-small'
+      'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small'
     )
     expect(labelElement.textContent).toBe('A Label Description')
   })
@@ -123,7 +123,7 @@ describe('FieldBlock', () => {
 
     expect(labelElement).toBeInTheDocument()
     expect(labelElement.className).toBe(
-      'dnb-form-label dnb-space__top--zero dnb-space__bottom--x-small'
+      'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small'
     )
     expect(labelElement.textContent).toBe('A Secondary Label')
   })