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

…#4409) This PR adds two new properties to the `SubmitIndicator`: - `showLabel` makes to the label gets visible. - `label` is to customize the label content. The `SubmitIndicator` is not effected from this change, except that we speed up the animation. --------- Co-authored-by: Anders <[email protected]>
dnbexperience · Dec 17, 2024 · 95af6e3 · 95af6e3
1 parent 099436d
commit 95af6e3
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 42 deletions.
diff --git a/...nb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/Examples.tsx b/...nb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/Examples.tsx
@@ -128,3 +128,13 @@ export const WithinOtherComponents = () => {
     </ComponentBox>
   )
 }
+
+export const WithinALabel = () => {
+  return (
+    <ComponentBox data-visual-test="submit-indicator-with-label">
+      <Form.Handler>
+        <Form.SubmitIndicator state="pending" showLabel />
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
diff --git a/...gn-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/demos.mdx b/...gn-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/demos.mdx
@@ -29,3 +29,7 @@ Make a change in the input field.
 ### Used in other components
 
 <Examples.WithinOtherComponents />
+
+### With a label
+
+<Examples.WithinALabel />
diff --git a/...stem-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/properties.mdx b/...stem-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/properties.mdx
@@ -2,9 +2,14 @@
 showTabs: true
 ---
 
+import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { SubmitIndicatorProperties } from '@dnb/eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicatorDocs'
 
 ## Properties
 
 <PropertiesTable props={SubmitIndicatorProperties} />
+
+## Translations
+
+<TranslationsTable localeKey="SubmitIndicator" />
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/__tests__/SubmitButton.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/__tests__/SubmitButton.test.tsx
@@ -219,7 +219,7 @@ describe('Form.SubmitButton', () => {
     expect(indicatorContentElement).toHaveAttribute('role', 'status')
     expect(indicatorContentElement).toHaveAttribute(
       'aria-label',
-      'Vennligst vent ...'
+      nb.SubmitIndicator.label
     )
   })
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx b/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' && (
         <>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicatorDocs.ts b/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. Defaults to `false`.',
+    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',

diff --git a/...ia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.screenshot.test.ts b/...ia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.screenshot.test.ts
@@ -0,0 +1,17 @@
+import {
+  makeScreenshot,
+  setupPageScreenshot,
+} from '../../../../../core/jest/jestSetupScreenshots'
+
+describe('Form.SubmitIndicator', () => {
+  setupPageScreenshot({
+    url: '/uilib/extensions/forms/Form/SubmitIndicator/demos',
+  })
+
+  it('have to match submit-indicator-with-label', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="submit-indicator-with-label"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})
diff --git a/.../dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx b/.../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', () => {

diff --git a/...pshots__/formsubmitindicator-have-to-match-submit-indicator-with-label.snap.png b/...pshots__/formsubmitindicator-have-to-match-submit-indicator-with-label.snap.png
diff --git a/...nb-eufemia/src/extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss b/...nb-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;

diff --git a/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts b/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',
     },

diff --git a/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts b/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',
     },