Enhance handling of composition fields

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx

@@ -396,3 +396,43 @@ export const InlineHelpButtonHorizontalLabel = () => {
     </ComponentBox>
   )
 }
+
+export const InlineHelpButtonCompositionFields = () => {
+  return (
+    <ComponentBox data-visual-test="forms-field-block-help-button-composition-fields">
+      <Card stack>
+        <Field.Composition label="Field.Composition" width="large">
+          <Field.String
+            width="medium"
+            label="Label"
+            help={{
+              title: 'Hva betyr lånebeløp? ',
+              content: 'Dette er hvor mye du har tenkt å låne totalt.',
+            }}
+          />
+          <Field.String
+            width="stretch"
+            label="Label"
+            help={{
+              title: 'Hva betyr lånebeløp? ',
+              content: 'Dette er hvor mye du har tenkt å låne totalt.',
+            }}
+          />
+        </Field.Composition>
+        <Field.PostalCodeAndCity
+          help={{
+            title: 'Hva betyr lånebeløp? ',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+        />
+        <Field.PhoneNumber
+          help={{
+            open: true,
+            title: 'Hva betyr lånebeløp? ',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+        />
+      </Card>
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx

@@ -56,6 +56,10 @@ Error messages from all fields inside the FieldBlock are combined as one message
 
 <Examples.InlineHelpButtonHorizontalLabel />
 
+### Inline help button (composition fields)
+
+<Examples.InlineHelpButtonCompositionFields />
+
 ### Inline help button with HTML
 
 <Examples.InlineHelpButtonHTML />

packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx

@@ -17,8 +17,11 @@ import { question as QuestionIcon, close as CloseIcon } from '../../icons'
 export type HelpProps = {
   title?: React.ReactNode
   content?: React.ReactNode
-  open?: boolean
   renderAs?: 'inline' | 'dialog'
+  /** Only for the "inline" variant */
+  open?: boolean
+  /** Only for the "inline" variant */
+  breakout?: boolean
 }
 
 export type HelpButtonInlineProps = HelpButtonProps & {
@@ -110,11 +113,18 @@ export function HelpButtonInlineContent(
   const { data, update } =
     useSharedState<HelpButtonInlineSharedStateDataProps>(contentId)
   const { isOpen, isUserIntent, buttonRef } = data || {}
-  const { open, title, content, renderAs } = helpProp || {}
+  const {
+    open,
+    title,
+    content,
+    renderAs,
+    breakout: breakoutProp = true,
+  } = helpProp || {}
 
   const innerRef = useRef<HTMLDivElement>(null)
   const cardContext = useContext(CardContext)
-  const isInsideCard = Boolean(cardContext) && breakout
+  const breakoutFromLayout =
+    Boolean(cardContext) && breakout && breakoutProp
 
   useEffect(() => {
     if (isOpen && isUserIntent) {
@@ -166,10 +176,10 @@ export function HelpButtonInlineContent(
         tabIndex={-1}
         innerRef={innerRef}
         onKeyDown={keydownHandler}
-        breakout={isInsideCard}
-        roundedCorner={!isInsideCard}
+        breakout={breakoutFromLayout}
+        roundedCorner={!breakoutFromLayout}
         innerSpace={
-          isInsideCard
+          breakoutFromLayout
             ? { top: 'small', bottom: 'medium' }
             : {
                 top: 'small',

packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx

@@ -433,7 +433,7 @@ function PhoneNumber(props: Props) {
           width={
             omitCountryCodeField ? 'medium' : props.width ?? 'stretch'
           }
-          help={help}
+          help={{ ...help, breakout: false }}
           required={required}
           errorMessages={errorMessages}
           validateInitially={validateInitially}

packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx

@@ -577,7 +577,10 @@ function FieldBlock(props: Props) {
               contentId={`${id}-help`}
               className="dnb-forms-field-block__help"
               help={help}
-              breakout={layout !== 'horizontal'}
+              breakout={
+                layout === 'vertical' &&
+                !nestedFieldBlockContext?.composition
+              }
             />
           )}
 

packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs.ts

@@ -17,7 +17,7 @@ export const FieldBlockSharedProperties: PropertiesTableProps = {
     status: 'optional',
   },
   help: {
-    doc: 'Provide help content for the field using `title` and `content` as a string or React.Node. Additionally, you can set `open` to `true` to display the inline help or use `renderAs` set to `dialog` to render the content in a [Dialog](/uilib/components/dialog/) (recommended for larger amounts of content).',
+    doc: 'Provide help content for the field using `title` and `content` as a string or React.Node. Additionally, you can set `open` to `true` to display the inline help, set the `breakout` property to `false` to disable the breakout of the inline help content, or use `renderAs` set to `dialog` to render the content in a [Dialog](/uilib/components/dialog/) (recommended for larger amounts of content).',
     type: 'object',
     status: 'optional',
   },

packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts

@@ -60,6 +60,14 @@ describe.each(['ui', 'sbanken'])('FieldBlock for %s', (themeName) => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match help-button in composition fields', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="forms-field-block-help-button-composition-fields"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match label description help-button', async () => {
     const screenshot = await makeScreenshot({
       selector: