Spinner: updates story from knobs to control (#33988)

packages/grafana-ui/src/components/Spinner/Spinner.story.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { number, color } from '@storybook/addon-knobs';
+import { Meta, Story } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Spinner } from '@grafana/ui';
+import { Props } from './Spinner';
 import mdx from './Spinner.mdx';
 
 export default {
@@ -12,27 +13,45 @@ export default {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['className', 'iconClassName', 'style', 'inline'],
+    },
+    knobs: {
+      disable: true,
+    },
   },
-};
+  argTypes: {
+    backgroundColor: { control: { type: 'color' } },
+    color: { control: { type: 'color' } },
+  },
+} as Meta;
 
-export const basic = () => {
-  return (
-    <div>
-      <Spinner />
-    </div>
-  );
-};
+interface StoryProps extends Partial<Props> {
+  backgroundColor: string;
+  color: string;
+  withStyle: boolean;
+}
 
-export const withStyle = () => {
+export const Basic: Story<StoryProps> = (args) => {
   return (
     <div>
       <Spinner
-        style={{
-          backgroundColor: color('White', 'white'),
-          color: color('Red', 'red'),
-        }}
-        size={number('Size', 34)}
+        style={
+          args.withStyle === true
+            ? {
+                backgroundColor: `${args.backgroundColor}`,
+                color: `${args.color}`,
+              }
+            : {}
+        }
+        size={args.size}
       />
     </div>
   );
 };
+Basic.args = {
+  backgroundColor: 'white',
+  color: 'red',
+  size: 34,
+  withStyle: false,
+};

packages/grafana-ui/src/components/Spinner/Spinner.tsx

@@ -16,7 +16,7 @@ const getStyles = stylesFactory((size: number, inline: boolean) => {
   };
 });
 
-type Props = {
+export type Props = {
   className?: string;
   style?: React.CSSProperties;
   iconClassName?: string;