Storybook: Remove flexbox from story container (#75115)

* Storybook: Remove flexbox from story container

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

Co-authored-by: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>

---------

Co-authored-by: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>

packages/grafana-ui/.storybook/storybookTheme.ts

@@ -13,7 +13,7 @@ const createStorybookTheme = (theme: GrafanaTheme2) => {
     appBg: theme.colors.background.canvas,
     appContentBg: theme.colors.background.primary,
     appBorderColor: theme.colors.border.medium,
-    appBorderRadius: parseInt(theme.shape.borderRadius(1), 10),
+    appBorderRadius: 0,
 
     // Typography
     fontBase: theme.typography.fontFamily,

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

@@ -33,7 +33,7 @@ export const InlineToast: Story<InlineToastProps> = (args) => {
   const [el, setEl] = useState<null | HTMLInputElement>(null);
 
   return (
-    <div>
+    <div style={{ maxWidth: 500, width: `calc(100% - 100px)` }}>
       <InlineToastImpl {...args} referenceElement={el}>
         Saved
       </InlineToastImpl>

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

@@ -16,11 +16,10 @@ const meta: Meta<typeof CodeEditor> = {
       page: mdx,
     },
     controls: {
-      exclude: ['monacoOptions', 'onEditorDidMount', 'onBlur', 'onSave', 'getSuggestions', 'showLineNumbers'],
+      exclude: ['width', 'monacoOptions', 'onEditorDidMount', 'onBlur', 'onSave', 'getSuggestions', 'showLineNumbers'],
     },
   },
   argTypes: {
-    width: { control: { type: 'range', min: 100, max: 500, step: 10 } },
     height: { control: { type: 'range', min: 100, max: 800, step: 10 } },
     language: { control: { type: 'select' }, options: ['sql', 'json'] },
   },
@@ -29,7 +28,7 @@ const meta: Meta<typeof CodeEditor> = {
 export const Basic: StoryFn<typeof CodeEditor> = (args) => {
   return (
     <CodeEditor
-      width={args.width}
+      width="100%"
       height={args.height}
       value={args.value}
       language={args.language}

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

@@ -1,34 +1,13 @@
 import { DecoratorFn } from '@storybook/react';
-import React from 'react';
 
-interface CenteredStoryProps {
+/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
-  children: React.ReactNode;
+export const withNotCenteredStory: DecoratorFn = (story) => story();
-  horizontal?: boolean;
-  vertical?: boolean;
-}
-const CenteredStory = ({ horizontal, vertical, children }: CenteredStoryProps) => {
-  return (
-    <div
-      style={{
-        minHeight: '100%',
-        width: '100%',
-        display: 'flex',
-        alignItems: vertical ? 'center' : 'flex-start',
-        justifyContent: horizontal ? 'center' : 'flex-start',
-      }}
-    >
-      {children}
-    </div>
-  );
-};
 
-export const withNotCenteredStory: DecoratorFn = (story) => <CenteredStory>{story()}</CenteredStory>;
+/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
-export const withCenteredStory: DecoratorFn = (story) => (
+export const withCenteredStory: DecoratorFn = (story) => story();
-  <CenteredStory horizontal vertical>
+
-    {story()}
+/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
-  </CenteredStory>
+export const withHorizontallyCenteredStory: DecoratorFn = (story) => story();
-);
+
-export const withHorizontallyCenteredStory: DecoratorFn = (story) => (
+/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
-  <CenteredStory horizontal>{story()}</CenteredStory>
+export const withVerticallyCenteredStory: DecoratorFn = (story) => story();
-);
-export const withVerticallyCenteredStory: DecoratorFn = (story) => <CenteredStory vertical>{story()}</CenteredStory>;

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

@@ -1,25 +0,0 @@
-import { DecoratorFn } from '@storybook/react';
-import React from 'react';
-
-import { GlobalStyles, useTheme2 } from '../../themes';
-
-const PaddedStory = ({ children }: React.PropsWithChildren<{}>) => {
-  const theme = useTheme2();
-
-  return (
-    <div
-      style={{
-        width: '100%',
-        padding: '20px',
-        display: 'flex',
-        minHeight: '100%',
-        background: `${theme.colors.background.primary}`,
-      }}
-    >
-      <GlobalStyles />
-      {children}
-    </div>
-  );
-};
-
-export const withPaddedStory: DecoratorFn = (story) => <PaddedStory>{story()}</PaddedStory>;

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

@@ -1,20 +0,0 @@
-import { DecoratorFn } from '@storybook/react';
-import React from 'react';
-
-const RightAlignedStory = ({ children }: React.PropsWithChildren<{}>) => {
-  return (
-    <div
-      style={{
-        minHeight: '100%',
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'flex-end',
-        marginRight: '20px',
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-export const withRightAlignedStory: DecoratorFn = (story) => <RightAlignedStory>{story()}</RightAlignedStory>;

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

@@ -16,18 +16,20 @@ const ThemeableStory = ({
 
   handleSassThemeChange(theme);
 
-  const css = `#storybook-root {
+  const css = `
-    width: 100%;
+  #storybook-root {
-    padding: 20px;
+    padding: ${theme.spacing(2)};
-    display: flex;
+  }
-    height: 100%;
+
-    min-height: 100%;
+  body {
     background: ${theme.colors.background.primary};
-  }`;
+  }
+  `;
 
   return (
     <ThemeContext.Provider value={theme}>
       <GlobalStyles />
+
       <style>{css}</style>
       {children}
     </ThemeContext.Provider>