fix(Forms): render given elements to warning and info props

dnbexperience · Nov 11, 2024 · 47e1dfa · 47e1dfa
1 parent ca3bbde
commit 47e1dfa
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 2 deletions.
diff --git 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
@@ -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', () => {