Chore: Remove withCenteredStory storybook decorators (#75154)

packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
 
 import { StoryExample } from '../../utils/storybook/StoryExample';
-import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Alert.mdx';
 
@@ -14,7 +13,6 @@ const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
 const meta: Meta = {
   title: 'Overlays/Alert/InlineBanner',
   component: Alert,
-  decorators: [withCenteredStory, withHorizontallyCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/Alert/Toast.story.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
 
 import { StoryExample } from '../../utils/storybook/StoryExample';
-import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Alert.mdx';
 
@@ -14,7 +13,6 @@ const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
 const meta: Meta<typeof Alert> = {
   title: 'Overlays/Alert/Toast',
   component: Alert,
-  decorators: [withCenteredStory, withHorizontallyCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -1,7 +1,6 @@
 import { Story, Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Checkbox } from '../Forms/Checkbox';
 import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';
 import { Input } from '../Input/Input';
@@ -15,7 +14,6 @@ import mdx from './AutoSaveField.mdx';
 const meta: Meta = {
   title: 'Forms/AutoSaveField',
   component: AutoSaveField,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -4,14 +4,12 @@ import React from 'react';
 import { Badge } from '@grafana/ui';
 
 import { iconOptions } from '../../utils/storybook/icons';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Badge.mdx';
 
 const meta: Meta<typeof Badge> = {
   title: 'Data Display/Badge',
   component: Badge,
-  decorators: [withCenteredStory],
   parameters: {
     docs: { page: mdx },
   },

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

@@ -5,7 +5,6 @@ import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor }
 import { BarGauge, BarGaugeDisplayMode } from '@grafana/ui';
 
 import { useTheme2 } from '../../themes';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import { Props } from './BarGauge';
 import mdx from './BarGauge.mdx';
@@ -13,7 +12,6 @@ import mdx from './BarGauge.mdx';
 const meta: Meta = {
   title: 'Visualizations/BarGauge',
   component: BarGauge,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -4,7 +4,6 @@ import React from 'react';
 import { FieldSparkline, FieldType } from '@grafana/data';
 
 import { useTheme2 } from '../../themes';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import {
   BigValue,
@@ -19,7 +18,6 @@ import mdx from './BigValue.mdx';
 const meta: Meta = {
   title: 'Visualizations/BigValue',
   component: BigValue,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -2,7 +2,6 @@ import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { ComponentSize } from '../../types';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Card } from '../Card/Card';
 import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
 
@@ -15,7 +14,6 @@ const sizes: ComponentSize[] = ['lg', 'md', 'sm'];
 export default {
   title: 'Buttons/Button',
   component: Button,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -3,12 +3,9 @@ import React from 'react';
 
 import { ButtonCascader } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 const meta: Meta<typeof ButtonCascader> = {
   title: 'Forms/Cascader/ButtonCascader',
   component: ButtonCascader,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['className', 'value', 'fieldNames', 'loadData', 'onChange', 'onPopupVisibleChange'],

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

@@ -1,7 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Button } from '../Button';
 import { IconButton } from '../IconButton/IconButton';
 import { VerticalGroup } from '../Layout/Layout';
@@ -15,7 +14,6 @@ const logo = 'https://grafana.com/static/assets/img/apple-touch-icon.png';
 const meta: Meta<typeof Card> = {
   title: 'General/Card',
   component: Card,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -3,8 +3,6 @@ import React from 'react';
 
 import { Cascader } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { CascaderOption } from './Cascader';
 import mdx from './Cascader.mdx';
 
@@ -37,7 +35,6 @@ const options = [
 const meta: Meta<typeof Cascader> = {
   title: 'Forms/Cascader',
   component: Cascader,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -2,15 +2,12 @@ import { action } from '@storybook/addon-actions';
 import { Meta } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { ClickOutsideWrapper } from './ClickOutsideWrapper';
 import mdx from './ClickOutsideWrapper.mdx';
 
 const meta: Meta<typeof ClickOutsideWrapper> = {
   title: 'Layout/ClickOutsideWrapper',
   component: ClickOutsideWrapper,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,
@@ -20,8 +17,13 @@ const meta: Meta<typeof ClickOutsideWrapper> = {
 
 export const basic = () => {
   return (
-    <ClickOutsideWrapper onClick={action('Clicked outside')}>
-      <div style={{ width: '300px', border: '1px solid grey', padding: '20px' }}>Container</div>
+    <ClickOutsideWrapper
+      onClick={() => {
+        action('Clicked outside!')();
+        window.alert('Clicked outside!');
+      }}
+    >
+      <div style={{ width: '300px', border: '1px solid grey', padding: '20px' }}>Click outside this box!</div>
     </ClickOutsideWrapper>
   );
 };

packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.internal.story.tsx

@@ -1,7 +1,6 @@
 import { Story, Meta } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Field } from '../Forms/Field';
 import { Input } from '../Input/Input';
 
@@ -11,7 +10,6 @@ import mdx from './ClipboardButton.mdx';
 const meta: Meta = {
   title: 'Buttons/ClipboardButton',
   component: ClipboardButtonImpl,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/Collapse/CollapsableSection.story.tsx

@@ -3,15 +3,12 @@ import { useArgs } from '@storybook/client-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { CollapsableSection, Props } from './CollapsableSection';
 import mdx from './CollapsableSection.mdx';
 
 const meta: Meta<typeof CollapsableSection> = {
   title: 'Layout/CollapsableSection',
   component: CollapsableSection,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -3,8 +3,6 @@ import { useArgs } from '@storybook/client-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { Collapse, ControlledCollapse } from './Collapse';
 import mdx from './Collapse.mdx';
 
@@ -13,7 +11,6 @@ const EXCLUDED_PROPS = ['className', 'onToggle'];
 const meta: Meta<typeof Collapse> = {
   title: 'Layout/Collapse',
   component: Collapse,
-  decorators: [withCenteredStory, withHorizontallyCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -5,9 +5,6 @@ import React from 'react';
 
 import { SeriesColorPicker, ColorPicker, clearButtonStyles, useStyles2 } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
-
 import mdx from './ColorPicker.mdx';
 import { ColorPickerInput } from './ColorPickerInput';
 
@@ -18,7 +15,6 @@ const meta: Meta<typeof ColorPicker> = {
   // https://github.com/storybookjs/storybook/issues/20782
   // @ts-ignore
   subcomponents: { SeriesColorPicker, ColorPickerInput },
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,
@@ -35,14 +31,19 @@ const meta: Meta<typeof ColorPicker> = {
 
 export const Basic: StoryFn<typeof ColorPicker> = ({ color, enableNamedColors }) => {
   const [, updateArgs] = useArgs();
-  return renderComponentWithTheme(ColorPicker, {
-    enableNamedColors,
-    color,
-    onChange: (color: string) => {
-      action('Color changed')(color);
-      updateArgs({ color });
-    },
-  });
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'flex-start' }}>
+      <ColorPicker
+        enableNamedColors={enableNamedColors}
+        color={color}
+        onChange={(color: string) => {
+          action('Color changed')(color);
+          updateArgs({ color });
+        }}
+      />
+    </div>
+  );
 };
 
 export const SeriesPicker: StoryFn<typeof SeriesColorPicker> = ({ color, enableNamedColors }) => {
@@ -78,13 +79,15 @@ export const SeriesPicker: StoryFn<typeof SeriesColorPicker> = ({ color, enableN
 export const Input: StoryFn<typeof ColorPickerInput> = ({ color }) => {
   const [, updateArgs] = useArgs();
   return (
-    <ColorPickerInput
-      value={color}
-      onChange={(color) => {
-        action('Color changed')(color);
-        updateArgs({ color });
-      }}
-    />
+    <div style={{ minHeight: '100dvh', display: 'grid', placeContent: 'center' }}>
+      <ColorPickerInput
+        value={color}
+        onChange={(color) => {
+          action('Color changed')(color);
+          updateArgs({ color });
+        }}
+      />
+    </div>
   );
 };
 

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

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react';
+import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
+import { useTheme2 } from '../../themes';
 
 import { ColorPickerPopover } from './ColorPickerPopover';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
@@ -13,25 +13,35 @@ const meta: Meta<typeof ColorPickerPopover> = {
   // https://github.com/storybookjs/storybook/issues/20782
   // @ts-ignore
   subcomponents: { SeriesColorPickerPopover },
-  decorators: [withCenteredStory],
 };
 
-export const basic = () => {
-  return renderComponentWithTheme(ColorPickerPopover, {
-    color: '#BC67E6',
-    onChange: (color: string) => {
-      console.log(color);
-    },
-  });
+export const Basic = () => {
+  return (
+    <div style={{ position: 'absolute' }}>
+      <ColorPickerPopover
+        color="#BC67E6"
+        onChange={(color: string) => {
+          console.log(color);
+        }}
+      />
+    </div>
+  );
 };
 
-export const seriesColorPickerPopover = () => {
-  return renderComponentWithTheme(SeriesColorPickerPopover, {
-    color: '#BC67E6',
-    onChange: (color: string) => {
-      console.log(color);
-    },
-  });
+export const SeriesColorPickerPopoverExample = () => {
+  const theme = useTheme2();
+
+  return (
+    <div style={{ position: 'absolute' }}>
+      <SeriesColorPickerPopover
+        theme={theme}
+        color="#BC67E6"
+        onChange={(color: string) => {
+          console.log(color);
+        }}
+      />
+    </div>
+  );
 };
 
 export default meta;

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

@@ -1,15 +1,12 @@
 import { Meta, Story } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import mdx from './ColorPicker.mdx';
 import { NamedColorsPalette, NamedColorsPaletteProps } from './NamedColorsPalette';
 
 const meta: Meta = {
   title: 'Pickers and Editors/ColorPicker/Palettes/NamedColorsPalette',
   component: NamedColorsPalette,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -2,7 +2,6 @@ import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/client-api';
 import { Meta, StoryFn } from '@storybook/react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 
 import mdx from './ColorPicker.mdx';
@@ -11,7 +10,6 @@ import SpectrumPalette from './SpectrumPalette';
 const meta: Meta<typeof SpectrumPalette> = {
   title: 'Pickers and Editors/ColorPicker/Palettes/SpectrumPalette',
   component: SpectrumPalette,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -4,7 +4,6 @@ import React from 'react';
 
 import { ConfirmButton } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Button } from '../Button';
 
 import { Props } from './ConfirmButton';
@@ -14,7 +13,6 @@ import { DeleteButton } from './DeleteButton';
 const meta: Meta = {
   title: 'Buttons/ConfirmButton',
   component: ConfirmButton,
-  decorators: [withCenteredStory],
   // SB7 has broken subcomponent types due to dropping support for the feature
   // https://github.com/storybookjs/storybook/issues/20782
   // @ts-ignore

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

@@ -4,8 +4,6 @@ import React from 'react';
 
 import { ConfirmModal } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import mdx from './ConfirmModal.mdx';
 
 const defaultExcludes = ['onConfirm', 'onDismiss', 'onAlternative'];
@@ -13,7 +11,6 @@ const defaultExcludes = ['onConfirm', 'onDismiss', 'onAlternative'];
 const meta: Meta<typeof ConfirmModal> = {
   title: 'Overlays/ConfirmModal',
   component: ConfirmModal,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -2,7 +2,6 @@ import { action } from '@storybook/addon-actions';
 import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { IconButton } from '../IconButton/IconButton';
 
 import { ContextMenu, ContextMenuProps } from './ContextMenu';
@@ -13,7 +12,6 @@ import { WithContextMenu, WithContextMenuProps } from './WithContextMenu';
 const meta: Meta<typeof ContextMenu> = {
   title: 'General/ContextMenu',
   component: ContextMenu,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.story.tsx

@@ -1,7 +1,6 @@
 import { Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
 import { Button } from '../../Button/Button';
 
 import { DatePicker, DatePickerProps } from './DatePicker';
@@ -10,7 +9,6 @@ import mdx from './DatePicker.mdx';
 const meta: Meta<typeof DatePicker> = {
   title: 'Pickers and Editors/TimePickers/Pickers And Editors/DatePicker',
   component: DatePicker,
-  decorators: [withCenteredStory],
   argTypes: {
     minDate: { control: 'date' },
   },

packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.story.tsx

@@ -3,8 +3,6 @@ import { useArgs } from '@storybook/client-api';
 import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
-
 import { DatePickerWithInput } from './DatePickerWithInput';
 import mdx from './DatePickerWithInput.mdx';
 
@@ -18,7 +16,6 @@ minimumDate.setMonth(minimumDate.getMonth() - 1);
 const meta: Meta<typeof DatePickerWithInput> = {
   title: 'Pickers and Editors/TimePickers/DatePickerWithInput',
   component: DatePickerWithInput,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.story.tsx

@@ -4,8 +4,6 @@ import React, { useState } from 'react';
 
 import { dateTime, DateTime } from '@grafana/data';
 
-import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
-
 import { DateTimePicker } from './DateTimePicker';
 import mdx from './DateTimePicker.mdx';
 
@@ -18,7 +16,6 @@ minimumDate.setDate(minimumDate.getDate() - 7);
 
 const meta: Meta<typeof DateTimePicker> = {
   title: 'Pickers and Editors/TimePickers/DateTimePicker',
-  decorators: [withCenteredStory],
   component: DateTimePicker,
   argTypes: {
     date: {

packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx

@@ -3,14 +3,11 @@ import { useArgs } from '@storybook/client-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
-
 import { RelativeTimeRangePicker } from './RelativeTimeRangePicker';
 
 const meta: Meta<typeof RelativeTimeRangePicker> = {
   title: 'Pickers and Editors/TimePickers/RelativeTimeRangePicker',
   component: RelativeTimeRangePicker,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['onChange'],

packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx

@@ -6,12 +6,9 @@ import React from 'react';
 import { dateTime } from '@grafana/data';
 import { TimeOfDayPicker } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 const meta: Meta<typeof TimeOfDayPicker> = {
   title: 'Pickers and Editors/TimePickers/TimeOfDayPicker',
   component: TimeOfDayPicker,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['onChange'],

packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.story.tsx

@@ -6,8 +6,6 @@ import React from 'react';
 import { dateTime, DefaultTimeZone, isDateTime, TimeRange } from '@grafana/data';
 import { TimeRangeInput } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import mdx from './TimeRangeInput.mdx';
 
 const now = dateTime(Date.now());
@@ -35,7 +33,6 @@ const nullRange = {
 const meta: Meta<typeof TimeRangeInput> = {
   title: 'Pickers and Editors/TimePickers/TimeRangeInput',
   component: TimeRangeInput,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['onChange', 'onChangeTimeZone'],

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx

@@ -6,15 +6,12 @@ import React from 'react';
 import { dateTime, DefaultTimeZone } from '@grafana/data';
 import { TimeRangePicker } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 const to = dateTime();
 const from = to.subtract(6, 'h');
 
 const meta: Meta<typeof TimeRangePicker> = {
   title: 'Pickers and Editors/TimePickers/TimeRangePicker',
   component: TimeRangePicker,
-  decorators: [withCenteredStory],
   args: {
     value: {
       from,

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx

@@ -5,12 +5,9 @@ import React from 'react';
 
 import { TimeZonePicker } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 const meta: Meta<typeof TimeZonePicker> = {
   title: 'Pickers and Editors/TimePickers/TimeZonePicker',
   component: TimeZonePicker,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['inputId', 'onChange', 'onBlur'],

packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx

@@ -5,12 +5,9 @@ import React from 'react';
 
 import { WeekStartPicker } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 const meta: Meta<typeof WeekStartPicker> = {
   title: 'Pickers and Editors/TimePickers/WeekStartPicker',
   component: WeekStartPicker,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['onBlur', 'onChange', 'inputId'],

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

@@ -1,15 +1,12 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { Divider } from './Divider';
 import mdx from './Divider.mdx';
 
 const meta: Meta<typeof Divider> = {
   title: 'General/Divider',
   component: Divider,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -3,14 +3,11 @@ import React, { useState } from 'react';
 
 import { Button, Drawer, Tab, TabsBar } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import mdx from './Drawer.mdx';
 
 const meta: Meta<typeof Drawer> = {
   title: 'Overlays/Drawer',
   component: Drawer,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,
@@ -147,11 +144,21 @@ export const WithTabs: StoryFn<typeof Drawer> = (args) => {
 
   const tabs = (
     <TabsBar>
-      <Tab label={'Options'} active={activeTab === 'options'} onChangeTab={() => setActiveTab('options')} />
       <Tab
-        label={'Changes'}
+        label="Options"
+        active={activeTab === 'options'}
+        onChangeTab={(ev) => {
+          ev?.preventDefault();
+          setActiveTab('options');
+        }}
+      />
+      <Tab
+        label="Changes"
         active={activeTab === 'changes'}
-        onChangeTab={() => setActiveTab('changes')}
+        onChangeTab={(ev) => {
+          ev?.preventDefault();
+          setActiveTab('changes');
+        }}
         counter={10}
       />
     </TabsBar>

packages/grafana-ui/src/components/Dropdown/ButtonSelect.internal.story.tsx

@@ -3,14 +3,11 @@ import { useArgs } from '@storybook/client-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { ButtonSelect } from './ButtonSelect';
 
 const meta: Meta<typeof ButtonSelect> = {
   title: 'Forms/Select/ButtonSelect',
   component: ButtonSelect,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['className', 'onChange', 'tooltipContent'],

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

@@ -2,7 +2,6 @@ import { Meta } from '@storybook/react';
 import React from 'react';
 
 import { StoryExample } from '../../utils/storybook/StoryExample';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Button } from '../Button';
 import { IconButton } from '../IconButton/IconButton';
 import { VerticalGroup } from '../Layout/Layout';
@@ -14,7 +13,6 @@ import mdx from './Dropdown.mdx';
 const meta: Meta<typeof Dropdown> = {
   title: 'Overlays/Dropdown',
   component: Dropdown,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -1,15 +1,12 @@
 import { Meta } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
-
 import { EmptySearchResult } from './EmptySearchResult';
 import mdx from './EmptySearchResult.mdx';
 
 const meta: Meta<typeof EmptySearchResult> = {
   title: 'Visualizations/EmptySearchResult',
   component: EmptySearchResult,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -1,8 +1,6 @@
 import { Meta } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
-
 import { Alert } from '../Alert/Alert';
 import { Button } from '../Button';
 
@@ -13,7 +11,6 @@ import { ErrorWithStack } from './ErrorWithStack';
 const meta: Meta<typeof ErrorBoundary> = {
   title: 'General/ErrorBoundary',
   component: ErrorBoundary,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -3,14 +3,11 @@ import React from 'react';
 
 import { FileDropzone } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import mdx from './FileDropzone.mdx';
 
 const meta: Meta<typeof FileDropzone> = {
   title: 'Forms/FileDropzone',
   component: FileDropzone,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/FileDropzone/FileListItem.story.tsx

@@ -1,15 +1,12 @@
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { FileListItem as FileListItemComponent, FileListItemProps } from './FileListItem';
 import mdx from './FileListItem.mdx';
 
 const meta: Meta = {
   title: 'Forms/FileListItem',
   component: FileListItemComponent,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -3,14 +3,11 @@ import React from 'react';
 
 import { FileUpload } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import mdx from './FileUpload.mdx';
 
 const meta: Meta<typeof FileUpload> = {
   title: 'Forms/FileUpload',
   component: FileUpload,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -1,8 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
-
 import { getAvailableIcons } from '../../types';
 import { HorizontalGroup } from '../Layout/Layout';
 
@@ -12,7 +10,6 @@ import mdx from './FilterPill.mdx';
 const meta: Meta<typeof FilterPill> = {
   title: 'General/FilterPill',
   component: FilterPill,
-  decorators: [withCenteredStory],
   argTypes: {
     icon: { control: { type: 'select', options: getAvailableIcons() } },
     onClick: { action: 'Pill Clicked' },

packages/grafana-ui/src/components/Flex/Flex.internal.story.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import { ThemeSpacingTokens } from '@grafana/data';
 
 import { useTheme2 } from '../../themes';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import { Flex, JustifyContent, Wrap, Direction } from './Flex';
 import mdx from './Flex.mdx';
@@ -29,7 +28,6 @@ const Item = ({ color, text, height }: { color: string; text?: string | number;
 const meta: Meta<typeof Flex> = {
   title: 'General/Layout/Flex',
   component: Flex,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/FormField/FormField.internal.story.tsx

@@ -1,14 +1,11 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { FormField } from './FormField';
 
 const meta: Meta<typeof FormField> = {
   title: 'Forms/Legacy/FormField',
   component: FormField,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['inputEl'],

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

@@ -1,15 +1,12 @@
 import { Meta } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
-
 import { FormattedValueDisplay } from './FormattedValueDisplay';
 import mdx from './FormattedValueDisplay.mdx';
 
 const meta: Meta<typeof FormattedValueDisplay> = {
   title: 'Visualizations/FormattedValueDisplay',
   component: FormattedValueDisplay,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/Forms/FieldArray.story.tsx

@@ -4,7 +4,6 @@ import { FieldValues } from 'react-hook-form';
 
 import { Form, Input, Button, HorizontalGroup } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
 
 import { FieldArray } from './FieldArray';
@@ -13,7 +12,7 @@ import mdx from './FieldArray.mdx';
 export default {
   title: 'Forms/FieldArray',
   component: FieldArray,
-  decorators: [withStoryContainer, withCenteredStory],
+  decorators: [withStoryContainer],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/Forms/FieldSet.story.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import { Input, Form, FieldSet, Field } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Button } from '../Button';
 
 import { Props } from './FieldSet';
@@ -12,7 +11,6 @@ import mdx from './FieldSet.mdx';
 const meta: Meta<typeof FieldSet> = {
   title: 'Forms/FieldSet',
   component: FieldSet,
-  decorators: [withCenteredStory],
   args: {
     label: 'Default label',
   },

packages/grafana-ui/src/components/Forms/Form.story.tsx

@@ -16,14 +16,13 @@ import {
   RadioButtonGroup,
 } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
 
 import mdx from './Form.mdx';
 
 export default {
   title: 'Forms/Form',
-  decorators: [withStoryContainer, withCenteredStory],
+  decorators: [withStoryContainer],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/Forms/Legacy/Input/Input.internal.story.tsx

@@ -3,14 +3,12 @@ import { zip, fromPairs } from 'lodash';
 import React, { useState } from 'react';
 
 import { EventsWithValidation } from '../../../../utils';
-import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
 
 import { Input } from './Input';
 
 const meta: Meta = {
   title: 'Forms/Legacy/Input',
   component: Input,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['inputRef', 'onBlur', 'onFocus', 'onChange'],

packages/grafana-ui/src/components/Forms/Legacy/Select/Select.internal.story.tsx

@@ -5,14 +5,11 @@ import React, { useCallback } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 
-import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
-
 import { Select, AsyncSelect as AsyncSelectComponent } from './Select';
 
 const meta: Meta<typeof Select> = {
   title: 'Forms/Legacy/Select',
   component: Select,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: [

packages/grafana-ui/src/components/Graph/GraphWithLegend.internal.story.tsx

@@ -4,14 +4,11 @@ import React from 'react';
 import { GraphSeriesXY, FieldType, dateTime, FieldColorModeId } from '@grafana/data';
 import { LegendDisplayMode } from '@grafana/schema';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { GraphWithLegend, GraphWithLegendProps } from './GraphWithLegend';
 
 export default {
   title: 'Visualizations/Graph/GraphWithLegend',
   component: GraphWithLegend,
-  decorator: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['className', 'ariaLabel', 'legendDisplayMode', 'series'],

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

@@ -7,14 +7,12 @@ import { Input, Field, Icon } from '@grafana/ui';
 
 import { useTheme2 } from '../../themes';
 import { getAvailableIcons } from '../../types';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Icon.mdx';
 
 const meta: Meta<typeof Icon> = {
   title: 'Docs overview/Icon',
   component: Icon,
-  decorators: [withCenteredStory],
   parameters: {
     options: {
       showPanel: false,

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

@@ -4,7 +4,6 @@ import React from 'react';
 
 import { useTheme2 } from '../../themes';
 import { IconSize, IconName } from '../../types';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
 
 import { BasePropsWithTooltip, IconButton, IconButtonVariant, Props as IconButtonProps } from './IconButton';
@@ -20,7 +19,6 @@ const additionalExcludes = ['size', 'name', 'variant', 'iconType'];
 const meta: Meta<typeof IconButton> = {
   title: 'Buttons/IconButton',
   component: IconButton,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.internal.story.tsx

@@ -1,14 +1,11 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { InfoTooltip } from './InfoTooltip';
 
 const meta: Meta<typeof InfoTooltip> = {
   title: 'Overlays/TooltipInternal',
   component: InfoTooltip,
-  decorators: [withCenteredStory],
 };
 
 export const basic: StoryFn<typeof InfoTooltip> = () => <InfoTooltip>This is the content of the tooltip</InfoTooltip>;

packages/grafana-ui/src/components/InlineToast/InlineToast.internal.story.tsx

@@ -1,7 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import React, { useState } from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { ClipboardButton } from '../ClipboardButton/ClipboardButton';
 import { Input } from '../Input/Input';
 
@@ -11,7 +10,6 @@ import mdx from './InlineToast.mdx';
 const story: Meta = {
   title: 'InlineToast',
   component: InlineToastImpl,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import { Button, AutoSizeInput } from '@grafana/ui';
 
 import { iconOptions } from '../../utils/storybook/icons';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './AutoSizeInput.mdx';
 import { parseAccessory } from './storyUtils';
@@ -22,7 +21,6 @@ const prefixSuffixOpts = {
 const meta: Meta = {
   title: 'Forms/Input/AutoSizeInput',
   component: AutoSizeInput,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -5,7 +5,6 @@ import { KeyValue } from '@grafana/data';
 import { Field, Button, Input } from '@grafana/ui';
 
 import { getAvailableIcons } from '../../types';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Input.mdx';
 import { parseAccessory } from './storyUtils';
@@ -24,7 +23,6 @@ const prefixSuffixOpts = {
 const meta: Meta = {
   title: 'Forms/Input',
   component: Input,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -3,8 +3,6 @@ import React, { useMemo } from 'react';
 
 import { InteractiveTable, Column, CellProps, LinkButton } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { InteractiveTableHeaderTooltip } from './InteractiveTable';
 import mdx from './InteractiveTable.mdx';
 
@@ -13,7 +11,6 @@ const EXCLUDED_PROPS = ['className', 'renderExpandedRow', 'getRowId'];
 const meta: Meta<typeof InteractiveTable> = {
   title: 'Experimental/InteractiveTable',
   component: InteractiveTable,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -3,7 +3,6 @@ import React from 'react';
 
 import { Button, VerticalGroup, HorizontalGroup } from '@grafana/ui';
 
-import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
 
 import { Layout, LayoutProps } from './Layout';
@@ -12,7 +11,7 @@ import mdx from './Layout.mdx';
 export default {
   title: 'Layout/Groups',
   component: Layout,
-  decorators: [withStoryContainer, withCenteredStory, withHorizontallyCenteredStory],
+  decorators: [withStoryContainer],
   // SB7 has broken subcomponent types due to dropping support for the feature
   // https://github.com/storybookjs/storybook/issues/20782
   // @ts-ignore

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

@@ -6,14 +6,12 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { LoadingBar, LoadingBarProps, useStyles2 } from '@grafana/ui';
 
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './LoadingBar.mdx';
 
 const meta: Meta<typeof LoadingBar> = {
   title: 'General/LoadingBar',
   component: LoadingBar,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {},
     docs: {

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

@@ -1,15 +1,12 @@
 import { StoryFn, Meta } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { LoadingPlaceholder, LoadingPlaceholderProps } from './LoadingPlaceholder';
 import mdx from './LoadingPlaceholder.mdx';
 
 const meta: Meta<typeof LoadingPlaceholder> = {
   title: 'General/LoadingPlaceholder',
   component: LoadingPlaceholder,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -6,14 +6,12 @@ import React, { useState } from 'react';
 import { Button, Modal, ModalTabsHeader, TabContent } from '@grafana/ui';
 
 import { getAvailableIcons } from '../../types';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Modal.mdx';
 
 const meta: Meta = {
   title: 'Overlays/Modal',
   component: Modal,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/Monaco/CodeEditor.internal.story.tsx

@@ -2,15 +2,12 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { CodeEditor } from './CodeEditor';
 import mdx from './CodeEditor.mdx';
 
 const meta: Meta<typeof CodeEditor> = {
   title: 'CodeEditor',
   component: CodeEditor,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 import { ToolbarButton, VerticalGroup } from '@grafana/ui';
 
 import { StoryExample } from '../../utils/storybook/StoryExample';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { IconButton } from '../IconButton/IconButton';
 
 import { PageToolbar } from './PageToolbar';
@@ -13,7 +12,6 @@ import { PageToolbar } from './PageToolbar';
 const meta: Meta<typeof PageToolbar> = {
   title: 'Layout/PageToolbar',
   component: PageToolbar,
-  decorators: [withCenteredStory],
   parameters: {},
 };
 

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

@@ -3,14 +3,11 @@ import React, { useState } from 'react';
 
 import { Pagination } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import mdx from './Pagination.mdx';
 
 const meta: Meta<typeof Pagination> = {
   title: 'Buttons/Pagination',
   component: Pagination,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -8,7 +8,6 @@ import { LoadingState } from '@grafana/data';
 import { Button, Icon, PanelChrome, PanelChromeProps, RadioButtonGroup } from '@grafana/ui';
 
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { HorizontalGroup } from '../Layout/Layout';
 import { Menu } from '../Menu/Menu';
 
@@ -20,7 +19,6 @@ const PANEL_HEIGHT = 150;
 const meta: Meta<typeof PanelChrome> = {
   title: 'Visualizations/PanelChrome',
   component: PanelChrome,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['children'],

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

@@ -1,15 +1,12 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { PanelContainer } from './PanelContainer';
 import mdx from './PanelContainer.mdx';
 
 const meta: Meta<typeof PanelContainer> = {
   title: 'General/PanelContainer',
   component: PanelContainer,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -4,13 +4,10 @@ import React from 'react';
 import { PluginSignatureStatus } from '@grafana/data';
 import { PluginSignatureBadge } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import mdx from './PluginSignatureBadge.mdx';
 
 const meta: Meta<typeof PluginSignatureBadge> = {
   title: 'Data Display/PluginSignatureBadge',
-  decorators: [withCenteredStory],
   component: PluginSignatureBadge,
   argTypes: {
     status: {

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

@@ -2,14 +2,12 @@ import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { TypeaheadInput } from '../../types';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import { QueryField, QueryFieldProps } from './QueryField';
 
 const meta: Meta<typeof QueryField> = {
   title: 'Data Source/QueryField',
   component: QueryField,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: [

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

@@ -5,14 +5,11 @@ import React from 'react';
 
 import { RefreshPicker } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import mdx from './RefreshPicker.mdx';
 
 const meta: Meta<typeof RefreshPicker> = {
   title: 'Pickers and Editors/RefreshPicker',
   component: RefreshPicker,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/SecretFormField/SecretFormField.internal.story.tsx

@@ -3,14 +3,11 @@ import { useArgs } from '@storybook/client-api';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { SecretFormField } from './SecretFormField';
 
 const meta: Meta<typeof SecretFormField> = {
   title: 'Forms/SecretFormField',
   component: SecretFormField,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['onChange', 'onReset'],

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

@@ -1,15 +1,12 @@
 import { StoryFn, Meta } from '@storybook/react';
 import React, { useState, ChangeEvent } from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { SecretInput } from './SecretInput';
 import mdx from './SecretInput.mdx';
 
 const meta: Meta<typeof SecretInput> = {
   title: 'Forms/SecretInput',
   component: SecretInput,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -1,14 +1,11 @@
 import { StoryFn, Meta } from '@storybook/react';
 import React, { useState, ChangeEvent } from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { SecretTextArea } from './SecretTextArea';
 
 const meta: Meta<typeof SecretTextArea> = {
   title: 'Forms/SecretTextArea',
   component: SecretTextArea,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: [

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

@@ -7,7 +7,6 @@ import { SelectableValue, toIconName } from '@grafana/data';
 import { Icon, Select, AsyncSelect, MultiSelect, AsyncMultiSelect } from '@grafana/ui';
 
 import { getAvailableIcons } from '../../types';
-import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Select.mdx';
 import { generateOptions, generateThousandsOfOptions } from './mockOptions';
@@ -16,7 +15,6 @@ import { SelectCommonProps } from './types';
 const meta: Meta = {
   title: 'Forms/Select',
   component: Select,
-  decorators: [withCenteredStory, withHorizontallyCenteredStory],
   // SB7 has broken subcomponent types due to dropping support for the feature
   // https://github.com/storybookjs/storybook/issues/20782
   // @ts-ignore

packages/grafana-ui/src/components/Select/SelectPerf.internal.story.tsx

@@ -4,14 +4,12 @@ import ReactSelect, { createFilter } from 'react-select';
 
 import { SelectableValue } from '@grafana/data';
 
-import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Label } from '../Forms/Label';
 
 import { Select, VirtualizedSelect } from './Select';
 
 const meta: Meta = {
   title: 'Forms/Select (Perf)',
-  decorators: [withCenteredStory, withHorizontallyCenteredStory],
   argTypes: {
     numberOfOptions: {
       defaultValue: 10_000,

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

@@ -3,15 +3,12 @@ import React from 'react';
 
 import { Spinner } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { Props } from './Spinner';
 import mdx from './Spinner.mdx';
 
 const meta: Meta = {
   title: 'Visualizations/Spinner',
   component: Spinner,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/Stack/Stack.internal.story.tsx

@@ -1,15 +1,12 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React, { ReactNode } from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { Stack } from './Stack';
 import mdx from './Stack.mdx';
 
 const meta: Meta<typeof Stack> = {
   title: 'General/Layout/Stack',
   component: Stack,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -4,8 +4,6 @@ import React, { PureComponent } from 'react';
 
 import { StatsPicker } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 interface State {
   stats: string[];
 }
@@ -56,7 +54,6 @@ class WrapperWithState extends PureComponent<any, State> {
 const meta: Meta<typeof StatsPicker> = {
   title: 'Pickers and Editors/StatsPicker',
   component: StatsPicker,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['onChange', 'stats', 'defaultStat', 'className'],

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

@@ -3,7 +3,6 @@ import React, { useState, useCallback } from 'react';
 
 import { InlineField, Switch, InlineSwitch } from '@grafana/ui';
 
-import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Field } from '../Forms/Field';
 import { InlineFieldRow } from '../Forms/InlineFieldRow';
 
@@ -12,7 +11,6 @@ import mdx from './Switch.mdx';
 const meta: Meta<typeof Switch> = {
   title: 'Forms/Switch',
   component: Switch,
-  decorators: [withCenteredStory, withHorizontallyCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -18,7 +18,6 @@ import { Button, Table } from '@grafana/ui';
 import { useTheme2 } from '../../themes';
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
 import { prepDataForStorybook } from '../../utils/storybook/data';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import mdx from './Table.mdx';
 import { FooterItem, TableCellDisplayMode, TableCustomCellOptions } from './types';
@@ -26,7 +25,6 @@ import { FooterItem, TableCellDisplayMode, TableCustomCellOptions } from './type
 const meta: Meta<typeof Table> = {
   title: 'Visualizations/Table',
   component: Table,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['onColumnResize', 'onSortByChange', 'onCellFilterAdded', 'ariaLabel', 'data', 'initialSortBy'],

packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.internal.story.tsx

@@ -4,14 +4,11 @@ import React from 'react';
 
 import { DataFrame } from '@grafana/data';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { TableInputCSV } from './TableInputCSV';
 
 const meta: Meta<typeof TableInputCSV> = {
   title: 'Forms/TableInputCSV',
   component: TableInputCSV,
-  decorators: [withCenteredStory],
 };
 
 export const basic: StoryFn<typeof TableInputCSV> = () => {

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

@@ -4,14 +4,12 @@ import React, { useState } from 'react';
 import { TabsBar, Tab, TabContent, Counter as TabCounter } from '@grafana/ui';
 
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import { CounterProps } from './Counter';
 import mdx from './TabsBar.mdx';
 
 const meta: Meta = {
   title: 'Layout/Tabs',
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/Tags/Tag.story.tsx

@@ -2,15 +2,12 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { Tag } from './Tag';
 import mdx from './Tag.mdx';
 
 const meta: Meta<typeof Tag> = {
   title: 'Forms/Tags/Tag',
   component: Tag,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/Tags/TagList.story.tsx

@@ -2,15 +2,12 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { TagList } from './TagList';
 import mdx from './TagList.mdx';
 
 const meta: Meta<typeof TagList> = {
   title: 'Forms/Tags/TagList',
   component: TagList,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -2,7 +2,6 @@ import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { StoryExample } from '../../utils/storybook/StoryExample';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { VerticalGroup } from '../Layout/Layout';
 
 import { TagsInput } from './TagsInput';
@@ -11,7 +10,6 @@ import mdx from './TagsInput.mdx';
 const meta: Meta<typeof TagsInput> = {
   title: 'Forms/TagsInput',
   component: TagsInput,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -3,14 +3,11 @@ import React from 'react';
 
 import { TextArea } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import mdx from './TextArea.mdx';
 
 const meta: Meta = {
   title: 'Forms/TextArea',
   component: TextArea,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['cols'],

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

@@ -1,7 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Button } from '../Button';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
 import mdx from '../Toggletip/Toggletip.mdx';
@@ -11,7 +10,6 @@ import { Toggletip } from './Toggletip';
 const meta: Meta<typeof Toggletip> = {
   title: 'Overlays/Toggletip',
   component: Toggletip,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -2,7 +2,6 @@ import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { ButtonGroup } from '../Button';
 import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
 
@@ -13,7 +12,6 @@ import { ToolbarButtonRow } from './ToolbarButtonRow';
 const meta: Meta<typeof ToolbarButton> = {
   title: 'Buttons/ToolbarButton',
   component: ToolbarButton,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.story.tsx

@@ -2,7 +2,6 @@ import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarButtonRow } from './ToolbarButtonRow';
@@ -11,7 +10,6 @@ import mdx from './ToolbarButtonRow.mdx';
 const meta: Meta<typeof ToolbarButtonRow> = {
   title: 'Buttons/ToolbarButton/ToolbarButtonRow',
   component: ToolbarButtonRow,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -1,7 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Button } from '../Button';
 import mdx from '../Tooltip/Tooltip.mdx';
 
@@ -10,7 +9,6 @@ import { Tooltip } from './Tooltip';
 const meta: Meta<typeof Tooltip> = {
   title: 'Overlays/Tooltip',
   component: Tooltip,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -2,15 +2,12 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { UnitPicker, UnitPickerProps } from './UnitPicker';
 import mdx from './UnitPicker.mdx';
 
 const meta: Meta<typeof UnitPicker> = {
   title: 'Pickers and Editors/UnitPicker',
   component: UnitPicker,
-  decorators: [withCenteredStory],
   parameters: {
     controls: {
       exclude: ['onChange', 'value'],

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

@@ -4,7 +4,6 @@ import React from 'react';
 import { ValuePicker } from '@grafana/ui';
 
 import { getAvailableIcons } from '../../types';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { generateOptions } from '../Select/mockOptions';
 
 import mdx from './ValuePicker.mdx';
@@ -12,7 +11,6 @@ import mdx from './ValuePicker.mdx';
 const meta: Meta<typeof ValuePicker> = {
   title: 'Pickers and Editors/ValuePicker',
   component: ValuePicker,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,

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

@@ -1,14 +1,11 @@
 import { Meta, Story } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { VizLayout } from './VizLayout';
 
 const meta: Meta = {
   title: 'Visualizations/VizLayout',
   component: VizLayout,
-  decorators: [withCenteredStory],
   parameters: {
     docs: {},
     controls: {

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

@@ -5,14 +5,11 @@ import { DisplayValue, GrafanaTheme2 } from '@grafana/data';
 import { LegendDisplayMode, LegendPlacement } from '@grafana/schema';
 import { useTheme2, VizLegend } from '@grafana/ui';
 
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-
 import { VizLegendItem } from './types';
 
 const meta: Meta = {
   title: 'Visualizations/VizLegend',
   component: VizLegend,
-  decorators: [withCenteredStory],
   args: {
     containerWidth: '100%',
     seriesCount: 5,

packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx

@@ -1,13 +0,0 @@
-import { DecoratorFn } from '@storybook/react';
-
-/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
-export const withNotCenteredStory: DecoratorFn = (story) => story();
-
-/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
-export const withCenteredStory: DecoratorFn = (story) => story();
-
-/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
-export const withHorizontallyCenteredStory: DecoratorFn = (story) => story();
-
-/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
-export const withVerticallyCenteredStory: DecoratorFn = (story) => story();

packages/grafana-ui/src/utils/useDelayedSwitch.internal.story.tsx

@@ -1,12 +1,10 @@
 import { Story } from '@storybook/react';
 import React from 'react';
 
-import { withCenteredStory } from './storybook/withCenteredStory';
 import { useDelayedSwitch } from './useDelayedSwitch';
 
 export default {
   title: 'useDelayedSwitch',
-  decorators: [withCenteredStory],
 };
 
 export const Basic: Story = ({ value, delay, duration }) => {