diff --git a/MIGRATION.md b/MIGRATION.md index ec9c80124277..3f2aa25593a5 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -17,7 +17,10 @@ - [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility) - [Babel mode v7](#babel-mode-v7) - [Loader behavior with args changes](#loader-behavior-with-args-changes) - - [Angular component parameter removed](#angular-component-parameter-removed) + - [6.4 Angular changes](#64-angular-changes) + - [SB Angular builder](#sb-angular-builder) + - [Angular13](#angular13) + - [Angular component parameter removed](#angular-component-parameter-removed) - [6.4 deprecations](#64-deprecations) - [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag) - [From version 6.2.x to 6.3.0](#from-version-62x-to-630) @@ -470,7 +473,53 @@ This will create a `.babelrc.json` file. This file includes a bunch of babel plu In 6.4 the behavior of loaders when arg changes occurred was tweaked so loaders do not re-run. Instead the previous value of the loader is passed to the story, irrespective of the new args. -### Angular component parameter removed +### 6.4 Angular changes + +#### SB Angular builder + +Since SB6.3, Storybook for Angular supports a builder configuration in your project's `angular.json`. This provides an Angular-style configuration for running and building your Storybook. The full builder documentation will be shown in the [main documentation page](https://storybook.js.org/docs/angular) soon, but for now you can check out an example here: + +- `start-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78 +- `build-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L86 + +#### Angular13 + +Angular 13 introduces breaking changes that require updating your Storybook configuration if you are migrating from a previous version of Angular. + +Most notably, the documented way of including global styles is no longer supported by Angular13. Previously you could write the following in your `.storybook/preview.js` config: + +``` +import '!style-loader!css-loader!sass-loader!./styles.scss'; +``` + +If you use Angular 13 and above, you should use the builder configuration instead: + +```json + "my-default-project": { + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "styles": ["src/styles.css", "src/styles.scss"], + } + } + }, + }, +``` + +If you need storybook-specific styles separate from your app, you can configure the styles in the [SB Angular builder](#sb-angular-builder), which completely overrides your project's styles: + +```json + "storybook": { + "builder": "@storybook/angular:start-storybook", + "options": { + "browserTarget": "my-default-project:build", + "styles": [".storybook/custom-styles.scss"], + }, + } +``` + +#### Angular component parameter removed In SB6.3 and earlier, the `default.component` metadata was implemented as a parameter, meaning that stories could set `parameters.component` to override the default export. This was an internal implementation that was never documented, but it was mistakenly used in some Angular examples.