IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 06:56:07 -06:00
Code Issues Packages Projects Releases Wiki Activity

GrafanaUI: Allow wrap prop on Stack to be a boolean (#90145)

Browse Source
This commit is contained in:
Josh Hunt 2024-07-08 11:50:51 +01:00 committed by GitHub
parent 2a80ec9104
commit 06de37e6cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,13 +80,13 @@ export const AlignItemsExamples: StoryFn<typeof Stack> = () => {
return (
<div style={{ width: '600px' }}>
<p>Align items flex-start</p>
<Stack direction="row" wrap="wrap" alignItems="flex-start" justifyContent="start" gap={2}>
<Stack direction="row" 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} />
))}
</Stack>
<p>Align items flex-end</p>
<Stack direction="row" wrap="wrap" alignItems="flex-end" justifyContent="end" gap={2}>
<Stack direction="row" 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} />
))}
@ -98,13 +98,13 @@ export const AlignItemsExamples: StoryFn<typeof Stack> = () => {
))}
</Stack>
<p>Align items center</p>
<Stack direction="row" wrap="wrap" alignItems="center" justifyContent="center" gap={2}>
<Stack direction="row" wrap alignItems="center" justifyContent="center" gap={2}>
{Array.from({ length: 5 }).map((_, i) => (
<Item key={i} color={theme.colors.error.main} text={i + 1} />
))}
</Stack>
<p>Align items stretch</p>
<Stack direction="row" wrap="wrap" alignItems="stretch" justifyContent="center" gap={2}>
<Stack direction="row" 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" />
@ -131,7 +131,7 @@ export const JustifyContentExamples: StoryFn<typeof Stack> = () => {
{justifyContentOptions.map((justifyContent) => (
<>
<p>Justify Content {justifyContent}</p>
<Stack direction="row" wrap="wrap" alignItems="center" justifyContent={justifyContent} gap={2}>
<Stack direction="row" wrap alignItems="center" justifyContent={justifyContent} gap={2}>
{Array.from({ length: 5 }).map((_, i) => (
<Item key={i} color={theme.colors.warning.main} text={i + 1} />
))}
@ -150,7 +150,7 @@ export const GapExamples: StoryFn<typeof Stack> = () => {
{gapOptions.map((gap) => (
<>
<p>Gap with spacingToken set to {gap}</p>
<Stack direction="row" wrap="wrap" alignItems="flex-start" justifyContent="flex-start" gap={gap}>
<Stack direction="row" 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} />
))}
@ -188,7 +188,7 @@ export const DirectionExamples: StoryFn<typeof Stack> = () => {
{directionOptions.map((direction) => (
<>
<p>Direction {direction}</p>
<Stack direction={direction} wrap="wrap" alignItems="center" justifyContent="center" gap={2}>
<Stack direction={direction} wrap alignItems="center" justifyContent="center" gap={2}>
{Array.from({ length: 5 }).map((_, i) => (
<Item key={i} color={theme.colors.warning.main} text={i + 1} />
))}

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

@ -69,7 +69,7 @@ const getStyles = (
flexDirection: val,
})),
getResponsiveStyle(theme, wrap, (val) => ({
flexWrap: val,
flexWrap: typeof val === 'boolean' ? (val ? 'wrap' : 'nowrap') : val,
})),
getResponsiveStyle(theme, alignItems, (val) => ({
alignItems: val,

2
packages/grafana-ui/src/components/Layout/types.ts
View File

@ -24,7 +24,7 @@ export type JustifyContent =
| 'right';
export type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse';
export type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
export type Wrap = boolean | 'nowrap' | 'wrap' | 'wrap-reverse';
type FlexGrow = number;
type FlexShrink = number;