Как установить размер ячейки сетки в Storybook 5?

Я использую Storybook v5.2.6 и пытаюсь изменить размер линий сетки, показанных в моих рассказах.

После добавления @storybook/addon-backgrounds на панели инструментов моей Storybook появляется кнопка переключения сетки. При нажатии кнопки отображается сетка размером 20 пикселей: введите описание изображения здесь

Я хочу глобально изменить размер сетки на 8 пикселей, и я пробовал следующее:

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);

Мне не удалось найти никакой документации о том, как использовать этот параметр в глобальном масштабе, но это кажется правильным подходом, потому что:

  1. В репозитории "Кухонная раковина" сборника рассказов параметр gridCellSize устанавливается таким же образом вместе с другими переменными темы.
  2. В PR № 6252 автор вносит изменения в «Поднять gridCellSize из параметров конфигурации темы "

Итак, Я думал, что моя вышеупомянутая попытка сработает, однако сетка 20 пикселей все еще построена.

В примечаниях к выпуску Storybook 5.2. 0-alpha.43 упоминается критическое изменение:

«Переместить функцию панели инструментов сетки в фоновый аддон».

Однако инструкций по миграции нет.

Итак, вопрос в том, как установить размер ячейки сетки?

Обновлять

Я обновился до Storybook 5.3.0-beta.19 и теперь могу устанавливать размер сетки для каждого сюжета, но я все еще не могу установить его глобально.

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

storybook
person ninjaPixel    schedule 29.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробовав различные перестановки, я наткнулся на правильную конфигурацию.

Это работает с Storybook 5.3.0-beta.19. Насчет более ранних версий я не уверен.

Вместо того, чтобы устанавливать параметр gridCellSize в теме, вам нужно добавить grid: { cellSize: 8 } к параметрам конфигурации. В вашем config.js файле сделайте следующее:

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);
person ninjaPixel    schedule 09.12.2019
comment
gridCellSize не работает в последней версии StoryBook 5.3.18, и, возможно, он не работает после обновления StoryBook версии 5.2 до версии 5.3.18, и я изменил несколько настроек конфигурации и использовал файлы настроек main.js, manager.js и preview.js - person Arpit; 05.05.2020
comment
Убедитесь, что это работает и в SB6, хотя и с другой структурой объектов. :) - person Jackolai; 07.09.2020