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