chore(forms): remove labelDescription and labelSecondary (#3209)

dnbexperience · Jan 16, 2024 · 92ad8e8 · 92ad8e8
1 parent 96b574c
commit 92ad8e8
Show file tree

Hide file tree

Showing 19 changed files with 3 additions and 212 deletions.
diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/String/Examples.tsx b/.../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 (
-    <ComponentBox>
-      <Field.String
-        onChange={(value) => console.log('onChange', value)}
-        characterCounter
-      />
-    </ComponentBox>
-  )
-}
-
-export const CharacterCounter2 = () => {
-  return (
-    <ComponentBox>
-      <Field.String
-        label="Label text"
-        value="foo"
-        onChange={(value) => console.log('onChange', value)}
-        characterCounter
-      />
-    </ComponentBox>
-  )
-}
-
-export const CharacterCounter3 = () => {
-  return (
-    <ComponentBox>
-      <Field.String
-        label="Label text"
-        value="foo"
-        onChange={(value) => console.log('onChange', value)}
-        maxLength={16}
-        characterCounter
-      />
-    </ComponentBox>
-  )
-}
-
 export const Clear = () => {
   return (
     <ComponentBox>

diff --git a/...sign-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx b/...sign-system-portal/src/docs/uilib/extensions/forms/base-fields/String/demos.mdx
@@ -38,12 +38,6 @@ import * as Examples from './Examples'
 
 <Examples.Icons />
 
-### Character counter
-
-<Examples.CharacterCounter1 />
-<Examples.CharacterCounter2 />
-<Examples.CharacterCounter3 />
-
 ### Clear
 
 <Examples.Clear />

diff --git a/...system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx b/...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/...gn-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx b/...gn-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx
@@ -114,40 +114,6 @@ export const Widths = () => {
   )
 }
 
-export const WithDescription = () => {
-  return (
-    <ComponentBox>
-      <FieldBlock label="Label text" labelDescription="Description text">
-        Input features goes here
-      </FieldBlock>
-    </ComponentBox>
-  )
-}
-
-export const WithSecondary = () => {
-  return (
-    <ComponentBox>
-      <FieldBlock label="Label text" labelSecondary="Secondary text">
-        Input features goes here
-      </FieldBlock>
-    </ComponentBox>
-  )
-}
-
-export const WithDescriptionAndSecondary = () => {
-  return (
-    <ComponentBox>
-      <FieldBlock
-        label="Label text"
-        labelDescription="Description text"
-        labelSecondary="42"
-      >
-        Input features goes here
-      </FieldBlock>
-    </ComponentBox>
-  )
-}
-
 export const GroupMultipleFields = () => {
   return (
     <ComponentBox>

diff --git a/...em-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx b/...em-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx
@@ -26,22 +26,6 @@ import * as Examples from './Examples'
 
 <Examples.HorizontalWithInfo />
 
-### With description (vertical only)
-
-<Examples.WithDescription />
-
-### With secondary
-
-<em>(vertical only)</em>
-
-<Examples.WithSecondary />
-
-### With description and secondary
-
-<em>(vertical only)</em>
-
-<Examples.WithDescriptionAndSecondary />
-
 ### Group multiple fields
 
 <Examples.GroupMultipleFields />

diff --git a/...stem-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx b/...stem-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/...ortal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx b/...ortal/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.                                                                                                                                                                                           |
 
-<DataValueReadwriteProperties
-  type="string"
-  omit={['layout', 'label', 'labelDescription', 'labelSecondary']}
-/>
+<DataValueReadwriteProperties type="string" omit={['layout', 'label']} />
diff --git 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
@@ -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
@@ -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 (
     <FieldBlock
       className={classnames('dnb-forms-field-expiry', className)}
-      labelSecondary={labelSecondary}
-      labelDescription={labelDescription}
       info={info}
       warning={warning}
       error={error}

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
@@ -180,8 +180,6 @@ function NumberComponent(props: Props) {
     layout,
     placeholder,
     label,
-    labelDescription,
-    labelSecondary,
     value,
     minimum = Number.MIN_SAFE_INTEGER,
     maximum = Number.MAX_SAFE_INTEGER,
@@ -235,8 +233,6 @@ function NumberComponent(props: Props) {
     forId: id,
     layout,
     label,
-    labelDescription,
-    labelSecondary,
     info,
     warning,
     error,

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx
@@ -40,8 +40,6 @@ function Selection(props: Props) {
     variant = 'dropdown',
     clear,
     label,
-    labelDescription,
-    labelSecondary,
     layout = 'vertical',
     optionsLayout = 'vertical',
     placeholder,
@@ -109,8 +107,6 @@ function Selection(props: Props) {
     error,
     layout,
     label,
-    labelDescription,
-    labelSecondary,
   }
 
   const getStatus = useCallback(

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx
@@ -32,7 +32,6 @@ export type Props = FieldHelpProps &
     autoComplete?: HTMLInputElement['autocomplete']
     inputMode?: React.HTMLAttributes<HTMLInputElement>['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
@@ -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
@@ -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}
       >
         <div className={gridClasses}>
-          {labelDescription || labelSecondary ? (
-            <div className="dnb-forms-field-block__label">
-              {label || labelDescription ? (
-                <FormLabel {...labelProps}>
-                  {label}
-                  {labelDescription && (
-                    <span className="dnb-forms-field-block__label-description">
-                      {labelDescription}
-                    </span>
-                  )}
-                </FormLabel>
-              ) : (
-                <>&nbsp;</>
-              )}
-              {labelSecondary && (
-                <span className="dnb-forms-field-block__label-secondary">
-                  {labelSecondary}
-                </span>
-              )}
-            </div>
-          ) : (
-            label && <FormLabel {...labelProps}>{label}</FormLabel>
-          )}
+          {label && <FormLabel {...labelProps}>{label}</FormLabel>}
 
           <div
             className={classnames(

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
@@ -116,36 +116,6 @@ describe('FieldBlock', () => {
     expect(labelElement.textContent).toBe('A Label')
   })
 
-  it('should render a "labelDescription"', () => {
-    render(
-      <FieldBlock labelDescription="A Label Description">
-        content
-      </FieldBlock>
-    )
-
-    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(
-      <FieldBlock labelDescription="A Secondary Label">content</FieldBlock>
-    )
-
-    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, [])