Display help always under the label

dnbexperience · Nov 15, 2024 · a82f46d · a82f46d
1 parent db86d3d
commit a82f46d
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 30 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx
@@ -1736,15 +1736,14 @@ describe('DataContext.Provider', () => {
 
       const input = document.querySelector('input')
       const indicator = document.querySelector(
-        'label .dnb-forms-submit-indicator'
+        '.dnb-forms-submit-indicator'
       )
 
       // Use fireEvent over userEvent, because of its sync nature
       fireEvent.change(input, {
         target: { value: '123' },
       })
 
-      expect(indicator).toHaveTextContent('My label...')
       expect(indicator).toHaveClass(
         'dnb-forms-submit-indicator--state-pending'
       )
@@ -1770,15 +1769,14 @@ describe('DataContext.Provider', () => {
 
       const input = document.querySelector('input')
       const indicator = document.querySelector(
-        'label .dnb-forms-submit-indicator'
+        '.dnb-forms-submit-indicator'
       )
 
       // Use fireEvent over userEvent, because of its sync nature
       fireEvent.change(input, {
         target: { value: '123' },
       })
 
-      expect(indicator).toHaveTextContent('My label...')
       expect(indicator).toHaveClass(
         'dnb-forms-submit-indicator--state-pending'
       )
@@ -2084,22 +2082,20 @@ describe('DataContext.Provider', () => {
 
       const input = document.querySelector('input')
       const indicator = document.querySelector(
-        'label .dnb-forms-submit-indicator'
+        '.dnb-forms-submit-indicator'
       )
 
       await userEvent.type(input, '123')
 
       await waitFor(() => {
         expect(events).toEqual(['validator'])
-        expect(indicator).toHaveTextContent('My label...')
         expect(indicator).toHaveClass(
           'dnb-forms-submit-indicator--state-pending'
         )
       })
 
       await waitFor(() => {
         expect(events).toEqual(['validator', 'onChangeForm'])
-        expect(indicator).toHaveTextContent('My label...')
         expect(indicator).toHaveClass(
           'dnb-forms-submit-indicator--state-pending'
         )
@@ -2111,7 +2107,6 @@ describe('DataContext.Provider', () => {
           'onChangeForm',
           'onChangeField',
         ])
-        expect(indicator).toHaveTextContent('My label...')
         expect(indicator).toHaveClass(
           'dnb-forms-submit-indicator--state-complete'
         )

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -531,14 +531,6 @@ function FieldBlock(props: Props) {
     : labelDescription
   const hasHelp = help?.title || help?.content
 
-  const helpNode = (
-    <HelpButtonInlineContent
-      contentId={`${id}-help`}
-      className="dnb-forms-field-block__help"
-      help={help}
-    />
-  )
-
   return (
     <FieldBlockContext.Provider
       value={{
@@ -557,8 +549,6 @@ function FieldBlock(props: Props) {
         className={mainClasses}
         {...rest}
       >
-        {hasHelp && layout === 'horizontal' && helpNode}
-
         <div className={gridClasses}>
           {(label || labelDescription || hasHelp) && (
             <FormLabel {...labelProps}>
@@ -582,7 +572,13 @@ function FieldBlock(props: Props) {
             </FormLabel>
           )}
 
-          {hasHelp && helpNode}
+          {hasHelp && (
+            <HelpButtonInlineContent
+              contentId={`${id}-help`}
+              className="dnb-forms-field-block__help"
+              help={help}
+            />
+          )}
 
           <div
             className={classnames(

diff --git a/...apshots__/fieldblock-for-sbanken-have-to-match-description-help-button.snap.png b/...apshots__/fieldblock-for-sbanken-have-to-match-description-help-button.snap.png
diff --git a/...napshots__/fieldblock-for-sbanken-have-to-match-horizontal-help-button.snap.png b/...napshots__/fieldblock-for-sbanken-have-to-match-horizontal-help-button.snap.png
diff --git a/...ge_snapshots__/fieldblock-for-ui-have-to-match-description-help-button.snap.png b/...ge_snapshots__/fieldblock-for-ui-have-to-match-description-help-button.snap.png
diff --git a/...mage_snapshots__/fieldblock-for-ui-have-to-match-help-button-with-html.snap.png b/...mage_snapshots__/fieldblock-for-ui-have-to-match-help-button-with-html.snap.png
diff --git a/...age_snapshots__/fieldblock-for-ui-have-to-match-horizontal-help-button.snap.png b/...age_snapshots__/fieldblock-for-ui-have-to-match-horizontal-help-button.snap.png
diff --git a/...pshots__/fieldblock-for-ui-have-to-match-label-description-help-button.snap.png b/...pshots__/fieldblock-for-ui-have-to-match-label-description-help-button.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss
@@ -117,6 +117,7 @@ fieldset.dnb-forms-field-block {
         auto;
       grid-template-areas:
         'label contents'
+        'help help'
         '. indicator'
         '. status';
 
@@ -126,17 +127,6 @@ fieldset.dnb-forms-field-block {
     }
   }
 
-  &__help:has(+ #{&}__grid#{&}--layout-horizontal) {
-    @include allBelow(small) {
-      display: none;
-    }
-  }
-  &__grid#{&}--layout-horizontal &__help {
-    @include allAbove(small) {
-      display: none;
-    }
-  }
-
   &__indicator {
     grid-area: indicator;
   }
@@ -154,6 +144,14 @@ fieldset.dnb-forms-field-block {
       }
     }
   }
+  &__grid#{&}--layout-horizontal &__help {
+    @include allAbove(small) {
+      .dnb-section {
+        margin-top: 0.5rem;
+        margin-bottom: 0;
+      }
+    }
+  }
 
   &__status {
     grid-area: status;