Grafana UI: ToolbarButton.story.tsx - Replace HorizotalGroup and VerticalGroup with Stack (#86067)
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user