fix(input): change error message functionality

kodiak-packages · May 17, 2020 · 9a0436c · 9a0436c
1 parent 57bb166
commit 9a0436c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/components/Input/Input.mdx b/src/components/Input/Input.mdx
@@ -58,10 +58,10 @@ A Input can be used to let the user insert text using key strokes. A crucial for
 }
 ```
 
-### Error message
+### Input with error
 
 <Playground>
-  <Input name="username" errorMessage="The username contains invalid characters" />
+  <Input name="username" isInvalid />
 </Playground>
 
 ### Format a serial code

diff --git a/src/components/Input/Input.test.tsx b/src/components/Input/Input.test.tsx
@@ -53,14 +53,11 @@ describe('Input', () => {
   });
 
   test('errorMessage prop', () => {
-    const errorMessage = 'This is an error message';
-    const component = <Input {...defaultButtonProps} errorMessage={errorMessage} />;
-    const { getByTestId, queryByText } = render(component);
+    const component = <Input {...defaultButtonProps} isInvalid />;
+    const { getByTestId } = render(component);
     const inputElement = getByTestId('input-firstname');
-    const spanElement = queryByText(errorMessage);
 
     expect(inputElement.classList).toContain('containsError');
-    expect(spanElement).not.toEqual(null);
   });
 
   test('spellCheck prop', () => {

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEventHandler } from 'react';
+import React, { ChangeEventHandler, FocusEventHandler } from 'react';
 import classNames from 'classnames';
 
 import styles from './Input.module.css';
@@ -7,13 +7,15 @@ interface Props {
   name: string;
   value?: string;
   onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
   placeholder?: string;
   type?: 'text' | 'email' | 'password';
   errorMessage?: string;
   spellCheck?: boolean;
   autoComplete?: boolean;
   maxLength?: number;
   className?: string;
+  isInvalid?: boolean;
 }
 
 const Input = React.forwardRef<HTMLInputElement, Props>(
@@ -22,9 +24,10 @@ const Input = React.forwardRef<HTMLInputElement, Props>(
       name,
       value,
       onChange,
+      onBlur,
       placeholder,
       type = 'text',
-      errorMessage,
+      isInvalid = false,
       spellCheck = false,
       autoComplete = false,
       maxLength,
@@ -34,7 +37,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(
   ) => {
     const mergedContainerClassName = classNames(styles.container, className);
     const mergedInputClassName = classNames(styles.input, {
-      [styles.containsError]: Boolean(errorMessage),
+      [styles.containsError]: Boolean(isInvalid),
     });
     return (
       <div className={mergedContainerClassName} data-testid="container">
@@ -50,8 +53,8 @@ const Input = React.forwardRef<HTMLInputElement, Props>(
           ref={ref}
           className={mergedInputClassName}
           data-testid={`input-${name}`}
+          onBlur={onBlur}
         />
-        {Boolean(errorMessage) && <span className={styles.errorMessage}>{errorMessage}</span>}
       </div>
     );
   },