feat(UIShell): add hideoverlay prop to sidenav (#401)

carbon-design-system · Jan 31, 2025 · a01b4b6 · a01b4b6
1 parent 48941ca
commit a01b4b6
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
-}