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.

Sign up for GitHub

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

Jump to bottom

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

Open
Enteleform opened this issue Jul 31, 2021 · 1 comment
Open

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

Enteleform opened this issue Jul 31, 2021 · 1 comment
Labels
enhancement New feature or request

Comments

@Enteleform
Copy link

Enteleform commented Jul 31, 2021 •
edited
Loading

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 rbardini added the enhancement New feature or request label Aug 29, 2021
@rbardini
Copy link
Owner

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

storybook-addon-paddings/src/index.tsx

Lines 27 to 29 in 898b95d

const selector = isInDocs
? `#anchor--${id} .docs-story > div:first-child`
: '.sb-show-main';

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rbardini @Enteleform