Storybook: Add options parameter to enable background grid by default

Created on 10 Jul 2019 · 16Comments · Source: storybookjs/storybook

Is your feature request related to a problem? Please describe.
No.

Describe the solution you'd like
I'd like a new Options Parameter to control the initial setting of the "Toggle Background Grid" setting, e.g. showBackgroundGrid, so that I can enable it by default.

Describe alternatives you've considered
According to https://github.com/storybookjs/storybook/issues/5853#issuecomment-475466382 it looks like it's possible to implement your own grid with the Storybook Background Addon.

Are you able to assist bring the feature to reality?
No.

Additional context
I think that should be enough info, but let me know if there's anything else I can provide. Thanks!

backgrounds feature request has workaround inactive

Source

jackocnr

👍8

Most helpful comment

bumping this ticket again. would really love this option w/o a workaround

morficus on 7 May 2020

👍2

All 16 comments

I found an easy workaround - posting here in case it's useful for others.

That linked comment pointed me to node_modules/@storybook/ui/src/components/preview/background.js which contains Storybook's grid styles, which I just applied in manager-head.html like so:

<style>
  #storybook-preview-background {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='smallGrid' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 10 0 L 0 0 0 10' fill='none' stroke='gray' stroke-width='0.5'/%3E%3C/pattern%3E%3Cpattern id='grid' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='url(%23smallGrid)'/%3E%3Cpath d='M 100 0 L 0 0 0 100' fill='none' stroke='gray' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)' /%3E%3C/svg%3E");
    background-position: -2px -2px;
  }
</style>

jackocnr on 12 Jul 2019

It would still be nice to have this option for future support and compatibility. @shilman can this be reopened?

donaldpipowitch on 22 Oct 2019

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 12 Nov 2019

Just came here searching for the same thing; would be great to do this w/o override.

joscha on 4 Dec 2019

stale[bot] on 25 Dec 2019

👀1

@

@

buddabudda7 on 25 Dec 2019

stale[bot] on 15 Jan 2020

Want this too ;)

t-moennich on 10 Feb 2020

stale[bot] on 3 Mar 2020

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

stale[bot] on 2 Apr 2020

bumping this ticket again. would really love this option w/o a workaround

morficus on 7 May 2020

👍2

cc @yannbf

shilman on 8 May 2020

The same request

monolithed on 16 Oct 2020

Same request.
If "showBackgroundGrid" is made an option of the "backgrounds" parameter, then we would be able to control this at a story level. A much-needed feature.