feat(TextField): forward maxLength prop to TextField and `TextInp…

…ut` input element (#2854) * feat: forward `maxLength` prop to `TextField` and `TextInput` input element * Update packages/components/fields/text-field/src/text-field.tsx Co-authored-by: Douglas Egiemeh <[email protected]> * Update packages/components/inputs/text-input/src/text-input.tsx Co-authored-by: Douglas Egiemeh <[email protected]> --------- Co-authored-by: Douglas Egiemeh <[email protected]>
commercetools · Jul 25, 2024 · de77fa9 · de77fa9
1 parent f10448a
commit de77fa9
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 1 deletion.
diff --git a/.changeset/good-doors-cheat.md b/.changeset/good-doors-cheat.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/text-field': patch
+'@commercetools-uikit/text-input': patch
+---
+
+Forward `maxLength` prop to `TextField` and `TextInput` input element
diff --git a/packages/components/fields/text-field/README.md b/packages/components/fields/text-field/README.md
@@ -62,6 +62,7 @@ export default Example;
 | `isDisabled`           | `boolean`                                                                                             |          |           | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).                                                                                                                                                                    |
 | `isReadOnly`           | `boolean`                                                                                             |          |           | Indicates that the field is displaying read-only content                                                                                                                                                                                                          |
 | `placeholder`          | `string`                                                                                              |          |           | Placeholder text for the input                                                                                                                                                                                                                                    |
+| `maxLength`            | `number`                                                                                              |          |           | Maximum number of characters allowed in the input field                                                                                                                                                                                                           |
 | `title`                | `union`<br/>Possible values:<br/>`string , ReactNode`                                                 |    ✅    |           | Title of the label                                                                                                                                                                                                                                                |
 | `hint`                 | `union`<br/>Possible values:<br/>`string , ReactNode`                                                 |          |           | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon. |
 | `description`          | `union`<br/>Possible values:<br/>`string , ReactNode`                                                 |          |           | Provides a description for the title.                                                                                                                                                                                                                             |

diff --git a/packages/components/fields/text-field/src/text-field.story.js b/packages/components/fields/text-field/src/text-field.story.js
@@ -8,6 +8,7 @@ import {
   text,
   select,
   object,
+  number,
 } from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
 import Section from '../../../../../docs/.storybook/decorators/section';
@@ -78,6 +79,7 @@ storiesOf('Components|Fields', module)
               isDisabled={boolean('isDisabled', false)}
               isReadOnly={boolean('isReadOnly', false)}
               placeholder={text('placeholder', 'Placeholder')}
+              maxLength={number('maxLength', undefined)}
               title={text('title', 'Username')}
               hint={hint}
               description={text('description', '')}

diff --git a/packages/components/fields/text-field/src/text-field.tsx b/packages/components/fields/text-field/src/text-field.tsx
@@ -166,6 +166,10 @@ export type TTextFieldProps = {
    * Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email)
    */
   badge?: ReactNode;
+  /**
+   * Maximum number of characters allowed in the input. if this prop is used, It is recommended to inform the user about this limit in the InputField description, or otherwise
+   */
+  maxLength?: number;
 };
 
 type TTextFieldState = Pick<TTextFieldProps, 'id'>;
@@ -247,6 +251,7 @@ class TextField extends Component<TTextFieldProps, TTextFieldState> {
             hasWarning={hasWarning}
             hasError={hasError}
             placeholder={this.props.placeholder}
+            maxLength={this.props.maxLength}
             horizontalConstraint="scale"
             {...filterDataAttributes(this.props)}
             /* ARIA */

diff --git a/packages/components/inputs/text-input/README.md b/packages/components/inputs/text-input/README.md
@@ -60,6 +60,7 @@ export default Example;
 | `hasError`             | `boolean`                                                                                             |          |           | Indicates if the input has invalid values                                                                                 |
 | `hasWarning`           | `boolean`                                                                                             |          |           |                                                                                                                           |
 | `placeholder`          | `string`                                                                                              |          |           | Placeholder text for the input                                                                                            |
+| `maxLength`            | `number`                                                                                              |          |           | Maximum number of characters allowed in the input field                                                                   |
 | `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` |          | `'scale'` | Horizontal size limit of the input fields.                                                                                |
 
 ## `data-*` props

diff --git a/packages/components/inputs/text-input/src/text-input.story.js b/packages/components/inputs/text-input/src/text-input.story.js
@@ -1,7 +1,13 @@
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Value } from 'react-value';
-import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
+import {
+  withKnobs,
+  boolean,
+  text,
+  select,
+  number,
+} from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
 import Section from '../../../../../docs/.storybook/decorators/section';
 import Readme from '../README.md';
@@ -45,6 +51,7 @@ storiesOf('Components|Inputs', module)
               hasError={boolean('hasError', false)}
               hasWarning={boolean('hasWarning', false)}
               placeholder={text('placeholder', 'Placeholder')}
+              maxLength={number('maxLength', undefined)}
               horizontalConstraint={select(
                 'horizontalConstraint',
                 Constraints.getAcceptedMaxPropValues(3),

diff --git a/packages/components/inputs/text-input/src/text-input.tsx b/packages/components/inputs/text-input/src/text-input.tsx
@@ -89,6 +89,10 @@ export type TTextInputProps = {
     | 16
     | 'scale'
     | 'auto';
+  /**
+   * Maximum number of characters allowed in the input. If this prop is used, it is recommended to inform the user about this limit in the InputField description, or otherwise.
+   */
+  maxLength?: number;
 };
 
 const defaultProps: Pick<TTextInputProps, 'horizontalConstraint'> = {
@@ -114,6 +118,7 @@ const TextInput = (props: TTextInputProps) => {
         onFocus={props.onFocus}
         disabled={props.isDisabled}
         placeholder={props.placeholder}
+        maxLength={props.maxLength}
         readOnly={props.isReadOnly}
         autoFocus={props.isAutofocussed}
         autoComplete={props.autoComplete}