Grafana UI: ToolbarButton.story.tsx - Replace HorizotalGroup and VerticalGroup with Stack (#86067)

This commit is contained in:
Laura Fernández
2024-04-12 18:08:43 +02:00
committed by GitHub
parent 930363ad12
commit f3b814a024
2 changed files with 5 additions and 9 deletions
-4
View File
@@ -988,10 +988,6 @@ exports[`better eslint`] = {
"packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx:5381": [ "packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx:5381": [
[0, 0, 0, "\'VerticalGroup\' 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.", "0"]
], ],
"packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.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/ValuePicker/ValuePicker.tsx:5381": [ "packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
], ],
@@ -3,7 +3,7 @@ import React from 'react';
import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas'; import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
import { ButtonGroup } from '../Button'; import { ButtonGroup } from '../Button';
import { HorizontalGroup, VerticalGroup } from '../Layout/Layout'; import { Stack } from '../Layout/Stack/Stack';
import { ToolbarButton, ToolbarButtonVariant } from './ToolbarButton'; import { ToolbarButton, ToolbarButtonVariant } from './ToolbarButton';
import mdx from './ToolbarButton.mdx'; import mdx from './ToolbarButton.mdx';
@@ -94,7 +94,7 @@ export const Examples: StoryFn<typeof ToolbarButton> = (args) => {
return ( return (
<DashboardStoryCanvas> <DashboardStoryCanvas>
<VerticalGroup> <Stack direction="column" gap={1.5}>
Button states Button states
<ToolbarButtonRow> <ToolbarButtonRow>
<ToolbarButton variant="canvas">Just text</ToolbarButton> <ToolbarButton variant="canvas">Just text</ToolbarButton>
@@ -140,7 +140,7 @@ export const Examples: StoryFn<typeof ToolbarButton> = (args) => {
</ButtonGroup> </ButtonGroup>
<br /> <br />
Inside button group Inside button group
<HorizontalGroup> <Stack>
<ButtonGroup> <ButtonGroup>
<ToolbarButton variant="primary" icon="sync"> <ToolbarButton variant="primary" icon="sync">
Run query Run query
@@ -153,8 +153,8 @@ export const Examples: StoryFn<typeof ToolbarButton> = (args) => {
</ToolbarButton> </ToolbarButton>
<ToolbarButton isOpen={false} narrow variant="destructive" /> <ToolbarButton isOpen={false} narrow variant="destructive" />
</ButtonGroup> </ButtonGroup>
</HorizontalGroup> </Stack>
</VerticalGroup> </Stack>
</DashboardStoryCanvas> </DashboardStoryCanvas>
); );
}; };