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: Migrate Field knobs to controls (#29433)

Browse Source 
* migrate knobs to controls

* default value for error

* some fix after review
This commit is contained in:
Peter Holmberg 2020-12-04 17:06:40 +01:00 committed by GitHub
parent 3018c6a1b1
commit f9c8d5ab49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-ui/src/components/Button/Button.story.tsx
View File

@ -20,17 +20,13 @@ export default {
docs: {
page: mdx,
},
knobs: {
disabled: true,
},
},
};
export const Simple: Story<ButtonProps> = ({ disabled, icon, children, size, variant }) => {
return (
<Button variant={variant} size={size} icon={icon} disabled={disabled}>
{children}
</Button>
);
};
export const Simple: Story<ButtonProps> = ({ children, ...args }) => <Button {...args}>{children}</Button>;
Simple.args = {
variant: 'primary',
size: 'md',

76
packages/grafana-ui/src/components/Forms/Field.story.tsx
View File

@ -1,62 +1,62 @@
import React, { useState, useCallback } from 'react';
import { boolean, number, text } from '@storybook/addon-knobs';
import { Field, Input, Switch } from '@grafana/ui';
import { Story } from '@storybook/react';
import { Field, FieldProps } from './Field';
import { Input, Switch } from '..';
import mdx from './Field.mdx';
export default {
title: 'Forms/Field',
component: Field,
argTypes: {
children: { control: { disable: true } },
className: { control: { disable: true } },
},
parameters: {
docs: {
page: mdx,
},
knobs: {
disabled: true,
},
},
};
const getKnobs = () => {
const CONTAINER_GROUP = 'Container options';
// ---
const containerWidth = number(
'Container width',
300,
{
range: true,
min: 100,
max: 500,
step: 10,
},
CONTAINER_GROUP
);
export const Simple: Story<FieldProps> = args => (
<div>
<Field {...args}>
<Input id="thisField" />
</Field>
</div>
);
const BEHAVIOUR_GROUP = 'Behaviour props';
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
const invalid = boolean('Invalid', false, BEHAVIOUR_GROUP);
const loading = boolean('Loading', false, BEHAVIOUR_GROUP);
const error = text('Error message', '', BEHAVIOUR_GROUP);
return { containerWidth, disabled, invalid, loading, error };
Simple.args = {
label: 'Graphite API key',
description: 'Your Graphite instance API key',
disabled: false,
invalid: false,
loading: false,
error: 'Not valid input',
horizontal: false,
};
export const Simple = () => {
const { containerWidth, ...otherProps } = getKnobs();
return (
<div style={{ width: containerWidth }}>
<Field label="Graphite API key" description="Your Graphite instance API key" {...otherProps}>
<Input id="thisField" />
</Field>
</div>
);
};
export const HorizontalLayout = () => {
export const HorizontalLayout: Story<FieldProps> = args => {
const [checked, setChecked] = useState(false);
const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
const { containerWidth, ...otherProps } = getKnobs();
return (
<div style={{ width: containerWidth }}>
<Field horizontal label="Show labels" description="Display thresholds's labels" {...otherProps}>
<div>
<Field {...args}>
<Switch checked={checked} onChange={onChange} />
</Field>
</div>
);
};
HorizontalLayout.args = {
label: 'Show labels',
description: 'Display threshold labels',
disabled: false,
invalid: false,
loading: false,
error: 'Not valid input',
horizontal: true,
};