feat(textarea): added char counter

packages/components/src/components/text-area/_text-area.scss

@@ -99,6 +99,12 @@
       color: transparent;
     }
   }
+
+  .#{$prefix}--text-area__label-wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 }
 
 @include exports('text-area') {

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -6859,10 +6859,12 @@ Map {
     "defaultProps": Object {
       "cols": 50,
       "disabled": false,
+      "enableCounter": false,
       "helperText": "",
       "invalid": false,
       "invalidText": "",
       "light": false,
+      "maxCount": undefined,
       "onChange": [Function],
       "onClick": [Function],
       "placeholder": "",
@@ -6891,6 +6893,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "enableCounter": Object {
+        "type": "bool",
+      },
       "helperText": Object {
         "type": "node",
       },
@@ -6913,6 +6918,9 @@ Map {
       "light": Object {
         "type": "bool",
       },
+      "maxCount": Object {
+        "type": "number",
+      },
       "onChange": Object {
         "type": "func",
       },

packages/react/src/components/TextArea/TextArea-story.js

@@ -26,6 +26,11 @@ const TextAreaProps = () => ({
     'A valid value is required'
   ),
   helperText: text('Helper text (helperText)', 'Optional helper text.'),
+  enableCounter: boolean(
+    'Enable character counter/limit (enableCounter)',
+    false
+  ),
+  maxCount: number('Character limit (maxCount)', undefined),
   id: 'test2',
   cols: number('Columns (columns)', 50),
   rows: number('Rows (rows)', 4),

packages/react/src/components/TextArea/TextArea-test.js

@@ -76,6 +76,16 @@ describe('TextArea', () => {
         wrapper.setProps({ light: true });
         expect(wrapper.props().light).toEqual(true);
       });
+
+      it('should set enableCounter as expected', () => {
+        wrapper.setProps({ enableCounter: true });
+        expect(wrapper.props().enableCounter).toEqual(true);
+      });
+
+      it('should set maxCount as expected', () => {
+        wrapper.setProps({ maxCount: 5 });
+        expect(wrapper.props().maxCount).toEqual(5);
+      });
     });
 
     describe('label', () => {
@@ -117,6 +127,46 @@ describe('TextArea', () => {
         expect(renderedHelper.text()).toEqual('Helper text');
       });
     });
+
+    describe('counter', () => {
+      const counterTestWrapper1 = mount(
+        <TextArea id="counter1" labelText="someLabel" enableCounter={true} />
+      );
+
+      const counterTestWrapper2 = mount(
+        <TextArea id="counter2" labelText="someLabel" maxCount={5} />
+      );
+
+      it('should not render element without only enableCounter prop passed in', () => {
+        expect(
+          counterTestWrapper1.exists(`${prefix}--text-area__counter`)
+        ).toEqual(false);
+      });
+
+      it('should not render element without only maxCount prop passed in', () => {
+        expect(
+          counterTestWrapper2.exists(`${prefix}--text-area__counter`)
+        ).toEqual(false);
+      });
+
+      it('has the expected classes', () => {
+        const counterTextarea = () =>
+          counterTestWrapper1.find(`.${prefix}--text-area__counter`);
+        expect(counterTextarea).not.toBeNull();
+      });
+
+      it('should have label and counter disabled', () => {
+        counterTestWrapper1.setProps({ disabled: true });
+        const wrapper = counterTestWrapper1.find(
+          `.${prefix}--text-area__label-wrapper`
+        );
+        const labels = wrapper.find(`.${prefix}--label`);
+
+        labels.forEach((node) => {
+          expect(node.hasClass(`${prefix}--label--disabled`)).toEqual(true);
+        });
+      });
+    });
   });
 
   describe('events', () => {

packages/react/src/components/TextArea/TextArea.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import { WarningFilled16 } from '@carbon/icons-react';
 import { useFeatureFlag } from '../FeatureFlags';
@@ -25,17 +25,24 @@ const TextArea = React.forwardRef(function TextArea(
     helperText,
     light,
     placeholder,
+    enableCounter,
+    maxCount,
     ...other
   },
   ref
 ) {
   const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');
+  const { defaultValue, value, disabled } = other;
+  const [textCount, setTextCount] = useState(
+    defaultValue?.length || value?.length || 0
+  );
 
   const textareaProps = {
     id,
     onChange: (evt) => {
       if (!other.disabled) {
+        setTextCount(evt.target.value?.length);
         onChange(evt);
       }
     },
@@ -47,9 +54,13 @@ const TextArea = React.forwardRef(function TextArea(
     ref,
   };
 
+  if (enableCounter) {
+    textareaProps.maxLength = maxCount;
+  }
+
   const labelClasses = classNames(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: other.disabled,
+    [`${prefix}--label--disabled`]: disabled,
   });
 
   const label = labelText ? (
@@ -58,6 +69,15 @@ const TextArea = React.forwardRef(function TextArea(
     </label>
   ) : null;
 
+  const counterClasses = classNames(`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled,
+  });
+
+  const counter =
+    enableCounter && maxCount ? (
+      <div className={counterClasses}>{`${textCount}/${maxCount}`}</div>
+    ) : null;
+
   const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: other.disabled,
   });
@@ -102,7 +122,10 @@ const TextArea = React.forwardRef(function TextArea(
           ? classNames(`${prefix}--form-item`, className)
           : `${prefix}--form-item`
       }>
-      {label}
+      <div className={`${prefix}--text-area__label-wrapper`}>
+        {label}
+        {counter}
+      </div>
       <div
         className={`${prefix}--text-area__wrapper`}
         data-invalid={invalid || null}>
@@ -139,6 +162,11 @@ TextArea.propTypes = {
    */
   disabled: PropTypes.bool,
 
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: PropTypes.bool,
+
   /**
    * Provide text that is used alongside the control label for additional help
    */
@@ -176,6 +204,11 @@ TextArea.propTypes = {
    */
   light: PropTypes.bool,
 
+  /**
+   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes.number,
+
   /**
    * Optionally provide an `onChange` handler that is called whenever `<textarea>`
    * is updated
@@ -215,6 +248,8 @@ TextArea.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
+  enableCounter: false,
+  maxCount: undefined,
 };
 
 export default TextArea;

packages/styles/scss/components/text-area/_text-area.scss

@@ -102,4 +102,10 @@
       color: transparent;
     }
   }
+
+  .#{$prefix}--text-area__label-wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 }