From b2063befd4be1bed62de46864c9f441b423919b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Tue, 17 Dec 2024 10:42:49 +0100
Subject: [PATCH] feat(Forms): show a label along the indicator for async field
 processes

Add `showLabel` to the FieldBlock, so that async processes have label instead of just the dots:

<img width="420" alt="Screenshot 2024-12-17 at 10 35 02" src="https://github.com/user-attachments/assets/df772014-aa63-4959-b7f1-b936eb0eb0b1" />
---
 .../src/extensions/forms/FieldBlock/FieldBlock.tsx    |  1 +
 .../forms/FieldBlock/__tests__/FieldBlock.test.tsx    | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
index a712a7a5259..932b73119dd 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -639,6 +639,7 @@ function FieldBlock(props: Props) {
 
           <SubmitIndicator
             state={fieldState ?? fieldStateRef.current}
+            showLabel
             className="dnb-forms-field-block__indicator dnb-forms-submit-indicator--inline-wrap"
           />
         </div>
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 c2e9c4e36d1..2de371dcd27 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
@@ -975,6 +975,17 @@ describe('FieldBlock', () => {
       )
     })
 
+    it('should show indicator with an label when fieldState is set to pending', async () => {
+      render(
+        <FieldBlock fieldState="pending">
+          <MockComponent />
+        </FieldBlock>
+      )
+
+      const element = document.querySelector('.dnb-forms-submit-indicator')
+      expect(element).toHaveTextContent(nb.SubmitIndicator.label)
+    })
+
     it('should show indicator two (2) times when nested', async () => {
       render(
         <FieldBlock fieldState="pending">