Merge pull request #16853 from storybookjs/16768-modernInline-respect…

…-no-inline

Don't render with `modernInline` if `inlineStories` is `false`

addons/docs/src/blocks/Story.tsx

@@ -157,22 +157,6 @@ const Story: FunctionComponent<StoryProps> = (props) => {
   const [rendered, onRendered] = makeGate();
   useEffect(onRendered);
 
-  // If we are rendering a old-style inline Story via `PureStory` below, we want to emit
-  // the `STORY_RENDERED` event when it renders. The modern mode below calls out to
-  // `Preview.renderStoryToDom()` which itself emits the event.
-  if (story && !global?.FEATURES?.modernInlineRender) {
-    // We need to wait for two things before we can consider the story rendered:
-    //  (a) React's `useEffect` hook needs to fire. This is needed for React stories, as
-    //      decorators of the form `<A><B/></A>` will not actually execute `B` in the first
-    //      call to the story function.
-    //  (b) The story function needs to actually have been called.
-    //      Certain frameworks (i.e.angular) don't actually render the component in the very first
-    //      React render cycle, so we need to wait for the framework to actually do that
-    Promise.all([storyFnRan, rendered]).then(() => {
-      channel.emit(Events.STORY_RENDERED, storyId);
-    });
-  }
-
   if (!story) {
     return <StorySkeleton />;
   }
@@ -182,27 +166,43 @@ const Story: FunctionComponent<StoryProps> = (props) => {
     return null;
   }
 
-  if (global?.FEATURES?.modernInlineRender) {
-    // We do this so React doesn't complain when we replace the span in a secondary render
-    const htmlContents = `<span></span>`;
-
-    // FIXME: height/style/etc. lifted from PureStory
-    const { height } = storyProps;
-    return (
-      <div id={storyBlockIdFromId(story.id)}>
-        <MDXProvider components={resetComponents}>
-          {height ? (
-            <style>{`#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
-          ) : null}
-          {showLoader && <StorySkeleton />}
-          <div
-            ref={storyRef}
-            data-name={story.name}
-            dangerouslySetInnerHTML={{ __html: htmlContents }}
-          />
-        </MDXProvider>
-      </div>
-    );
+  if (storyProps.inline) {
+    // If we are rendering a old-style inline Story via `PureStory` below, we want to emit
+    // the `STORY_RENDERED` event when it renders. The modern mode below calls out to
+    // `Preview.renderStoryToDom()` which itself emits the event.
+    if (!global?.FEATURES?.modernInlineRender) {
+      // We need to wait for two things before we can consider the story rendered:
+      //  (a) React's `useEffect` hook needs to fire. This is needed for React stories, as
+      //      decorators of the form `<A><B/></A>` will not actually execute `B` in the first
+      //      call to the story function.
+      //  (b) The story function needs to actually have been called.
+      //      Certain frameworks (i.e.angular) don't actually render the component in the very first
+      //      React render cycle, so we need to wait for the framework to actually do that
+      Promise.all([storyFnRan, rendered]).then(() => {
+        channel.emit(Events.STORY_RENDERED, storyId);
+      });
+    } else {
+      // We do this so React doesn't complain when we replace the span in a secondary render
+      const htmlContents = `<span></span>`;
+
+      // FIXME: height/style/etc. lifted from PureStory
+      const { height } = storyProps;
+      return (
+        <div id={storyBlockIdFromId(story.id)}>
+          <MDXProvider components={resetComponents}>
+            {height ? (
+              <style>{`#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
+            ) : null}
+            {showLoader && <StorySkeleton />}
+            <div
+              ref={storyRef}
+              data-name={story.name}
+              dangerouslySetInnerHTML={{ __html: htmlContents }}
+            />
+          </MDXProvider>
+        </div>
+      );
+    }
   }
 
   return (