search

rbardini / storybook-addon-paddings

🔲 A Storybook addon to add different paddings to your preview
https://storybook-addon-paddings.rbrd.in
MIT License
30 stars 2 forks source link

[Feature Request] Expose Padding Target in Configuration Options #30

Open Enteleform opened 3 years ago

Enteleform commented 3 years ago

For example, storybook-dark-mode allows users to do this via:

Preview class target

This plugin will apply the dark/light class to the <body> element of the preview iframe. This can be configured with the classTarget parameter. The value will be passed to a querySelector() inside the iframe.

This is useful if the <body> is styled according to a parent's class, in that case it can be set to html.

export parameters = {
  darkMode: {
    classTarget: 'html'
  }
}

Use Case

This would allow users to maintain consistent a background style within the padded area while keeping said style isolated within a particular story; rather than having to apply a global style to body, which would also affect other stories.

Padding @ body

chrome_2021-07-31_17-12-10

Padding @ .SomeCustomSelector

chrome_2021-07-31_17-12-28

rbardini commented 3 years ago

Hi @Enteleform! I'm not sure that would work well with paddings, it requires very specific selectors:

https://github.com/rbardini/storybook-addon-paddings/blob/898b95d17d66364d0b01e3176ebef81abe353d59/src/index.tsx#L27-L29

And this may get even more complex to cover other use cases, see #28.