Skip to content

N
nexpie-grafana-theme
Commit 002ebc9c by Alex Khomenko Committed by GitHub
Options

Storybook: update docs for Layout (#23288) 

* Storybook: expand layout docs

* Search: Ad align prop

* Search: Default align to normal

* Search: Expand docs
parent 5645d74c
Showing with 135 additions and 19 deletions
packages/grafana-ui/src/components/Layout/Layout.mdx 0 → 100644
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} />
packages/grafana-ui/src/components/Layout/Layout.story.tsx
...@@ -4,11 +4,17 @@ import { VerticalGroup, HorizontalGroup, Layout } from './Layout'; ...@@ -4,11 +4,17 @@ import { VerticalGroup, HorizontalGroup, Layout } from './Layout';
import { Button } from '../Button'; import { Button } from '../Button';
import { withStoryContainer } from '../../utils/storybook/withStoryContainer'; import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
import { select } from '@storybook/addon-knobs'; import { select } from '@storybook/addon-knobs';
import mdx from './Layout.mdx';
export default { export default {
title: 'Layout/Groups', title: 'Layout/Groups',
component: Layout, component: Layout,
decorators: [withStoryContainer, withCenteredStory, withHorizontallyCenteredStory], decorators: [withStoryContainer, withCenteredStory, withHorizontallyCenteredStory],
parameters: {
docs: {
page: mdx,
},
},
}; };
const justifyVariants = ['flex-start', 'flex-end', 'space-between']; const justifyVariants = ['flex-start', 'flex-end', 'space-between'];
......
packages/grafana-ui/src/components/Layout/Layout.tsx
...@@ -9,12 +9,14 @@ enum Orientation { ...@@ -9,12 +9,14 @@ enum Orientation {
} }
type Spacing = 'xs' | 'sm' | 'md' | 'lg'; type Spacing = 'xs' | 'sm' | 'md' | 'lg';
type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'center'; type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'center';
type Align = 'normal' | 'flex-start' | 'flex-end' | 'center';
export interface LayoutProps { export interface LayoutProps {
children: React.ReactNode[]; children: React.ReactNode[];
orientation?: Orientation; orientation?: Orientation;
spacing?: Spacing; spacing?: Spacing;
justify?: Justify; justify?: Justify;
align?: Align;
} }
export interface ContainerProps { export interface ContainerProps {
...@@ -27,9 +29,10 @@ export const Layout: React.FC<LayoutProps> = ({ ...@@ -27,9 +29,10 @@ export const Layout: React.FC<LayoutProps> = ({
orientation = Orientation.Horizontal, orientation = Orientation.Horizontal,
spacing = 'sm', spacing = 'sm',
justify = 'flex-start', justify = 'flex-start',
align = 'normal',
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const styles = getStyles(theme, orientation, spacing, justify); const styles = getStyles(theme, orientation, spacing, justify, align);
return ( return (
<div className={styles.layout}> <div className={styles.layout}>
{React.Children.map(children, (child, index) => { {React.Children.map(children, (child, index) => {
...@@ -56,25 +59,28 @@ export const Container: React.FC<ContainerProps> = ({ children, padding, margin ...@@ -56,25 +59,28 @@ export const Container: React.FC<ContainerProps> = ({ children, padding, margin
return <div className={styles.wrapper}>{children}</div>; return <div className={styles.wrapper}>{children}</div>;
}; };
const getStyles = stylesFactory((theme: GrafanaTheme, orientation: Orientation, spacing: Spacing, justify: Justify) => { const getStyles = stylesFactory(
return { (theme: GrafanaTheme, orientation: Orientation, spacing: Spacing, justify: Justify, align) => {
layout: css` return {
display: flex; layout: css`
flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'}; display: flex;
justify-content: ${justify}; flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'};
height: 100%; justify-content: ${justify};
`, align-items: ${align};
buttonWrapper: css` height: 100%;
margin-bottom: ${orientation === Orientation.Horizontal ? 0 : theme.spacing[spacing]}; `,
margin-right: ${orientation === Orientation.Horizontal ? theme.spacing[spacing] : 0}; buttonWrapper: css`
margin-bottom: ${orientation === Orientation.Horizontal ? 0 : theme.spacing[spacing]};
margin-right: ${orientation === Orientation.Horizontal ? theme.spacing[spacing] : 0};
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
margin-right: 0; margin-right: 0;
} }
`, `,
}; };
}); }
);
const getContainerStyles = stylesFactory((theme: GrafanaTheme, padding?: Spacing, margin?: Spacing) => { const getContainerStyles = stylesFactory((theme: GrafanaTheme, padding?: Spacing, margin?: Spacing) => {
const paddingSize = (padding && theme.spacing[padding]) || 0; const paddingSize = (padding && theme.spacing[padding]) || 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment