Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(devenv): use content margin style for expanded side nav #4886

Merged
merged 2 commits into from
Dec 17, 2019
+18 −11
Merged

fix(devenv): use content margin style for expanded side nav #4886

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1136712
fix(devenv): use content margin style for expanded side nav
asudoh Dec 16, 2019
2562ab0
Merge branch 'master' into fixed-side-nav-content-offset
asudoh Dec 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 18 additions & 11 deletions packages/react/src/components/UIShell/UIShell-story.js
View file
Open in desktop
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