GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-17 05:02:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(official-storybook): use existing forward-ref story

Browse Source
This commit is contained in:
Andrew Salib 2020-10-05 15:22:31 +11:00
parent 1b7f55000e
commit 2c63dc63e7
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
examples/official-storybook/stories/addon-docs/forward-ref.stories.js
View File

@ -4,19 +4,25 @@ import { DocgenButton } from '../../components/DocgenButton';
export default {
title: 'Addons/Docs/ForwardRef',
component: ForwardedButton,
parameters: { chromatic: { disable: true } },
parameters: {
chromatic: { disable: true },
docs: { source: { type: 'dynamic' } },
},
};
const ForwardedButton = React.forwardRef((props = { label: '' }, ref) => (
<DocgenButton ref={ref} {...props} />
));
const ForwardedButton = React.forwardRef(function ForwardedButton(props = { label: '' }, ref) {
return <DocgenButton ref={ref} {...props} />;
});
export const DisplaysCorrectly = () => <ForwardedButton label="hello" />;
DisplaysCorrectly.storyName = 'Displays forwarded ref components correctly (default props)';
// eslint-disable-next-line react/prop-types
const ForwardedDestructuredButton = React.forwardRef(({ label = '', ...props }, ref) => (
<DocgenButton ref={ref} label={label} {...props} />
));
const ForwardedDestructuredButton = React.forwardRef(function ForwardedDestructuredButton(
// eslint-disable-next-line react/prop-types
{ label = '', ...props },
ref
) {
return <DocgenButton ref={ref} label={label} {...props} />;
});
export const AlsoDisplaysCorrectly = () => <ForwardedDestructuredButton label="hello" />;
AlsoDisplaysCorrectly.storyName =
'Displays forwarded ref components correctly (destructured props)';

2
examples/official-storybook/stories/addon-docs/react-memo.stories.js → examples/official-storybook/stories/addon-docs/memo.stories.js
View File

@ -4,7 +4,7 @@ import { DocgenButton } from '../../components/DocgenButton';
const ButtonWithMemo = React.memo(DocgenButton);
export default {
title: 'Addons/Docs/ButtonWithMemo',
title: 'Addons/Docs/Memo',
component: ButtonWithMemo,
parameters: {
chromatic: { disable: true },