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

Grafana UI: Button.story.tsx - Replace HorizontalGroup and VerticalGroup with Stack and Box (#85644)

Browse Source
This commit is contained in:
Laura Fernández 2024-04-05 15:45:55 +02:00 committed by GitHub
parent d8407c78db
commit 362c95c606
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.betterer.results
View File

@ -823,10 +823,6 @@ exports[`better eslint`] = {
"packages/grafana-ui/src/components/Alert/Toast.story.tsx:5381": [ "packages/grafana-ui/src/components/Alert/Toast.story.tsx:5381": [
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
], ],
"packages/grafana-ui/src/components/Button/Button.story.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
[0, 0, 0, "\'VerticalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
],
"packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx:5381": [ "packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"] [0, 0, 0, "Unexpected any. Specify a different type.", "1"]

26
packages/grafana-ui/src/components/Button/Button.story.tsx
View File

@ -3,7 +3,7 @@ import React from 'react';
import { ComponentSize } from '../../types'; import { ComponentSize } from '../../types';
import { Card } from '../Card/Card'; import { Card } from '../Card/Card';
import { HorizontalGroup, VerticalGroup } from '../Layout/Layout'; import { Stack } from '../Layout/Stack/Stack';
import { allButtonVariants, allButtonFills, Button, ButtonProps } from './Button'; import { allButtonVariants, allButtonFills, Button, ButtonProps } from './Button';
import mdx from './Button.mdx'; import mdx from './Button.mdx';
@ -36,12 +36,12 @@ export default {
export const Examples: StoryFn<typeof Button> = () => { export const Examples: StoryFn<typeof Button> = () => {
return ( return (
<VerticalGroup> <Stack direction="column">
{allButtonFills.map((buttonFill) => ( {allButtonFills.map((buttonFill) => (
<VerticalGroup key={buttonFill}> <Stack direction="column" key={buttonFill}>
<HorizontalGroup spacing="lg"> <Stack gap={3}>
{allButtonVariants.map((variant) => ( {allButtonVariants.map((variant) => (
<VerticalGroup spacing="lg" key={`${buttonFill}-${variant}`}> <Stack direction="column" gap={3} alignItems="flex-start" key={`${buttonFill}-${variant}`}>
{sizes.map((size) => ( {sizes.map((size) => (
<Button variant={variant} fill={buttonFill} size={size} key={size}> <Button variant={variant} fill={buttonFill} size={size} key={size}>
{variant} {size} {variant} {size}
@ -50,13 +50,13 @@ export const Examples: StoryFn<typeof Button> = () => {
<Button variant={variant} fill={buttonFill} disabled> <Button variant={variant} fill={buttonFill} disabled>
{variant} disabled {variant} disabled
</Button> </Button>
</VerticalGroup> </Stack>
))} ))}
</HorizontalGroup> </Stack>
<div style={{ padding: '20px 0', width: '100%' }} /> <div style={{ padding: '20px 0', width: '100%' }} />
</VerticalGroup> </Stack>
))} ))}
<HorizontalGroup spacing="lg"> <Stack alignItems="center" gap={3}>
<div>With icon and text</div> <div>With icon and text</div>
<Button icon="cloud" size="sm"> <Button icon="cloud" size="sm">
Configure Configure
@ -65,20 +65,20 @@ export const Examples: StoryFn<typeof Button> = () => {
<Button icon="cloud" size="lg"> <Button icon="cloud" size="lg">
Configure Configure
</Button> </Button>
</HorizontalGroup> </Stack>
<div /> <div />
<div /> <div />
<Button icon="plus" fullWidth> <Button icon="plus" fullWidth>
Button with fullWidth Button with fullWidth
</Button> </Button>
<div /> <div />
<HorizontalGroup spacing="lg"> <Stack alignItems="center" gap={3}>
<div>Inside ButtonGroup</div> <div>Inside ButtonGroup</div>
<ButtonGroup> <ButtonGroup>
<Button icon="sync">Run query</Button> <Button icon="sync">Run query</Button>
<Button icon="angle-down" /> <Button icon="angle-down" />
</ButtonGroup> </ButtonGroup>
</HorizontalGroup> </Stack>
<Card> <Card>
<Card.Heading>Button inside card</Card.Heading> <Card.Heading>Button inside card</Card.Heading>
<Card.Actions> <Card.Actions>
@ -92,7 +92,7 @@ export const Examples: StoryFn<typeof Button> = () => {
</Button> </Button>
</Card.Actions> </Card.Actions>
</Card> </Card>
</VerticalGroup> </Stack>
); );
}; };