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