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" />
dnbexperience · Dec 17, 2024 · b2063be · b2063be
1 parent f5b2d24
commit b2063be
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git 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
@@ -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">