feat(Forms): add label and showLabel prop to Form.SubmitIndicator

packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx

@@ -1,14 +1,13 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react'
 import classnames from 'classnames'
-import { Icon, Space, Tooltip } from '../../../../components'
+import { Space } from '../../../../components'
 import type { SpaceProps } from '../../../../components/Space'
-import { check } from '../../../../icons'
 import type { SubmitState } from '../../types'
 import {
   omitSpacingProps,
   pickSpacingProps,
 } from '../../../../components/flex/utils'
-import { useTranslation } from '../../../../shared'
+import useTranslation from '../../hooks/useTranslation'
 import { convertJsxToString } from '../../../../shared/component-helper'
 
 // SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
@@ -17,20 +16,23 @@ const useLayoutEffect =
 
 export type Props = {
   state: SubmitState
+  label?: React.ReactNode
+  showLabel?: boolean
   className?: string
-  successLabel?: string
   children?: React.ReactNode
 } & SpaceProps
 
 function SubmitIndicator(props: Props) {
+  const translation = useTranslation()
+
   const {
     className,
     children,
     state,
-    successLabel = 'Saved',
+    showLabel,
+    label = translation.SubmitIndicator.label,
     ...rest
   } = props
-  const translation = useTranslation()
   const childrenRef = useRef<HTMLSpanElement>(null)
   const [willWrap, setWillWrap] = useState(false)
   const key = useMemo(() => convertJsxToString(children), [children])
@@ -65,7 +67,7 @@ function SubmitIndicator(props: Props) {
       ? {
           role: 'status',
           'aria-busy': true,
-          'aria-label': translation.ProgressIndicator.indicator_label,
+          'aria-label': convertJsxToString(label),
         }
       : {
           'aria-hidden': true,
@@ -78,16 +80,8 @@ function SubmitIndicator(props: Props) {
       {...ariaAttributes}
       {...omitSpacingProps(rest)}
     >
-      {state === 'success' && (
-        <Tooltip
-          targetElement={
-            <span>
-              <Icon icon={check} />
-            </span>
-          }
-        >
-          {successLabel}
-        </Tooltip>
+      {showLabel && (
+        <span className="dnb-forms-submit-indicator__label">{label}</span>
       )}
       {state && state !== 'success' && state !== 'abort' && (
         <>

packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicatorDocs.ts

@@ -6,6 +6,16 @@ export const SubmitIndicatorProperties: PropertiesTableProps = {
     type: 'string',
     status: 'required',
   },
+  showLabel: {
+    doc: 'If `true`, the label will be shown.',
+    type: 'boolean',
+    status: 'optional',
+  },
+  label: {
+    doc: 'Provide a label that will be shown next to the indicator.',
+    type: 'string',
+    status: 'optional',
+  },
   children: {
     doc: 'If content is provided, the component will try to find out if the indicator needs to be put on a new row or not. This way it will animate the height nicely.',
     type: 'React.Node',

packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx

@@ -3,8 +3,8 @@ import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Form } from '../../..'
 import { axeComponent } from '../../../../../core/jest/jestSetup'
+import locales from '../../../constants/locales'
 
-import locales from '../../../../../shared/locales'
 const nbNO = locales['nb-NO']
 
 describe('Form.SubmitIndicator', () => {
@@ -118,10 +118,43 @@ describe('Form.SubmitIndicator', () => {
       '.dnb-forms-submit-indicator__content'
     )
 
-    expect(dots).toHaveAttribute(
-      'aria-label',
-      nbNO.ProgressIndicator.indicator_label
+    expect(dots).toHaveAttribute('aria-label', nbNO.SubmitIndicator.label)
+  })
+
+  it('should have aria-label with custom label', () => {
+    render(<Form.SubmitIndicator state="pending" label="Custom label" />)
+
+    const dots = document.querySelector(
+      '.dnb-forms-submit-indicator__content'
     )
+
+    expect(dots).toHaveAttribute('aria-label', 'Custom label')
+  })
+
+  it('should render when showLabel is true', () => {
+    render(<Form.SubmitIndicator state="pending" showLabel />)
+
+    const label = document.querySelector(
+      '.dnb-forms-submit-indicator__label'
+    )
+
+    expect(label).toHaveTextContent(nbNO.SubmitIndicator.label)
+  })
+
+  it('should render custom label', () => {
+    render(
+      <Form.SubmitIndicator
+        state="pending"
+        label="Custom label"
+        showLabel
+      />
+    )
+
+    const label = document.querySelector(
+      '.dnb-forms-submit-indicator__label'
+    )
+
+    expect(label).toHaveTextContent('Custom label')
   })
 
   it('should set class with given state', () => {

packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss

@@ -1,16 +1,32 @@
 @import '../../../../../style/core/utilities.scss';
 
 .dnb-forms-submit-indicator {
+  --padding-left: 0.5em;
+  --font-animation: font-size var(--font-animation-duration, 400ms)
+    var(--easing-default);
+  --opacity-animation: opacity var(--opacity-animation-duration, 0ms)
+    var(--easing-default) var(--opacity-animation-delay, 0ms);
+
+  &:has(&__label) {
+    --font-animation-duration: 400ms;
+    --opacity-animation-duration: 400ms;
+    --opacity-animation-delay: 250ms;
+  }
+
   display: inline;
 
-  --padding-left: 0.5em;
+  &__label {
+    padding: 0.5em 0;
+  }
 
   &__content {
+    align-items: center;
     font-size: 0;
+    opacity: 0;
     line-height: 1em;
 
-    will-change: font-size;
-    transition: font-size 800ms var(--easing-default);
+    will-change: font-size opacity;
+    transition: var(--font-animation), var(--opacity-animation);
 
     b {
       padding-left: 0.125em;
@@ -37,28 +53,14 @@
       html[data-visual-test] & {
         animation: none;
       }
+
+      font-weight: var(--font-weight-bold);
     }
   }
 
   &--state-pending &__content {
     font-size: 1em;
-    font-weight: var(--font-weight-bold);
-  }
-  &--state-success &__content {
-    font-size: 1em;
-
-    .dnb-icon {
-      padding-left: var(--padding-left);
-      color: var(--color-success-green);
-    }
-    .dnb-icon--default {
-      font-size: 1em;
-    }
-
-    &__label {
-      font-size: var(--font-size-small);
-      padding-left: calc(var(--padding-left) * 2);
-    }
+    opacity: 1;
   }
   &--inline-wrap &__content {
     display: flex;

packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts

@@ -16,6 +16,9 @@ export default {
       text: 'Send',
       sendText: 'Send',
     },
+    SubmitIndicator: {
+      label: 'In progress',
+    },
     Isolation: {
       commitButtonText: 'Add',
     },

packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts

@@ -15,6 +15,9 @@ export default {
       text: 'Send',
       sendText: 'Send inn',
     },
+    SubmitIndicator: {
+      label: 'Under arbeid',
+    },
     Isolation: {
       commitButtonText: 'Legg til',
     },