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

GrafanaUI: IconButton - replace HorizontalGroup and VerticalGroup with Stack component (#85639)

Browse Source
This commit is contained in:
Laura Fernández 2024-04-05 12:03:57 +02:00 committed by GitHub
parent 9efbf142a8
commit 661aaf352e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
View File

@ -4,7 +4,7 @@ import React from 'react';
import { useTheme2 } from '../../themes'; import { useTheme2 } from '../../themes';
import { IconSize, IconName } from '../../types'; import { IconSize, IconName } from '../../types';
import { HorizontalGroup, VerticalGroup } from '../Layout/Layout'; import { Stack } from '../Layout/Stack/Stack';
import { BasePropsWithTooltip, IconButton, IconButtonVariant, Props as IconButtonProps } from './IconButton'; import { BasePropsWithTooltip, IconButton, IconButtonVariant, Props as IconButtonProps } from './IconButton';
import mdx from './IconButton.mdx'; import mdx from './IconButton.mdx';
@ -57,7 +57,7 @@ export const ExamplesSizes = (args: BasePropsWithTooltip) => {
}); });
return ( return (
<HorizontalGroup justify="center"> <Stack justifyContent="center">
{variants.map((variant) => { {variants.map((variant) => {
return ( return (
<div <div
@ -93,7 +93,7 @@ export const ExamplesSizes = (args: BasePropsWithTooltip) => {
</div> </div>
))} ))}
</div> </div>
</HorizontalGroup> </Stack>
); );
}; };
@ -115,7 +115,7 @@ export const ExamplesBackground = (args: BasePropsWithTooltip) => {
background: theme.colors.background[background], background: theme.colors.background[background],
})} })}
> >
<VerticalGroup spacing="md"> <Stack direction="column" gap={2}>
<div>{background}</div> <div>{background}</div>
<div <div
className={css({ className={css({
@ -128,7 +128,7 @@ export const ExamplesBackground = (args: BasePropsWithTooltip) => {
})} })}
<IconButton name="times" size="xl" tooltip={args.tooltip} disabled /> <IconButton name="times" size="xl" tooltip={args.tooltip} disabled />
</div> </div>
</VerticalGroup> </Stack>
</div> </div>
); );
}; };