-
-
Notifications
You must be signed in to change notification settings - Fork 9.2k
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.
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
Doc code preview "No display name" #12596
Comments
@andezzat any chance you can take a look at this as follow-on to your "exotic components" fix? 🙏 |
Hi @shilman I found a quick fix for now: Burger.displayName = "Burger"
const Template = (args) => <Burger {...args} /> |
It sounds like |
@andezzat is there any way we can detect that it's a styled component and automatically extract the display name from the wrapped component? |
@shilman I'm experiencing a similar issue, but only when I use a decorator. Without a decorator, the code preview shows me this: <Tooltip title="Hi there!">
<Button size="small">
Open based on hover
</Button>
</Tooltip> With the decorator, I get this: <div
style={{
margin: '3em'
}}
>
<No Display Name />
</div> Here's my full story: export const Minimal = args => {
return (
<Tooltip title="Hi there!" placement="top" {...args}>
<Button type="primary" size="small">
Open based on hover
</Button>
</Tooltip>
);
};
Minimal.decorators = [
Story => (
<div style={{ margin: '3em' }}>
<Story />
</div>
),
]; I doubt it's an issue with the |
Exact same issue as @zeckdude described, issue only shows when I'm using a decorator. My story looks like this: export default {
title: 'CheckboxTree',
component: CheckboxTree,
decorators: [
withKnobs,
(Story) => <div style={{ maxWidth: '256px' }}><Story/></div>
],
};
export const Valid = (args) => <CheckboxTree {...args} />
Valid.args = {
nodes: validData
} |
What happens if you use |
@shilman It works that way, thank you! Perhaps the documentation needs to be updated here: https://storybook.js.org/docs/react/writing-stories/decorators |
cc @tmeasday @jonniebigodes not sure what to do about this 🤦 |
Oh man. |
I can confirm that I guess that you don't have a solution for that by now? |
When I use the |
I will try to fix this as part of #12022, and the recommendation will be to use |
This is happening on
This
Output in show code docs.
Changing the decorator to the above fix
Output in show code docs
|
@andykenward if you want to get rid of the decorator you can set the
@jonniebigodes we need to rework the doc blocks documentation soon 🙈 |
@shilman indeed we do, I'll follow up with you so that we can coordinate how best to document this and move on from there. Sounds good? |
@shilman #12022 is now closed but I still get this issue. It's great that I can use |
Might be obvious for many, but Minimal.decorators = [
Story => (
<div style={{ margin: '3em' }}>
{Story()} // instead of <Story />
</div>
),
]; |
Why does this work? |
You are so awesome! Thank you! I've be scouring the web for an answer and just found this while i happened to be on the main issue of this thread, thank you!!!! |
Thank you for your help! 😊 |
This also works around a problem where the component itself would be "No Display Name" -- storybookjs/storybook#12596
Thanks @shilman! for anyone wandering where to add it, you can put it in ./storybook/preview.js |
somehow works to fix "No display name" issue storybook was having when generating source code See storybookjs/storybook#12596
…code blocks (#189) * fix(story): update story for Tiles to show full source code was too confusing and misleading * feat: add displayName prop to all forwardRef components * feat: convert storyFn invocation to function invocation somehow works to fix "No display name" issue storybook was having when generating source code See storybookjs/storybook#12596 * feat(storybook): exclude decorators being injected into source code * feat: add displayName props to subcomponents of main components * feat(Tile/story): update storybook-only component name for clarity
Can I also get an answer to this? |
Describe the bug
The Doc code preview does not display the component name correctly.
To Reproduce
Expected behavior
The component name should display normally
Screenshots
Code snippets
The text was updated successfully, but these errors were encountered: