@carbon-labs/react-ui-shell 0.40.0 → 0.42.0

package/es/components/SideNav.d.ts

@@ -21,6 +21,7 @@ export interface SideNavProps extends ComponentProps<'nav'>, TranslateWithId<Tra
     defaultExpanded?: boolean;
     isChildOfHeader?: boolean;
     onToggle?: (event: FocusEvent<HTMLElement> | KeyboardEvent<HTMLElement> | boolean, value: boolean) => void;
+    hideRailBreakpointDown?: 'sm' | 'md' | 'lg' | 'xlg' | 'max';
     href?: string;
     isFixedNav?: boolean;
     isRail?: boolean;

package/es/components/SideNav.js

@@ -48,6 +48,7 @@ function SideNavRenderFunction(_ref, ref) {
     children,
     onToggle,
     className: customClassName,
+    hideRailBreakpointDown,
     href,
     isFixedNav = false,
     isRail,
@@ -95,11 +96,13 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav`]: true,
     [`${prefix}--side-nav--expanded`]: expanded || expandedViaHoverState,
     [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
+    [`${prefix}--side-nav--hide-rail-breakpoint-down-${hideRailBreakpointDown}`]: hideRailBreakpointDown,
     [`${prefix}--side-nav--rail`]: isRail,
     [`${prefix}--side-nav--panel`]: navType === SIDE_NAV_TYPE.PANEL,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
     [`${prefix}--side-nav--hidden`]: !isPersistent,
-    [`${prefix}--side-nav--collapsible`]: isCollapsible
+    [`${prefix}--side-nav--collapsible`]: isCollapsible,
+    [`${prefix}--side-nav--with-overlay`]: !hideOverlay
   });
   const overlayClassName = cx({
     [`${prefix}--side-nav__overlay`]: true,
@@ -409,6 +412,12 @@ SideNav.propTypes = {
    * If `true`, the overlay will be hidden. Defaults to `false`.
    */
   hideOverlay: PropTypes.bool,
+  /**
+   * Specify the breakpoint at which the SideNav will be hidden.
+   * Can be one of `sm`, `md`, `lg`, `xlg`, or `max`.
+   * Only applies when `isRail` is `true`.
+   */
+  hideRailBreakpointDown: PropTypes.oneOf(['sm', 'md', 'lg', 'xlg', 'max']),
   /**
    * Provide the `href` to the id of the element on your package that is the
    * main content.

package/lib/components/SideNav.d.ts

@@ -21,6 +21,7 @@ export interface SideNavProps extends ComponentProps<'nav'>, TranslateWithId<Tra
     defaultExpanded?: boolean;
     isChildOfHeader?: boolean;
     onToggle?: (event: FocusEvent<HTMLElement> | KeyboardEvent<HTMLElement> | boolean, value: boolean) => void;
+    hideRailBreakpointDown?: 'sm' | 'md' | 'lg' | 'xlg' | 'max';
     href?: string;
     isFixedNav?: boolean;
     isRail?: boolean;

package/lib/components/SideNav.js

@@ -50,6 +50,7 @@ function SideNavRenderFunction(_ref, ref) {
     children,
     onToggle,
     className: customClassName,
+    hideRailBreakpointDown,
     href,
     isFixedNav = false,
     isRail,
@@ -97,11 +98,13 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav`]: true,
     [`${prefix}--side-nav--expanded`]: expanded || expandedViaHoverState,
     [`${prefix}--side-nav--collapsed`]: !expanded && isFixedNav,
+    [`${prefix}--side-nav--hide-rail-breakpoint-down-${hideRailBreakpointDown}`]: hideRailBreakpointDown,
     [`${prefix}--side-nav--rail`]: isRail,
     [`${prefix}--side-nav--panel`]: navType === SIDE_NAV_TYPE.PANEL,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
     [`${prefix}--side-nav--hidden`]: !isPersistent,
-    [`${prefix}--side-nav--collapsible`]: isCollapsible
+    [`${prefix}--side-nav--collapsible`]: isCollapsible,
+    [`${prefix}--side-nav--with-overlay`]: !hideOverlay
   });
   const overlayClassName = index.default({
     [`${prefix}--side-nav__overlay`]: true,
@@ -411,6 +414,12 @@ SideNav.propTypes = {
    * If `true`, the overlay will be hidden. Defaults to `false`.
    */
   hideOverlay: PropTypes.bool,
+  /**
+   * Specify the breakpoint at which the SideNav will be hidden.
+   * Can be one of `sm`, `md`, `lg`, `xlg`, or `max`.
+   * Only applies when `isRail` is `true`.
+   */
+  hideRailBreakpointDown: PropTypes.oneOf(['sm', 'md', 'lg', 'xlg', 'max']),
   /**
    * Provide the `href` to the id of the element on your package that is the
    * main content.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -41,5 +41,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "7143d1ffcfee709fceee312ed790da0303703cb8"
+  "gitHead": "ce6519871f2327bbe4edefb8b65aeca93a4e6878"
 }

package/scss/styles/_content.scss

@@ -7,12 +7,14 @@
 
 @use '@carbon/styles/scss/utilities/convert' as convert;
 @use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
 $prefix: 'cds' !default;
 
+// Increases specificity to support shell components wrapped in a Theme component
 .#{$prefix}--side-nav--panel ~ .#{$prefix}--content,
 div:has(.#{$prefix}--side-nav--panel) ~ .#{$prefix}--content {
-  margin-inline-start: convert.to-rem(48px);
+  margin-inline-start: $spacing-09;
   transition: margin-inline-start $duration-fast-02, transform $duration-fast-02;
 }
 
@@ -22,3 +24,9 @@ div:has(.#{$prefix}--side-nav--panel.#{$prefix}--side-nav--expanded)
   ~ .#{$prefix}--content {
   margin-inline-start: convert.to-rem(256px);
 }
+
+// should not be a grid influencer when used with overlay
+.#{$prefix}--side-nav--with-overlay.#{$prefix}--side-nav--expanded
+  ~ .#{$prefix}--content {
+  margin-inline-start: $spacing-09;
+}

package/scss/styles/_side-nav.scss

@@ -9,6 +9,7 @@
 @use '@carbon/styles/scss/utilities/custom-property' as custom-property;
 @use '@carbon/styles/scss/utilities/button-reset' as button-reset;
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/type' as *;
@@ -348,8 +349,27 @@ div:has(.#{$prefix}--header)
 }
 
 //----------------------------------------------------------------------------
-// Side-nav Rail
+// Rail
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--rail {
   z-index: 7999; /* needs to be below header */
 }
+
+@each $breakpoint in ('sm', 'md', 'lg', 'xlg', 'max') {
+  .#{$prefix}--side-nav--rail.#{$prefix}--side-nav--hide-rail-breakpoint-down-#{$breakpoint} {
+    @include breakpoint-down($breakpoint) {
+      display: none;
+    }
+  }
+}
+
+// allow overlay to display at all breakpoints
+.#{$prefix}--side-nav__overlay-active {
+  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;
+}