diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx index 95d498e5b7f..8e88a94beef 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx @@ -396,3 +396,43 @@ export const InlineHelpButtonHorizontalLabel = () => { ) } + +export const InlineHelpButtonCompositionFields = () => { + return ( + + + + + + + + + + + ) +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx index 30439f8ec49..eac89f63974 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx +++ b/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 +### Inline help button (composition fields) + + + ### Inline help button with HTML diff --git a/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx b/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx index 0ce7c61b967..73f6906320d 100644 --- a/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx +++ b/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(contentId) const { isOpen, isUserIntent, buttonRef } = data || {} - const { open, title, content, renderAs } = helpProp || {} + const { + open, + title, + content, + renderAs, + breakout: breakoutProp = true, + } = helpProp || {} const innerRef = useRef(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', diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx index c00e4b88ba1..e44d9df3a7f 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx +++ b/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} diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx index c8ba35b0825..ac4064c73b5 100644 --- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx +++ b/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 + } /> )} diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs.ts b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs.ts index 78ffbdd4164..9ac591f0f88 100644 --- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs.ts +++ b/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', }, diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts index 1b449eb7452..19eb80eeb45 100644 --- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts +++ b/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: diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-help-button-in-composition-fields.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-help-button-in-composition-fields.snap.png new file mode 100644 index 00000000000..8cba97a3d09 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-help-button-in-composition-fields.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-help-button-in-composition-fields.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-help-button-in-composition-fields.snap.png new file mode 100644 index 00000000000..bbf1087b1c4 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-help-button-in-composition-fields.snap.png differ