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: update docs for Layout (#23288)

Browse Source 
* Storybook: expand layout docs

* Search: Ad align prop

* Search: Default align to normal

* Search: Expand docs
This commit is contained in:
Alex Khomenko 2020-04-03 14:13:54 +03:00 committed by GitHub
parent 5645d74cbc
commit 002ebc9cbb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 135 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
packages/grafana-ui/src/components/Layout/Layout.mdx Normal file
View File

@ -0,0 +1,104 @@
import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Layout, HorizontalGroup, VerticalGroup } from './Layout';
import { Button } from '../Button';
import { Select } from '../index';
# Layout
## Generic
Used for aligning items in specified orientation. Useful for multiple elements that need to be arranged in rows or columns.
Expects multiple elements as `children` prop. This is the base for more specialised `Horizontal-` and `VerticalGroup` components.
### Props
<Props of={Layout} />
## Horizontal
Used for horizontally aligning several elements (e.g. Button, Select) with a predefined spacing between them.
<Preview>
<HorizontalGroup>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</HorizontalGroup>
</Preview>
<Preview>
<HorizontalGroup>
<Select
size='sm'
onChange={() => {}}
options={[
{ value: 1, label: 'Option 1' },
{ value: 2, label: 'Option 2' },
]}
/>
<Select
size='sm'
onChange={() => {}}
options={[
{ value: 1, label: 'Option 1' },
{ value: 2, label: 'Option 2' },
]}
/>
<Select
size='sm'
onChange={() => {}}
options={[
{ value: 1, label: 'Option 1' },
{ value: 2, label: 'Option 2' },
]}
/>
</HorizontalGroup>
</Preview>
### Props
<Props of={HorizontalGroup} />
## Vertical
Used for vertically aligning several elements (e.g. Button, Select) with a predefined spacing between them.
<Preview>
<VerticalGroup>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</VerticalGroup>
</Preview>
<Preview>
<VerticalGroup justify='center'>
<Select
size='sm'
onChange={() => {}}
options={[
{ value: 1, label: 'Option 1' },
{ value: 2, label: 'Option 2' },
]}
/>
<Select
size='sm'
onChange={() => {}}
options={[
{ value: 1, label: 'Option 1' },
{ value: 2, label: 'Option 2' },
]}
/>
<Select
size='sm'
onChange={() => {}}
options={[
{ value: 1, label: 'Option 1' },
{ value: 2, label: 'Option 2' },
]}
/>
</VerticalGroup>
</Preview>
### Props
<Props of={VerticalGroup} />

6
packages/grafana-ui/src/components/Layout/Layout.story.tsx
View File

@ -4,11 +4,17 @@ import { VerticalGroup, HorizontalGroup, Layout } from './Layout';
import { Button } from '../Button';
import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
import { select } from '@storybook/addon-knobs';
import mdx from './Layout.mdx';
export default {
title: 'Layout/Groups',
component: Layout,
decorators: [withStoryContainer, withCenteredStory, withHorizontallyCenteredStory],
parameters: {
docs: {
page: mdx,
},
},
};
const justifyVariants = ['flex-start', 'flex-end', 'space-between'];

44
packages/grafana-ui/src/components/Layout/Layout.tsx
View File

@ -9,12 +9,14 @@ enum Orientation {
}
type Spacing = 'xs' | 'sm' | 'md' | 'lg';
type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'center';
type Align = 'normal' | 'flex-start' | 'flex-end' | 'center';
export interface LayoutProps {
children: React.ReactNode[];
orientation?: Orientation;
spacing?: Spacing;
justify?: Justify;
align?: Align;
}
export interface ContainerProps {
@ -27,9 +29,10 @@ export const Layout: React.FC<LayoutProps> = ({
orientation = Orientation.Horizontal,
spacing = 'sm',
justify = 'flex-start',
align = 'normal',
}) => {
const theme = useTheme();
const styles = getStyles(theme, orientation, spacing, justify);
const styles = getStyles(theme, orientation, spacing, justify, align);
return (
<div className={styles.layout}>
{React.Children.map(children, (child, index) => {
@ -56,25 +59,28 @@ export const Container: React.FC<ContainerProps> = ({ children, padding, margin
return <div className={styles.wrapper}>{children}</div>;
};
const getStyles = stylesFactory((theme: GrafanaTheme, orientation: Orientation, spacing: Spacing, justify: Justify) => {
return {
layout: css`
display: flex;
flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'};
justify-content: ${justify};
height: 100%;
`,
buttonWrapper: css`
margin-bottom: ${orientation === Orientation.Horizontal ? 0 : theme.spacing[spacing]};
margin-right: ${orientation === Orientation.Horizontal ? theme.spacing[spacing] : 0};
const getStyles = stylesFactory(
(theme: GrafanaTheme, orientation: Orientation, spacing: Spacing, justify: Justify, align) => {
return {
layout: css`
display: flex;
flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'};
justify-content: ${justify};
align-items: ${align};
height: 100%;
`,
buttonWrapper: css`
margin-bottom: ${orientation === Orientation.Horizontal ? 0 : theme.spacing[spacing]};
margin-right: ${orientation === Orientation.Horizontal ? theme.spacing[spacing] : 0};
&:last-child {
margin-bottom: 0;
margin-right: 0;
}
`,
};
});
&:last-child {
margin-bottom: 0;
margin-right: 0;
}
`,
};
}
);
const getContainerStyles = stylesFactory((theme: GrafanaTheme, padding?: Spacing, margin?: Spacing) => {
const paddingSize = (padding && theme.spacing[padding]) || 0;