@carbon-labs/react-ui-shell 0.25.0 → 0.27.0

package/scss/styles/_side-nav.scss

@@ -6,6 +6,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/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/theme' as *;
@@ -119,6 +120,7 @@ div:has(.#{$prefix}--header)
 
   .#{$prefix}--side-nav__items {
     display: flex;
+    overflow: visible;
     flex-direction: column;
   }
 
@@ -172,12 +174,138 @@ div:has(.#{$prefix}--header)
     text-align: start;
   }
 
+  &:hover {
+    .#{$prefix}--side-nav__items {
+      overflow: visible;
+    }
+  }
+
+  .#{$prefix}--popover-container {
+    display: block;
+    inline-size: 100%;
+  }
+
+  // SharkFinIcon container styles
+  .#{$prefix}--side-nav__submenu {
+    position: relative;
+
+    .#{$prefix}--side-nav--panel-submenu-caret-container {
+      position: absolute;
+      block-size: 100%;
+      inline-size: 100%;
+    }
+
+    .#{$prefix}--side-nav--panel-submenu-caret {
+      position: absolute;
+      inset-block-end: 4px;
+      inset-inline-end: 4px;
+    }
+  }
+
+  // Focused FlyoutMenu button
+  .#{$prefix}--flyout-menu-clicked
+    .#{$prefix}--side-nav--panel-submenu-caret
+    svg {
+    fill: $icon-primary;
+  }
+
+  // menu icon svg
+  .#{$prefix}--flyout-menu-clicked .#{$prefix}--side-nav__icon svg,
+  .#{$prefix}--flyout-menu-selected .#{$prefix}--side-nav__icon svg,
+  .#{$prefix}--flyout-menu-selected
+    .#{$prefix}--side-nav--panel-submenu-caret
+    svg {
+    fill: $icon-primary;
+  }
+
+  // Change SharkFinIcon color when clicked
+  .#{$prefix}--flyout-menu-clicked .#{$prefix}--side-nav__submenu {
+    background-color: $background-hover;
+
+    .#{$prefix}-shark-fin-icon {
+      fill: $icon-primary;
+    }
+  }
+
+  // Selected + click
+  .#{$prefix}--flyout-menu-selected.#{$prefix}--flyout-menu-clicked
+    .#{$prefix}--side-nav__submenu {
+    background-color: $background-active;
+
+    .#{$prefix}-shark-fin-icon {
+      fill: $icon-primary;
+    }
+  }
+
+  // Selected Panel FlyoutMenuItem styles (checkmark icon)
+  .#{$prefix}--flyout-menu-selected
+    .#{$prefix}--side-nav__menu-item--flyout-menu-item {
+    .#{$prefix}--side-nav__icon {
+      margin-inline-end: $spacing-04;
+    }
+
+    .#{$prefix}--side-nav__link--active {
+      padding-inline-start: $spacing-04;
+    }
+  }
+
+  .#{$prefix}--flyout-menu-selected .#{$prefix}--side-nav__submenu {
+    background-color: $background-selected;
+  }
+
+  // flyout on focus, only displays title
+  .#{$prefix}--flyout-tooltip-content {
+    padding-block: 1px;
+  }
+
+  // make caret smaller in tooltip mode
+  .#{$prefix}--flyout-menu-focused .#{$prefix}--popover-caret {
+    @include custom-property.declaration('popover-caret-width', 0.5rem);
+    @include custom-property.declaration('popover-caret-height', 0.25rem);
+  }
+
+  // Flyout menu content styles
+  .#{$prefix}--side-nav-menu--popover-content {
+    padding: 4px 0;
+
+    .#{$prefix}--label {
+      color: $text-secondary;
+      padding-inline-start: $spacing-05;
+    }
+
+    .#{$prefix}--side-nav__link {
+      @include type-style('body-compact-01');
+
+      padding-inline: $spacing-08;
+    }
+
+    .#{$prefix}--side-nav__link:hover {
+      background-color: $background-hover;
+    }
+  }
+
+  // Flyout menu link on hover styles
+  .#{$prefix}--side-nav-menu--popover-content
+    .#{$prefix}--side-nav__link:hover {
+    .#{$prefix}--side-nav__link-text {
+      color: $text-primary;
+    }
+  }
+
   // Side Nav Link Popover
   .#{$prefix}--side-nav-link-popover.#{$prefix}--btn--icon-only {
     padding: 0;
     block-size: $spacing-07;
     min-block-size: initial;
 
+    svg {
+      fill: $icon-secondary;
+    }
+
+    &:hover svg {
+      fill: $icon-primary;
+    }
+
     .#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron) {
       margin-inline-end: 0;
     }
@@ -188,3 +316,33 @@ div:has(.#{$prefix}--header)
     color: $text-primary;
   }
 }
+
+// panel expanded styles
+.#{$prefix}--side-nav--panel.#{$prefix}--side-nav--expanded {
+  overflow: hidden;
+
+  &:hover {
+    .#{$prefix}--side-nav__items {
+      overflow-y: auto;
+    }
+  }
+
+  .#{$prefix}--side-nav__items {
+    overflow-y: auto;
+  }
+
+  .#{$prefix}--side-nav__item {
+    overflow: visible;
+  }
+}
+
+.#{$prefix}--side-nav__toggle-container {
+  position: absolute;
+  background: $background;
+  inline-size: 100%;
+  inset-block-end: 0;
+
+  .#{$prefix}--side-nav__toggle.#{$prefix}--side-nav__toggle--collapsed:hover {
+    background: $background-hover;
+  }
+}

package/scss/ui-shell.scss

@@ -8,3 +8,4 @@
 @use 'styles/header';
 @use 'styles/side-nav';
 @use 'styles/content';
+@use 'styles/shark-fin-icon.scss';