diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/Examples.tsx index 5f9ca89d6a7..ac5ebcb7cfa 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/Examples.tsx @@ -62,8 +62,7 @@ export const TextareaCharacterCounter = () => ( autoresize value="Textarea value\nNewline" status="Message to the user" - characterCounter - maxLength={40} + characterCounter={40} /> diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx index f4789faa603..2ff00ab72ab 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/textarea/properties.mdx @@ -16,7 +16,7 @@ showTabs: true | `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | | `autoresize` | _(optional)_ use `true` to make the Textarea grow and shrink depending on how many lines the user has filled. | | `autoresize_max_rows` | _(optional)_ set a number to define how many rows the Textarea can auto grow. | -| `characterCounter` | _(optional)_ use `up` or `down` or `true` (down) to show a character counter. You need to set a `maxLength={number}` in order to show the counter. | +| `characterCounter` | _(optional)_ use a number to define the displayed max length. You can also use an object defining the [TextCounter](/uilib/fragments/TextCounter/) `variant` or properties. Please avoid using `maxLength` for accessibility reasons. | | `status` | _(optional)_ text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. | | `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | 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 c3b8f7b2eb7..c05e25c9ec7 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 @@ -6,28 +6,28 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. ### Component-specific props -| Property | Type | Description | -| --------------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `type` | `string` | _(optional)_ Input DOM element type. | -| `multiline` | `boolean` | _(optional)_ True to be able to write in multiple lines (switching from input-element to textarea-element). | -| `leftIcon` | `string` | _(optional)_ For icon at the left side of the text input. | -| `rightIcon` | `string` | _(optional)_ For icon at the right side of the text input. | -| `inputClassName` | `string` | _(optional)_ Class name set on the <input> DOM element. | -| `innerRef` | `React.ref` | _(optional)_ by providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`. | -| `clear` | `boolean` | _(optional)_ True to have a clickable clear-icon for removing the active value. | -| `autoresize` | `boolean` | _(optional)_ For `multiline`, set `true` to expand when writing longer texts. | -| `autoComplete` | `on` or `string` | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete). | -| `capitalize` | `boolean` | _(optional)_ When set to `true`, it will capitalize the first letter of every word, transforming the rest to lowercase. | -| `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` or `string` | _(optional)_ Use `up` or `down` or `true` (down) to show a character counter. You need to set a `maxLength={number}` as well as have `multiline` enabled 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. | -| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. | -| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `content`. | -| [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | +| Property | Type | Description | +| --------------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `type` | `string` | _(optional)_ Input DOM element type. | +| `multiline` | `boolean` | _(optional)_ True to be able to write in multiple lines (switching from input-element to textarea-element). | +| `leftIcon` | `string` | _(optional)_ For icon at the left side of the text input. | +| `rightIcon` | `string` | _(optional)_ For icon at the right side of the text input. | +| `inputClassName` | `string` | _(optional)_ Class name set on the <input> DOM element. | +| `innerRef` | `React.ref` | _(optional)_ by providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`. | +| `clear` | `boolean` | _(optional)_ True to have a clickable clear-icon for removing the active value. | +| `autoresize` | `boolean` | _(optional)_ For `multiline`, set `true` to expand when writing longer texts. | +| `autoComplete` | `on` or `string` | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete). | +| `capitalize` | `boolean` | _(optional)_ When set to `true`, it will capitalize the first letter of every word, transforming the rest to lowercase. | +| `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` or `string` | _(optional)_ For `multiline`, use a number to define the displayed max length. You can also use an object defining the [TextCounter](/uilib/fragments/TextCounter/) `variant` or properties. | +| `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. | +| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. | +| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `content`. | +| [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. | ## Properties diff --git a/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts b/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts index eea0da863d6..e7afc80b2ca 100644 --- a/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts +++ b/packages/dnb-eufemia/src/components/textarea/Textarea.d.ts @@ -8,6 +8,7 @@ import type { SkeletonShow } from '../Skeleton'; import type { SpacingProps } from '../space/types'; import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel'; import type { GlobalStatusConfigObject } from '../GlobalStatus'; +import type { TextCounterProps } from '../../fragments/TextCounter'; export type TextareaSuffix = | string | ((...args: any[]) => any) @@ -90,7 +91,7 @@ export interface TextareaProps /** * Use `up` or `down` or `true` (down) to show a character counter. You need to set a `maxLength={number}` in order to show the counter. */ - characterCounter?: boolean; + characterCounter?: Omit | number; /** * Set a number to define how many rows the Textarea can auto grow. */ diff --git a/packages/dnb-eufemia/src/components/textarea/Textarea.js b/packages/dnb-eufemia/src/components/textarea/Textarea.js index c48b0b1acdd..01790ec997e 100644 --- a/packages/dnb-eufemia/src/components/textarea/Textarea.js +++ b/packages/dnb-eufemia/src/components/textarea/Textarea.js @@ -78,8 +78,11 @@ export default class Textarea extends React.PureComponent { disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), characterCounter: PropTypes.oneOfType([ - PropTypes.oneOf(['down', 'up']), - PropTypes.bool, + PropTypes.shape({ + max: PropTypes.number, + variant: PropTypes.oneOf(['down', 'up']), + }), + PropTypes.number, ]), autoresize: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), autoresize_max_rows: PropTypes.oneOfType([ @@ -374,7 +377,6 @@ export default class Textarea extends React.PureComponent { className, autoresize, characterCounter, - maxLength, autoresize_max_rows, //eslint-disable-line id: _id, //eslint-disable-line children, //eslint-disable-line @@ -405,7 +407,6 @@ export default class Textarea extends React.PureComponent { value: hasValue ? value : '', id, name: id, - maxLength, disabled: isTrue(disabled) || isTrue(skeleton), 'aria-placeholder': placeholder, ...attributes, @@ -547,14 +548,14 @@ export default class Textarea extends React.PureComponent { )} - {characterCounter && maxLength > 0 && ( + {characterCounter && ( )} diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/Textarea.test.tsx b/packages/dnb-eufemia/src/components/textarea/__tests__/Textarea.test.tsx index d15533ed1fb..e3aeb25b805 100644 --- a/packages/dnb-eufemia/src/components/textarea/__tests__/Textarea.test.tsx +++ b/packages/dnb-eufemia/src/components/textarea/__tests__/Textarea.test.tsx @@ -299,7 +299,7 @@ describe('Textarea component', () => { it('should render characterCounter', async () => { const { rerender } = render( -