Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Storybook Controls instead of Knobs #80705

Merged
merged 5 commits into from
Oct 21, 2020
Merged

Use Storybook Controls instead of Knobs #80705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
143c6a8
Change syncbadge to controls
smith Oct 14, 2020
caf92b3
Merge remote-tracking branch 'upstream/master' into nls/sb-controls
smith Oct 15, 2020
bda6611
Use Storybook Controls instead of Knobs
smith Oct 15, 2020
cfd5398
Merge remote-tracking branch 'upstream/master' into nls/sb-controls
smith Oct 16, 2020
a7d70ea
Merge branch 'master' into nls/sb-controls
kibanamachine Oct 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions packages/kbn-storybook/lib/default_config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,7 @@
import { StorybookConfig } from '@storybook/core/types';

export const defaultConfig: StorybookConfig = {
addons: [
'@kbn/storybook/preset',
'@storybook/addon-a11y',
'@storybook/addon-knobs',
'@storybook/addon-essentials',
],
addons: ['@kbn/storybook/preset', '@storybook/addon-a11y', '@storybook/addon-essentials'],
stories: ['../**/*.stories.tsx'],
typescript: {
reactDocgen: false,
Expand Down
60 changes: 34 additions & 26 deletions ...beddable/public/components/panel_options_menu/__examples__/panel_options_menu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,37 +17,45 @@
* under the License.
*/

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean } from '@storybook/addon-knobs';
import * as React from 'react';
Copy link
Contributor

@ogupte ogupte Oct 15, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can use the default import hereimport React from 'react';. It shouldn't change anything else in this file. or we can copy what you did in SyncBadge.stories.tsx (e.g. import React, { ComponentProps } from 'react';)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

VSCode auto-formatted this for me so I thought maybe this plugin had some lint rules around this. @elastic/kibana-app-arch let me know if there's a preference for react imports here.

import { PanelOptionsMenu } from '..';

const euiContextDescriptors = {
id: 'mainMenu',
title: 'Options',
items: [
{
name: 'Inspect',
icon: 'inspect',
onClick: action('onClick(inspect)'),
},
{
name: 'Full screen',
icon: 'expand',
onClick: action('onClick(expand)'),
export default {
title: 'components/PanelOptionsMenu',
component: PanelOptionsMenu,
argTypes: {
isViewMode: {
control: { type: 'boolean' },
},
},
decorators: [
(Story: React.ComponentType) => (
<div style={{ height: 150 }}>
<Story />
</div>
),
],
};

storiesOf('components/PanelOptionsMenu', module)
.addDecorator(withKnobs)
.add('default', () => {
const isViewMode = boolean('isViewMode', false);
export function Default({ isViewMode }: React.ComponentProps<typeof PanelOptionsMenu>) {
const euiContextDescriptors = {
id: 'mainMenu',
title: 'Options',
items: [
{
name: 'Inspect',
icon: 'inspect',
onClick: action('onClick(inspect)'),
},
{
name: 'Full screen',
icon: 'expand',
onClick: action('onClick(expand)'),
},
],
};

return (
<div style={{ height: 150 }}>
<PanelOptionsMenu panelDescriptor={euiContextDescriptors} isViewMode={isViewMode} />
</div>
);
});
return <PanelOptionsMenu panelDescriptor={euiContextDescriptors} isViewMode={isViewMode} />;
}
Default.args = { isViewMode: false } as React.ComponentProps<typeof PanelOptionsMenu>;
35 changes: 14 additions & 21 deletions ...ansactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,20 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { boolean, withKnobs } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import React from 'react';
import React, { ComponentProps } from 'react';
import { SyncBadge } from './SyncBadge';

storiesOf('app/TransactionDetails/SyncBadge', module)
.addDecorator(withKnobs)
.add(
'example',
() => {
return <SyncBadge sync={boolean('sync', true)} />;
export default {
title: 'app/TransactionDetails/SyncBadge',
component: SyncBadge,
argTypes: {
sync: {
control: { type: 'inline-radio', options: [true, false, undefined] },
},
{
showPanel: true,
info: { source: false },
}
)
.add(
'sync=undefined',
() => {
return <SyncBadge />;
},
{ info: { source: false } }
);
},
};

export function Example({ sync }: ComponentProps<typeof SyncBadge>) {
return <SyncBadge sync={sync} />;
}
Example.args = { sync: true } as ComponentProps<typeof SyncBadge>;