From 4bd9776198d61551fec6cce9782105799720c5ff Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Tue, 17 Dec 2019 09:09:22 +0900
Subject: [PATCH] fix(devenv): use content margin style for expanded side nav
 (#4886)

This change ensures that the fixed side nav stories make use of
`margin-left` style for `.bx--content` with `.bx--side-nav--expanded`
instead of using responsive left margin `v10` grid defines, so that the
main content won't be hidden underneath the fixed side nav when fixed
it's expanded.

Fixes #3591.
---
 .../src/components/UIShell/UIShell-story.js   | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
index 7739ffd0c18d..584e053946e8 100644
--- a/packages/react/src/components/UIShell/UIShell-story.js
+++ b/packages/react/src/components/UIShell/UIShell-story.js
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import cx from 'classnames';
+
 import { Search20, Notification20, AppSwitcher20 } from '@carbon/icons-react';
 
 import { storiesOf } from '@storybook/react';
@@ -56,11 +58,15 @@ const Fade16 = () => (
   </svg>
 );
 
-const StoryContent = () => {
+const StoryContent = ({ useResponsiveOffset = true }) => {
+  const classNameFirstColumn = cx({
+    'bx--col-lg-13': true,
+    'bx--offset-lg-3': useResponsiveOffset,
+  });
   const content = (
     <div className="bx--grid">
       <div className="bx--row">
-        <div className="bx--offset-lg-3 bx--col-lg-13">
+        <div className={classNameFirstColumn}>
           <h2 style={{ fontWeight: '800', margin: '30px 0', fontSize: '20px' }}>
             Purpose and function
           </h2>
@@ -115,14 +121,15 @@ const StoryContent = () => {
       </div>
     </div>
   );
+  const style = {
+    height: '100%',
+  };
+  if (useResponsiveOffset) {
+    style.margin = '0';
+    style.width = '100%';
+  }
   return (
-    <Content
-      id="main-content"
-      style={{
-        margin: '0',
-        height: '100%',
-        width: '100%',
-      }}>
+    <Content id="main-content" style={style}>
       {content}
     </Content>
   );
@@ -627,7 +634,7 @@ storiesOf('UI Shell', module)
             <SideNavLink href="javascript:void(0)">L0 link</SideNavLink>
           </SideNavItems>
         </SideNav>
-        <StoryContent />
+        <StoryContent useResponsiveOffset={false} />
       </>
     ))
   )
@@ -669,7 +676,7 @@ storiesOf('UI Shell', module)
             </SideNavLink>
           </SideNavItems>
         </SideNav>
-        <StoryContent />
+        <StoryContent useResponsiveOffset={false} />
       </>
     ))
   )