Storybook: Storybook background make grid size customizable

[T04435]

I have added "@storybook/addon-backgrounds": "^5.3.19", and see that it has the option to toggle a grid:

I see that the grid is generated by the linked file and the size is set to 20 on the linked line.

https://github.com/storybookjs/storybook/blob/62cd26251eb2c85d24dadb83c7f9be100b336cea/addons/backgrounds/src/containers/GridSelector.tsx#L17

Is there a way to change the cellSize value?

I see there is another plugin (theming) that has a similar option, but don't want to add an extra plugin for the same feature.

https://github.com/storybookjs/storybook/blob/62cd26251eb2c85d24dadb83c7f9be100b336cea/examples/cra-kitchen-sink/.storybook/manager.js#L12

[stale[bot]]

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]]

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]]

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!

[Dangoo]

Hey @T04435,

I traced down GRID_PARAM_KEY to being resolved to "grid" which can be specified in preview.ts like so:

export const parameters = {
  grid: {
    cellSize: 5
  }
}

Cheers!

[T04435]

Thanks @Dangoo it just worked.

[shilman]

@yannbf can you add to the docs? possibly update in 6.1 for consistency and deprecate the old version?

export const parameters = {
  backgrounds: {
    gridSize: 5
  }
}

[Dangoo]

[…] possibly update in 6.1 for consistency and deprecate the old version?

@shilman wouldn't that take away the possibility to disable the grid feature (independent from backgrounds) like stated in the docs?

export const parameters = {
  grid: { disable: true },
}

[shilman]

@Dangoo Grid is not an addon tho..

[Dangoo]

@shilman my bad, was misguided - even though it would be valuable feature to turn of either of them.

[yannbf]

Hey @Dangoo that is pretty valuable feedback, thanks for that! I'm currently making changes in the addon and will make sure that it's well documented as well as it allows you to disable the grid separately from backgrounds. If you have some feedback or ideas, feel free to share!

[Dangoo]

Hey @yannbf thanks for taking this on!

Regarding the grid here are some additional customization ideas:

• customizable grid line lightness/opacity to make it more subtle
  
  
  
  • Could be implemented passing the parameter as alpha value here, default 0.5
  
  
• customizable grid sub cell amount (currently 5 sub cells, there are use cases when you may want e.g. 4 or 10)
  
  
  
  • Could be implemented passing the parameter here, default 5
  
  
• Adjustable grid origin offset (e.g. to match story iframe padding)
  
  
  
  • Could be implemented by here using calc(-1 px + <offsetX>) calc(-1px + <offsetY>), default 0
  
  

Regarding your comment here about creating a theme selector, do you see any chance the background selector could be "remote controlled" based on a selected theme (light background for light theme, dark background for dark theme)?

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.16 containing PR #12368 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.