diff --git a/examples/react/UIShell/src/App.tsx b/examples/react/UIShell/src/App.tsx
index a8377962..3ecd0981 100644
--- a/examples/react/UIShell/src/App.tsx
+++ b/examples/react/UIShell/src/App.tsx
@@ -49,6 +49,7 @@ function App() {
expanded={isSideNavExpanded}
onSideNavBlur={onClickSideNavExpand}
isCollapsible
+ hideOverlay
className="nav--global">
<SideNavItems>
<SideNavMenu renderIcon={Fade} title="Link">
diff --git a/packages/react/src/components/UIShell/__stories__/UIShell.mdx b/packages/react/src/components/UIShell/__stories__/UIShell.mdx
index cb29d3bd..42ce99a2 100644
--- a/packages/react/src/components/UIShell/__stories__/UIShell.mdx
+++ b/packages/react/src/components/UIShell/__stories__/UIShell.mdx
@@ -24,6 +24,9 @@ import * as UIShellStories from './UIShell.stories';
- [Overview](#overview)
- [Getting started](#getting-started)
+ - [SCSS](#scss)
+ - [JS (via import)](#js-via-import)
+- [Component API](#component-api)
{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}
@@ -33,6 +36,8 @@ Enhancements to core Carbon UIShell components. Components included in this
package:
- `SideNav`
+ - `isCollapsible`
+ - `hideOverlay`
<Canvas of={UIShellStories.Default} />
@@ -45,23 +50,106 @@ yarn add @carbon/react
yarn add @carbon-labs/react-ui-shell
```
+### SCSS
+
+In your styles file import
+
+```
+@use '@carbon/react';
+@use '@carbon-labs/react-ui-shell/scss/ui-shell';
+```
+
### JS (via import)
```javascript
import { SideNav } from '@carbon-labs/react-ui-shell/es/index';
+import {
+ SideNavItems,
+ SideNavMenu,
+ SideNavMenuItem,
+ SideNavLink,
+ SkipToContent,
+ HeaderContainer,
+ Header,
+ HeaderName,
+ Theme,
+ HeaderMenuButton,
+ SideNavDivider,
+} from '@carbon/react';
+import { Fade } from '@carbon/icons-react';
function App() {
- return <SideNav />;
+ return (
+ <Theme theme="g100">
+ <HeaderContainer
+ render={({ isSideNavExpanded, onClickSideNavExpand }) => (
+ <>
+ <Header aria-label="IBM Platform Name">
+ <SkipToContent />
+ <HeaderMenuButton
+ aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'}
+ onClick={onClickSideNavExpand}
+ isActive={isSideNavExpanded}
+ aria-expanded={isSideNavExpanded}
+ isCollapsible
+ isFixedNav
+ />
+ <HeaderName href="#" prefix="IBM">
+ [Platform]
+ </HeaderName>
+ </Header>
+ <SideNav
+ aria-label="Side navigation1"
+ expanded={isSideNavExpanded}
+ onSideNavBlur={onClickSideNavExpand}
+ isCollapsible
+ hideOverlay
+ className="nav--global">
+ <SideNavItems>
+ <SideNavMenu renderIcon={Fade} title="Link">
+ <SideNavMenuItem href="#">Link</SideNavMenuItem>
+ <SideNavMenuItem href="#">Link</SideNavMenuItem>
+ <SideNavMenuItem href="#">Link</SideNavMenuItem>
+ </SideNavMenu>
+ <SideNavMenu renderIcon={Fade} title="Link">
+ <SideNavMenuItem href="#">Link</SideNavMenuItem>
+ </SideNavMenu>
+ <SideNavMenu renderIcon={Fade} title="Link">
+ <SideNavMenuItem href="#">Link</SideNavMenuItem>
+ </SideNavMenu>
+ <SideNavMenu renderIcon={Fade} title="Link">
+ <SideNavMenuItem href="#">Link</SideNavMenuItem>
+ </SideNavMenu>
+ <SideNavMenu renderIcon={Fade} title="Link">
+ <SideNavMenuItem href="#">Link</SideNavMenuItem>
+ </SideNavMenu>
+ <SideNavDivider />
+ <SideNavLink renderIcon={Fade} href="#">
+ Link
+ </SideNavLink>
+ <SideNavLink renderIcon={Fade} href="#">
+ Link
+ </SideNavLink>
+ <SideNavMenu renderIcon={Fade} title="Link">
+ <SideNavMenuItem href="#">Link</SideNavMenuItem>
+ <SideNavMenuItem href="#">Link</SideNavMenuItem>
+ <SideNavMenuItem href="#">Link</SideNavMenuItem>
+ </SideNavMenu>
+ </SideNavItems>
+ </SideNav>
+ <Theme theme="white">
+ <p>Content</p>
+ </Theme>
+ </>
+ )}
+ />
+ </Theme>
+ );
}
export default App;
```
-### SCSS
-
-In your styles file import
+## Component API
-```
-@use '@carbon/react';
-@use '@carbon-labs/react-ui-shell/scss/ui-shell';
-```
+<ArgTypes />
diff --git a/packages/react/src/components/UIShell/__stories__/UIShell.stories.js b/packages/react/src/components/UIShell/__stories__/UIShell.stories.js
index 61c4a74a..dd2905f8 100644
--- a/packages/react/src/components/UIShell/__stories__/UIShell.stories.js
+++ b/packages/react/src/components/UIShell/__stories__/UIShell.stories.js
@@ -127,6 +127,7 @@ export const Default = () => (
expanded={isSideNavExpanded}
onSideNavBlur={onClickSideNavExpand}
isCollapsible
+ hideOverlay
className="nav--global">
<SideNavItems>
<SideNavMenu renderIcon={Fade} title="Link">
diff --git a/packages/react/src/components/UIShell/components/SideNav.tsx b/packages/react/src/components/UIShell/components/SideNav.tsx
index f3240f52..718a791e 100644
--- a/packages/react/src/components/UIShell/components/SideNav.tsx
+++ b/packages/react/src/components/UIShell/components/SideNav.tsx
@@ -48,6 +48,7 @@ export interface SideNavProps extends ComponentProps<'nav'> {
enterDelayMs?: number;
inert?: boolean;
isCollapsible: boolean | undefined;
+ hideOverlay: boolean | undefined;
}
interface SideNavContextData {
@@ -78,6 +79,7 @@ function SideNavRenderFunction(
onSideNavBlur,
enterDelayMs = 100,
isCollapsible = false,
+ hideOverlay = false,
...other
}: SideNavProps,
ref: ForwardedRef<HTMLElement>
@@ -121,8 +123,6 @@ function SideNavRenderFunction(
const overlayClassName = cx({
[`${prefix}--side-nav__overlay`]: true,
[`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState,
- [`${prefix}--side-nav__overlay-active--lg`]:
- isCollapsible && (expanded || expandedViaHoverState),
});
let childrenToRender = children;
@@ -226,9 +226,11 @@ function SideNavRenderFunction(
const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
const isLg = useMatchMedia(lgMediaQuery);
+ hideOverlay;
+
return (
<SideNavContext.Provider value={{ isRail }}>
- {isFixedNav ? null : (
+ {isFixedNav || hideOverlay ? null : (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div className={overlayClassName} onClick={onOverlayClick} />
)}
@@ -287,6 +289,11 @@ SideNav.propTypes = {
*/
expanded: PropTypes.bool,
+ /**
+ * If `true`, the overlay will be hidden. Defaults to `false`.
+ */
+ hideOverlay: PropTypes.bool,
+
/**
* Provide the `href` to the id of the element on your package that is the
* main content.
diff --git a/packages/react/src/components/UIShell/components/styles/_side-nav.scss b/packages/react/src/components/UIShell/components/styles/_side-nav.scss
index c5061aeb..09948812 100644
--- a/packages/react/src/components/UIShell/components/styles/_side-nav.scss
+++ b/packages/react/src/components/UIShell/components/styles/_side-nav.scss
@@ -5,8 +5,6 @@
* LICENSE file in the root directory of this source tree.
*/
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/utilities/convert' as convert;
// $prefix: 'clabs' !default;
@@ -23,13 +21,3 @@ $prefix: 'cds' !default;
.#{$prefix}--side-nav--collapsible.#{$prefix}--side-nav--expanded {
inline-size: convert.to-rem(256px);
}
-
-.#{$prefix}--side-nav__overlay-active--lg {
- z-index: z('overlay');
- background-color: $overlay;
- block-size: 100vh;
- inline-size: 100vw;
- opacity: 1;
- transition: opacity $transition-expansion $standard-easing,
- background-color $transition-expansion $standard-easing;
-}