From 6670f90946172c7c0cff16aaae3eccece2373883 Mon Sep 17 00:00:00 2001
From: Tanner Summers <tanner.summers@ibm.com>
Date: Thu, 6 Jan 2022 16:38:09 -0600
Subject: [PATCH 1/8] feat(textarea): added char counter

this includes ui changes, test, and styles
---
 .../src/components/text-area/_text-area.scss  |  8 +++
 .../__snapshots__/PublicAPI-test.js.snap      |  2 +
 .../src/components/TextArea/TextArea-story.js |  5 ++
 .../src/components/TextArea/TextArea-test.js  | 55 +++++++++++++++++++
 .../react/src/components/TextArea/TextArea.js | 37 ++++++++++++-
 .../scss/components/text-area/_text-area.scss |  8 +++
 6 files changed, 112 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss
index aa35058b5330..3f857b73a5b9 100644
--- a/packages/components/src/components/text-area/_text-area.scss
+++ b/packages/components/src/components/text-area/_text-area.scss
@@ -99,6 +99,14 @@
       color: transparent;
     }
   }
+
+  .#{$prefix}--text-area__counter-wrapper {
+    width: 100%;
+  }
+
+  .#{$prefix}--text-area__counter {
+    float: right;
+  }
 }
 
 @include exports('text-area') {
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 7023b66fdea7..0624d5b66281 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6196,10 +6196,12 @@ Map {
     "defaultProps": Object {
       "cols": 50,
       "disabled": false,
+      "enableCounter": false,
       "helperText": "",
       "invalid": false,
       "invalidText": "",
       "light": false,
+      "maxCount": undefined,
       "onChange": [Function],
       "onClick": [Function],
       "placeholder": "",
diff --git a/packages/react/src/components/TextArea/TextArea-story.js b/packages/react/src/components/TextArea/TextArea-story.js
index d9914b8e8ad3..1a6a29b5a267 100644
--- a/packages/react/src/components/TextArea/TextArea-story.js
+++ b/packages/react/src/components/TextArea/TextArea-story.js
@@ -27,6 +27,11 @@ const TextAreaProps = () => ({
   ),
   helperText: text('Helper text (helperText)', 'Optional helper text.'),
   placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
+  enableCounter: boolean(
+    'Enable character counter/limit (enableCounter)',
+    false
+  ),
+  maxCount: text('Character limit (maxCount)', ''),
   id: 'test2',
   cols: number('Columns (columns)', 50),
   rows: number('Rows (rows)', 4),
diff --git a/packages/react/src/components/TextArea/TextArea-test.js b/packages/react/src/components/TextArea/TextArea-test.js
index aac158b307b8..59229b396ad3 100644
--- a/packages/react/src/components/TextArea/TextArea-test.js
+++ b/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,51 @@ 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('should be rendered with both enableCounter and maxCount props passed in', () => {
+        counterTestWrapper1.setProps({ maxCount: 5 });
+
+        expect(
+          counterTestWrapper1.exists(`.${prefix}--text-area__counter`)
+        ).toEqual(true);
+      });
+
+      it('has the expected classes', () => {
+        const counterTextarea = () =>
+          counterTestWrapper1.find(`.${prefix}--text-area__counter`);
+        expect(counterTextarea).not.toBeNull();
+      });
+
+      it('should be disabled with expected classes', () => {
+        counterTestWrapper1.setProps({ disabled: true });
+        const counterTextarea = () =>
+          counterTestWrapper1.find(`.${prefix}--text-area__counter`);
+        expect(
+          counterTextarea().hasClass(`${prefix}--label--disabled`)
+        ).toEqual(true);
+      });
+    });
   });
 
   describe('events', () => {
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index ea3b76c23348..85bb63079bd3 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/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,22 @@ const TextArea = React.forwardRef(function TextArea(
     helperText,
     light,
     placeholder,
+    enableCounter,
+    maxCount,
     ...other
   },
   ref
 ) {
   const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');
+  const { defaultValue, disabled } = other;
+  const [textCount, setTextCount] = useState(defaultValue?.length || 0);
 
   const textareaProps = {
     id,
     onChange: (evt) => {
       if (!other.disabled) {
+        setTextCount(evt.target.value?.length);
         onChange(evt);
       }
     },
@@ -45,11 +50,12 @@ const TextArea = React.forwardRef(function TextArea(
       }
     },
     ref,
+    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 +64,16 @@ const TextArea = React.forwardRef(function TextArea(
     </label>
   ) : null;
 
+  const counterClasses = classNames(`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--text-area__counter`]: true,
+  });
+
+  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 +118,10 @@ const TextArea = React.forwardRef(function TextArea(
           ? classNames(`${prefix}--form-item`, className)
           : `${prefix}--form-item`
       }>
-      {label}
+      <div className={`${prefix}--text-area__counter-wrapper`}>
+        {label}
+        {counter}
+      </div>
       <div
         className={`${prefix}--text-area__wrapper`}
         data-invalid={invalid || null}>
@@ -139,6 +158,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 +200,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 +244,8 @@ TextArea.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
+  enableCounter: false,
+  maxCount: undefined,
 };
 
 export default TextArea;
diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss
index b96405bc245b..a7065e82247e 100644
--- a/packages/styles/scss/components/text-area/_text-area.scss
+++ b/packages/styles/scss/components/text-area/_text-area.scss
@@ -102,4 +102,12 @@
       color: transparent;
     }
   }
+
+  .#{$prefix}--text-area__counter-wrapper {
+    width: 100%;
+  }
+
+  .#{$prefix}--text-area__counter {
+    float: right;
+  }
 }

From 0f5548266d315e9623a3a20cd6bc967ad9e3552e Mon Sep 17 00:00:00 2001
From: Tanner Summers <tanner.summers@ibm.com>
Date: Fri, 7 Jan 2022 15:36:52 -0600
Subject: [PATCH 2/8] feat(textarea): added value prop into consideration with
 count

---
 packages/react/src/components/TextArea/TextArea-story.js | 2 +-
 packages/react/src/components/TextArea/TextArea.js       | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/TextArea/TextArea-story.js b/packages/react/src/components/TextArea/TextArea-story.js
index 1a6a29b5a267..a4d00bd462e2 100644
--- a/packages/react/src/components/TextArea/TextArea-story.js
+++ b/packages/react/src/components/TextArea/TextArea-story.js
@@ -31,7 +31,7 @@ const TextAreaProps = () => ({
     'Enable character counter/limit (enableCounter)',
     false
   ),
-  maxCount: text('Character limit (maxCount)', ''),
+  maxCount: number('Character limit (maxCount)', undefined),
   id: 'test2',
   cols: number('Columns (columns)', 50),
   rows: number('Rows (rows)', 4),
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index 85bb63079bd3..a10eb7a680d4 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -33,8 +33,10 @@ const TextArea = React.forwardRef(function TextArea(
 ) {
   const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');
-  const { defaultValue, disabled } = other;
-  const [textCount, setTextCount] = useState(defaultValue?.length || 0);
+  const { defaultValue, value, disabled } = other;
+  const [textCount, setTextCount] = useState(
+    defaultValue?.length || value?.length || 0
+  );
 
   const textareaProps = {
     id,

From b3ac185f590658d9a3abb3372be9a89a174c07aa Mon Sep 17 00:00:00 2001
From: Tanner Summers <tannersummers@gmail.com>
Date: Mon, 24 Jan 2022 23:24:58 -0600
Subject: [PATCH 3/8] feat(textarea): updated styles to use text area

---
 .../components/src/components/text-area/_text-area.scss   | 8 ++++----
 packages/react/src/components/TextArea/TextArea.js        | 1 -
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss
index 3f857b73a5b9..b72df628f85f 100644
--- a/packages/components/src/components/text-area/_text-area.scss
+++ b/packages/components/src/components/text-area/_text-area.scss
@@ -101,11 +101,11 @@
   }
 
   .#{$prefix}--text-area__counter-wrapper {
+    display: flex;
     width: 100%;
-  }
-
-  .#{$prefix}--text-area__counter {
-    float: right;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
   }
 }
 
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index a10eb7a680d4..dc23819990a1 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -68,7 +68,6 @@ const TextArea = React.forwardRef(function TextArea(
 
   const counterClasses = classNames(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
-    [`${prefix}--text-area__counter`]: true,
   });
 
   const counter =

From 2481afddfb60b572e7db9073d470dbb1201140a0 Mon Sep 17 00:00:00 2001
From: Tanner Summers <tannersummers@gmail.com>
Date: Tue, 25 Jan 2022 00:11:48 -0600
Subject: [PATCH 4/8] feat(textarea): updated unit test

---
 .../src/components/TextArea/TextArea-test.js  | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/TextArea/TextArea-test.js b/packages/react/src/components/TextArea/TextArea-test.js
index 59229b396ad3..339ef914026f 100644
--- a/packages/react/src/components/TextArea/TextArea-test.js
+++ b/packages/react/src/components/TextArea/TextArea-test.js
@@ -149,27 +149,22 @@ describe('TextArea', () => {
         ).toEqual(false);
       });
 
-      it('should be rendered with both enableCounter and maxCount props passed in', () => {
-        counterTestWrapper1.setProps({ maxCount: 5 });
-
-        expect(
-          counterTestWrapper1.exists(`.${prefix}--text-area__counter`)
-        ).toEqual(true);
-      });
-
       it('has the expected classes', () => {
         const counterTextarea = () =>
           counterTestWrapper1.find(`.${prefix}--text-area__counter`);
         expect(counterTextarea).not.toBeNull();
       });
 
-      it('should be disabled with expected classes', () => {
+      it('should have label and counter disabled', () => {
         counterTestWrapper1.setProps({ disabled: true });
-        const counterTextarea = () =>
-          counterTestWrapper1.find(`.${prefix}--text-area__counter`);
-        expect(
-          counterTextarea().hasClass(`${prefix}--label--disabled`)
-        ).toEqual(true);
+        const wrapper = counterTestWrapper1.find(
+          `.${prefix}--text-area__counter-wrapper`
+        );
+        const labels = wrapper.find(`.${prefix}--label`);
+
+        labels.forEach((node) => {
+          expect(node.hasClass(`${prefix}--label--disabled`)).toEqual(true);
+        });
       });
     });
   });

From bccf66723a4b39f5dd8a6094e64d34168d387874 Mon Sep 17 00:00:00 2001
From: Tanner Summers <Tanner.summers@ibm.com>
Date: Tue, 25 Jan 2022 14:57:53 -0600
Subject: [PATCH 5/8] feat(textarea): updated styles

---
 .../components/src/components/text-area/_text-area.scss   | 4 +---
 packages/react/src/components/TextArea/TextArea-test.js   | 2 +-
 packages/react/src/components/TextArea/TextArea.js        | 2 +-
 packages/styles/scss/components/text-area/_text-area.scss | 8 +++-----
 4 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss
index b72df628f85f..535fbee446a5 100644
--- a/packages/components/src/components/text-area/_text-area.scss
+++ b/packages/components/src/components/text-area/_text-area.scss
@@ -100,11 +100,9 @@
     }
   }
 
-  .#{$prefix}--text-area__counter-wrapper {
+  .#{$prefix}--text-area__label-wrapper {
     display: flex;
     width: 100%;
-    flex-direction: row;
-    align-items: center;
     justify-content: space-between;
   }
 }
diff --git a/packages/react/src/components/TextArea/TextArea-test.js b/packages/react/src/components/TextArea/TextArea-test.js
index 339ef914026f..e94cf0b95cb3 100644
--- a/packages/react/src/components/TextArea/TextArea-test.js
+++ b/packages/react/src/components/TextArea/TextArea-test.js
@@ -158,7 +158,7 @@ describe('TextArea', () => {
       it('should have label and counter disabled', () => {
         counterTestWrapper1.setProps({ disabled: true });
         const wrapper = counterTestWrapper1.find(
-          `.${prefix}--text-area__counter-wrapper`
+          `.${prefix}--text-area__label-wrapper`
         );
         const labels = wrapper.find(`.${prefix}--label`);
 
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index dc23819990a1..7dc0d9344bea 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -119,7 +119,7 @@ const TextArea = React.forwardRef(function TextArea(
           ? classNames(`${prefix}--form-item`, className)
           : `${prefix}--form-item`
       }>
-      <div className={`${prefix}--text-area__counter-wrapper`}>
+      <div className={`${prefix}--text-area__label-wrapper`}>
         {label}
         {counter}
       </div>
diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss
index a7065e82247e..2bfd9301bf53 100644
--- a/packages/styles/scss/components/text-area/_text-area.scss
+++ b/packages/styles/scss/components/text-area/_text-area.scss
@@ -103,11 +103,9 @@
     }
   }
 
-  .#{$prefix}--text-area__counter-wrapper {
+  .#{$prefix}--text-area__label-wrapper {
+    display: flex;
     width: 100%;
-  }
-
-  .#{$prefix}--text-area__counter {
-    float: right;
+    justify-content: space-between;
   }
 }

From a9a4d0f0dda6f38d1b6e5051f8a82cf982efed2b Mon Sep 17 00:00:00 2001
From: Tanner Summers <Tanner.summers@ibm.com>
Date: Wed, 2 Feb 2022 09:59:21 -0600
Subject: [PATCH 6/8] chore(react): updated file after running yarn test -u
 after main merge

---
 packages/react/src/components/Tooltip/Tooltip.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/components/Tooltip/Tooltip.js b/packages/react/src/components/Tooltip/Tooltip.js
index 543bc7c65def..fbfc56e61d65 100644
--- a/packages/react/src/components/Tooltip/Tooltip.js
+++ b/packages/react/src/components/Tooltip/Tooltip.js
@@ -611,6 +611,7 @@ class Tooltip extends Component {
       innerRef: ref,
       selectorPrimaryFocus, // eslint-disable-line
       tooltipId, //eslint-disable-line
+      autoOrientation, // eslint-disable-line
       ...other
     } = this.props;
 

From 8d10cf389e2bc9668961989914e4048ecb2d38d4 Mon Sep 17 00:00:00 2001
From: Tanner Summers <Tanner.summers@ibm.com>
Date: Thu, 3 Feb 2022 13:03:14 -0600
Subject: [PATCH 7/8] fix(react): fixed textarea counter limit still limiting
 when not enabled

---
 packages/react/src/components/TextArea/TextArea.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index 7dc0d9344bea..c71a73f6e328 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -52,7 +52,7 @@ const TextArea = React.forwardRef(function TextArea(
       }
     },
     ref,
-    maxLength: maxCount,
+    ...(enableCounter && { maxLength: maxCount }),
   };
 
   const labelClasses = classNames(`${prefix}--label`, {

From 2982cf8659ad7071ecc20440f864f51aecd3b655 Mon Sep 17 00:00:00 2001
From: Tanner Summers <tannersummers@gmail.com>
Date: Fri, 4 Feb 2022 13:34:05 -0600
Subject: [PATCH 8/8] chore(react): edited how textarea maxCount prop is set

---
 packages/react/src/components/TextArea/TextArea.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index c71a73f6e328..d13e2654ec17 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -52,9 +52,12 @@ const TextArea = React.forwardRef(function TextArea(
       }
     },
     ref,
-    ...(enableCounter && { maxLength: maxCount }),
   };
 
+  if (enableCounter) {
+    textareaProps.maxLength = maxCount;
+  }
+
   const labelClasses = classNames(`${prefix}--label`, {
     [`${prefix}--visually-hidden`]: hideLabel,
     [`${prefix}--label--disabled`]: disabled,