Storybook: Display of Template inside Story not as expected

Created on 5 Aug 2020  路  7Comments  路  Source: storybookjs/storybook

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
P1 docs source bug mdx todo

Most helpful comment

Looks similar to https://github.com/storybookjs/storybook/issues/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:
```js

name="Interactive"
args={{ label: "Primary button ", state: "primary" }}
>
{args =>

All 7 comments

Looks similar to https://github.com/storybookjs/storybook/issues/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:
```js

name="Interactive"
args={{ label: "Primary button ", state: "primary" }}
>
{args =>

That works o/\o

Screenshot 2020-08-05 at 17 29 39

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 https://github.com/storybookjs/storybook/issues/11813#issuecomment-669261093 for example, the actual code is:

<Button label="Primary button" />

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

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

@shilman yes, just tested with the latest (6.0.14) and still an issue. See also https://github.com/storybookjs/storybook/issues/11542#issuecomment-665193303

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

closing as dupe to #11542

Was this page helpful?
0 / 5 - 0 ratings