Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook background make grid size customizable

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Comments:12 (4 by maintainers)

Top GitHub Comments

4reactions

Dangoocommented, Sep 2, 2020

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!

1reaction

shilmancommented, Sep 25, 2020

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.

Top Results From Across the Web

Backgrounds - Storybook - JS.ORG

Backgrounds toolbar also includes a Grid selector. This way, you can quickly see if your components are aligned. You don't need additional configuration...

How do I set the grid cell size in Storybook 5? - Stack Overflow

I want to globally change the grid size to be 8px and I have tried the following: import { configure, addParameters } from...

NEW Book Bolt Design Studio | Review + Tutorial - YouTube

Click here to check out Book Bolt and get access to the NEW Book Bolt Design Studio! And use my code SARAH20 for...

How to Make a Book Cover with Book Cover Creator | Fotor

1. Click the button "Get Started" first to create a blank canvs. 2. Go to "Templates" at the left dashboard, and select "Book...

Background Remover: Remove Bg from Image for Free | Fotor

Remove image backgrounds 100% automatically in one click with Fotor AI background remover. Open image your now to get cutout in an instant...