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: PanelChrome - Replace HorizontalGroup with Stack in documentation and stories (#85843)

Browse Source
This commit is contained in:
Laura Fernández 2024-04-10 11:44:03 +02:00 committed by GitHub
parent 0585b55bb1
commit 1dce01fdd7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -873,9 +873,6 @@ exports[`better eslint`] = {
"packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx:5381": [ "packages/grafana-ui/src/components/PageLayout/PageToolbar.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/PanelChrome/PanelChrome.story.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"packages/grafana-ui/src/components/PanelChrome/PanelContext.ts:5381": [ "packages/grafana-ui/src/components/PanelChrome/PanelContext.ts: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"]

10
packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx
View File

@ -3,10 +3,10 @@ import { Meta, Preview } from '@storybook/addon-docs/blocks';
import { PanelChrome } from './PanelChrome'; import { PanelChrome } from './PanelChrome';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { HorizontalGroup } from '../Layout/Layout';
import { LoadingState } from '@grafana/data'; import { LoadingState } from '@grafana/data';
import { Button } from '../Button'; import { Button } from '../Button';
import { Menu } from '../Menu/Menu'; import { Menu } from '../Menu/Menu';
import { Stack } from '../Layout/Stack/Stack';
import { IconButton } from '../IconButton/IconButton'; import { IconButton } from '../IconButton/IconButton';
<Meta title="MDX|PanelChrome" component={PanelChrome} /> <Meta title="MDX|PanelChrome" component={PanelChrome} />
@ -109,7 +109,7 @@ Component used for rendering content wrapped in the same style as grafana panels
<Preview> <Preview>
<HorizontalGroup spacing="md" align="flex-start" wrap> <Stack gap={2} alignItems="flex-start" wrap="wrap">
<PanelChrome <PanelChrome
title="My awesome panel title" title="My awesome panel title"
menu={() => ( menu={() => (
@ -182,7 +182,7 @@ Component used for rendering content wrapped in the same style as grafana panels
}} }}
</PanelChrome> </PanelChrome>
</HorizontalGroup> </Stack>
</Preview> </Preview>
### States: Loading , Streaming, Error ### States: Loading , Streaming, Error
@ -217,7 +217,7 @@ Component used for rendering content wrapped in the same style as grafana panels
<Preview> <Preview>
<HorizontalGroup spacing="md" align="flex-start" wrap> <Stack gap={2} alignItems="flex-start" wrap="wrap">
<PanelChrome <PanelChrome
title="My awesome panel title" title="My awesome panel title"
loadingState={LoadingState.Loading} loadingState={LoadingState.Loading}
@ -297,7 +297,7 @@ Component used for rendering content wrapped in the same style as grafana panels
}} }}
</PanelChrome> </PanelChrome>
</HorizontalGroup> </Stack>
</Preview> </Preview>
### Extra options? Title items and actions ### Extra options? Title items and actions

11
packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx
View File

@ -5,10 +5,9 @@ import React, { CSSProperties, useState, ReactNode } from 'react';
import { useInterval, useToggle } from 'react-use'; import { useInterval, useToggle } from 'react-use';
import { LoadingState } from '@grafana/data'; import { LoadingState } from '@grafana/data';
import { Button, Icon, PanelChrome, PanelChromeProps, RadioButtonGroup } from '@grafana/ui'; import { Button, Icon, PanelChrome, PanelChromeProps, RadioButtonGroup, Stack } from '@grafana/ui';
import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas'; import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
import { HorizontalGroup } from '../Layout/Layout';
import { Menu } from '../Menu/Menu'; import { Menu } from '../Menu/Menu';
import mdx from './PanelChrome.mdx'; import mdx from './PanelChrome.mdx';
@ -124,7 +123,7 @@ export const Examples = () => {
return ( return (
<DashboardStoryCanvas> <DashboardStoryCanvas>
<div> <div>
<HorizontalGroup spacing="md" align="flex-start" wrap> <Stack gap={2} alignItems="flex-start" wrap="wrap">
{renderPanel('Has statusMessage', { {renderPanel('Has statusMessage', {
title: 'Default title', title: 'Default title',
statusMessage: 'Error text', statusMessage: 'Error text',
@ -255,7 +254,7 @@ export const Examples = () => {
</Button> </Button>
), ),
})} })}
</HorizontalGroup> </Stack>
</div> </div>
</DashboardStoryCanvas> </DashboardStoryCanvas>
); );
@ -265,7 +264,7 @@ export const ExamplesHoverHeader = () => {
return ( return (
<DashboardStoryCanvas> <DashboardStoryCanvas>
<div> <div>
<HorizontalGroup spacing="md" align="flex-start" wrap> <Stack gap={2} alignItems="flex-start" wrap="wrap">
{renderPanel('Title items, menu, hover header', { {renderPanel('Title items, menu, hover header', {
title: 'Default title', title: 'Default title',
description: 'This is a description', description: 'This is a description',
@ -316,7 +315,7 @@ export const ExamplesHoverHeader = () => {
</a> </a>
), ),
})} })}
</HorizontalGroup> </Stack>
</div> </div>
</DashboardStoryCanvas> </DashboardStoryCanvas>
); );