From 92ad8e8a7a4e988a5668fb313462901373b707d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Tue, 16 Jan 2024 15:36:26 +0100 Subject: [PATCH] chore(forms): remove labelDescription and labelSecondary (#3209) --- .../forms/base-fields/String/Examples.tsx | 38 ------------------- .../forms/base-fields/String/demos.mdx | 6 --- .../forms/base-fields/String/properties.mdx | 2 +- .../create-component/FieldBlock/Examples.tsx | 34 ----------------- .../create-component/FieldBlock/demos.mdx | 16 -------- .../forms/data-value-readwrite-properties.mdx | 2 - .../feature-fields/PhoneNumber/properties.mdx | 5 +-- .../Field/ArraySelection/ArraySelection.tsx | 4 -- .../src/extensions/forms/Field/Date/Date.tsx | 4 -- .../extensions/forms/Field/Expiry/Expiry.tsx | 4 -- .../extensions/forms/Field/Number/Number.tsx | 4 -- .../forms/Field/Selection/Selection.tsx | 4 -- .../extensions/forms/Field/String/String.tsx | 11 ------ .../extensions/forms/Field/Toggle/Toggle.tsx | 4 -- .../forms/FieldBlock/FieldBlock.tsx | 28 +------------- .../FieldBlock/__tests__/FieldBlock.test.tsx | 30 --------------- .../FieldBlock/style/dnb-field-block.scss | 11 ------ .../extensions/forms/Iterate/Array/Array.tsx | 4 -- .../dnb-eufemia/src/extensions/forms/types.ts | 4 -- 19 files changed, 3 insertions(+), 212 deletions(-) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx index b8d474d3401..6386a828399 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx @@ -147,44 +147,6 @@ export const Icons = () => { ) } -export const CharacterCounter1 = () => { - return ( - - console.log('onChange', value)} - characterCounter - /> - - ) -} - -export const CharacterCounter2 = () => { - return ( - - console.log('onChange', value)} - characterCounter - /> - - ) -} - -export const CharacterCounter3 = () => { - return ( - - console.log('onChange', value)} - maxLength={16} - characterCounter - /> - - ) -} - export const Clear = () => { return ( diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx index e351bfd2009..76637568a6e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx @@ -38,12 +38,6 @@ import * as Examples from './Examples' -### Character counter - - - - - ### Clear diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx index 8b7bf3e3de8..26cacd18051 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx @@ -21,7 +21,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. | `trim` | `boolean` | _(optional)_ When `true`, it will trim leading and trailing whitespaces on blur, triggering onChange if the value changes. | | `inputMode` | `string` | _(optional)_ Define a [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode). | | `autoresizeMaxRows` | `boolean` | _(optional)_ For `multiline`, set how many rows of text can be shown at max. | -| `characterCounter` | `boolean` | _(optional)_ True to show a character counter. | +| `characterCounter` | `boolean` | _(optional)_ True to show a character counter. You need to set a `maxLength={number}` in order to show the counter. | | `minLength` | `number` | _(optional)_ Validation for minimum length of the text (number of characters). | | `maxLength` | `number` | _(optional)_ Validation for maximum length of the text (number of characters). | | `pattern` | `string` | _(optional)_ Validation based on regex pattern. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx index 31f7c15a42b..36ad515c95d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx @@ -114,40 +114,6 @@ export const Widths = () => { ) } -export const WithDescription = () => { - return ( - - - Input features goes here - - - ) -} - -export const WithSecondary = () => { - return ( - - - Input features goes here - - - ) -} - -export const WithDescriptionAndSecondary = () => { - return ( - - - Input features goes here - - - ) -} - export const GroupMultipleFields = () => { return ( diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx index b718915dd0e..15f4ae4de39 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx @@ -26,22 +26,6 @@ import * as Examples from './Examples' -### With description (vertical only) - - - -### With secondary - -(vertical only) - - - -### With description and secondary - -(vertical only) - - - ### Group multiple fields diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx index 77bae01bf92..1aeea8965a5 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx @@ -12,8 +12,6 @@ import { OmitTableProperties } from 'dnb-design-system-portal/src/shared/tags/Ta | `name` | `string` | _(optional)_ Outer DOM element name attribute. | | `layout` | `string` | _(optional)_ Layout for the label and input. Can be `horizontal` or `vertical`. | | `label` | `string` | _(optional)_ Field label to show above / before the input feature. | -| `labelDescription` | `string` | _(optional)_ A more discreet text displayed beside the label (i.e for "(optional)"). | -| `labelSecondary` | `string` | _(optional)_ Secondary information displayed at the end of the label line (i.e character counter). | | `placeholder` | `string` | _(optional)_ Text showing in place of the value if no value is given. | | `path` | `string` | _(optional)_ JSON Pointer for where the data for this input is located in the source dataset (when using Form.Handler or DataContext). The `path` will also be set as the `name` attribute for the [string](/uilib/extensions/forms/base-fields/String/)-field. | | `info` | `Error` or `string` | _(optional)_ Info message shown below / after the input. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx index 4e9bc6ee878..a6c289d0d36 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx @@ -22,7 +22,4 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. | `width` | `string` or `false` | _(optional)_ `large` for predefined standard width, `stretch` for fill available width. | | [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | - + diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx index bd343f9a161..42ba8a2ec7b 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx @@ -28,8 +28,6 @@ function ArraySelection(props: Props) { layout = 'vertical', optionsLayout = 'vertical', label, - labelDescription, - labelSecondary, value, error, hasError, @@ -54,8 +52,6 @@ function ArraySelection(props: Props) { error, layout, label, - labelDescription, - labelSecondary, ...pickSpacingProps(props), } diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx index 700b8c340dc..b8b2cc7c19d 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx @@ -61,8 +61,6 @@ function DateComponent(props: Props) { id, className, label, - labelDescription, - labelSecondary, value, help, info, @@ -80,8 +78,6 @@ function DateComponent(props: Props) { className={classnames('dnb-forms-field-string', className)} forId={id} label={label ?? sharedContext?.translation.Forms.dateLabel} - labelDescription={labelDescription} - labelSecondary={labelSecondary} info={info} warning={warning} disabled={disabled} diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx index e411fb27598..3778a6d1e5d 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx @@ -52,8 +52,6 @@ function Expiry(props: ExpiryProps) { help, disabled, value = '', - labelDescription, - labelSecondary, layout = 'vertical', required, handleFocus, @@ -75,8 +73,6 @@ function Expiry(props: ExpiryProps) { return ( ['inputMode'] autoresizeMaxRows?: number - characterCounter?: boolean mask?: InputMaskedProps['mask'] // Validation minLength?: number @@ -128,8 +127,6 @@ function StringComponent(props: Props) { type, placeholder, label, - labelDescription, - labelSecondary, value, info, warning, @@ -143,7 +140,6 @@ function StringComponent(props: Props) { clear, autoresize = true, autoresizeMaxRows = 6, - characterCounter, mask, width, handleFocus, @@ -156,11 +152,6 @@ function StringComponent(props: Props) { [props.capitalize] ) - const characterCounterElement = characterCounter - ? props.maxLength - ? `${value?.length ?? '0'}/${props.maxLength}` - : `${value?.length ?? '0'}` - : undefined const cn = classnames('dnb-forms-field-string__input', inputClassName) const sharedProps = { @@ -189,8 +180,6 @@ function StringComponent(props: Props) { forId={id} layout={layout} label={label} - labelDescription={labelDescription} - labelSecondary={labelSecondary ?? characterCounterElement} info={info} warning={warning} disabled={disabled} diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx index 7dbf8cbd3f6..13edbabf670 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx @@ -28,8 +28,6 @@ function Toggle(props: Props) { variant, disabled, label, - labelDescription, - labelSecondary, textOn, textOff, value, @@ -68,8 +66,6 @@ function Toggle(props: Props) { ...fieldBlockPropsWithoutLabel, layout, label, - labelDescription, - labelSecondary, disabled, } diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx index 1e11e54eed7..37b54408d71 100644 --- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx @@ -11,8 +11,6 @@ export type Props = Pick< | keyof ComponentProps | 'layout' | 'label' - | 'labelDescription' - | 'labelSecondary' | 'info' | 'warning' | 'error' @@ -39,8 +37,6 @@ function FieldBlock(props: Props) { forId, layout = 'vertical', label, - labelDescription, - labelSecondary, asFieldset, info, warning, @@ -168,29 +164,7 @@ function FieldBlock(props: Props) { {...rest} >
- {labelDescription || labelSecondary ? ( -
- {label || labelDescription ? ( - - {label} - {labelDescription && ( - - {labelDescription} - - )} - - ) : ( - <>  - )} - {labelSecondary && ( - - {labelSecondary} - - )} -
- ) : ( - label && {label} - )} + {label && {label}}
{ expect(labelElement.textContent).toBe('A Label') }) - it('should render a "labelDescription"', () => { - render( - - content - - ) - - const labelElement = document.querySelector('label') - - expect(labelElement).toBeInTheDocument() - expect(labelElement.className).toBe( - 'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small' - ) - expect(labelElement.textContent).toBe('A Label Description') - }) - - it('should render a "labelSecondary"', () => { - render( - content - ) - - const labelElement = document.querySelector('label') - - expect(labelElement).toBeInTheDocument() - expect(labelElement.className).toBe( - 'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small' - ) - expect(labelElement.textContent).toBe('A Secondary Label') - }) - it('click on label should set focus on input after value change', async () => { const MockComponent = () => { const fromInput = React.useCallback(({ value }) => value, []) 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 index d180211d83a..a30cd0adb1d 100644 --- 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 @@ -54,17 +54,6 @@ fieldset.dnb-forms-field-block { align-items: center; } - &__label-description { - margin-left: 0.3em; - color: var(--color-black-55); - font-size: var(--font-size-small); - } - - &__label-secondary { - color: var(--color-black-55); - font-size: var(--font-size-small); - } - &__status { grid-area: status; } diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx index a21553267d4..611898594b0 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/Array.tsx @@ -36,8 +36,6 @@ function ArrayComponent(props: Props) { layout = 'vertical', placeholder, label, - labelDescription, - labelSecondary, path, value: arrayValue, info, @@ -81,8 +79,6 @@ function ArrayComponent(props: Props) { className={classnames('dnb-forms-field-number', className)} layout={layout} label={label} - labelDescription={labelDescription} - labelSecondary={labelSecondary} info={info} warning={warning} error={error} diff --git a/packages/dnb-eufemia/src/extensions/forms/types.ts b/packages/dnb-eufemia/src/extensions/forms/types.ts index 3099e051b5a..09277e2e6bb 100644 --- a/packages/dnb-eufemia/src/extensions/forms/types.ts +++ b/packages/dnb-eufemia/src/extensions/forms/types.ts @@ -165,10 +165,6 @@ export interface FieldProps< layout?: 'horizontal' | 'vertical' /** Main label text */ label?: React.ReactNode - /** A more discreet text displayed beside the label (i.e for "(optional)") */ - labelDescription?: React.ReactNode - /** Secondary information displayed at the end of the label line (i.e character counter) */ - labelSecondary?: React.ReactNode /** Text showing in place of the value if no value is given */ placeholder?: string autoComplete?: