Search code examples
storybook

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

I'm using Storybook v5.2.6 and am trying to change the size of the grid lines shown in my stories.

After adding @storybook/addon-backgrounds a toggle grid button appears in my Storybook toolbar. Clicking the button plots a 20px grid: enter image description here

I want to globally change the grid size to be 8px and I have tried the following:

import { configure, addParameters } from '@storybook/react';
import { create } from '@storybook/theming/create';

const storyBookTheme = create({
  gridCellSize: 8,
  grid: { cellSize: 8 }, // alternative approach
  brandTitle: 'Hello, World!',
});

addParameters({
  options: {
    theme: storyBookTheme,
  },
  ...
});

configure(require.context('../stories', true, /\.stories\.js$/), module);

I haven't been able to find any documentation on how to use this parameter globally, but it seems to be the correct approach because:

  1. In the Storybook 'Kitchen Sink' repo, the gridCellSize parameter is set like this, along with other theme variables.
  2. In PR #6252 the author makes a change to "Pick up gridCellSize from Theme configuration options"

So I thought my above attempt would work, however a 20px grid is still plotted.

In the release notes for Storybook 5.2.0-alpha.43 they mention the breaking change:

"Move grid toolbar feature to background-addon".

However, there are no migration instructions

So, the question is, how do I set the grid cell size?

Update

I've upgraded to Storybook 5.3.0-beta.19 and can now set the grid size on a story-by-story basis, but I'm still unable to set this globally.

Button.story = {
  parameters: {
    grid: { cellSize: 8 },
  },
};
Solution

  • After trying various permutations, I've stumbled upon the correct configuration.

    This works with Storybook 5.3.0-beta.19. I'm not sure about earlier versions.

    Rather than setting the gridCellSize parameter in the theme, you need to add grid: { cellSize: 8 } to the configuration parameters. In your config.js file, do the following:

    import { configure, addParameters } from '@storybook/react';
import { create } from '@storybook/theming/create';

const storyBookTheme = create({
  brandTitle: 'Hello, World!',
});

addParameters({
  grid: { cellSize: 8 }
  options: {
    theme: storyBookTheme,
  },
  ...
});

configure(require.context('../stories', true, /\.stories\.js$/), module);