Skip to content

Commit

Permalink
feat(Forms): show a label along the indicator for async field process…
Browse files Browse the repository at this point in the history
…es (#4410)

This PR is based on #4409

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"
/>

---------

Co-authored-by: Anders <[email protected]>
  • Loading branch information
tujoworker and langz authored Dec 17, 2024
1 parent 95af6e3 commit 885ae0d
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -975,6 +975,17 @@ describe('FieldBlock', () => {
)
})

it('should show indicator with a 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">
Expand Down

0 comments on commit 885ae0d

Please sign in to comment.