docs(PPDSC-2449): Add support to TextArea & TextField for users going…

… over the set max length (#465) * feat(PPDSC-2396): overlimit maxlength support * feat(PPDSC-2396): overlimit maxlength support * feat(PPDSC-2396): overlimit maxlength condition correction * feat(PPDSC-2396): maxLength value change * feat(PPDSC-2396): updated character when diff falls to one * feat(PPDSC-2396): design feedback changes * feat(PPDSC-2396): updated 0 character remanining * feat(PPDSC-2396): removed ID * feat(PPDSC-2396): renamed story name * feat(PPDSC-2396): updated snapshots * feat(PPDSC-2396): test case updated Co-authored-by: Ravindren <[email protected]>
newscorp-ghfb · Nov 21, 2022 · 5d476bc · 5d476bc
1 parent 15c2528
commit 5d476bc
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 16 deletions.
diff --git a/src/character-count/__tests__/__snapshots__/character-count.test.tsx.snap b/src/character-count/__tests__/__snapshots__/character-count.test.tsx.snap
@@ -298,7 +298,6 @@ exports[`CharacterCount displays no message if no max or min specified 1`] = `
   padding: 0.5px 0px;
   min-height: 12px;
   margin-block-end: 8px;
-  padding-inline: 8px;
 }
 
 .emotion-0::before {
@@ -456,7 +455,6 @@ exports[`CharacterCount displays state passed 1`] = `
   padding: 0.5px 0px;
   min-height: 12px;
   margin-block-end: 8px;
-  padding-inline: 8px;
 }
 
 .emotion-0::before {
@@ -616,7 +614,6 @@ exports[`CharacterCount with maxLength displays starting number of characters re
   padding: 0.5px 0px;
   min-height: 12px;
   margin-block-end: 8px;
-  padding-inline: 8px;
 }
 
 .emotion-0::before {
@@ -776,7 +773,6 @@ exports[`CharacterCount with minLength displays starting number of characters re
   padding: 0.5px 0px;
   min-height: 12px;
   margin-block-end: 8px;
-  padding-inline: 8px;
 }
 
 .emotion-0::before {

diff --git a/src/character-count/__tests__/character-count.stories.tsx b/src/character-count/__tests__/character-count.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import {useRef} from 'react';
-
+import {useRef, useState} from 'react';
 import {CharacterCount, CharacterCountProps} from '..';
 import {
   Form,
@@ -142,6 +141,36 @@ export const CharacterCountMaxLength = () => {
 };
 CharacterCountMaxLength.storyName = 'Max length';
 
+export const CharacterCountExceedMaxLength = () => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const [textareavalue, setValue] = useState('');
+  const maxLength = 200;
+  function validationLimit() {
+    return textareavalue.length > maxLength ? 'invalid' : 'valid';
+  }
+  return (
+    <StorybookPage>
+      <StorybookCase title="Text area">
+        <Label htmlFor="textArea-overlimit">Label</Label>
+        <TextArea
+          placeholder="Placeholder"
+          ref={ref}
+          state={validationLimit()}
+          value={textareavalue}
+          onChange={({target: {value}}) => setValue(value)}
+        />
+        <CharacterCount
+          inputRef={ref}
+          maxLength={maxLength}
+          state={validationLimit()}
+        />
+      </StorybookCase>
+    </StorybookPage>
+  );
+};
+
+CharacterCountExceedMaxLength.storyName = 'Max length over limit';
+
 export const CharacterCountMinLength = () => {
   const textArea = useRef<HTMLTextAreaElement>(null);
   const textField = useRef<HTMLInputElement>(null);
@@ -199,7 +228,6 @@ export const CharacterCountMinAndMaxLength = () => {
         />
         <CharacterCount inputRef={textField} />
       </StorybookCase>
-      <StorybookCase title="default" />
     </StorybookPage>
   );
 };

diff --git a/src/character-count/__tests__/character-count.test.tsx b/src/character-count/__tests__/character-count.test.tsx
@@ -225,6 +225,52 @@ describe('CharacterCount', () => {
         `You have 1 character remaining`,
       );
     });
+
+    test('uses singular when only one character too many', async () => {
+      const {getByTestId} = renderWithImplementation(InputWithCharacterCount, {
+        children: ref => (
+          <>
+            <TextArea ref={ref} data-testid="text-area" />
+            <CharacterCount
+              inputRef={ref}
+              maxLength={MAX_LENGTH}
+              data-testid="character-count"
+            />
+          </>
+        ),
+      });
+      const characterCount = getByTestId('character-count');
+      const textArea = getByTestId('text-area');
+      await act(async () => {
+        await userEvent.type(textArea, generateString(MAX_LENGTH + 1));
+      });
+      expect(characterCount.textContent).toEqual(
+        `You have 1 character too many`,
+      );
+    });
+
+    test('updates number of characters too many', async () => {
+      const {getByTestId} = renderWithImplementation(InputWithCharacterCount, {
+        children: ref => (
+          <>
+            <TextArea ref={ref} data-testid="text-area" />
+            <CharacterCount
+              inputRef={ref}
+              maxLength={MAX_LENGTH}
+              data-testid="character-count"
+            />
+          </>
+        ),
+      });
+      const characterCount = getByTestId('character-count');
+      const textArea = getByTestId('text-area');
+      await act(async () => {
+        await userEvent.type(textArea, generateString(MAX_LENGTH + MSG.length));
+      });
+      expect(characterCount.textContent).toEqual(
+        `You have ${MSG.length + MAX_LENGTH - MAX_LENGTH} characters too many`,
+      );
+    });
   });
 
   describe('with minLength', () => {

diff --git a/src/character-count/character-count.tsx b/src/character-count/character-count.tsx
@@ -17,7 +17,9 @@ const defaultFormat: Format = ({currentLength, minLength, maxLength}) => {
   }
   if (maxLength) {
     const diff = maxLength - currentLength;
-    return `You have ${diff} character${diff === 1 ? '' : 's'} remaining`;
+    return `You have ${Math.abs(diff)} character${
+      diff === 1 || diff === -1 ? '' : 's'
+    } ${diff >= 0 ? 'remaining' : 'too many'}`;
   }
   return '';
 };
@@ -70,15 +72,14 @@ const ThemelessCharacterCount = React.forwardRef<
           setMinLength(inputEl.minLength);
         }
       }
+
       return () => {
         if (inputEl) {
           inputEl.removeEventListener('input', onInput);
         }
       };
     }, [inputRef, onInput]);
-
     const format: Format = customFormat || defaultFormat;
-
     return (
       <StyledCharacterCount
         ref={ref}

diff --git a/src/character-count/defaults.ts b/src/character-count/defaults.ts
@@ -5,21 +5,18 @@ export default {
       typographyPreset: 'utilityBody010',
       minHeight: 'sizing030',
       marginBlockEnd: 'space020',
-      paddingInline: 'space020',
     },
     medium: {
       stylePreset: 'characterCount',
       typographyPreset: 'utilityBody020',
       minHeight: 'sizing030',
       marginBlockEnd: 'space020',
-      paddingInline: 'space020',
     },
     large: {
       stylePreset: 'characterCount',
       typographyPreset: 'utilityBody030',
       minHeight: 'sizing030',
       marginBlockEnd: 'space020',
-      paddingInline: 'space020',
     },
   },
 };
diff --git a/src/theme/__tests__/__snapshots__/theme.test.ts.snap b/src/theme/__tests__/__snapshots__/theme.test.ts.snap
@@ -1684,21 +1684,18 @@ Object {
     "large": Object {
       "marginBlockEnd": "space020",
       "minHeight": "sizing030",
-      "paddingInline": "space020",
       "stylePreset": "characterCount",
       "typographyPreset": "utilityBody030",
     },
     "medium": Object {
       "marginBlockEnd": "space020",
       "minHeight": "sizing030",
-      "paddingInline": "space020",
       "stylePreset": "characterCount",
       "typographyPreset": "utilityBody020",
     },
     "small": Object {
       "marginBlockEnd": "space020",
       "minHeight": "sizing030",
-      "paddingInline": "space020",
       "stylePreset": "characterCount",
       "typographyPreset": "utilityBody010",
     },