mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Grafana UI: Create custom Flex Component (#73226)
This commit is contained in:
RoxanaAnamariaTurc
GitHub
parent
e3c65d355f
commit
cb6239d913
178
packages/grafana-ui/src/components/Flex/Flex.internal.story.tsx
Normal file
178
packages/grafana-ui/src/components/Flex/Flex.internal.story.tsx
Normal file
@ -0,0 +1,178 @@
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { ThemeSpacingTokens } from '@grafana/data';
|
||||
|
||||
import { useTheme2 } from '../../themes';
|
||||
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
|
||||
import { Flex, JustifyContent, Wrap, Direction } from './Flex';
|
||||
import mdx from './Flex.mdx';
|
||||
|
||||
const Item = ({ color, text, height }: { color: string; text?: string | number; height?: string }) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '5em',
|
||||
height: height,
|
||||
backgroundColor: color,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{text && <h3 style={{ color: 'black' }}>{text}</h3>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const meta: Meta<typeof Flex> = {
|
||||
title: 'General/Layout/Flex',
|
||||
component: Flex,
|
||||
decorators: [withCenteredStory],
|
||||
parameters: {
|
||||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic: StoryFn<typeof Flex> = ({ direction, wrap, alignItems, justifyContent, gap }) => {
|
||||
const theme = useTheme2();
|
||||
return (
|
||||
<div style={{ width: '600px', height: '600px', border: '1px solid grey' }}>
|
||||
<Flex direction={direction} wrap={wrap} alignItems={alignItems} justifyContent={justifyContent} gap={gap}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Item key={i} color={theme.colors.warning.main} text={i + 1} />
|
||||
))}
|
||||
</Flex>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const AlignItemsExamples: StoryFn<typeof Flex> = () => {
|
||||
const theme = useTheme2();
|
||||
|
||||
return (
|
||||
<div style={{ width: '600px' }}>
|
||||
<p>Align items flex-start</p>
|
||||
<Flex direction="row" wrap="wrap" alignItems="flex-start" justifyContent="start" gap={2}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Item key={i} color={theme.colors.error.main} text={i + 1} />
|
||||
))}
|
||||
</Flex>
|
||||
<p>Align items flex-end</p>
|
||||
<Flex direction="row" wrap="wrap" alignItems="flex-end" justifyContent="end" gap={2}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Item key={i} color={theme.colors.error.main} text={i + 1} />
|
||||
))}
|
||||
</Flex>
|
||||
<p>Align items baseline</p>
|
||||
<Flex direction="row" wrap="nowrap" alignItems="baseline" justifyContent="center" gap={2}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Item key={i} color={theme.colors.error.main} text={i + 1} />
|
||||
))}
|
||||
</Flex>
|
||||
<p>Align items center</p>
|
||||
<Flex direction="row" wrap="wrap" alignItems="center" justifyContent="center" gap={2}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Item key={i} color={theme.colors.error.main} text={i + 1} />
|
||||
))}
|
||||
</Flex>
|
||||
<p>Align items stretch</p>
|
||||
<Flex direction="row" wrap="wrap" alignItems="stretch" justifyContent="center" gap={2}>
|
||||
<Item color={theme.colors.error.main} height="10em" />
|
||||
<Item color={theme.colors.error.main} />
|
||||
<Item color={theme.colors.error.main} height="3em" />
|
||||
<Item color={theme.colors.error.main} />
|
||||
<Item color={theme.colors.error.main} />
|
||||
</Flex>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const JustifyContentExamples: StoryFn<typeof Flex> = () => {
|
||||
const theme = useTheme2();
|
||||
const justifyContentOptions: JustifyContent[] = [
|
||||
'space-between',
|
||||
'space-around',
|
||||
'space-evenly',
|
||||
'flex-start',
|
||||
'flex-end',
|
||||
'center',
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ width: '600px' }}>
|
||||
{justifyContentOptions.map((justifyContent) => (
|
||||
<>
|
||||
<p>Justify Content {justifyContent}</p>
|
||||
<Flex direction="row" wrap="wrap" alignItems="center" justifyContent={justifyContent} gap={2}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Item key={i} color={theme.colors.warning.main} text={i + 1} />
|
||||
))}
|
||||
</Flex>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const GapExamples: StoryFn<typeof Flex> = () => {
|
||||
const theme = useTheme2();
|
||||
const gapOptions: ThemeSpacingTokens[] = [2, 8, 10];
|
||||
return (
|
||||
<div style={{ width: '800px' }}>
|
||||
{gapOptions.map((gap) => (
|
||||
<>
|
||||
<p>Gap with spacingToken set to {gap}</p>
|
||||
<Flex direction="row" wrap="wrap" alignItems="flex-start" justifyContent="flex-start" gap={gap}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Item key={i} color={theme.colors.error.main} text={i + 1} />
|
||||
))}
|
||||
</Flex>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const WrapExamples: StoryFn<typeof Flex> = () => {
|
||||
const theme = useTheme2();
|
||||
const wrapOptions: Wrap[] = ['nowrap', 'wrap', 'wrap-reverse'];
|
||||
return (
|
||||
<div style={{ width: '600px' }}>
|
||||
{wrapOptions.map((wrap) => (
|
||||
<>
|
||||
<p>Wrap examples with {wrap} and gap set to spacingToken 2 (16px)</p>
|
||||
<Flex direction="row" wrap={wrap} alignItems="center" justifyContent="center" gap={2}>
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<Item key={i} color={theme.colors.warning.main} text={i + 1} />
|
||||
))}
|
||||
</Flex>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DirectionExamples: StoryFn<typeof Flex> = () => {
|
||||
const theme = useTheme2();
|
||||
const directionOptions: Direction[] = ['row', 'row-reverse', 'column', 'column-reverse'];
|
||||
return (
|
||||
<div style={{ width: '600px' }}>
|
||||
{directionOptions.map((direction) => (
|
||||
<>
|
||||
<p>Direction {direction}</p>
|
||||
<Flex direction={direction} wrap="wrap" alignItems="center" justifyContent="center" gap={2}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Item key={i} color={theme.colors.warning.main} text={i + 1} />
|
||||
))}
|
||||
</Flex>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default meta;
|
||||
138
packages/grafana-ui/src/components/Flex/Flex.mdx
Normal file
138
packages/grafana-ui/src/components/Flex/Flex.mdx
Normal file
@ -0,0 +1,138 @@
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Flex } from './Flex';
|
||||
|
||||
<Meta title="MDX|Flex" component={Flex} />
|
||||
|
||||
# Flex
|
||||
|
||||
The Flex Component aims at providing a more efficient way to lay out, align and distribute space among items in a container and
|
||||
the decision to create it is to ensure consistency in design across Grafana.
|
||||
|
||||
### Usage
|
||||
|
||||
#### When to use
|
||||
|
||||
Use when in need to align components and small parts of the application. Use as parent container to wrap elements that you wish to align in a certain way.
|
||||
|
||||
Also:
|
||||
|
||||
* when working with one dimension layout
|
||||
* to display the direction of the elements
|
||||
* to set the elements to wrap
|
||||
* to align items (vertically or horizontally)
|
||||
|
||||
#### When not to use
|
||||
|
||||
When you need to lay out bigger parts of the application or when you want to create page lay out.
|
||||
|
||||
Also:
|
||||
|
||||
* for complex grid layouts with various rows and columns
|
||||
* bidirectional layouts
|
||||
* complex nesting
|
||||
* equal height columns
|
||||
|
||||
### Variants
|
||||
|
||||
Flex component has few variants that can be used based on the desired alignment you need for your case.
|
||||
|
||||
Some examples of how to use the Flex component can be seen below:
|
||||
|
||||
- AlignItems stretch
|
||||
|
||||
```ts
|
||||
import { Flex } from '@grafana/ui'
|
||||
import { useTheme2 } from '../../themes';
|
||||
|
||||
const theme = useTheme2();
|
||||
|
||||
<header>
|
||||
<h1>Using Flex component to align-items stretch and justify-content to be center</h1>
|
||||
</header>
|
||||
<Flex direction="row" wrap="wrap" alignItems="stretch" justifyContent="center" gap={2}>
|
||||
<Item color={theme.colors.warning.main} height="10em" />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} height="3em" />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
</Flex>
|
||||
```
|
||||
|
||||
- Wrap items wrap-reverse
|
||||
|
||||
```ts
|
||||
import { Flex } from '@grafana/ui'
|
||||
import { useTheme2 } from '../../themes';
|
||||
|
||||
const theme = useTheme2();
|
||||
|
||||
<header>
|
||||
<h1>Using Flex component to align-items with wrap-reverse property</h1>
|
||||
</header>
|
||||
<Flex direction="row" wrap="wrap-reverse" alignItems="center" justifyContent="center" gap={4}>
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
</Flex>
|
||||
```
|
||||
|
||||
- JustifyContent flex-start
|
||||
|
||||
```ts
|
||||
import { Flex } from '@grafana/ui'
|
||||
import { useTheme2 } from '../../themes';
|
||||
|
||||
const theme = useTheme2();
|
||||
|
||||
<header>
|
||||
<h1>Using Flex component to align-items with justify-content property</h1>
|
||||
</header>
|
||||
<Flex direction="row" wrap="wrap" alignItems="center" justifyContent="flex-start" gap={2}>
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
</Flex>
|
||||
```
|
||||
|
||||
- Gap of 16px using the ThemeSpacingTokens
|
||||
|
||||
```ts
|
||||
import { Flex } from '@grafana/ui'
|
||||
import { useTheme2 } from '../../themes';
|
||||
|
||||
const theme = useTheme2();
|
||||
|
||||
<header>
|
||||
<h1>Using Flex component to align-items with gap of 16px</h1>
|
||||
</header>
|
||||
<Flex direction="row" wrap="wrap" alignItems="center" justifyContent="center" gap={2}>
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
</Flex>
|
||||
```
|
||||
|
||||
- Direction column
|
||||
|
||||
```ts
|
||||
import { Flex } from '@grafana/ui'
|
||||
import { useTheme2 } from '../../themes';
|
||||
|
||||
const theme = useTheme2();
|
||||
|
||||
<header>
|
||||
<h1>Using Flex component to align-items with direction column</h1>
|
||||
</header>
|
||||
<Flex direction="column" wrap="wrap" alignItems="center" justifyContent="center" gap={2}>
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
<Item color={theme.colors.warning.main} />
|
||||
</Flex>
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
<ArgTypes of={Flex} />
|
||||
75
packages/grafana-ui/src/components/Flex/Flex.tsx
Normal file
75
packages/grafana-ui/src/components/Flex/Flex.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { css } from '@emotion/css';
|
||||
import React, { useCallback } from 'react';
|
||||
|
||||
import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';
|
||||
|
||||
import { useStyles2 } from '../../themes';
|
||||
|
||||
export type AlignItems =
|
||||
| 'stretch'
|
||||
| 'flex-start'
|
||||
| 'flex-end'
|
||||
| 'center'
|
||||
| 'baseline'
|
||||
| 'start'
|
||||
| 'end'
|
||||
| 'self-start'
|
||||
| 'self-end';
|
||||
|
||||
export type JustifyContent =
|
||||
| 'flex-start'
|
||||
| 'flex-end'
|
||||
| 'center'
|
||||
| 'space-between'
|
||||
| 'space-around'
|
||||
| 'space-evenly'
|
||||
| 'start'
|
||||
| 'end'
|
||||
| 'left'
|
||||
| 'right';
|
||||
|
||||
export type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
||||
|
||||
export type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
|
||||
|
||||
interface FlexProps {
|
||||
gap?: ThemeSpacingTokens;
|
||||
alignItems?: AlignItems;
|
||||
justifyContent?: JustifyContent;
|
||||
direction?: Direction;
|
||||
wrap?: Wrap;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Flex = ({ gap = 1, alignItems, justifyContent, direction, wrap, children }: FlexProps) => {
|
||||
const styles = useStyles2(
|
||||
useCallback(
|
||||
(theme) => getStyles(theme, gap, alignItems, justifyContent, direction, wrap),
|
||||
[gap, alignItems, justifyContent, direction, wrap]
|
||||
)
|
||||
);
|
||||
|
||||
return <div className={styles.flex}>{children}</div>;
|
||||
};
|
||||
|
||||
Flex.displayName = 'Flex';
|
||||
|
||||
const getStyles = (
|
||||
theme: GrafanaTheme2,
|
||||
gap: ThemeSpacingTokens,
|
||||
alignItems: FlexProps['alignItems'],
|
||||
justifyContent: FlexProps['justifyContent'],
|
||||
direction: FlexProps['direction'],
|
||||
wrap: FlexProps['wrap']
|
||||
) => {
|
||||
return {
|
||||
flex: css({
|
||||
display: 'flex',
|
||||
flexDirection: direction,
|
||||
flexWrap: wrap,
|
||||
alignItems: alignItems,
|
||||
justifyContent: justifyContent,
|
||||
gap: theme.spacing(gap),
|
||||
}),
|
||||
};
|
||||
};
|
||||
@ -9,4 +9,4 @@
|
||||
* be subject to the standard policies
|
||||
*/
|
||||
|
||||
export {};
|
||||
export * from './components/Flex/Flex';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user