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.

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

Display of Template inside Story not as expected #11813

Closed
schalkneethling opened this issue Aug 5, 2020 · 7 comments
Closed

Display of Template inside Story not as expected #11813

schalkneethling opened this issue Aug 5, 2020 · 7 comments

Comments

@schalkneethling
Copy link

Describe the bug
To Reproduce

I have the following code inside a mdx file:

export const Template = (args) => <Button {...args} />;

<Preview>
  <Story
    name="Interactive"
    args={{ label: "Primary button ", state: "primary" }}
  >
    {Template.bind()}
  </Story>
</Preview>

When I view the relevant Docs page in the browser and click on the "Show code" link, the following is shown:

<MDXCreateElement
  buttonType="button"
  label="Primary button "
  mdxType="Button"
  originalType={() => {}}
  state="primary"
/>

Expected behavior

I expected it to output the following:

<Button label="Primary button" state="primary" />

Screenshots

Screenshot 2020-08-05 at 15 46 23

System:

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Firefox: 78.0.2
    Safari: 13.1.1
  npmPackages:
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.0-rc.26 => 6.0.0-rc.26
@marie-maxime
Copy link

Looks similar to #11542

I'm guessing this a bug or maybe the doc for controls is not updated, but you can do this as a workaround and it should output the code correctly:

<Preview>
  <Story
    name="Interactive"
    args={{ label: "Primary button ", state: "primary" }}
  >
    {args => <Button {...args} />}
  </Story>
</Preview>

@schalkneethling
Copy link
Author

That works o/\o

Screenshot 2020-08-05 at 17 29 39

@schalkneethling
Copy link
Author

schalkneethling commented Aug 5, 2020

Well, kinda. While it does not output the MDXCreate code, the code it does output always includes all the possible props. For the button in #11813 (comment) for example, the actual code is:

<Button label="Primary button" />

As the buttonType and state props are optional with default fallbacks.

@shilman
Copy link
Member

shilman commented Aug 20, 2020

@schalkneethling is the original problem still an issue in the latest release?

@robbertkl
Copy link
Contributor

@shilman yes, just tested with the latest (6.0.14) and still an issue. See also #11542 (comment)

@stale stale bot added the inactive label Sep 11, 2020
@jdiponziano
Copy link

Hey everyone! Has there been any progress in fixing the template bind and code rendering issue?

@stale stale bot removed the inactive label Sep 11, 2020
@shilman shilman added the todo label Sep 22, 2020
@storybookjs storybookjs deleted a comment from stale bot Sep 22, 2020
@shilman shilman added P1 and removed P1 labels Sep 24, 2020
@shilman
Copy link
Member

shilman commented Sep 25, 2020

closing as dupe to #11542

@shilman shilman closed this as completed Sep 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants