From ce6cf9ff99949693fb9ab7446936991911734c0b Mon Sep 17 00:00:00 2001
From: Ben Scott <ben.scott@shopify.com>
Date: Fri, 11 Oct 2019 20:39:07 -0700
Subject: [PATCH 1/3] Use storybook's addon-contexts to allow for theme
 toggling

- Add addon-contexts and remove addon-backgrounds
- Configure context to allow toggling React strict mode on/off
- Configure context to allow configuring theme setups. There is a
  choice of default, global theming light mode and global theming dark
  mode
---
 .storybook/addons.js         |  2 +-
 .storybook/config.js         | 65 ++++++++++++++++++++++++++++--------
 .storybook/preview-head.html |  9 -----
 package.json                 |  2 +-
 yarn.lock                    | 25 ++++++--------
 5 files changed, 63 insertions(+), 40 deletions(-)

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..f31d6b0b3b0 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,63 @@ 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: 'Base Theming', 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) => {
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 19309addd8b..6db92f3f116 100644
--- a/.storybook/preview-head.html
+++ b/.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
diff --git a/package.json b/package.json
index 6c412ba3d7b..8899b62b5f9 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index c2c93def64a..94f44a77d8d 100644
--- a/yarn.lock
+++ b/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"

From ddf45ecb62d1628279ee994ea9d07292850fe29d Mon Sep 17 00:00:00 2001
From: Tim Layton <tim.layton@shopify.com>
Date: Sat, 12 Oct 2019 14:39:55 -0700
Subject: [PATCH 2/3] mark the select content node as disabled

---
 src/components/Select/Select.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 2ceb85c573b..08feef20f75 100644
--- a/src/components/Select/Select.tsx
+++ b/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}>

From 5821826b801bf3f27223331b83e0b8992cb5b4c5 Mon Sep 17 00:00:00 2001
From: Ben Scott <ben.scott@shopify.com>
Date: Tue, 15 Oct 2019 10:57:36 -0700
Subject: [PATCH 3/3] Changelog and PR feedback

---
 .storybook/config.js | 6 +++++-
 UNRELEASED.md        | 3 +++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/.storybook/config.js b/.storybook/config.js
index f31d6b0b3b0..c2b768fe0ca 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -61,7 +61,11 @@ addDecorator(
       title: 'Themes',
       components: [AppProvider],
       params: [
-        {name: 'Base Theming', default: true, props: {i18n: enTranslations}},
+        {
+          name: 'Global Theming Disabled',
+          default: true,
+          props: {i18n: enTranslations},
+        },
         {
           name: 'Global Theming Enabled - Light Mode',
           props: {
diff --git a/UNRELEASED.md b/UNRELEASED.md
index 93bb15e5098..7455c7e3367 100644
--- a/UNRELEASED.md
+++ b/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