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: Checkbox.story.tsx - Replace VerticalGroupwith Stack (#86524)

Browse Source
This commit is contained in:
Laura Fernández 2024-04-18 17:05:19 +02:00 committed by GitHub
parent 0d11f9b2f4
commit e65669bc0d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -797,9 +797,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"packages/grafana-ui/src/components/Forms/Checkbox.story.tsx:5381": [
[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/Forms/FieldArray.story.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],

24
packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
View File

@ -1,7 +1,7 @@
import { Meta, StoryFn } from '@storybook/react';
import React, { useState, useCallback } from 'react';
import { VerticalGroup } from '../Layout/Layout';
import { Stack } from '../Layout/Stack/Stack';
import { Checkbox } from './Checkbox';
import mdx from './Checkbox.mdx';
@ -26,11 +26,7 @@ export const Basic: StoryFn<typeof Checkbox> = (args) => {
(e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),
[setChecked]
);
return (
<div>
<Checkbox value={checked} onChange={onChange} {...args} />
</div>
);
return <Checkbox value={checked} onChange={onChange} {...args} />;
};
Basic.args = {
@ -44,7 +40,7 @@ Basic.args = {
export const StackedList = () => {
return (
<div>
<VerticalGroup>
<Stack direction="column" alignItems="flex-start">
<Checkbox
defaultChecked={true}
label="Skip TLS cert validation"
@ -60,18 +56,16 @@ export const StackedList = () => {
label="Another checkbox times 2"
description="Another long description that does not make any sense or does it?"
/>
</VerticalGroup>
</Stack>
</div>
);
};
export const InAField: StoryFn<typeof Checkbox> = (args) => {
return (
<div>
<Field {...args}>
<Checkbox name="hide" id="hide" defaultChecked={true} />
</Field>
</div>
<Field {...args}>
<Checkbox name="hide" id="hide" defaultChecked={true} />
</Field>
);
};
@ -93,14 +87,14 @@ export const AllStates: StoryFn<typeof Checkbox> = (args) => {
return (
<div>
<VerticalGroup>
<Stack direction="column" alignItems="flex-start">
<Checkbox value={checked} onChange={onChange} {...args} />
<Checkbox value={true} label="Checked" />
<Checkbox value={false} label="Unchecked" />
<Checkbox value={false} indeterminate={true} label="Interdeterminate" />
<Checkbox value={false} invalid={true} label="Invalid and unchecked" />
<Checkbox value={true} invalid={true} label="Invalid and checked" />
</VerticalGroup>
</Stack>
</div>
);
};