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..b0fea5d6cf6 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,21 +26,9 @@ import * as Examples from './Examples' -### With description (vertical only) - - - -### With secondary - -(vertical only) - - - -### With description and secondary - -(vertical only) +### Widths - + ### 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 1eed2073cdf..25ed2011575 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, info, @@ -53,8 +51,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 a2e0dac85fe..9a380d80cbe 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx @@ -62,8 +62,6 @@ function DateComponent(props: Props) { id, className, label, - labelDescription, - labelSecondary, value, help, info, @@ -81,8 +79,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 ( ) : mask ? (
- {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 6c62e20a82d..c51e310b3b6 100644 --- a/packages/dnb-eufemia/src/extensions/forms/types.ts +++ b/packages/dnb-eufemia/src/extensions/forms/types.ts @@ -163,10 +163,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?: