Chapter 10

[アドオン編] Backgrounds addon

shingo.sasaki
shingo.sasaki
2020.11.03に更新

Backgrounds addon について

Backgrounds addon は、essentials addons の一つで、 コンポーネントを描画する際の画面の背景色を変更する アドオンです。

Storybook でストーリーを描画する際、デフォルトの背景色は白になっていますが、コンポーネント自体の背景色も白の場合、コンポーネントと背景の境界が識別できなくなってしまう問題があります。

また、コンポーネントを実際に描画するであろう画面の背景色を設定することで、背景とコンポーネントの色の調和を確認したくなることもあるでしょう。

そういったケースでは、 Backgrounds addon を用いて、背景色を柔軟に変更することで、コンポーネント自体の背景色を際立たせることができます。

使用する背景色を定義する

デフォルトでは dark light の2種類の背景色が定義されていますが、こちらも ViewPorts 同様に、 .storybook/preview.js で定義し直すことができます。

.storybook/preview.js
export const parameters = {
  backgrounds: {
    default: 'twitter',
    values: [
      {
        name: 'twitter',
        value: '#00aced'
      },
      {
        name: 'facebook',
        value: '#3b5998'
      }
    ]
  }
}

ここでは、 twitter 及び facebook という名前の背景色を定義し、それぞれのテーマカラーを設定しています。これによって、設定できる背景色が変わっていることが確認できます。

コンポーネントごとにデフォルトの背景色を設定する

コンポーネントごとに背景色を設定することができますが、基本的には Viewports addon と同じ流れなので、コードのみ掲載します。

src/components/Page.stories.js
export default {
  title: 'Page',
  component: Page,
  parameters: {
    backgrounds: {
      default: 'twitter'
    }
  }
}

ストーリーごとにデフォルトの背景色を設定する

コンポーネントごとと同様にストーリー単位で背景色を設定することもできます。

src/components/Page.stories.js
export const ForTwitter = Template.bind({})
ForTwitter.parameters = {
  backgrounds: {
    default: 'twitter'
  }
}

export const ForFacebook = Template.bind({})
ForFacebook.parameters = {
  backgrounds: {
    default: 'facebook'
  }
}