Merge pull request #15890 from ryantxu/storybook-cleanup

Minor storybook cleanup

- DeleteButton should use withCenteredStory like everythign else
- Clicking the 'Red' button should not pick blue :)

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx

@@ -8,7 +8,7 @@ import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 import { UseState } from '../../utils/storybook/UseState';
 
 const BasicGreen = getColorDefinitionByName('green');
-const BasicBlue = getColorDefinitionByName('blue');
+const BasicRed = getColorDefinitionByName('red');
 const LightBlue = getColorDefinitionByName('light-blue');
 
 const NamedColorsPaletteStories = storiesOf('UI/ColorPicker/Palettes/NamedColorsPalette', module);
@@ -41,7 +41,7 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
     'Selected color',
     {
       Green: BasicGreen.variants.dark,
-      Red: BasicBlue.variants.dark,
+      Red: BasicRed.variants.dark,
       'Light blue': LightBlue.variants.dark,
     },
     'red'

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

-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { DeleteButton } from './DeleteButton';
-
-const CenteredStory: FunctionComponent<{}> = ({ children }) => {
-  return (
-    <div
-      style={{
-        height: '100vh  ',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {children}
-    </div>
-  );
-};
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { action } from '@storybook/addon-actions';
 
 storiesOf('UI/DeleteButton', module)
-  .addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
+  .addDecorator(withCenteredStory)
   .add('default', () => {
-    return <DeleteButton onConfirm={() => {}} />;
+    return (
+      <DeleteButton
+        onConfirm={() => {
+          action('Delete Confirmed')('delete!');
+        }}
+      />
+    );
   });