@carbon-labs/react-ui-shell 0.0.1-canary.421 → 0.2.0

package/es/components/SideNav.d.ts

@@ -20,6 +20,7 @@ export interface SideNavProps extends ComponentProps<'nav'> {
     onSideNavBlur?: () => void | undefined;
     enterDelayMs?: number;
     inert?: boolean;
+    isCollapsible: boolean | undefined;
 }
 interface SideNavContextData {
     isRail?: boolean | undefined;

package/es/components/SideNav.js

@@ -43,6 +43,7 @@ function SideNavRenderFunction(_ref, ref) {
     onOverlayClick,
     onSideNavBlur,
     enterDelayMs = 100,
+    isCollapsible = false,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -76,11 +77,13 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
     [`${prefix}--side-nav--rail`]: isRail,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
-    [`${prefix}--side-nav--hidden`]: !isPersistent
+    [`${prefix}--side-nav--hidden`]: !isPersistent,
+    [`${prefix}--side-nav--collapsible`]: isCollapsible
   });
   const overlayClassName = cx({
     [`${prefix}--side-nav__overlay`]: true,
-    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState
+    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState,
+    [`${prefix}--side-nav__overlay-active--lg`]: isCollapsible && (expanded || expandedViaHoverState)
   });
   let childrenToRender = children;
 
@@ -207,6 +210,10 @@ SideNav.propTypes = {
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   isChildOfHeader: PropTypes.bool,
+  /**
+   * Specify whether the SideNav is collapsible at desktop
+   */
+  isCollapsible: PropTypes.bool,
   /**
    * Specify if sideNav is standalone
    */

package/lib/components/SideNav.d.ts

@@ -20,6 +20,7 @@ export interface SideNavProps extends ComponentProps<'nav'> {
     onSideNavBlur?: () => void | undefined;
     enterDelayMs?: number;
     inert?: boolean;
+    isCollapsible: boolean | undefined;
 }
 interface SideNavContextData {
     isRail?: boolean | undefined;

package/lib/components/SideNav.js

@@ -45,6 +45,7 @@ function SideNavRenderFunction(_ref, ref) {
     onOverlayClick,
     onSideNavBlur,
     enterDelayMs = 100,
+    isCollapsible = false,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -78,11 +79,13 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
     [`${prefix}--side-nav--rail`]: isRail,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
-    [`${prefix}--side-nav--hidden`]: !isPersistent
+    [`${prefix}--side-nav--hidden`]: !isPersistent,
+    [`${prefix}--side-nav--collapsible`]: isCollapsible
   });
   const overlayClassName = index.default({
     [`${prefix}--side-nav__overlay`]: true,
-    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState
+    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState,
+    [`${prefix}--side-nav__overlay-active--lg`]: isCollapsible && (expanded || expandedViaHoverState)
   });
   let childrenToRender = children;
 
@@ -209,6 +212,10 @@ SideNav.propTypes = {
    * Optionally provide a custom class to apply to the underlying `<li>` node
    */
   isChildOfHeader: PropTypes.bool,
+  /**
+   * Specify whether the SideNav is collapsible at desktop
+   */
+  isCollapsible: PropTypes.bool,
   /**
    * Specify if sideNav is standalone
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.0.1-canary.421+072a73f",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -27,5 +27,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "072a73f9945838a5538271fb7aa58975fc573f43"
+  "gitHead": "48941ca09c9d9992ac597fc3fa79b8f700daaeab"
 }

package/scss/styles/_side-nav.scss

@@ -0,0 +1,35 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * 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;
+// Do we want to update to clabs?
+$prefix: 'cds' !default;
+
+//----------------------------------------------------------------------------
+// Side-nav Collapsible
+//----------------------------------------------------------------------------
+.#{$prefix}--side-nav--collapsible.#{$prefix}--side-nav--ux {
+  inline-size: 0;
+}
+
+.#{$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;
+}

package/scss/ui-shell.scss

@@ -5,16 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// Carbon setting imports
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/colors' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/components/button' as *;
-
-$prefix: 'clabs' !default;
-
-.#{$prefix}--ui-shell__container {
-  padding: $spacing-01;
-  border: 1px solid $border-subtle-01;
-  inline-size: fit-content;
-}
+@use 'styles/side-nav';