@carbon/charts 0.41.89 → 0.41.93

package/styles/vendor/carbon-components/src/components/ui-shell/_side-nav.scss

@@ -22,9 +22,9 @@
 ///     @include text-overflow();
 ///   }
 @mixin text-overflow {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /// Helper for handling selectors for the expansion state of the side-nav.
@@ -52,7 +52,7 @@
   .#{$prefix}--side-nav--fixed &,
   .#{$prefix}--side-nav--expanded & {
     @if $visibility == true {
-      visibility: visible;
+      visibility: inherit;
     }
     @if $opacity == true {
       opacity: 1;
@@ -70,19 +70,19 @@
   //----------------------------------------------------------------------------.
   .#{$prefix}--side-nav {
     position: fixed;
+    z-index: z('header');
     top: 0;
     bottom: 0;
     left: 0;
+    // Useful to toggle this property to see what's going on when not expanded
+    overflow: hidden;
     width: mini-units(6);
     max-width: mini-units(32);
-    color: $shell-side-nav-text-01;
     background-color: $shell-side-nav-bg-01;
-    will-change: width;
+    color: $shell-side-nav-text-01;
     // TODO: sync with motion work
     transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
-    // Useful to toggle this property to see what's going on when not expanded
-    overflow: hidden;
-    z-index: z('header');
+    will-change: width;
   }
 
   .#{$prefix}--side-nav--ux {
@@ -110,16 +110,17 @@
     width: 0;
   }
 
-  .#{$prefix}--side-nav:not(.#{$prefix}--side-nav--fixed):hover,
+  .#{$prefix}--side-nav.bx--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
   .#{$prefix}--side-nav--expanded {
     width: mini-units(32);
   }
 
   .#{$prefix}--side-nav__overlay {
-    position: absolute;
+    position: fixed;
     top: rem(48px);
-    height: 0;
+    left: 0;
     width: 0;
+    height: 0;
     background-color: transparent;
     opacity: 0;
     transition: opacity $transition--expansion $carbon--standard-easing,
@@ -128,8 +129,8 @@
 
   .#{$prefix}--side-nav__overlay-active {
     @include carbon--breakpoint-down('lg') {
+      width: 100vw;
       height: 100vh;
-      width: 100%;
       background-color: $overlay-01;
       opacity: 1;
       transition: opacity $transition--expansion $carbon--standard-easing,
@@ -158,8 +159,8 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__navigation {
     display: flex;
-    flex-direction: column;
     height: 100%;
+    flex-direction: column;
   }
 
   //----------------------------------------------------------------------------
@@ -167,10 +168,10 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__header {
     display: flex;
-    border-bottom: 1px solid $shell-side-nav-bg-02;
     width: 100%;
-    height: mini-units(6);
     max-width: 100%;
+    height: mini-units(6);
+    border-bottom: 1px solid $shell-side-nav-bg-02;
 
     @include expanded() {
       height: auto;
@@ -186,12 +187,12 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__details {
     display: flex;
-    flex-direction: column;
-    padding-right: mini-units(2);
+    min-width: 0;
     // Necessary for text truncation in title
     // https://css-tricks.com/flexbox-truncated-text/#article-header-id-3
     flex: 1;
-    min-width: 0;
+    flex-direction: column;
+    padding-right: mini-units(2);
 
     @include expanded($opacity: true, $visibility: true);
   }
@@ -204,11 +205,11 @@
   .#{$prefix}--side-nav__title {
     @include text-overflow();
 
+    margin-top: mini-units(2);
     // TODO: sync with type styles
     font-size: rem(14px);
     font-weight: 600;
     letter-spacing: 0.1px;
-    margin-top: mini-units(2);
     user-select: none;
   }
 
@@ -230,32 +231,32 @@
   }
 
   .#{$prefix}--side-nav__switcher-chevron {
-    display: flex;
-    align-items: center;
     position: absolute;
     top: 0;
     right: mini-units(1);
     bottom: 0;
+    display: flex;
+    align-items: center;
     fill: $shell-side-nav-icon-01;
   }
 
   .#{$prefix}--side-nav__select {
     @include focus-outline('reset');
-    appearance: none;
-    flex: 1 1 0%;
-    background-color: $shell-header-bg-01;
-    color: $shell-header-text-01;
-    height: 100%;
-    border: none;
-    border-radius: 0;
-    cursor: pointer;
-    font-size: rem(12px);
-    height: mini-units(4);
+
     // Flex bug, used to have the select node respect the width if a child has a
     // value that is longer than the width of the select
     min-width: 0;
+    height: mini-units(4);
+    flex: 1 1 0%;
     // Buffer the right hand side of select so text doesn't overlay the chevron
     padding-right: mini-units(4);
+    border: none;
+    appearance: none;
+    background-color: $shell-header-bg-01;
+    border-radius: 0;
+    color: $shell-header-text-01;
+    cursor: pointer;
+    font-size: rem(12px);
     transition: outline $duration--fast-02;
   }
 
@@ -267,15 +268,17 @@
   // Side-nav > Navigation > Footer
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__footer {
-    flex: 0 0 rem(48px);
     width: 100%;
+    flex: 0 0 rem(48px);
     background-color: $shell-side-nav-bg-01;
   }
 
   .#{$prefix}--side-nav__toggle {
     @include focus-outline('reset');
     @include button-reset($width: true);
+
     height: 100%;
+    padding-left: mini-units(2);
     text-align: left;
     transition: outline $duration--fast-02;
   }
@@ -284,16 +287,12 @@
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--side-nav__toggle {
-    padding-left: mini-units(2);
-  }
-
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > Item(s)
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__items {
-    flex: 1 1 0%;
     overflow: hidden;
+    flex: 1 1 0%;
     padding: 1rem 0 0;
 
     @include expanded() {
@@ -305,17 +304,10 @@
     overflow-y: auto;
   }
 
-  // Force all of our side navigation items to be the same dimensions. When our
-  // menu expands, we can undo the forced dimensions.
   .#{$prefix}--side-nav__item {
-    width: mini-units(6);
-    height: mini-units(6);
     overflow: hidden;
-
-    @include expanded() {
-      width: auto;
-      height: auto;
-    }
+    width: auto;
+    height: auto;
   }
 
   .#{$prefix}--side-nav--ux .#{$prefix}--side-nav__item {
@@ -328,11 +320,11 @@
     > .#{$prefix}--side-nav__submenu:hover,
   .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
     > .#{$prefix}--side-nav__link:hover,
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[role='menuitem']:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
-  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem']:hover,
+  .#{$prefix}--side-nav__menu
+    a.#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:hover,
   .#{$prefix}--side-nav
-    .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']:hover {
+    .#{$prefix}--header__menu-title[aria-expanded='true']:hover {
     // TODO: sync color
     background-color: $shell-side-nav-bg-04;
     color: $ibm-color__gray-100;
@@ -348,21 +340,36 @@
     color: $ibm-color__gray-100;
   }
 
+  .#{$prefix}--side-nav__item--large {
+    height: mini-units(6);
+  }
+
+  //----------------------------------------------------------------------------
+  // Side-nav > Navigation > Divider
+  //----------------------------------------------------------------------------
+  .#{$prefix}--side-nav__divider {
+    height: 1px;
+    margin: $spacing-03 $spacing-05;
+    background-color: $ibm-color__gray-20;
+  }
+
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > {Menu,Submenu}
   //----------------------------------------------------------------------------
-  .#{$prefix}--side-nav__submenu[aria-haspopup='true'] {
+  .#{$prefix}--side-nav__submenu {
     @include button-reset($width: true);
-    @include type-style('heading-01');
+    @include type-style('productive-heading-01');
     @include focus-outline('reset');
-    padding: 0 mini-units(2);
+
     display: flex;
+    height: mini-units(4);
     align-items: center;
+
+    padding: 0 mini-units(2);
     color: $shell-side-nav-text-01;
-    height: mini-units(4);
-    user-select: none;
     transition: color $duration--fast-02, background-color $duration--fast-02,
       outline $duration--fast-02;
+    user-select: none;
   }
 
   .#{$prefix}--side-nav__submenu:hover {
@@ -376,19 +383,20 @@
 
   .#{$prefix}--side-nav__submenu-title {
     @include text-overflow();
+
     text-align: left;
   }
 
   .#{$prefix}--side-nav__icon.#{$prefix}--side-nav__submenu-chevron {
-    flex: 1;
     display: flex;
+    flex: 1;
     justify-content: flex-end;
   }
 
   .#{$prefix}--side-nav__submenu-chevron > svg {
-    transition: transform $duration--fast-02;
-    height: rem(16px);
     width: rem(16px);
+    height: rem(16px);
+    transition: transform $duration--fast-02;
   }
 
   .#{$prefix}--side-nav__submenu[aria-expanded='true']
@@ -397,6 +405,10 @@
     transform: rotate(180deg);
   }
 
+  .#{$prefix}--side-nav__item--large .#{$prefix}--side-nav__submenu {
+    height: mini-units(6);
+  }
+
   .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu:hover {
     background-color: $shell-side-nav-bg-04;
     color: $ibm-color__gray-100;
@@ -404,39 +416,38 @@
 
   .#{$prefix}--side-nav__item--active
     .#{$prefix}--side-nav__submenu[aria-expanded='false'] {
+    position: relative;
     background-color: $shell-side-nav-bg-04;
     color: $ibm-color__gray-100;
-    position: relative;
     &::before {
-      content: '';
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       width: 4px;
       background-color: $shell-side-nav-accent-01;
+      content: '';
     }
   }
 
   .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu-title {
-    font-weight: 600;
     color: $ibm-color__gray-100;
+    font-weight: 600;
   }
 
-  .#{$prefix}--side-nav__menu[role='menu'] {
+  .#{$prefix}--side-nav__menu {
     display: block;
-    visibility: hidden;
     max-height: 0;
+    visibility: hidden;
   }
 
   .#{$prefix}--side-nav__submenu[aria-expanded='true']
-    + .#{$prefix}--side-nav__menu[role='menu'] {
+    + .#{$prefix}--side-nav__menu {
     max-height: rem(1500px);
     visibility: inherit;
   }
 
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[role='menuitem'] {
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link {
     height: mini-units(4);
     min-height: mini-units(4);
     padding-left: mini-units(4);
@@ -444,13 +455,11 @@
   }
 
   .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
-    a.#{$prefix}--side-nav__link[role='menuitem'] {
+    a.#{$prefix}--side-nav__link {
     padding-left: mini-units(9);
   }
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link--current,
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[aria-current='page'],
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link--current,
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link[aria-current='page'],
   a.#{$prefix}--side-nav__link--current {
     background-color: $ibm-color__gray-20;
 
@@ -460,61 +469,70 @@
     }
   }
 
-  a.#{$prefix}--side-nav__link--current > span.#{$prefix}--side-nav__link-text {
-    color: $ibm-color__gray-100;
-    font-weight: 600;
-  }
   //----------------------------------------------------------------------------
   // Side-nav > Link
   //----------------------------------------------------------------------------
   a.#{$prefix}--side-nav__link,
-  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem'],
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item,
   .#{$prefix}--side-nav
-    .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
+    .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu {
     @include focus-outline('reset');
-    @include type-style('heading-01');
+    @include type-style('productive-heading-01');
+
     position: relative;
     display: flex;
-    align-items: center;
-    text-decoration: none;
     min-height: mini-units(4);
+    align-items: center;
     padding: 0 mini-units(2);
+    text-decoration: none;
     transition: color $duration--fast-02, background-color $duration--fast-02,
       outline $duration--fast-02;
   }
 
+  .#{$prefix}--side-nav__item--large a.#{$prefix}--side-nav__link {
+    height: mini-units(6);
+  }
+
   a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text,
   .#{$prefix}--side-nav
-    a.#{$prefix}--header__menu-item[role='menuitem']
+    a.#{$prefix}--header__menu-item
     .#{$prefix}--text-truncate-end {
     @include text-overflow();
+
     color: $shell-side-nav-text-01;
     font-size: rem(14px);
     letter-spacing: 0.1px;
-    line-height: rem(20px);
+    line-height: 1.25rem;
     user-select: none;
   }
 
   a.#{$prefix}--side-nav__link:focus,
-  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem']:focus {
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:focus {
     @include focus-outline('outline');
   }
 
   a.#{$prefix}--side-nav__link[aria-current='page'],
   a.#{$prefix}--side-nav__link--current {
+    background-color: $shell-side-nav-bg-04;
     font-weight: 600;
   }
 
+  a.#{$prefix}--side-nav__link[aria-current='page']
+    .#{$prefix}--side-nav__link-text,
+  a.#{$prefix}--side-nav__link--current .#{$prefix}--side-nav__link-text {
+    color: $ibm-color__gray-100;
+  }
+
   a.#{$prefix}--side-nav__link[aria-current='page']::before,
   a.#{$prefix}--side-nav__link--current::before {
-    content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     width: 4px;
     background-color: $shell-side-nav-accent-01;
+    content: '';
   }
 
   //----------------------------------------------------------------------------
@@ -522,11 +540,11 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav__icon {
     display: flex;
-    justify-content: center;
-    align-items: center;
     // Helpful in flex containers so the icon does not have less than the
     // expected width
     flex: 0 0 mini-units(2);
+    align-items: center;
+    justify-content: center;
   }
 
   .#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron) {
@@ -534,9 +552,9 @@
   }
 
   .#{$prefix}--side-nav__icon > svg {
-    fill: $shell-side-nav-icon-01;
     width: mini-units(2);
     height: mini-units(2);
+    fill: $shell-side-nav-icon-01;
   }
 
   .#{$prefix}--side-nav__icon > svg.#{$prefix}--side-nav-collapse-icon {
@@ -559,13 +577,13 @@
   // Variants - Fixed
   //----------------------------------------------------------------------------
   .#{$prefix}--side-nav--fixed a.#{$prefix}--side-nav__link,
-  .#{$prefix}--side-nav--fixed
-    .#{$prefix}--side-nav__submenu[aria-haspopup='true'] {
+  .#{$prefix}--side-nav--fixed .#{$prefix}--side-nav__submenu {
     padding-left: mini-units(2);
   }
 
   .#{$prefix}--side-nav--fixed
-    .#{$prefix}--side-nav__menu[role='menu']
+    .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--icon)
+    .#{$prefix}--side-nav__menu
     a.#{$prefix}--side-nav__link {
     padding-left: mini-units(4);
   }
@@ -583,27 +601,27 @@
     display: none;
 
     @include carbon--breakpoint-down('lg') {
-      display: block;
       position: relative;
+      display: block;
       margin-bottom: rem(32px);
     }
   }
 
   .#{$prefix}--side-nav__header-divider::after {
-    content: '';
     position: absolute;
-    height: rem(1px);
     bottom: rem(-16px);
     left: rem(16px);
     width: calc(100% - 32px);
+    height: rem(1px);
     background: $ibm-color__gray-20;
+    content: '';
   }
 
   //header menu items overrides
-  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem'] {
+  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item {
+    justify-content: space-between;
     color: $shell-side-nav-text-01;
     white-space: nowrap;
-    justify-content: space-between;
 
     &[aria-expanded='true'] {
       background-color: transparent;
@@ -611,25 +629,25 @@
   }
 
   .#{$prefix}--side-nav
-    .#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
+    .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu {
     bottom: inherit;
     width: 100%;
+    padding: 0;
+    background-color: transparent;
     box-shadow: none;
     transform: none;
-    background-color: transparent;
-    padding: 0;
 
-    & li {
+    li {
       width: 100%;
     }
 
-    & a.#{$prefix}--header__menu-item[role='menuitem'] {
+    a.#{$prefix}--header__menu-item {
       padding-left: 4.25rem;
       font-weight: 400;
     }
 
-    & a.#{$prefix}--header__menu-item[role='menuitem']:hover {
+    a.#{$prefix}--header__menu-item:hover {
       background-color: $shell-side-nav-bg-04;
       color: $ibm-color__gray-100;
     }
@@ -637,19 +655,31 @@
 
   .#{$prefix}--side-nav
     .#{$prefix}--header__menu
-    a.#{$prefix}--header__menu-item[role='menuitem'] {
+    a.#{$prefix}--header__menu-item {
     height: inherit;
   }
 
   .#{$prefix}--side-nav
-    a.#{$prefix}--header__menu-item[role='menuitem']:hover
+    a.#{$prefix}--header__menu-item:hover
     .#{$prefix}--header__menu-arrow,
   .#{$prefix}--side-nav
-    a.#{$prefix}--header__menu-item[role='menuitem']:focus
+    a.#{$prefix}--header__menu-item:focus
     .#{$prefix}--header__menu-arrow,
   .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
     fill: $shell-side-nav-text-01;
   }
+
+  // Windows HCM fix
+  .#{$prefix}--side-nav__icon > svg,
+  .#{$prefix}--side-nav
+    a.#{$prefix}--header__menu-item:hover
+    .#{$prefix}--header__menu-arrow,
+  .#{$prefix}--side-nav
+    a.#{$prefix}--header__menu-item:focus
+    .#{$prefix}--header__menu-arrow,
+  .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('carbon-side-nav') {

package/styles/vendor/carbon-components/src/components/ui-shell/_switcher.scss

@@ -23,8 +23,8 @@
   .#{$prefix}--switcher {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     color: $shell-panel-text-01;
   }
 
@@ -41,18 +41,19 @@
     display: block;
     width: rem(224px);
     height: 1px;
+    border: none;
     margin: $spacing-03 $spacing-05;
     background: $shell-panel-border;
-    border: none;
   }
 
   .#{$prefix}--switcher__item-link {
-    @include carbon--type-style('heading-01');
+    @include carbon--type-style('productive-heading-01');
+
     display: block;
     height: $spacing-07;
-    text-decoration: none;
     padding: rem(6px) $spacing-05;
     color: $shell-panel-text-01;
+    text-decoration: none;
 
     &:hover:not(.#{$prefix}--switcher__item-link--selected) {
       background: $shell-panel-bg-02;