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: Replace VerticalGroup with Stack on alerts documentation in Storybook (#86400)

Browse Source
This commit is contained in:
Laura Fernández 2024-04-18 12:16:57 +02:00 committed by GitHub
parent 6b21d12ce0
commit bc07eedaa9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.betterer.results
View File

@ -782,12 +782,6 @@ exports[`better eslint`] = {
"packages/grafana-sql/src/components/visual-query-builder/SQLWhereRow.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"packages/grafana-ui/src/components/Alert/InlineBanner.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/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/ColorPicker/ColorPicker.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]

8
packages/grafana-ui/src/components/Alert/Alert.mdx
View File

@ -104,9 +104,7 @@ Inline Banners are task-oriented alerts that notify users of the status of an ac
```jsx
<Alert title={title} severity={severity} buttonContent={buttonContent} onRemove={onRemove}>
<VerticalGroup>
<div>Child content that includes some alert details, like maybe what actually happened.</div>
</VerticalGroup>
Child content that includes some alert details, like maybe what actually happened.</div>
</Alert>
```
@ -149,9 +147,7 @@ appEvents.publish({
```jsx
<Alert title={title} severity={severity} onRemove={onRemove} elevated>
<VerticalGroup>
<div>Child content that includes some alert details, like maybe what actually happened.</div>
</VerticalGroup>
Child content that includes some alert details, like maybe what actually happened.
</Alert>
```

24
packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx
View File

@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
import { Alert, AlertVariant, Stack } from '@grafana/ui';
import { StoryExample } from '../../utils/storybook/StoryExample';
@ -29,11 +29,7 @@ const meta: Meta = {
export const Basic: StoryFn<typeof Alert> = (args) => {
return (
<div>
<Alert {...args}>
<VerticalGroup>
<div>Child content that includes some alert details, like maybe what actually happened.</div>
</VerticalGroup>
</Alert>
<Alert {...args}>Child content that includes some alert details, like maybe what actually happened.</Alert>
</div>
);
};
@ -44,13 +40,7 @@ Basic.args = {
};
export const WithActions: StoryFn<typeof Alert> = (args) => {
return (
<Alert {...args}>
<VerticalGroup>
<div>Child content that includes some alert details, like maybe what actually happened.</div>
</VerticalGroup>
</Alert>
);
return <Alert {...args}>Child content that includes some alert details, like maybe what actually happened.</Alert>;
};
WithActions.args = {
@ -62,7 +52,7 @@ WithActions.args = {
export const Examples: StoryFn<typeof Alert> = () => {
return (
<VerticalGroup>
<Stack direction="column">
<StoryExample name="With buttonContent and children">
<Alert
title={'The title of the alert'}
@ -77,15 +67,15 @@ export const Examples: StoryFn<typeof Alert> = () => {
<Alert title={'No dismiss'} severity={'success'} />
</StoryExample>
<StoryExample name="Severities">
<VerticalGroup>
<Stack direction="column">
{severities.map((severity) => (
<Alert title={`Severity: ${severity}`} severity={severity} key={severity}>
Child content
</Alert>
))}
</VerticalGroup>
</Stack>
</StoryExample>
</VerticalGroup>
</Stack>
);
};

14
packages/grafana-ui/src/components/Alert/Toast.story.tsx
View File

@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
import { Alert, AlertVariant, Stack } from '@grafana/ui';
import { StoryExample } from '../../utils/storybook/StoryExample';
@ -33,9 +33,7 @@ export const Basic: StoryFn<typeof Alert> = (args) => {
return (
<div className="page-alert-list">
<Alert {...args} elevated>
<VerticalGroup>
<div>Child content that includes some alert details, like maybe what actually happened.</div>
</VerticalGroup>
Child content that includes some alert details, like maybe what actually happened.
</Alert>
</div>
);
@ -43,9 +41,9 @@ export const Basic: StoryFn<typeof Alert> = (args) => {
export function Examples() {
return (
<VerticalGroup>
<Stack direction="column">
<StoryExample name="Severities">
<VerticalGroup>
<Stack direction="column">
{severities.map((severity) => (
<Alert
title={`Severity: ${severity}`}
@ -55,7 +53,7 @@ export function Examples() {
elevated={true}
/>
))}
</VerticalGroup>
</Stack>
</StoryExample>
<StoryExample name="With huge payload">
<Alert title="Alert with huge payload" severity="error" elevated={true}>
@ -124,7 +122,7 @@ export function Examples() {
Vivamus sit amet dui semper, suscipit est nec, elementum arcu. Praesent ante turpis, convallis ac leo eget,
</Alert>
</StoryExample>
</VerticalGroup>
</Stack>
);
}