Use storybook's addon-contexts to allow for theme toggling

.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';

.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 <React.StrictMode>{story()}</React.StrictMode>;
+addDecorator(function PaddingDecorator(story) {
+  return <div style={{padding: '8px'}}>{story()}</div>;
 });
 
-addDecorator(function AppProviderDecorator(story) {
-  return (
-    <div style={{padding: '8px'}}>
-      <AppProvider i18n={en}>{story()}</AppProvider>
-    </div>
-  );
-});
+function StrictModeToggle({isStrict = false, children}) {
+  const Wrapper = isStrict ? React.StrictMode : React.Fragment;
+  return <Wrapper>{children}</Wrapper>;
+}
+
+addDecorator(
+  withContexts([
+    {
+      icon: 'dashboard',
+      title: 'Strict Mode',
+      components: [StrictModeToggle],
+      params: [
+        {name: 'React Strict Mode On', default: true, props: {isStrict: true}},
+        {name: 'React Strict Mode Off', props: {isStrict: false}},
+      ],
+    },
+    {
+      icon: 'paintbrush',
+      title: 'Themes',
+      components: [AppProvider],
+      params: [
+        {
+          name: 'Global Theming Disabled',
+          default: true,
+          props: {i18n: enTranslations},
+        },
+        {
+          name: 'Global Theming Enabled - Light Mode',
+          props: {
+            i18n: enTranslations,
+            features: {
+              unstableGlobalTheming: true,
+              theme: {UNSTABLE_colors: {surface: '#FAFAFA'}},
+            },
+          },
+        },
+        {
+          name: 'Global Theming Enabled - Dark Mode',
+          props: {
+            i18n: enTranslations,
+            features: {unstableGlobalTheming: true},
+            theme: {
+              colors: {topBar: {background: '#357997'}},
+              UNSTABLE_colors: {surface: '#111213'},
+            },
+          },
+        },
+      ],
+    },
+  ]),
+);
 
 // addon-console
 setConsoleOptions((opts) => {

.storybook/preview-head.html

@@ -1,13 +1,4 @@
 <style>
-  /**
-   * Polaris sets a background on the body, which affects the preview area.
-   * Unset this so that the background is transparent so that we can see the
-   * layout grid and custom background colors set by storybook
-  */
-  body {
-    background-color: initial !important;
-  }
-
   /**
    * Override dynamically generated values to be fixed values instead,
    * to eliminate false positives due to ever-changing values between Percy

UNRELEASED.md

@@ -18,6 +18,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed issue with `Stack` where a `Stack.Item` was not getting a minimum width ([2273](https://github.com/Shopify/polaris-react/pull/2273))
 - Fixed issue with `Filters` applying inconsistent border styles to sibling filters and when
   there is only one filter in the filter list ([2284](https://github.com/Shopify/polaris-react/pull/2284))
+- Added `aria-disabled` to select component content when it is disabled ([#2281](https://github.com/Shopify/polaris-react/pull/2281))
 
 ### Documentation
 
@@ -26,6 +27,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Development workflow
 
+- Add support for context customization in Storybook using addon-contexts ([#2281](https://github.com/Shopify/polaris-react/pull/2281))
+
 ### Dependency upgrades
 
 ### Code quality

package.json

@@ -97,7 +97,7 @@
     "@shopify/sewing-kit": "^0.92.3",
     "@storybook/addon-a11y": "^5.2.1",
     "@storybook/addon-actions": "^5.2.1",
-    "@storybook/addon-backgrounds": "^5.2.1",
+    "@storybook/addon-contexts": "^5.2.1",
     "@storybook/addon-console": "^1.2.1",
     "@storybook/addon-notes": "^5.2.1",
     "@storybook/addon-viewport": "^5.2.1",

src/components/Select/Select.tsx

@@ -133,7 +133,7 @@ export function Select({
   const selectedOption = getSelectedOption(normalizedOptions, value);
 
   const contentMarkup = (
-    <div className={styles.Content} aria-hidden>
+    <div className={styles.Content} aria-hidden aria-disabled={disabled}>
       {inlineLabelMarkup}
       <span className={styles.SelectedOption}>{selectedOption}</span>
       <span className={styles.Icon}>

yarn.lock

@@ -1632,28 +1632,23 @@
     react-inspector "^3.0.2"
     uuid "^3.3.2"
 
-"@storybook/addon-backgrounds@^5.2.1":
+"@storybook/addon-console@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-console/-/addon-console-1.2.1.tgz#f338401661b4636118b13839848061e996d4e104"
+  integrity sha512-2iDbDTipWonvRpIqLLntfhCGvawFFvoG1xyErpyL7K/HRdQ1zzIvR1Qm83S7TK8Vg+RzZWm4wcDbxx7WOsFCNg==
+  dependencies:
+    global "^4.3.2"
+
+"@storybook/addon-contexts@^5.2.1":
   version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-5.2.1.tgz#9f705870faacbc693db7f2d3f08f739e4759026d"
-  integrity sha512-vNNqKvZ+aAf4e6szdMKIXgancu+AzeKXvHtXiAgrMd5ihKAMgDjdy7G13xMpbrYSb5V4luzDsy6pYg3Az7KvLA==
+  resolved "https://registry.yarnpkg.com/@storybook/addon-contexts/-/addon-contexts-5.2.1.tgz#525962244e33e5228c92fdccebe1eeb6f521d957"
+  integrity sha512-y1LvZWE7FLy03vMCX8wme1fy9hdU3l8K9QleSt1MqYYXtTi4DmhgD8SHoKDN/RmaS28vJQXpecOhUk5ZP920Cw==
   dependencies:
     "@storybook/addons" "5.2.1"
     "@storybook/api" "5.2.1"
-    "@storybook/client-logger" "5.2.1"
     "@storybook/components" "5.2.1"
     "@storybook/core-events" "5.2.1"
-    "@storybook/theming" "5.2.1"
     core-js "^3.0.1"
-    memoizerific "^1.11.3"
-    react "^16.8.3"
-    util-deprecate "^1.0.2"
-
-"@storybook/addon-console@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-console/-/addon-console-1.2.1.tgz#f338401661b4636118b13839848061e996d4e104"
-  integrity sha512-2iDbDTipWonvRpIqLLntfhCGvawFFvoG1xyErpyL7K/HRdQ1zzIvR1Qm83S7TK8Vg+RzZWm4wcDbxx7WOsFCNg==
-  dependencies:
-    global "^4.3.2"
 
 "@storybook/addon-knobs@5.2.1":
   version "5.2.1"