@carbon-labs/react-ui-shell 0.67.0 → 0.69.0

package/es/components/SideNavFlyoutMenu.js

@@ -27,7 +27,7 @@ function SideNavFlyoutMenu({
   label,
   description,
   enterDelayMs = 100,
-  leaveDelayMs = 300,
+  leaveDelayMs = 100,
   defaultOpen = false,
   dropShadow = true,
   highContrast = false,

package/es/components/SideNavMenu.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ArrowLeft, ChevronRight, ChevronDown } from '@carbon/icons-react';
+import { ChevronRight, ChevronDown, ArrowLeft } from '@carbon/icons-react';
 import { SideNavIcon, Layer, Button } from '@carbon/react';
 import { breakpoints } from '../node_modules/@carbon/layout/es/index.js';
 import cx from 'classnames';
@@ -332,7 +332,7 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     ref: menuRef,
     type: "button",
     tabIndex: isTreeview ? -1 : 0
-  }, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), !sideNavExpanded && /*#__PURE__*/React__default.createElement("div", {
+  }, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), !sideNavExpanded && navType == SIDE_NAV_TYPE.PANEL && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--side-nav--panel-submenu-caret-container`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--side-nav--panel-submenu-caret`

package/lib/components/SideNavFlyoutMenu.js

@@ -29,7 +29,7 @@ function SideNavFlyoutMenu({
   label,
   description,
   enterDelayMs = 100,
-  leaveDelayMs = 300,
+  leaveDelayMs = 100,
   defaultOpen = false,
   dropShadow = true,
   highContrast = false,

package/lib/components/SideNavMenu.js

@@ -334,7 +334,7 @@ const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(
     ref: menuRef,
     type: "button",
     tabIndex: isTreeview ? -1 : 0
-  }, IconElement && /*#__PURE__*/React__default.createElement(react.SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), !sideNavExpanded && /*#__PURE__*/React__default.createElement("div", {
+  }, IconElement && /*#__PURE__*/React__default.createElement(react.SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), !sideNavExpanded && navType == SideNav.SIDE_NAV_TYPE.PANEL && /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--side-nav--panel-submenu-caret-container`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--side-nav--panel-submenu-caret`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.67.0",
+  "version": "0.69.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -42,5 +42,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "1d9c28b69885d9403461f310be4d53f735139288"
+  "gitHead": "cc7ea86ffe90b25c4a73caf93502ee36f1c0b05d"
 }

package/scss/styles/_content.scss

@@ -16,7 +16,7 @@ $prefix: 'cds' !default;
 .#{$prefix}--side-nav--panel ~ .#{$prefix}--content,
 div:has(.#{$prefix}--side-nav--panel) ~ .#{$prefix}--content {
   margin-inline-start: $spacing-09;
-  transition: margin-inline-start $duration-fast-02, transform $duration-fast-02;
+  transition: $fast-02 motion(exit, productive);
 }
 
 .#{$prefix}--side-nav--panel.#{$prefix}--side-nav--expanded
@@ -24,6 +24,8 @@ div:has(.#{$prefix}--side-nav--panel) ~ .#{$prefix}--content {
 div:has(.#{$prefix}--side-nav--panel.#{$prefix}--side-nav--expanded)
   ~ .#{$prefix}--content {
   margin-inline-start: convert.to-rem(256px);
+  transition: $moderate-01 motion(standard, productive);
+  transition-delay: 40ms;
 }
 
 // should not be a grid influencer when used with overlay

package/scss/styles/_side-nav.scss

@@ -29,7 +29,17 @@ div:has(.#{$prefix}--header)
 }
 
 .#{$prefix}--side-nav {
+  z-index: z('header') - 1;
   overflow: visible;
+
+  // closing side-nav transition
+  transition: $fast-02 motion(exit, productive);
+}
+
+.#{$prefix}--side-nav.#{$prefix}--side-nav--expanded {
+  // opening side-nav transition
+  transition: $moderate-01 motion(standard, productive);
+  transition-delay: 40ms;
 }
 
 //----------------------------------------------------------------------------
@@ -302,22 +312,25 @@ div:has(.#{$prefix}--header)
   inset-block-start: 0;
   inset-inline-start: 100%;
   transform: translateX(-100%);
-  transition: color $duration-fast-02, background-color $duration-fast-02,
-    outline $duration-fast-02;
+  transition: $fast-02 motion(exit, productive);
   will-change: inline-size;
 }
 
 .#{$prefix}--side-nav__menu-secondary-wrapper-expanded {
+  box-shadow: $spacing-02 0 convert.to-rem(6px) convert.to-rem(-3px) $shadow;
+
   inline-size: 16rem;
   overflow-y: auto;
   transform: translateX(0);
+  transition: $moderate-01 motion(standard, productive);
+  transition-delay: 40ms;
 }
 
 //----------------------------------------------------------------------------
 // Panel
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--panel {
-  z-index: 7999; /* needs to be below header */
+  z-index: z('header') - 2;
   overflow: visible;
   border-inline-end: 1px solid $border-subtle;
 
@@ -554,10 +567,15 @@ div:has(.#{$prefix}--header)
 // Rail
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--rail {
-  z-index: 7999; /* needs to be below header */
+  z-index: z('header') - 2;
   border-inline-end: 1px solid $border-subtle;
 }
 
+.#{$prefix}--side-nav--rail.#{$prefix}--side-nav--expanded {
+  border-inline-end: none;
+  box-shadow: $spacing-02 0 convert.to-rem(6px) convert.to-rem(-3px) $shadow;
+}
+
 @each $breakpoint in ('sm', 'md', 'lg', 'xlg', 'max') {
   .#{$prefix}--side-nav--rail.#{$prefix}--side-nav--hide-rail-breakpoint-down-#{$breakpoint} {
     @include breakpoint-down($breakpoint) {
@@ -568,13 +586,9 @@ div:has(.#{$prefix}--header)
 
 // allow overlay to display at all breakpoints
 .#{$prefix}--side-nav__overlay-active {
-  z-index: z('overlay');
-  background-color: $overlay;
+  background-color: transparent;
   block-size: 100vh;
   inline-size: 100vw;
-  opacity: 1;
-  transition: opacity $transition-expansion $standard-easing,
-    background-color $transition-expansion $standard-easing;
 }
 
 //----------------------------------------------------------------------------