Add parameter to control when stories are wrapped with main (adobe#3013)

brunostasse · Apr 7, 2022 · 29a6cb1 · 29a6cb1
1 parent 2da97bc
commit 29a6cb1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/.storybook/custom-addons/provider/index.js b/.storybook/custom-addons/provider/index.js
@@ -44,9 +44,25 @@ function ProviderUpdater(props) {
     };
   }, []);
 
-  return (
-    <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue} toastPlacement={toastPositionValue}>
-      <main>
+  if (props.options.mainElement == null) {
+    return (
+      <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue} toastPlacement={toastPositionValue}>
+        <main>
+          <div style={{position: 'absolute', paddingTop: '20px', paddingLeft: '20px', paddingRight: '20px'}}>
+            {props.context.parameters.note && (<DialogTrigger type="popover">
+              <ActionButton>Note</ActionButton>
+              <Dialog>
+                <Content><Text>{props.context.parameters.note}</Text></Content>
+              </Dialog>
+            </DialogTrigger>)}
+          </div>
+          {storyReady && props.children}
+        </main>
+      </Provider>
+    );
+  } else {
+    return (
+      <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue} toastPlacement={toastPositionValue}>
         <div style={{position: 'absolute', paddingTop: '20px', paddingLeft: '20px', paddingRight: '20px'}}>
           {props.context.parameters.note && (<DialogTrigger type="popover">
             <ActionButton>Note</ActionButton>
@@ -56,9 +72,9 @@ function ProviderUpdater(props) {
           </DialogTrigger>)}
         </div>
         {storyReady && props.children}
-      </main>
-    </Provider>
-  );
+      </Provider>
+    );
+  }
 }
 
 export const withProviderSwitcher = makeDecorator({

diff --git a/packages/@react-aria/landmark/stories/Landmark.stories.tsx b/packages/@react-aria/landmark/stories/Landmark.stories.tsx
@@ -27,7 +27,8 @@ import {useLandmark} from '../';
 interface StoryProps {}
 
 const meta: Meta<StoryProps> = {
-  title: 'Landmark'
+  title: 'Landmark',
+  parameters: {providerSwitcher: {mainElement: false}}
 };
 
 export default meta;