diff --git a/.storybook/addons.js b/.storybook/addons.js
index b5fba72ec45..e32e5d2cc74 100644
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@@ -1,5 +1,5 @@
// The order of these imports defines the order of the tabs in the addons panel
-import '@storybook/addon-backgrounds/register';
+import '@storybook/addon-contexts/register';
import '@storybook/addon-viewport/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-notes/register';
diff --git a/.storybook/config.js b/.storybook/config.js
index 6a02acd7218..c2b768fe0ca 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -7,11 +7,12 @@ import {
storiesOf,
} from '@storybook/react';
import {setConsoleOptions} from '@storybook/addon-console';
+import {withContexts} from '@storybook/addon-contexts/react';
import {create} from '@storybook/theming';
import tokens from '@shopify/polaris-tokens';
import {AppProvider} from '../src';
import {Playground} from '../playground/Playground';
-import en from '../locales/en.json';
+import enTranslations from '../locales/en.json';
addParameters({
options: {
@@ -29,27 +30,67 @@ addParameters({
// SEE https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/theming/index.md
}),
},
- backgrounds: [
- {name: 'Sky Light', value: tokens.colorSkyLight, default: true},
- {name: 'White', value: '#fff'},
- ],
percy: {
skip: true,
widths: [375, 1280],
},
});
-addDecorator(function StrictModeDecorator(story) {
- return