📖
Storybookのaddon-viewportの最小幅を変更する
@storybook/addon-viewport
Storybookでは @storybook/addon-viewport を導入すれば、コンポーネントの表示をレスポンシブに確認することができます。
このアドオンはデフォルトでは、Small mobile
Large mobile
Tablet
の3つのViewportを提供しています。
デザイン要件と画面の最小幅
Small mobile
はデフォルトでは320x568のサイズで定義されています。これはiPhone8や初代iPhoneSEなど昔の端末の画面サイズになっており、デザイン要件として最小の画面サイズをこれより大きくしている場合にデザイン要件と確認する画面サイズに差異が出てしまいます。
そこで、Small mobile
をiPhoneSE3などの375x667に変更するようにします。
Viewportの変更
Small mobile
などのViewportサイズの一覧は MINIMAL_VIEWPORTS
として定数定義されており、デフォルトではこの定数が適用されています。
Viewportの一覧は.storybook/preview.ts
から設定ができるので、このMINIMAL_VIEWPORTS
の定数の値を上書きする設定を書いてあげることで、最小幅を変更することができます。
import type { Preview } from '@storybook/react';
import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
const preview: Preview = {
parameters: {
backgrounds: {
default: 'light',
},
viewport: {
viewports: {
...MINIMAL_VIEWPORTS,
// Small mobileの定義を上書き
mobile1: {
name: 'Small mobile',
styles: { width: '375px', height: '667px' },
},
},
},
},
};
export default preview;
Discussion