Show indicator always above the field block content

dnbexperience · Nov 15, 2024 · c27bc9b · c27bc9b
1 parent e4fbc0b
commit c27bc9b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 61 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -26,7 +26,6 @@ import { Ul, Li } from '../../../elements'
 import {
   convertJsxToString,
   findElementInChildren,
-  warn,
 } from '../../../shared/component-helper'
 import useId from '../../../shared/helpers/useId'
 import {
@@ -526,12 +525,6 @@ function FieldBlock(props: Props) {
     return null
   }
 
-  if (fieldState && typeof label === 'undefined') {
-    warn(
-      'Provide a label when using an async validator or onChange event.'
-    )
-  }
-
   const hasLabelDescription = isFragment(labelDescription)
     ? fragmentHasChildren(labelDescription) &&
       !fragmentHasOnlyUndefinedChildren(labelDescription)
@@ -569,10 +562,7 @@ function FieldBlock(props: Props) {
         <div className={gridClasses}>
           {(label || labelDescription || hasHelp) && (
             <FormLabel {...labelProps}>
-              <SubmitIndicator
-                state={fieldState}
-                className="vertical-indicator"
-              >
+              <span>
                 {label && (
                   <span className="dnb-forms-field-block__label__content">
                     {label}
@@ -588,7 +578,7 @@ function FieldBlock(props: Props) {
                 {hasHelp && (
                   <HelpButtonInline contentId={`${id}-help`} help={help} />
                 )}
-              </SubmitIndicator>
+              </span>
             </FormLabel>
           )}
 
@@ -632,12 +622,10 @@ function FieldBlock(props: Props) {
             {children}
           </div>
 
-          {layout === 'horizontal' && label && (
-            <SubmitIndicator
-              state={fieldState}
-              className="horizontal-indicator"
-            />
-          )}
+          <SubmitIndicator
+            state={fieldState}
+            className="dnb-forms-field-block__indicator dnb-forms-submit-indicator--inline-wrap"
+          />
         </div>
       </Space>
     </FieldBlockContext.Provider>

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
@@ -882,49 +882,6 @@ describe('FieldBlock', () => {
     })
   })
 
-  it('should warn when formStatus is given, but no label', async () => {
-    const log = jest.spyOn(console, 'log').mockImplementation()
-
-    const asyncValidator = async () => {
-      return null
-    }
-
-    const { rerender } = render(
-      <Form.Handler>
-        <Field.String
-          label="Has a label"
-          value="bar"
-          path="/foo"
-          validator={asyncValidator}
-        />
-        <Form.SubmitButton />
-      </Form.Handler>
-    )
-
-    const buttonElement = document.querySelector('button')
-
-    await userEvent.click(buttonElement)
-
-    expect(log).toHaveBeenCalledTimes(0)
-
-    rerender(
-      <Form.Handler>
-        <Field.String value="bar" path="/foo" validator={asyncValidator} />
-        <Form.SubmitButton />
-      </Form.Handler>
-    )
-
-    await userEvent.click(buttonElement)
-
-    expect(log).toHaveBeenLastCalledWith(
-      expect.any(String),
-      expect.any(String),
-      'Provide a label when using an async validator or onChange event.'
-    )
-
-    log.mockRestore()
-  })
-
   it('should summarize errors in one FormStatus components', () => {
     const MockComponent = () => {
       useFieldProps({

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss
@@ -26,6 +26,7 @@ fieldset.dnb-forms-field-block {
       'label'
       'help'
       'contents'
+      'indicator'
       'status';
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,7 @@ fieldset.dnb-forms-field-block { @@
           'label'
           'help'
           'contents'
+          'indicator'
           'status';
       }
@@ Expand Down @@