Enhance handling of horizontal layout

dnbexperience · Nov 16, 2024 · 0dd1e52 · 0dd1e52
1 parent 6f201c7
commit 0dd1e52
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 30 deletions.
diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -664,6 +664,9 @@ button.dnb-button::-moz-focus-inner {
   }
 }
 
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
 .dnb-help-button__content .dnb-section {
   --background-color: var(--help-button-content-background);
   --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
@@ -674,9 +677,9 @@ button.dnb-button::-moz-focus-inner {
   transform: translate3d(0, -0.5rem, 0);
 }
 :not(.dnb-card) .dnb-help-button__content .dnb-section {
-  margin-left: calc(var(--card-outline-width) * -1);
-  margin-right: calc(var(--card-outline-width) * -1);
-  border: var(--card-outline-width) solid var(--help-button-content-background);
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
   border-top: none;
   border-bottom: none;
 }

diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -665,6 +665,9 @@ button.dnb-button::-moz-focus-inner {
   }
 }
 
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
 .dnb-help-button__content .dnb-section {
   --background-color: var(--help-button-content-background);
   --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
@@ -675,9 +678,9 @@ button.dnb-button::-moz-focus-inner {
   transform: translate3d(0, -0.5rem, 0);
 }
 :not(.dnb-card) .dnb-help-button__content .dnb-section {
-  margin-left: calc(var(--card-outline-width) * -1);
-  margin-right: calc(var(--card-outline-width) * -1);
-  border: var(--card-outline-width) solid var(--help-button-content-background);
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
   border-top: none;
   border-bottom: none;
 }

diff --git a/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx b/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx
@@ -31,12 +31,6 @@ export type HelpButtonInlineSharedStateDataProps = {
   isUserIntent?: boolean
   buttonRef?: React.RefObject<HTMLButtonElement>
 }
-export type HelpButtonInlineContentProps = SpacingProps & {
-  contentId: string
-  className?: string
-  children?: React.ReactNode
-  help?: HelpProps
-}
 
 export default function HelpButtonInline(props: HelpButtonInlineProps) {
   const { contentId, size, help, className, children, ...rest } = props
@@ -94,18 +88,33 @@ export default function HelpButtonInline(props: HelpButtonInlineProps) {
   )
 }
 
+export type HelpButtonInlineContentProps = SpacingProps & {
+  contentId: string
+  className?: string
+  children?: React.ReactNode
+  help?: HelpProps
+  breakout?: boolean
+}
+
 export function HelpButtonInlineContent(
   props: HelpButtonInlineContentProps
 ) {
-  const { contentId, className, children, help: helpProp, ...rest } = props
+  const {
+    contentId,
+    className,
+    children,
+    help: helpProp,
+    breakout = true,
+    ...rest
+  } = props
   const { data, update } =
     useSharedState<HelpButtonInlineSharedStateDataProps>(contentId)
   const { isOpen, isUserIntent, buttonRef } = data || {}
   const { open, title, content, renderAs } = helpProp || {}
 
   const innerRef = useRef<HTMLDivElement>(null)
   const cardContext = useContext(CardContext)
-  const isInsideCard = Boolean(cardContext)
+  const isInsideCard = Boolean(cardContext) && breakout
 
   useEffect(() => {
     if (isOpen && isUserIntent) {

diff --git a/...s/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap b/...s/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
@@ -650,6 +650,9 @@ button.dnb-button::-moz-focus-inner {
   }
 }
 
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
 .dnb-help-button__content .dnb-section {
   --background-color: var(--help-button-content-background);
   --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
@@ -660,9 +663,9 @@ button.dnb-button::-moz-focus-inner {
   transform: translate3d(0, -0.5rem, 0);
 }
 :not(.dnb-card) .dnb-help-button__content .dnb-section {
-  margin-left: calc(var(--card-outline-width) * -1);
-  margin-right: calc(var(--card-outline-width) * -1);
-  border: var(--card-outline-width) solid var(--help-button-content-background);
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
   border-top: none;
   border-bottom: none;
 }

diff --git a/packages/dnb-eufemia/src/components/help-button/style/dnb-help-button-inline.scss b/packages/dnb-eufemia/src/components/help-button/style/dnb-help-button-inline.scss
@@ -105,15 +105,18 @@
     }
   }
 
+  // Defines the negative margin (extra border) to align on UX design.
+  --help-button-indent-width: var(--card-outline-width);
+
   :not(.dnb-card) & .dnb-section {
     // Because no outline, we need to stretch the content to the left and right,
     // so it is aligned on how the Card is displayed.
-    margin-left: calc(var(--card-outline-width) * -1);
-    margin-right: calc(var(--card-outline-width) * -1);
+    margin-left: calc(var(--help-button-indent-width) * -1);
+    margin-right: calc(var(--help-button-indent-width) * -1);
 
     // Use a border instead of the original outline,
     // because is has no animation artifacts.
-    border: var(--card-outline-width) solid
+    border: var(--help-button-indent-width) solid
       var(--help-button-content-background);
     border-top: none;
     border-bottom: none;

diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
@@ -657,6 +657,9 @@ button.dnb-button::-moz-focus-inner {
   }
 }
 
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
 .dnb-help-button__content .dnb-section {
   --background-color: var(--help-button-content-background);
   --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
@@ -667,9 +670,9 @@ button.dnb-button::-moz-focus-inner {
   transform: translate3d(0, -0.5rem, 0);
 }
 :not(.dnb-card) .dnb-help-button__content .dnb-section {
-  margin-left: calc(var(--card-outline-width) * -1);
-  margin-right: calc(var(--card-outline-width) * -1);
-  border: var(--card-outline-width) solid var(--help-button-content-background);
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
   border-top: none;
   border-bottom: none;
 }

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -577,6 +577,7 @@ function FieldBlock(props: Props) {
               contentId={`${id}-help`}
               className="dnb-forms-field-block__help"
               help={help}
+              breakout={layout !== 'horizontal'}
             />
           )}
 

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
@@ -98,29 +98,43 @@ fieldset.dnb-forms-field-block {
     margin-right: 1rem;
   }
   &__grid#{&}--layout-horizontal {
+    & > .dnb-form-label {
+      margin-top: var(--label-margin);
+      margin-bottom: var(--label-margin);
+    }
+
     @include allBelow(small) {
       & > .dnb-form-label {
-        margin-bottom: 0.5rem;
+        margin-bottom: calc(var(--label-margin) + 0.5rem);
       }
     }
     @include allAbove(small) {
-      & > .dnb-form-label,
-      & > .dnb-forms-field-block__label > .dnb-form-label {
-        margin-top: var(--label-margin);
-        margin-bottom: var(--label-margin);
-      }
       grid-template-columns:
         minmax(
           var(--dnb-forms-field-block-layout-width-min, min-content),
           var(--dnb-forms-field-block-layout-width-max, max-content)
         )
         auto;
+
+      // When stretching the "help" over two columns,
+      // it influences the "label" width when shown,
+      // and there is not layoutOptions defined.
       grid-template-areas:
         'label contents'
-        'help help'
+        '. help'
         '. indicator'
         '. status';
 
+      .dnb-help-button__content {
+        --help-button-indent-width: 0;
+
+        // Align to how the FormStatus looks
+        .dnb-section {
+          --rounded-corner: 0.25rem;
+          align-self: flex-start; // Do not stretch the content
+        }
+      }
+
       .dnb-forms-field-block__contents {
         align-self: end;
       }