IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Storybook: Remove flexbox from story container (#75115)

Browse Source 
* 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>
This commit is contained in:
Josh Hunt 2023-09-20 09:58:05 +00:00 committed by GitHub
parent 157859aede
commit 8a33f68ba7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 23 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/.storybook/storybookTheme.ts
View File

@ -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,

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

@ -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>

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

@ -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}

41
packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx
View File

@ -1,34 +1,13 @@
import { DecoratorFn } from '@storybook/react';
import React from 'react';
interface CenteredStoryProps {
children: React.ReactNode;
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>
);
};
/** @deprecated Stories should not be centered on the page. This decorator now does nothing */
export const withNotCenteredStory: DecoratorFn = (story) => story();
export const withNotCenteredStory: DecoratorFn = (story) => <CenteredStory>{story()}</CenteredStory>;
export const withCenteredStory: DecoratorFn = (story) => (
<CenteredStory horizontal vertical>
{story()}
</CenteredStory>
);
export const withHorizontallyCenteredStory: DecoratorFn = (story) => (
<CenteredStory horizontal>{story()}</CenteredStory>
);
export const withVerticallyCenteredStory: DecoratorFn = (story) => <CenteredStory vertical>{story()}</CenteredStory>;
/** @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();

25
packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
View File

@ -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>;

20
packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx
View File

@ -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>;

16
packages/grafana-ui/src/utils/storybook/withTheme.tsx
View File

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