From 968e2218ac03ccc30173be57d6cb2e497f125db0 Mon Sep 17 00:00:00 2001
From: Gustavo Santos <53129852+gefgu@users.noreply.github.com>
Date: Wed, 7 Sep 2022 10:24:38 -0300
Subject: [PATCH] Chore: Add controls to InlineField (#54674)

---
 .../components/Forms/InlineField.story.tsx    | 70 ++++++++++++++++---
 1 file changed, 62 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/InlineField.story.tsx b/packages/grafana-ui/src/components/Forms/InlineField.story.tsx
index b006d9f2d00..253e7ca99a9 100644
--- a/packages/grafana-ui/src/components/Forms/InlineField.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineField.story.tsx
@@ -11,40 +11,74 @@ import mdx from './InlineField.mdx';
 const meta: ComponentMeta<typeof InlineField> = {
   title: 'Forms/InlineField',
   component: InlineField,
+  argTypes: {
+    label: { control: { type: 'text' } },
+    labelWidth: { control: { type: 'number' } },
+    tooltip: { control: { type: 'text' } },
+    error: { control: { type: 'text' } },
+  },
   parameters: {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['htmlFor', 'className', 'children'],
+    },
   },
 };
 
-export const basic: ComponentStory<typeof InlineField> = () => {
+export const basic: ComponentStory<typeof InlineField> = (args) => {
   return (
-    <InlineField label="Inline field">
+    <InlineField {...args}>
       <Input placeholder="Inline input" />
     </InlineField>
   );
 };
 
-export const withTooltip: ComponentStory<typeof InlineField> = () => {
+basic.args = {
+  label: 'Inline field',
+  transparent: false,
+  grow: false,
+  shrink: false,
+  disabled: false,
+  interactive: false,
+  loading: false,
+  required: false,
+  invalid: false,
+  validationMessageHorizontalOverflow: false,
+};
+
+export const withTooltip: ComponentStory<typeof InlineField> = (args) => {
   return (
-    <InlineField label="Label" tooltip="Tooltip">
+    <InlineField {...args}>
       <Input placeholder="Inline input" />
     </InlineField>
   );
 };
 
-export const grow: ComponentStory<typeof InlineField> = () => {
+withTooltip.args = {
+  tooltip: 'Tooltip',
+  ...basic.args,
+  label: 'Label',
+};
+
+export const grow: ComponentStory<typeof InlineField> = (args) => {
   return (
-    <InlineField label="Label" grow>
+    <InlineField {...args}>
       <Input placeholder="Inline input" />
     </InlineField>
   );
 };
 
-export const withSelect: ComponentStory<typeof InlineField> = () => {
+grow.args = {
+  ...basic.args,
+  label: 'Label',
+  grow: true,
+};
+
+export const withSelect: ComponentStory<typeof InlineField> = (args) => {
   return (
-    <InlineField label="Select option">
+    <InlineField {...args}>
       <Select
         width={16}
         onChange={action('item selected')}
@@ -57,6 +91,11 @@ export const withSelect: ComponentStory<typeof InlineField> = () => {
   );
 };
 
+withSelect.args = {
+  ...basic.args,
+  label: 'Select option',
+};
+
 export const multiple: ComponentStory<typeof InlineField> = () => {
   return (
     <>
@@ -73,4 +112,19 @@ export const multiple: ComponentStory<typeof InlineField> = () => {
   );
 };
 
+export const error: ComponentStory<typeof InlineField> = (args) => {
+  return (
+    <InlineField {...args}>
+      <Input placeholder="Inline input" />
+    </InlineField>
+  );
+};
+
+error.args = {
+  ...basic.args,
+  label: 'Label',
+  error: 'Error',
+  invalid: true,
+};
+
 export default meta;