feat: Implement minLength and maxLength on TextArea. (#505)

thenativeweb · May 17, 2020 · 9a858c5 · 9a858c5
1 parent ec977c1
commit 9a858c5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/lib/components/input/TextArea/index.tsx b/lib/components/input/TextArea/index.tsx
@@ -10,6 +10,8 @@ interface TextAreaProps {
   className?: string;
   disabled?: boolean;
   id?: string;
+  maxLength?: number;
+  minLength?: number;
   name?: string;
   placeholder?: string;
   ref?: any;
@@ -30,6 +32,8 @@ const TextArea: FunctionComponent<TextAreaProps> = ({
   disabled = false,
   focusDelay = 0,
   id,
+  maxLength = Number.MAX_SAFE_INTEGER,
+  minLength = 0,
   name,
   value,
   placeholder,
@@ -65,6 +69,8 @@ const TextArea: FunctionComponent<TextAreaProps> = ({
       ref={ elementRef }
       className={ componentClasses }
       disabled={ disabled }
+      maxLength={ maxLength }
+      minLength={ minLength }
       name={ name }
       value={ value }
       onBlur={ onBlur }

diff --git a/lib/components/input/TextArea/styles.ts b/lib/components/input/TextArea/styles.ts
@@ -16,6 +16,10 @@ const styles = (theme: Theme): ComponentClassNames<TextAreaClassNames> => ({
     border: `1px solid`,
     borderColor: theme.color.content.border,
 
+    '&:invalid': {
+      borderColor: `${theme.color.interaction.error} !important`
+    },
+
     '&:focus': {
       outline: 'none',
       borderColor: theme.color.interaction.focus