search

whitespace-se / storybook-addon-html

A Storybook addon that extracts and displays compiled syntax-highlighted HTML
Other
95 stars 43 forks source link

Proposal: Add config option to ignore decorators and show only the HTML of the story #115

Open sergiu-statache opened 5 months ago

sergiu-statache commented 5 months ago

As you know, Storybook supports decorators which can be multiple HTML tags wrapping the main Story.

Now if you go to the HTML tab to see the HTML you'll see the Story HTML, but if the story has some decorators attached to it, the HTML tab will show the HTML with the decorators (which is confusing for some devs because that's not the HTML of that component - decorators are only to facilitate the display of the component in Storybook)

It would be great if a config option would be added for this plugin to ignore decorators when showing HTML.

Thanks and hope all is clear!

dgibson666 commented 5 months ago

I'm using a decorator to wrap my stories and I get around this by specifying a new "root" in preview.js:

const preview = {
  parameters: {
    html: {
      root: "my-wrapper-tag", // default: #storybook-root

Using that as the root omits it from the HTML output in your addon panel.