From 9d605bdd040e59ec23711771c9ab8ff54672f0b3 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Tue, 17 Mar 2020 10:15:07 +0200
Subject: [PATCH] Grafana-UI: Add invalid state to Forms.Textarea (#22775)

(cherry picked from commit cd50da3dbe8531bcb93ecfcf9b408dfafcb73555)
---
 .../src/components/Forms/Form.story.tsx       |  7 +++
 .../src/components/Forms/Input/Input.tsx      | 47 +++++++++----------
 .../components/Forms/TextArea/TextArea.tsx    |  1 +
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Form.story.tsx b/packages/grafana-ui/src/components/Forms/Form.story.tsx
index 889488d1928..5c2fd9aa23f 100644
--- a/packages/grafana-ui/src/components/Forms/Form.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Form.story.tsx
@@ -14,6 +14,8 @@ import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup';
 import { Select } from './Select/Select';
 import Forms from './index';
 import mdx from './Form.mdx';
+import { boolean } from '@storybook/addon-knobs';
+import { TextArea } from './TextArea/TextArea';
 
 export default {
   title: 'Forms/Test forms',
@@ -48,6 +50,7 @@ interface FormDTO {
   switch: boolean;
   radio: string;
   select: string;
+  text: string;
   nested: {
     path: string;
   };
@@ -86,6 +89,10 @@ const renderForm = (defaultValues?: Partial<FormDTO>) => (
             <Input name="nested.path" placeholder="Nested path" size="md" ref={register} />
           </Field>
 
+          <Field label="Textarea" invalid={!!errors.text} error="Text is required">
+            <TextArea name="text" placeholder="Long text" size="md" ref={register({ required: true })} />
+          </Field>
+
           <Field label="Checkbox" invalid={!!errors.checkbox} error="We need your consent">
             <Checkbox name="checkbox" label="Do you consent?" ref={register({ required: true })} />
           </Field>
diff --git a/packages/grafana-ui/src/components/Forms/Input/Input.tsx b/packages/grafana-ui/src/components/Forms/Input/Input.tsx
index a3749ef4c88..c5e6f9bdf10 100644
--- a/packages/grafana-ui/src/components/Forms/Input/Input.tsx
+++ b/packages/grafana-ui/src/components/Forms/Input/Input.tsx
@@ -50,7 +50,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
   `;
 
   return {
-    // Wraps inputWraper and addons
+    // Wraps inputWrapper and addons
     wrapper: cx(
       css`
         label: input-wrapper;
@@ -149,37 +149,36 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
       color: ${colors.formInputDisabledText};
     `,
     addon: css`
-        label: input-addon;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-grow: 0;
-        flex-shrink: 0;
-        position: relative;
+      label: input-addon;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-grow: 0;
+      flex-shrink: 0;
+      position: relative;
 
-        &:first-child {
+      &:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        > :last-child {
           border-top-right-radius: 0;
           border-bottom-right-radius: 0;
-          > :last-child {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-          }
         }
+      }
 
-        &:last-child {
+      &:last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        > :first-child {
           border-top-left-radius: 0;
           border-bottom-left-radius: 0;
-          > :first-child {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          }
         }
-        > *:focus {
-          /* we want anything that has focus and is an addon to be above input */
-          z-index: 2;
-        }
-        }
-      `,
+      }
+      > *:focus {
+        /* we want anything that has focus and is an addon to be above input */
+        z-index: 2;
+      }
+    `,
     prefix: cx(
       prefixSuffix,
       css`
diff --git a/packages/grafana-ui/src/components/Forms/TextArea/TextArea.tsx b/packages/grafana-ui/src/components/Forms/TextArea/TextArea.tsx
index c84322693c3..04e034f5655 100644
--- a/packages/grafana-ui/src/components/Forms/TextArea/TextArea.tsx
+++ b/packages/grafana-ui/src/components/Forms/TextArea/TextArea.tsx
@@ -32,6 +32,7 @@ const getTextAreaStyle = stylesFactory((theme: GrafanaTheme, invalid = false) =>
         border-radius: ${theme.border.radius.sm};
         padding: ${theme.spacing.formSpacingBase / 4}px ${theme.spacing.formSpacingBase}px;
         width: 100%;
+        border-color: ${invalid ? theme.colors.redBase : theme.colors.formInputBorder};
       `
     ),
   };