From 21f55d1345054ca42cf421d6a6d02f1427ccace4 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Tue, 7 Apr 2020 09:24:24 +0200
Subject: [PATCH] @grafana/ui docs: Input (#23228)

* Add prefix and suffix example

* Update doc

* Update packages/grafana-ui/src/components/Forms/Input/Input.mdx

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

* Add light theme to be loaded for docs

* Add more docs

* Make Legacy stories internal

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
---
 packages/grafana-ui/.storybook/preview.ts     |  1 +
 ...put.story.tsx => Input.story.internal.tsx} |  0
 ...ry.tsx => ButtonSelect.story.internal.tsx} |  0
 ...ct.story.tsx => Select.story.internal.tsx} |  0
 .../grafana-ui/src/components/Input/Input.mdx | 38 ++++++++++++++++++-
 .../src/components/Input/Input.story.tsx      |  2 +-
 6 files changed, 38 insertions(+), 3 deletions(-)
 rename packages/grafana-ui/src/components/Forms/Legacy/Input/{Input.story.tsx => Input.story.internal.tsx} (100%)
 rename packages/grafana-ui/src/components/Forms/Legacy/Select/{ButtonSelect.story.tsx => ButtonSelect.story.internal.tsx} (100%)
 rename packages/grafana-ui/src/components/Forms/Legacy/Select/{Select.story.tsx => Select.story.internal.tsx} (100%)

diff --git a/packages/grafana-ui/.storybook/preview.ts b/packages/grafana-ui/.storybook/preview.ts
index 4d0aaca0925..f79088c384e 100644
--- a/packages/grafana-ui/.storybook/preview.ts
+++ b/packages/grafana-ui/.storybook/preview.ts
@@ -38,6 +38,7 @@ addParameters({
     light: GrafanaLight,
   },
   options: {
+    theme: GrafanaLight,
     showPanel: true,
     showRoots: true,
     panelPosition: 'bottom',
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx
similarity index 100%
rename from packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.tsx
rename to packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx
similarity index 100%
rename from packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.tsx
rename to packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
similarity index 100%
rename from packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.tsx
rename to packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
diff --git a/packages/grafana-ui/src/components/Input/Input.mdx b/packages/grafana-ui/src/components/Input/Input.mdx
index 8f3bb755768..60e991afcdf 100644
--- a/packages/grafana-ui/src/components/Input/Input.mdx
+++ b/packages/grafana-ui/src/components/Input/Input.mdx
@@ -1,6 +1,40 @@
-import { Props } from '@storybook/addon-docs/blocks';
-import { Input } from './Input';
+import { Props, Preview } from "@storybook/addon-docs/blocks";
+import { Input } from "./Input";
+import { Field } from "../Forms/Field";
+import { Icon } from "../Icon/Icon";
 
 # Input
 
+Used for regular text input. For an array of data or tree-structured data, consider using `Select` or `Cascader` respectively.
+
+## Prefix and suffix
+
+To add more context to the input you can add either text or an icon before or after the input. You can use the `prefix` and `suffix` props for this. Try some examples in the canvas!
+
+```jsx
+<Input prefix={<Icon name="search" />} size="sm" />
+```
+
+<Preview>
+  <Input prefix={<Icon name="search" />} size="sm" />
+</Preview>
+
+## Usage in forms with Field
+
+`Input` should be used with the `Field` component to get labels and descriptions. It should also be used for validation. See the `Field` component for more information.
+
+```jsx
+<Field label="Important information" description="This information is very important, so you really need to fill it in">
+  <Input name="importantInput" required />
+</Field>
+```
+
+<Preview>
+  <Field
+    label="Important information"
+    description="This information is very important, so you really need to fill it in"
+  >
+    <Input name="importantInput" required />
+  </Field>
+</Preview>
 <Props of={Input} />
diff --git a/packages/grafana-ui/src/components/Input/Input.story.tsx b/packages/grafana-ui/src/components/Input/Input.story.tsx
index 873ebac3e7f..f588d385e60 100644
--- a/packages/grafana-ui/src/components/Input/Input.story.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.story.tsx
@@ -84,8 +84,8 @@ export const simple = () => {
     <div style={{ width: containerWidth }}>
       <Input
         disabled={disabled}
-        invalid={invalid}
         prefix={prefixEl}
+        invalid={invalid}
         suffix={suffixEl}
         loading={loading}
         addonBefore={before && addonBefore}