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;
@@ -178,7 +178,6 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
         /* we want anything that has focus and is an addon to be above input */
         z-index: 2;
       }
-        }
     `,
     prefix: cx(
       prefixSuffix,

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