From 47e1dfad0b665fca736a8960e82249f3e2e92176 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Mon, 11 Nov 2024 15:37:38 +0100
Subject: [PATCH] fix(Forms): render given elements to `warning` and `info`
 props

---
 .../forms/FieldBlock/FieldBlock.tsx           |  4 +-
 .../FieldBlock/__tests__/FieldBlock.test.tsx  | 42 +++++++++++++++++++
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
index 0762a4322de..685eb3cdf19 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -411,7 +411,7 @@ function FieldBlock(props: Props) {
         if (messages.length > 0) {
           acc[type] = {
             ...acc[type],
-            text: <CombineMessages type={type} messages={messages} />,
+            children: <CombineMessages type={type} messages={messages} />,
           }
 
           fieldStateIdsRef.current[type] = id
@@ -682,7 +682,7 @@ export function getMessagesFromError(
   return [
     ((content instanceof Error && content.message) ||
       (content instanceof FormError && content.message) ||
-      content?.toString() ||
+      (React.isValidElement(content) ? content : content?.toString()) ||
       content) as StateMessage,
   ]
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
index 371823e6a18..aa707ef0534 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
@@ -700,6 +700,33 @@ describe('FieldBlock', () => {
         expect(element).toHaveClass('dnb-height-animation--is-visible')
         expect(element).toHaveTextContent(blockInfo)
       })
+
+      it('should render the given element', () => {
+        render(
+          <FieldBlock info={<strong>{blockInfo}</strong>}>
+            content
+          </FieldBlock>
+        )
+
+        const element = document.querySelector('.dnb-form-status')
+
+        expect(element).toBeInTheDocument()
+        expect(element).toHaveClass('dnb-form-status--info')
+        expect(element).toHaveClass('dnb-height-animation--is-visible')
+        expect(element).toHaveTextContent(blockInfo)
+      })
+
+      it('should render the given React component', () => {
+        const MockComponent = () => <strong>{blockInfo}</strong>
+        render(<FieldBlock info={<MockComponent />}>content</FieldBlock>)
+
+        const element = document.querySelector('.dnb-form-status')
+
+        expect(element).toBeInTheDocument()
+        expect(element).toHaveClass('dnb-form-status--info')
+        expect(element).toHaveClass('dnb-height-animation--is-visible')
+        expect(element).toHaveTextContent(blockInfo)
+      })
     })
 
     describe('warning prop', () => {
@@ -713,6 +740,21 @@ describe('FieldBlock', () => {
         expect(element).toHaveClass('dnb-height-animation--is-visible')
         expect(element).toHaveTextContent(blockWarning)
       })
+
+      it('should render the given element', () => {
+        render(
+          <FieldBlock warning={<strong>{blockWarning}</strong>}>
+            content
+          </FieldBlock>
+        )
+
+        const element = document.querySelector('.dnb-form-status')
+
+        expect(element).toBeInTheDocument()
+        expect(element).toHaveClass('dnb-form-status--warn')
+        expect(element).toHaveClass('dnb-height-animation--is-visible')
+        expect(element).toHaveTextContent(blockWarning)
+      })
     })
 
     describe('error prop', () => {