introduce omitAppProvider front matter

.storybook/polaris-readme-loader.js

@@ -39,7 +39,9 @@ module.exports = function loader(source) {
     return `
 const ${example.storyName}Component = (${example.code})();
 export function ${example.storyName}() {
-  return <${example.storyName}Component key="${readme.name}"/>;
+  return <div data-omit-app-provider="${readme.omitAppProvider}"><${
+      example.storyName
+    }Component /></div>;
 }
 ${example.storyName}.story = {
   name: ${JSON.stringify(example.name)},
@@ -281,6 +283,7 @@ function parseCodeExamples(data) {
     name: matter.data.name,
     category: matter.data.category,
     examples: generateExamples(matter),
+    omitAppProvider: matter.data.omitAppProvider || false,
   };
 }
 

.storybook/preview.js

@@ -27,23 +27,16 @@ function StrictModeToggle({isStrict = false, children}) {
   return <Wrapper>{children}</Wrapper>;
 }
 
-const COMPONENTS_TO_OMIT_APP_PROVIDER = [
-  'Top bar',
-  'App provider',
-  'Contextual save bar',
-  'Frame',
-];
-
 function AppProviderWithKnobs({newDesignLanguage, colorScheme, children}) {
-  const componentName = (() => {
+  const omitAppProvider = (() => {
     try {
-      return children.props.children.key;
+      return children.props.children.props['data-omit-app-provider'];
     } catch (e) {
-      return undefined;
+      return null;
     }
   })();
 
-  if (COMPONENTS_TO_OMIT_APP_PROVIDER.includes(componentName)) return children;
+  if (omitAppProvider === 'true') return children;
 
   const colors = Object.entries(DefaultThemeColors).reduce(
     (accumulator, [key, value]) => ({

UNRELEASED.md

@@ -22,7 +22,8 @@
 
 - Added `check:custom-property` job in travis ([#2778](https://github.com/Shopify/polaris-react/pull/2778))
 - Exported missing OptionListProps ([#2777](https://github.com/Shopify/polaris-react/pull/2777))
-- Omitted the Storybook `AppProvider` decorator for examples which already contain an `AppProvider` ([#2807](https://github.com/Shopify/polaris-react/pull/2807))
+- Omitted the Storybook `AppProvider` decorator for component examples which already contain an `AppProvider` ([#2807](https://github.com/Shopify/polaris-react/pull/2807))
+- Added an `omitAppProvider` front matter concept to prevent automatic wrapping of component examples with an `AppProvider` ([#2815](https://github.com/Shopify/polaris-react/pull/2815))
 
 ### Dependency upgrades
 

documentation/Component READMEs.md

@@ -26,6 +26,9 @@ keywords:
 # Indicates the component takes over the entire viewport
 fullSizeExamples: false # Optional, default: false
 
+# Prevents automatic wrapping of examples with an AppProvider
+omitAppProvider: false # Optional, default: false
+
 # Hides the playground, mostly useful for components which only render in an embedded app context
 # that don’t have a matching React source
 hidePlayground: false # Optional, default: false

src/components/AppProvider/README.md

@@ -17,6 +17,7 @@ keywords:
   - shopify app bridge
   - embedded app sdk
   - sdk
+omitAppProvider: true
 ---
 
 # App provider

src/components/ContextualSaveBar/README.md

@@ -9,6 +9,7 @@ keywords:
   - save
   - cancel
   - logo
+omitAppProvider: true
 ---
 
 # Contextual Save Bar

src/components/Frame/README.md

@@ -16,6 +16,7 @@ keywords:
   - menu
   - toast
 fullSizeExamples: true
+omitAppProvider: true
 ---
 
 # Frame

src/components/TopBar/README.md

@@ -14,6 +14,7 @@ keywords:
   - user
   - menu
   - logo
+omitAppProvider: true
 ---
 
 # Top bar