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

package/package.json

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

package/scss/styles/_side-nav.scss

@@ -8,6 +8,7 @@
 @use '@carbon/styles/scss/utilities/convert' as convert;
 @use '@carbon/styles/scss/utilities/custom-property' as custom-property;
 @use '@carbon/styles/scss/utilities/button-reset' as button-reset;
+@use '@carbon/react/scss/breakpoint' as breakpoint;
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/theme' as *;
@@ -26,6 +27,10 @@ div:has(.#{$prefix}--header)
   inset-block-start: $spacing-09;
 }
 
+.#{$prefix}--side-nav {
+  overflow: visible;
+}
+
 //----------------------------------------------------------------------------
 // Side-nav Collapsible
 //----------------------------------------------------------------------------
@@ -91,12 +96,32 @@ div:has(.#{$prefix}--header)
   padding-inline-start: $spacing-10;
 }
 
+.#{$prefix}--side-nav__item--primary
+  > .#{$prefix}--side-nav__submenu[aria-expanded='true']
+  .#{$prefix}--side-nav__submenu-chevron
+  > svg {
+  transform: none;
+}
+
+.#{$prefix}--side-nav__item--primary
+  > .#{$prefix}--side-nav__submenu[aria-expanded='true'] {
+  background-color: $background-selected;
+  color: $text-primary;
+}
+
 // with icon
 .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
   a.#{$prefix}--side-nav__link:has(.#{$prefix}--side-nav__icon) {
   padding-inline-start: $spacing-09;
 }
 
+// with icon inside primary menu (double wide)
+.#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
+  .cds--side-nav__menu-secondary-wrapper
+  a.#{$prefix}--side-nav__link:has(.#{$prefix}--side-nav__icon) {
+  padding-inline-start: $spacing-05;
+}
+
 // Level 3
 // without icon parent
 .#{$prefix}--side-nav__menu
@@ -112,6 +137,24 @@ div:has(.#{$prefix}--header)
   padding-inline-start: $spacing-12;
 }
 
+.#{$prefix}--side-nav__menu-secondary-wrapper {
+  position: absolute;
+  background-color: $layer-01;
+  block-size: 100%;
+  inline-size: 0;
+  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;
+  will-change: inline-size;
+}
+
+.#{$prefix}--side-nav__menu-secondary-wrapper-expanded {
+  inline-size: 16rem;
+  transform: translateX(0);
+}
+
 //----------------------------------------------------------------------------
 // Side-nav Panel
 //----------------------------------------------------------------------------
@@ -373,3 +416,40 @@ div:has(.#{$prefix}--header)
   transition: opacity $transition-expansion $standard-easing,
     background-color $transition-expansion $standard-easing;
 }
+
+// mobile
+@include breakpoint.breakpoint-down(md) {
+  .#{$prefix}--side-nav--collapsible.#{$prefix}--side-nav--expanded {
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  .#{$prefix}--side-nav__menu-secondary-wrapper-expanded {
+    z-index: 1;
+    inline-size: 100%;
+    inset-inline-start: 0;
+  }
+
+  .#{$prefix}--side-nav__back-button.#{$prefix}--btn--ghost {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    gap: 1rem;
+    inline-size: 100%;
+    max-inline-size: 100%;
+
+    &:focus {
+      box-shadow: inset 0 0 0 1px $focus;
+    }
+  }
+
+  .#{$prefix}--side-nav__back-button.#{$prefix}--btn--ghost:not([disabled]) {
+    svg {
+      align-self: center;
+      fill: $icon-interactive;
+    }
+
+    &:hover svg {
+      fill: $link-primary-hover;
+    }
+  }
+}