Skip to content

Commit

Permalink
fix(devenv): use content margin style for expanded side nav (carbon-d…
Browse files Browse the repository at this point in the history
…esign-system#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 carbon-design-system#3591.
  • Loading branch information
asudoh authored and joshblack committed Jan 6, 2020
1 parent 16f50a6 commit 4bd9776
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 @@ -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>
);
Expand Down Expand Up @@ -627,7 +634,7 @@ storiesOf('UI Shell', module)
<SideNavLink href="javascript:void(0)">L0 link</SideNavLink>
</SideNavItems>
</SideNav>
<StoryContent />
<StoryContent useResponsiveOffset={false} />
</>
))
)
Expand Down Expand Up @@ -669,7 +676,7 @@ storiesOf('UI Shell', module)
</SideNavLink>
</SideNavItems>
</SideNav>
<StoryContent />
<StoryContent useResponsiveOffset={false} />
</>
))
)
Expand Down

0 comments on commit 4bd9776

Please sign in to comment.