Display help always under the label

dnbexperience · Nov 15, 2024 · 7045da1 · 7045da1
1 parent ad35c9d
commit 7045da1
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 22 deletions.
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/...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/...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/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;