Skip to content

Commit

Permalink
fix(devenv): use content margin style for expanded side nav
Browse files Browse the repository at this point in the history
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 carbon-design-system#3591.
  • Loading branch information
asudoh committed Dec 16, 2019
1 parent bd8a260 commit 1136712
Showing 1 changed file with 18 additions and 11 deletions.
29 changes: 18 additions & 11 deletions packages/react/src/components/UIShell/UIShell-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -114,14 +120,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>
);
Expand Down Expand Up @@ -595,7 +602,7 @@ storiesOf('UI Shell', module)
<SideNavLink href="javascript:void(0)">L0 link</SideNavLink>
</SideNavItems>
</SideNav>
<StoryContent />
<StoryContent useResponsiveOffset={false} />
</>
))
)
Expand Down Expand Up @@ -637,7 +644,7 @@ storiesOf('UI Shell', module)
</SideNavLink>
</SideNavItems>
</SideNav>
<StoryContent />
<StoryContent useResponsiveOffset={false} />
</>
))
)
Expand Down

0 comments on commit 1136712

Please sign in to comment.