From 95af6e3c18f4e3142110395171cdf62ad48b735a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Tue, 17 Dec 2024 21:14:04 +0100 Subject: [PATCH] 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 --- .../forms/Form/SubmitIndicator/Examples.tsx | 10 +++++ .../forms/Form/SubmitIndicator/demos.mdx | 4 ++ .../forms/Form/SubmitIndicator/properties.mdx | 5 +++ .../__tests__/SubmitButton.test.tsx | 2 +- .../Form/SubmitIndicator/SubmitIndicator.tsx | 28 +++++------- .../SubmitIndicator/SubmitIndicatorDocs.ts | 10 +++++ .../SubmitIndicator.screenshot.test.ts | 17 +++++++ .../__tests__/SubmitIndicator.test.tsx | 41 +++++++++++++++-- ...match-submit-indicator-with-label.snap.png | Bin 0 -> 2042 bytes .../style/dnb-form-submit-indicator.scss | 42 +++++++++--------- .../forms/constants/locales/en-GB.ts | 3 ++ .../forms/constants/locales/nb-NO.ts | 3 ++ 12 files changed, 123 insertions(+), 42 deletions(-) create mode 100644 packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.screenshot.test.ts create mode 100644 packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/__image_snapshots__/formsubmitindicator-have-to-match-submit-indicator-with-label.snap.png diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/Examples.tsx index 914d6ef2cdf..e6a4c0ed49b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/Examples.tsx @@ -128,3 +128,13 @@ export const WithinOtherComponents = () => { ) } + +export const WithinALabel = () => { + return ( + + + + + + ) +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/demos.mdx index b1d09b1264f..e7cbf6c79b1 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/demos.mdx +++ b/packages/dnb-design-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 + +### With a label + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/properties.mdx index 342a608dbc4..be14e61bfe6 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubmitIndicator/properties.mdx +++ b/packages/dnb-design-system-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 + +## Translations + + 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 index da0b312baf3..cb0a1008a44 100644 --- 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 index 3e6de9c123f..638f7cd8ee4 100644 --- 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(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' && ( - - - - } - > - {successLabel} - + {showLabel && ( + {label} )} {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 index 160d8c08265..97c1c224f73 100644 --- 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/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.screenshot.test.ts new file mode 100644 index 00000000000..234cbfc656e --- /dev/null +++ b/packages/dnb-eufemia/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/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx index 411032ba549..b5c65628aa8 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx +++ b/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() + + const dots = document.querySelector( + '.dnb-forms-submit-indicator__content' ) + + expect(dots).toHaveAttribute('aria-label', 'Custom label') + }) + + it('should render when showLabel is true', () => { + render() + + const label = document.querySelector( + '.dnb-forms-submit-indicator__label' + ) + + expect(label).toHaveTextContent(nbNO.SubmitIndicator.label) + }) + + it('should render custom label', () => { + render( + + ) + + const label = document.querySelector( + '.dnb-forms-submit-indicator__label' + ) + + expect(label).toHaveTextContent('Custom label') }) it('should set class with given state', () => { diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/__image_snapshots__/formsubmitindicator-have-to-match-submit-indicator-with-label.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/__image_snapshots__/formsubmitindicator-have-to-match-submit-indicator-with-label.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..942d57222611106f73e13e17ad3e4069d7dd4c07 GIT binary patch literal 2042 zcmaJ?`yoM)o9F1IZOGrc0#brfUVWCC~ zF)8M(XqH=;rVdV$`;_|}m-GDxp67?p`~B1B{dv7#@7L?|&h_?mk%MYLK_HNvo2#QQ zkZHga>5J;-a&C%|+E9aKW;&c4N6ncouD$4C4c8Zn?U`rq4=OISM-riAf zMfT5+v>)Ao8GCohd%x*^^M_z^WlNoXyY4@n-L+) zuDq5plgGR;!ZCs1d^ns~rvS`FygIl+ACGU-d#Y~6qDllR8L@D8N2wav?rR26HEhGX zi_UVWaL)fMpOJHIw9XHK#IhcqEj2}!7HV6k-Wh*E;uj(Ps_n8Mx#PB^(ZEbj&Wx~>(w7)lbTndZ< zG~wGC9a6 zNZm%#P^DAE`rJ?e^jL&L3M$hs!iUVWVhP^MenLK-vdgB~(-D>&}^Gytt`b%hl-H>k_ulwgRa zq#v>@6?AZQN%+D3UV)wywA=+GacT7{uQVQX^F>RPuySxW`c8Hks;4ZVJ{W1sfgBwQH4gzS3EaWPqgd*wh7Q;p@2h0$MYm4>w>Y5#!B~5-j^Y z2_`@-sYOmp3Z^x(#9fxF6&@+kzk+K|_;ouSE2s}q1*0}SHy;?Cw{K2ly}i2sGDH_K zjCAPABR~1n99bnX<(C1M4?1DansZ<&mkr%_(U~(VHI1yq`xs)Mo#);#zW?aWZvd5o z7xsuSHrcMpCtt&C9kwE=6qNH}iNJKA$h!%cK~)jV_azvTP)2Ks1c)y7%NyyRNVEOr z!6zJCdW(<@r<*FqoQ0t(N<%)Z3v5dqsMy=ea0+XT5}Ndxw#Cjs|10UbZjJD&7#Y#h z#=i2npa3q&F9*Q<9jV4h9U(HX|m{S85Pu^gVQ&LR~&?r|3M?VyE1V43#htl=R1{_ zfhF(?e!d1!qzca`W=?Fnr1yKPR;(d2^`*QnAWGQ$nbIH@1c1T6F-LMWP6Y zE(X+D{DI*i!wBy$J5^vB>D%Y{@r(1}E2dk(`0fGLj5N}`!?XJ9no~ks{35ME8sM!s2(=?hz;KeLa1%|B|fp1`*R(yhDC zKdN31qH{O){!T>KG|ME4K1<7>1T*G+AT8S%$euO@MrLn6L}s;o0bIP3xM{C>#8OXE z#dFHErtE==T`%3HbJMb`1fj{&PbuxCIKLZ zztI)tv4>*2sp>mH8AsL5Xy#jU?q*9%l6nH5;*lW%b7u{Ke%Y=zqWaAkF%q?XAyMo zZR>l3I^eXZ{R2@_>i+Kh3S3@5KaF48s{VpH4s9Z)%{)r zhR|%L7sL&+r~!v5FDY46diUsBs5-WS!lBEnVfU#|XWLC!RSt<8W4qxHFT*88b