Merge pull request #11460 from storybookjs/11459-backgrounds-zero-config-defaults

Addon-backgrounds: Zero config defaults

MIGRATION.md

@@ -4,7 +4,6 @@
   - [Hoisted CSF annotations](#hoisted-csf-annotations)
   - [Zero config typescript](#zero-config-typescript)
   - [Correct globs in main.js](#correct-globs-in-mainjs)
-  - [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api)
   - [CRA preset removed](#cra-preset-removed)
   - [Args passed as first argument to story](#args-passed-as-first-argument-to-story)
   - [6.0 Docs breaking changes](#60-docs-breaking-changes)
@@ -34,6 +33,7 @@
     - [Removed action decorator APIs](#removed-action-decorator-apis)
     - [Removed withA11y decorator](#removed-witha11y-decorator)
     - [Essentials addon disables differently](#essentials-addon-disables-differently)
+    - [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api)
   - [6.0 Deprecations](#60-deprecations)
     - [Deprecated addon-info, addon-notes](#deprecated-addon-info-addon-notes)
     - [Deprecated addon-contexts](#deprecated-addon-contexts)
@@ -188,43 +188,6 @@ Example of a **valid** glob:
 stories: ['./**/*.stories.@(ts|js)']
 ```
 
-### Backgrounds addon has a new api
-
-Starting in 6.0, the backgrounds addon now receives an object instead of an array as parameter, with a property to define the default background.
-
-Consider the following example of its usage in `Button.stories.js`:
-
-```jsx
-// Button.stories.js
-export default {
-  title: 'Button',
-  parameters: {
-    backgrounds: [
-      { name: 'twitter', value: '#00aced', default: true },
-      { name: 'facebook', value: '#3b5998' },
-    ],
-  },
-};
-```
-
-Here's an updated version of the example, using the new api:
-
-```jsx
-// Button.stories.js
-export default {
-  title: 'Button',
-  parameters: {
-    backgrounds: {
-      default: 'twitter',
-      values: [
-        { name: 'twitter', value: '#00aced' },
-        { name: 'facebook', value: '#3b5998' },
-      ],
-    },
-  },
-};
-```
-
 ### CRA preset removed
 
 The built-in create-react-app preset, which was [previously deprecated](#create-react-app-preset), has been fully removed.
@@ -633,6 +596,48 @@ addParameters({
 
 In 6.0, `addon-essentials` doesn't configure addons if the user has already configured them in `main.js`. In 5.3 it previously checked to see whether the package had been installed in `package.json` to disable configuration. The new setup is preferably because now users' can install essential packages and import from them without disabling their configuration.
 
+#### Backgrounds addon has a new api
+
+Starting in 6.0, the backgrounds addon now receives an object instead of an array as parameter, with a property to define the default background.
+
+Consider the following example of its usage in `Button.stories.js`:
+
+```jsx
+// Button.stories.js
+export default {
+  title: 'Button',
+  parameters: {
+    backgrounds: [
+      { name: 'twitter', value: '#00aced', default: true },
+      { name: 'facebook', value: '#3b5998' },
+    ],
+  },
+};
+```
+
+Here's an updated version of the example, using the new api:
+
+```jsx
+// Button.stories.js
+export default {
+  title: 'Button',
+  parameters: {
+    backgrounds: {
+      default: 'twitter',
+      values: [
+        { name: 'twitter', value: '#00aced' },
+        { name: 'facebook', value: '#3b5998' },
+      ],
+    },
+  },
+};
+```
+
+In addition, backgrounds now ships with the following defaults:
+
+- no selected background (transparent)
+- light/dark options
+
 ### 6.0 Deprecations
 
 We've deprecated the following in 6.0: `addon-info`, `addon-notes`, `addon-contexts`, `addon-centered`, `polymer`.

addons/backgrounds/README.md

@@ -31,6 +31,11 @@ Backgrounds requires two parameters:
 - `default` - matches the **name** of the value which will be selected by default.
 - `values` - an array of elements containing name and value (with a valid css color e.g. HEX, RGBA, etc.)
 
+It ships with the following defaults:
+
+- no selected background (transparent)
+- light/dark options in the menu
+
 Write your stories like this:
 
 ```jsx

addons/backgrounds/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

addons/backgrounds/src/preset/defaultParameters.tsx

@@ -0,0 +1,8 @@
+export const parameters = {
+  backgrounds: {
+    values: [
+      { name: 'light', value: '#F8F8F8' },
+      { name: 'dark', value: '#333333' },
+    ],
+  },
+};

addons/backgrounds/src/preset/index.ts

@@ -0,0 +1,7 @@
+export function config(entry: any[] = []) {
+  return [...entry, require.resolve('./defaultParameters')];
+}
+
+export function managerEntries(entry: any[] = [], options: any) {
+  return [...entry, require.resolve('../register')];
+}

examples/cra-ts-essentials/.storybook/main.js

@@ -8,7 +8,7 @@ module.exports = {
     {
       name: '@storybook/addon-essentials',
       options: {
-        backgrounds: false,
+        viewport: false,
       },
     },
   ],