mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 07:21:17 +08:00

History

Gaëtan Maisse 36ee762ec7 fix: clean usage of @types/webpack-env dep in all packages

- `@types/webpack-env` must be defined as `dependencies` in packages that export a type/function using typings from `@types/webpack-env` (it is often `NodeModule`). In that case `/// <reference types="webpack-env" />` is present in some files of the `dist` folder of the lib. Example: `lib/client-api`.
 - `@types/webpack-env` must be defined as `devDependencies` in packages that use its typings internally but does not expose anything related to it. Many addons need the type because they use `module.hot` function. Example: `addons/a11y`
 - `webpack-env` should be removed from "compilerOptions.types" key of `tsconfig.json` of packages that don't need it.

 I also bump `@types/webpack-env` to ^1.15.0 to have the same version all across the monorepo

2020-01-20 08:41:44 +01:00

src

fix(background): use backgroundColor to prevent css collision with grid

2019-09-01 23:59:20 +08:00

package.json

fix: clean usage of @types/webpack-env dep in all packages

2020-01-20 08:41:44 +01:00

README.md

fix typos in backgrounds addon docs

2019-12-15 21:26:40 -05:00

Addon-backgrouns support

2018-05-03 02:03:30 +03:00

tsconfig.json

Update tsconfig.json

2019-03-15 19:57:56 +01:00

README.md

Storybook Addon Backgrounds

Storybook Background Addon can be used to change background colors inside the preview in Storybook.

Framework Support

Installation

npm i -D @storybook/addon-backgrounds

Configuration

Then create a file called main.js in your storybook config.

Add following content to it:

module.exports = {
  addons: ['@storybook/addon-backgrounds/register']
}

Usage

Then write your stories like this:

import React from 'react';

export default {
  title: 'Button',
  parameters: {
    backgrounds: [
      { name: 'twitter', value: '#00aced', default: true },
      { name: 'facebook', value: '#3b5998' },
    ]
  },
};

export const defaultView = () => (
  <button>Click me</button>
);

You can add the backgrounds to all stories with addParameters in .storybook/preview.js:

import { addParameters } from '@storybook/react'; // <- or your storybook framework

addParameters({
  backgrounds: [
    { name: 'twitter', value: '#00aced', default: true },
    { name: 'facebook', value: '#3b5998' },
  ],
});

If you want to override backgrounds for a single story or group of stories, pass the backgrounds parameter:

import React from 'react';

export default {
  title: 'Button',
}

export const defaultView = () => (
  <button>Click me</button>
);
defaultView.story = {
  parameters: {
    backgrounds: [
      { name: 'red', value: 'rgba(255, 0, 0)' },
    ],
  },
};

If you don't want to use backgrounds for a story, you can set the backgrounds parameter to [], or use { disable: true } to skip the addon:

import React from 'react';

export default {
  title: 'Button',
}

export const noBackgrounds = () => (
  <button>Click me</button>
);
noBackgrounds.story = {
  parameters: {
    backgrounds: [],
  },
};

export const disabledBackgrounds = () => (
  <button>Click me</button>
);
disabledBackgrounds.story = {
  parameters: {
    backgrounds: { disabled: true },
  },
};