@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

@@ -38,6 +38,7 @@ addParameters({
     light: GrafanaLight,
   },
   options: {
+    theme: GrafanaLight,
     showPanel: true,
     showRoots: true,
     panelPosition: 'bottom',

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} />

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}