From 247df73cee84d618ca624d2c31f806524706dc6f Mon Sep 17 00:00:00 2001
From: Tanner Summers <tannersummers@outlook.com>
Date: Thu, 22 Sep 2022 22:52:17 -0500
Subject: [PATCH 1/3] feat(react): added counter to textinput and storybook
 updates

---
 .../src/components/TextArea/TextArea-test.js  |  4 +-
 .../TextArea/next/TextArea.stories.js         |  8 ++++
 .../src/components/TextInput/TextInput.js     | 45 +++++++++++++++++--
 .../TextInput/__tests__/TextInput-test.js     | 35 +++++++++++++++
 .../TextInput/next/TextInput.stories.js       | 16 ++++++-
 .../components/text-input/_text-input.scss    |  6 +++
 6 files changed, 108 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/TextArea/TextArea-test.js b/packages/react/src/components/TextArea/TextArea-test.js
index 690b5e1de027..ca7a55450071 100644
--- a/packages/react/src/components/TextArea/TextArea-test.js
+++ b/packages/react/src/components/TextArea/TextArea-test.js
@@ -136,13 +136,13 @@ describe('TextArea', () => {
         <TextArea id="counter2" labelText="someLabel" maxCount={5} />
       );
 
-      it('should not render element without only enableCounter prop passed in', () => {
+      it('should not render counter with 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', () => {
+      it('should not render counter with only maxCount prop passed in', () => {
         expect(
           counterTestWrapper2.exists(`${prefix}--text-area__counter`)
         ).toEqual(false);
diff --git a/packages/react/src/components/TextArea/next/TextArea.stories.js b/packages/react/src/components/TextArea/next/TextArea.stories.js
index b2da679c13b8..32b5f9ccafec 100644
--- a/packages/react/src/components/TextArea/next/TextArea.stories.js
+++ b/packages/react/src/components/TextArea/next/TextArea.stories.js
@@ -60,3 +60,11 @@ export const WithLayer = () => {
 };
 
 export const Skeleton = () => <TextAreaSkeleton />;
+
+export const Playground = (args) => (
+  <TextArea
+    {...args}
+    labelText="Text area label"
+    helperText="Optional helper text."
+  />
+);
diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
index 3ffff3dae3c3..a139958f8ea2 100644
--- a/packages/react/src/components/TextInput/TextInput.js
+++ b/packages/react/src/components/TextInput/TextInput.js
@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import classNames from 'classnames';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps';
 import PasswordInput from './PasswordInput';
@@ -37,6 +37,8 @@ const TextInput = React.forwardRef(function TextInput(
     type = 'text',
     warn = false,
     warnText,
+    enableCounter = false,
+    maxCount,
     ...rest
   },
   ref
@@ -45,6 +47,11 @@ const TextInput = React.forwardRef(function TextInput(
 
   const enabled = useFeatureFlag('enable-v11-release');
 
+  const { defaultValue, value } = rest;
+  const [textCount, setTextCount] = useState(
+    defaultValue?.length || value?.length || 0
+  );
+
   const normalizedProps = useNormalizedInputProps({
     id,
     readOnly,
@@ -71,6 +78,7 @@ const TextInput = React.forwardRef(function TextInput(
     id,
     onChange: (evt) => {
       if (!normalizedProps.disabled) {
+        setTextCount(evt.target.value?.length);
         onChange(evt);
       }
     },
@@ -89,6 +97,11 @@ const TextInput = React.forwardRef(function TextInput(
     ['aria-describedby']: helperText && normalizedProps.helperId,
     ...rest,
   };
+
+  if (enableCounter) {
+    sharedTextInputProps.maxLength = maxCount;
+  }
+
   const inputWrapperClasses = classNames(
     [
       enabled
@@ -131,12 +144,28 @@ const TextInput = React.forwardRef(function TextInput(
     [`${prefix}--text-input__readonly-icon`]: readOnly,
   });
 
+  const counterClasses = classNames(`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled,
+  });
+
+  const counter =
+    enableCounter && maxCount ? (
+      <div className={counterClasses}>{`${textCount}/${maxCount}`}</div>
+    ) : null;
+
   const label = labelText ? (
     <label htmlFor={id} className={labelClasses}>
       {labelText}
     </label>
   ) : null;
 
+  const labelWrapper = (
+    <div className={`${prefix}--text-input__label-wrapper`}>
+      {label}
+      {counter}
+    </div>
+  );
+
   const helper = helperText ? (
     <div id={normalizedProps.helperId} className={helperTextClasses}>
       {helperText}
@@ -160,10 +189,10 @@ const TextInput = React.forwardRef(function TextInput(
   return (
     <div className={inputWrapperClasses}>
       {!inline ? (
-        label
+        labelWrapper
       ) : (
         <div className={`${prefix}--text-input__label-helper-wrapper`}>
-          {label}
+          {labelWrapper}
           {!isFluid && helper}
         </div>
       )}
@@ -203,6 +232,11 @@ TextInput.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
    */
@@ -245,6 +279,11 @@ TextInput.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 `<input>`
    * is updated
diff --git a/packages/react/src/components/TextInput/__tests__/TextInput-test.js b/packages/react/src/components/TextInput/__tests__/TextInput-test.js
index b2288463a486..c9d66d93a72f 100644
--- a/packages/react/src/components/TextInput/__tests__/TextInput-test.js
+++ b/packages/react/src/components/TextInput/__tests__/TextInput-test.js
@@ -320,5 +320,40 @@ describe('TextInput', () => {
       );
       expect(icon).toBeInTheDocument();
     });
+
+    it('should not render counter with only enableCounter prop passed in', () => {
+      render(
+        <TextInput id="input-1" labelText="TextInput label" enableCounter />
+      );
+
+      const counter = screen.queryByText('0/5');
+
+      expect(counter).not.toBeInTheDocument();
+    });
+
+    it('should not render counter with only maxCount prop passed in', () => {
+      render(
+        <TextInput id="input-1" labelText="TextInput label" enableCounter />
+      );
+
+      const counter = screen.queryByText('0/5');
+
+      expect(counter).not.toBeInTheDocument();
+    });
+
+    it('should have the expected classes for counter', () => {
+      render(
+        <TextInput
+          id="input-1"
+          labelText="TextInput label"
+          enableCounter
+          maxCount={5}
+        />
+      );
+
+      const counter = screen.queryByText('0/5');
+
+      expect(counter).toBeInTheDocument();
+    });
   });
 });
diff --git a/packages/react/src/components/TextInput/next/TextInput.stories.js b/packages/react/src/components/TextInput/next/TextInput.stories.js
index 77a877139e59..3e8a7313ebf2 100644
--- a/packages/react/src/components/TextInput/next/TextInput.stories.js
+++ b/packages/react/src/components/TextInput/next/TextInput.stories.js
@@ -30,13 +30,14 @@ export const Default = () => (
 
 export const Fluid = () => (
   <FluidForm>
-    <TextInput type="text" labelText="Text input label" />
+    <TextInput type="text" labelText="Text input label" id="text-input-1" />
   </FluidForm>
 );
 
 export const TogglePasswordVisibility = () => {
   return (
     <TextInput.PasswordInput
+      id="text-input-1"
       labelText="Text input label"
       helperText="Optional help text"
     />
@@ -61,18 +62,21 @@ export const WithLayer = () => {
         type="text"
         labelText="First layer"
         helperText="Optional help text"
+        id="text-input-1"
       />
       <Layer>
         <TextInput
           type="text"
           labelText="Second layer"
           helperText="Optional help text"
+          id="text-input-2"
         />
         <Layer>
           <TextInput
             type="text"
             labelText="Third layer"
             helperText="Optional help text"
+            id="text-input-3"
           />
         </Layer>
       </Layer>
@@ -81,3 +85,13 @@ export const WithLayer = () => {
 };
 
 export const Skeleton = () => <TextInputSkeleton />;
+
+export const Playground = (args) => (
+  <TextInput
+    {...args}
+    labelText="Text input label"
+    helperText="Optional help text"
+    id="text-input-1"
+    type="text"
+  />
+);
diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
index 7457b6228efc..f92d4dc9226e 100644
--- a/packages/styles/scss/components/text-input/_text-input.scss
+++ b/packages/styles/scss/components/text-input/_text-input.scss
@@ -404,4 +404,10 @@
     svg {
     @include high-contrast-mode('icon-fill');
   }
+
+  .#{$prefix}--text-input__label-wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 }

From c90ffd4f88dd8c017a86a8208e692972d693bb6e Mon Sep 17 00:00:00 2001
From: Tanner Summers <tannersummers@outlook.com>
Date: Thu, 22 Sep 2022 23:45:59 -0500
Subject: [PATCH 2/3] chore(react): updated snapshot

---
 .../react/__tests__/__snapshots__/PublicAPI-test.js.snap    | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 19f72dc3116b..4a7d5f5822dc 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7879,6 +7879,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "enableCounter": Object {
+        "type": "bool",
+      },
       "helperText": Object {
         "type": "node",
       },
@@ -7905,6 +7908,9 @@ Map {
       "light": Object {
         "type": "bool",
       },
+      "maxCount": Object {
+        "type": "number",
+      },
       "onChange": Object {
         "type": "func",
       },

From 2b769d96771c1890ded54010949aa9fe5d0242ce Mon Sep 17 00:00:00 2001
From: Tanner Summers <tannersummers@outlook.com>
Date: Tue, 27 Sep 2022 01:15:21 -0500
Subject: [PATCH 3/3] chore(react): updated test input styles and stories

---
 .../src/components/TextInput/TextInput.js     |  1 +
 .../TextInput/next/TextInput.stories.js       | 96 +++++++++++++++++--
 .../components/text-input/_text-input.scss    |  4 +
 3 files changed, 94 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
index a139958f8ea2..8524c8e9e038 100644
--- a/packages/react/src/components/TextInput/TextInput.js
+++ b/packages/react/src/components/TextInput/TextInput.js
@@ -146,6 +146,7 @@ const TextInput = React.forwardRef(function TextInput(
 
   const counterClasses = classNames(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--text-input__label-counter`]: true,
   });
 
   const counter =
diff --git a/packages/react/src/components/TextInput/next/TextInput.stories.js b/packages/react/src/components/TextInput/next/TextInput.stories.js
index 3e8a7313ebf2..ce85c7581c7d 100644
--- a/packages/react/src/components/TextInput/next/TextInput.stories.js
+++ b/packages/react/src/components/TextInput/next/TextInput.stories.js
@@ -51,6 +51,7 @@ export const ReadOnly = () => {
       helperText="Optional help text"
       value="This is read only, you can't type more."
       readOnly
+      id="text-input-1"
     />
   );
 };
@@ -87,11 +88,92 @@ export const WithLayer = () => {
 export const Skeleton = () => <TextInputSkeleton />;
 
 export const Playground = (args) => (
-  <TextInput
-    {...args}
-    labelText="Text input label"
-    helperText="Optional help text"
-    id="text-input-1"
-    type="text"
-  />
+  <div style={{ width: args.playgroundWidth }}>
+    <TextInput {...args} id="text-input-1" type="text" />
+  </div>
 );
+
+Playground.argTypes = {
+  playgroundWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+    defaultValue: 300,
+  },
+  className: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'input-test-class',
+  },
+  defaultValue: {
+    control: {
+      type: 'text',
+    },
+  },
+  placeholder: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Placeholder text',
+  },
+  invalid: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  invalidText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Invalid text',
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  labelText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Label text',
+  },
+  helperText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Helper text',
+  },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue:
+      'Warning message that is really long can wrap to more lines but should not be excessively long.',
+  },
+  value: {
+    control: {
+      type: 'text',
+    },
+  },
+  onChange: {
+    action: 'clicked',
+  },
+  onClick: {
+    action: 'clicked',
+  },
+  size: {
+    defaultValue: 'md',
+    options: ['sm', 'md', 'lg', 'xl'],
+    control: {
+      type: 'select',
+    },
+  },
+};
diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
index f92d4dc9226e..bc8b48604dfc 100644
--- a/packages/styles/scss/components/text-input/_text-input.scss
+++ b/packages/styles/scss/components/text-input/_text-input.scss
@@ -409,5 +409,9 @@
     display: flex;
     width: 100%;
     justify-content: space-between;
+
+    .#{$prefix}--text-input__label-counter {
+      align-self: end;
+    }
   }
 }