Grafana-UI: Add invalid state to Forms.Textarea (#22775)

packages/grafana-ui/src/components/Forms/Form.story.tsx

@@ -16,6 +16,7 @@ import Forms from './index';
 import mdx from './Form.mdx';
 import { ValidateResult } from 'react-hook-form';
 import { boolean } from '@storybook/addon-knobs';
+import { TextArea } from './TextArea/TextArea';
 
 export default {
   title: 'Forms/Test forms',
@@ -50,6 +51,7 @@ interface FormDTO {
   switch: boolean;
   radio: string;
   select: string;
+  text: string;
   nested: {
     path: string;
   };
@@ -88,6 +90,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>

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`

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};
       `
     ),
   };