feat: additionalInfo prop added to TextField component (#2899)

* feat: additionalInfo prop added to TextField component * fix: add missing dependency * fix: add missing dependency * chore: add a screenshot test
commercetools · Sep 16, 2024 · 64027cb · 64027cb
1 parent fba8594
commit 64027cb
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 1 deletion.
diff --git a/.changeset/plenty-mice-know.md b/.changeset/plenty-mice-know.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/text-field': minor
+---
+
+`additionalInfo` prop added to TextField component
diff --git a/packages/components/fields/text-field/README.md b/packages/components/fields/text-field/README.md
@@ -62,13 +62,14 @@ 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.                                                                                                                                                                                                                             |
 | `onInfoButtonClick`    | `Function`<br/>[See signature.](#signature-onInfoButtonClick)                                         |          |           | Function called when info button is pressed. Info button will only be visible when this prop is passed.                                                                                                                                                           |
 | `hintIcon`             | `ReactElement`                                                                                        |          |           | Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well.                                                                                                                                                                    |
 | `badge`                | `ReactNode`                                                                                           |          |           | Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email)                                                                                                                       |
+| `maxLength`            | `number`                                                                                              |          |           | 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                                                                                        |
+| `additionalInfo`       | `ReactNode`                                                                                           |          |           | Additional information to be displayed below the input.                                                                                                                                                                                                           |
 
 ## Signatures
 

diff --git a/packages/components/fields/text-field/package.json b/packages/components/fields/text-field/package.json
@@ -26,6 +26,7 @@
     "@commercetools-uikit/field-errors": "19.11.0",
     "@commercetools-uikit/field-label": "19.11.0",
     "@commercetools-uikit/field-warnings": "19.11.0",
+    "@commercetools-uikit/messages": "19.11.0",
     "@commercetools-uikit/spacings-stack": "19.11.0",
     "@commercetools-uikit/text-input": "19.11.0",
     "@commercetools-uikit/utils": "19.11.0",

diff --git a/packages/components/fields/text-field/src/text-field.spec.js b/packages/components/fields/text-field/src/text-field.spec.js
@@ -207,3 +207,17 @@ describe('when field is touched and has warnings', () => {
     });
   });
 });
+
+describe('when `additionalInfo` is passed', () => {
+  it('should render an additionalInfo string', () => {
+    const { getByText } = renderTextField({ additionalInfo: 'foo bar' });
+    expect(getByText('foo bar')).toBeInTheDocument();
+  });
+  it('should render an additionalInfo component', () => {
+    const { getByTestId, getByText } = renderTextField({
+      additionalInfo: <div data-testid="foo">foo bar</div>,
+    });
+    expect(getByTestId('foo')).toBeInTheDocument();
+    expect(getByText('foo bar')).toBeInTheDocument();
+  });
+});
diff --git a/packages/components/fields/text-field/src/text-field.stories.tsx b/packages/components/fields/text-field/src/text-field.stories.tsx
@@ -14,6 +14,7 @@ const meta: Meta<typeof TextField> = {
     description: { control: 'text' },
     badge: { control: 'text' },
     hintIcon: iconArgType,
+    additionalInfo: { control: 'text' },
   },
 };
 export default meta;
@@ -71,5 +72,6 @@ BasicExample.args = {
   hint: 'Enter your username',
   description: '',
   onInfoButtonClick: () => alert('info button clicked'),
+  additionalInfo: 'Only use letters, numbers, and underscores',
   badge: '',
 };
diff --git a/packages/components/fields/text-field/src/text-field.tsx b/packages/components/fields/text-field/src/text-field.tsx
@@ -18,6 +18,7 @@ import {
 } from '@commercetools-uikit/utils';
 import FieldErrors from '@commercetools-uikit/field-errors';
 import FieldWarnings from '@commercetools-uikit/field-warnings';
+import { AdditionalInfoMessage } from '@commercetools-uikit/messages';
 
 const sequentialId = createSequentialId('text-field-');
 const sequentialErrorsId = createSequentialId('text-field-error-')();
@@ -170,6 +171,10 @@ export type TTextFieldProps = {
    * 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;
+  /**
+   * Additional information to be displayed below the input.
+   */
+  additionalInfo?: ReactNode;
 };
 
 type TTextFieldState = Pick<TTextFieldProps, 'id'>;
@@ -258,6 +263,9 @@ class TextField extends Component<TTextFieldProps, TTextFieldState> {
             aria-invalid={hasError}
             aria-errormessage={sequentialErrorsId}
           />
+          {this.props.additionalInfo && (
+            <AdditionalInfoMessage message={this.props.additionalInfo} />
+          )}
           <FieldErrors
             id={sequentialErrorsId}
             errors={this.props.errors}

diff --git a/packages/components/fields/text-field/src/text-field.visualroute.jsx b/packages/components/fields/text-field/src/text-field.visualroute.jsx
@@ -101,5 +101,15 @@ export const component = () => (
         horizontalConstraint={7}
       />
     </Spec>
+    <Spec label="with additionalInfo prop">
+      <TextField
+        title="Welcome Text"
+        value={value}
+        isCondensed={true}
+        onChange={() => {}}
+        horizontalConstraint={7}
+        additionalInfo="A string containing additional information"
+      />
+    </Spec>
   </Suite>
 );
diff --git a/yarn.lock b/yarn.lock
@@ -4330,6 +4330,7 @@ __metadata:
     "@commercetools-uikit/field-errors": 19.11.0
     "@commercetools-uikit/field-label": 19.11.0
     "@commercetools-uikit/field-warnings": 19.11.0
+    "@commercetools-uikit/messages": 19.11.0
     "@commercetools-uikit/spacings-stack": 19.11.0
     "@commercetools-uikit/text-input": 19.11.0
     "@commercetools-uikit/utils": 19.11.0