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: Fix decorator height (#41468)

Browse Source 
* fix(storybook): make sure story background fills available height

* fix(storybook): add decorator to prevent badge filling all available height

* docs(badge): use centered story

* revert(badge): remove obsolete Meta typing
This commit is contained in:
Jack Westbrook 2021-11-10 10:51:10 +01:00 committed by GitHub
parent 8adefa32fd
commit cd5277befd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/.storybook/preview-head.html Normal file
View File

@ -0,0 +1,6 @@
<!-- Make sure iframe dom elements fill all available space for background consistency -->
<style>
#root {
height: 100%;
}
</style>

3
packages/grafana-ui/src/components/Badge/Badge.story.tsx
View File

@ -2,11 +2,12 @@ import React from 'react';
import { Story } from '@storybook/react'; import { Story } from '@storybook/react';
import { Badge, BadgeProps } from '@grafana/ui'; import { Badge, BadgeProps } from '@grafana/ui';
import { iconOptions } from '../../utils/storybook/knobs'; import { iconOptions } from '../../utils/storybook/knobs';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
export default { export default {
title: 'Data Display/Badge', title: 'Data Display/Badge',
component: Badge, component: Badge,
decorators: [], decorators: [withCenteredStory],
parameters: { parameters: {
docs: {}, docs: {},
}, },

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

@ -11,7 +11,7 @@ const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
width: '100%', width: '100%',
padding: '20px', padding: '20px',
display: 'flex', display: 'flex',
minHeight: '80vh', minHeight: '100%',
background: `${theme.colors.background.primary}`, background: `${theme.colors.background.primary}`,
}} }}
> >

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

@ -5,7 +5,7 @@ const RightAlignedStory: React.FunctionComponent<{}> = ({ children }) => {
return ( return (
<div <div
style={{ style={{
height: '100vh ', minHeight: '100%',
display: 'flex', display: 'flex',
alignItems: 'flex-start', alignItems: 'flex-start',
justifyContent: 'flex-end', justifyContent: 'flex-end',

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

@ -21,7 +21,7 @@ const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassTheme
width: '100%', width: '100%',
padding: '20px', padding: '20px',
display: 'flex', display: 'flex',
minHeight: '80vh', minHeight: '100%',
background: `${theme.colors.background.primary}`, background: `${theme.colors.background.primary}`,
}} }}
> >