@carbon/charts 0.57.1 → 0.58.1

package/styles/vendor/carbon-components/scss/components/loading/_loading.scss

@@ -8,9 +8,10 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
-@import 'keyframes';
-@import 'mixins';
+@import 'functions';
 @import 'vars';
+@import 'mixins';
+@import 'keyframes';
 
 /// Loading styles
 /// @access private
@@ -30,18 +31,18 @@
   }
 
   .#{$prefix}--loading__svg circle {
-    stroke-dasharray: 240;
+    stroke-dasharray: $circumference $circumference;
     stroke-linecap: butt;
     stroke-width: 10;
   }
 
   .#{$prefix}--loading__stroke {
     stroke: $interactive-04;
-    stroke-dashoffset: $loading__gap;
+    stroke-dashoffset: loading-progress($circumference, 81);
   }
 
   .#{$prefix}--loading--small .#{$prefix}--loading__stroke {
-    stroke-dashoffset: $loading--small__gap;
+    stroke-dashoffset: loading-progress($circumference, 48);
   }
 
   .#{$prefix}--loading--stop {

package/styles/vendor/carbon-components/scss/components/loading/_mixins.scss

@@ -25,6 +25,10 @@
     animation-duration: 10ms;
     animation-name: init-stroke;
     animation-timing-function: $carbon--standard-easing;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }
 
@@ -42,5 +46,9 @@
     animation-fill-mode: forwards;
     animation-name: stroke-end;
     animation-timing-function: $carbon--ease-out;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }

package/styles/vendor/carbon-components/scss/components/loading/_vars.scss

@@ -8,12 +8,12 @@
 /// @type Number
 /// @access private
 /// @group loading
-$loading__gap: 16;
+$radius: 44;
 
 /// @type Number
 /// @access private
 /// @group loading
-$loading--small__gap: 110;
+$circumference: $radius * 2 * 3.1416;
 
 /// @type Number
 /// @access private

package/styles/vendor/carbon-components/scss/components/menu/_menu.scss

@@ -36,6 +36,7 @@
 
   .#{$prefix}--menu--invisible {
     opacity: 0;
+    pointer-events: none;
   }
 
   .#{$prefix}--menu-option {

package/styles/vendor/carbon-components/scss/components/modal/_modal.scss

@@ -43,6 +43,10 @@
       transition: opacity $duration--moderate-02 motion(entrance, expressive),
         visibility 0ms linear;
       visibility: inherit;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     // V11: Question for design: do we have an updated tokens for fields that exist on `layer`?
@@ -55,7 +59,8 @@
     .#{$prefix}--dropdown,
     .#{$prefix}--dropdown-list,
     .#{$prefix}--number input[type='number'],
-    .#{$prefix}--date-picker__input {
+    .#{$prefix}--date-picker__input,
+    .#{$prefix}--multi-select {
       background-color: $field-02;
     }
   }
@@ -65,6 +70,9 @@
     transition: transform $duration--moderate-02 motion(entrance, expressive);
   }
 
+  // -----------------------------
+  // Modal container
+  // -----------------------------
   .#{$prefix}--modal-container {
     position: fixed;
     top: 0;
@@ -88,17 +96,6 @@
       width: 84%;
       height: auto;
       max-height: 90%;
-
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
-      .#{$prefix}--modal-content__regular-content {
-        padding-right: 20%;
-      }
-
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
     }
 
     @include carbon--breakpoint(lg) {
@@ -111,30 +108,82 @@
     }
   }
 
-  .#{$prefix}--modal-header,
+  // -----------------------------
+  // Modal content
+  // -----------------------------
   .#{$prefix}--modal-content {
+    @include type-style('body-long-01');
+
+    position: relative;
+    // Required to accommodate focus outline's negative offset:
+    padding-top: $spacing-03;
+    // anything besides text/p spans full width, with just 16px padding
+    padding-right: $spacing-05;
     padding-left: $spacing-05;
+    margin-bottom: $spacing-09;
+    color: $text-01;
+
+    font-weight: 400;
+    grid-column: 1/-1;
+    grid-row: 2/-2;
+    overflow-y: auto;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
   }
 
-  .#{$prefix}--modal-header,
-  .#{$prefix}--modal-content,
+  //TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated
+  // text/p gets 20% right padding
+  .#{$prefix}--modal-content p,
   .#{$prefix}--modal-content__regular-content {
-    padding-right: $spacing-05;
+    padding-right: 20%;
+    @include type-style('body-long-01');
   }
 
+  //TO-DO: remove .#{$prefix}--modal-content--with-form in v11 since hasForm has been deprecated\
+  // anything besides text/p spans full width, with just 16px padding
   .#{$prefix}--modal-content--with-form {
     padding-right: $spacing-05;
   }
 
+  // -----------------------------
+  // Modal header
+  // -----------------------------
+  .#{$prefix}--modal-header {
+    padding-top: $spacing-05;
+    padding-right: $spacing-09;
+    padding-left: $spacing-05;
+    margin-bottom: $spacing-03;
+    grid-column: 1/-1;
+    grid-row: 1/1;
+  }
+
+  .#{$prefix}--modal-header__label {
+    @include type-style('label-01');
+
+    margin-bottom: $spacing-02;
+    color: $text-02;
+  }
+
+  .#{$prefix}--modal-header__heading {
+    @include type-style('productive-heading-03');
+
+    color: $text-01;
+  }
+
+  // -----------------------------
+  // XS Modal
+  // -----------------------------
   .#{$prefix}--modal-container--xs {
-    .#{$prefix}--modal-header {
-      padding-right: $carbon--spacing-09;
+    //text always spans full width in xs modals
+    .#{$prefix}--modal-content__regular-content {
+      padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
+    .#{$prefix}--modal-content p {
+      //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
+      padding-right: 0;
     }
 
     @include carbon--breakpoint(md) {
@@ -151,15 +200,18 @@
     }
   }
 
+  // -----------------------------
+  // SM Modal
+  // -----------------------------
   .#{$prefix}--modal-container--sm {
-    .#{$prefix}--modal-header {
-      padding-right: $carbon--spacing-09;
+    //text spans full width in sm modals below 1056
+    .#{$prefix}--modal-content__regular-content {
+      padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
+    .#{$prefix}--modal-content p {
+      //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
+      padding-right: 0;
     }
 
     @include carbon--breakpoint(md) {
@@ -169,48 +221,24 @@
     @include carbon--breakpoint(lg) {
       width: 42%;
       max-height: 72%;
-    }
 
-    @include carbon--breakpoint(xlg) {
-      width: 36%;
-
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
+      .#{$prefix}--modal-content p,
       .#{$prefix}--modal-content__regular-content {
         padding-right: 20%;
       }
+    }
 
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
+    @include carbon--breakpoint(xlg) {
+      width: 36%;
     }
   }
 
+  // -----------------------------
+  // LG Modal
+  // -----------------------------
   .#{$prefix}--modal-container--lg {
-    .#{$prefix}--modal-header {
-      padding-right: $carbon--spacing-09;
-    }
-
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
-    }
-
     @include carbon--breakpoint(md) {
       width: 96%;
-
-      .#{$prefix}--modal-header,
-      .#{$prefix}--modal-content,
-      .#{$prefix}--modal-content__regular-content {
-        padding-right: 20%;
-      }
-
-      .#{$prefix}--modal-content--with-form {
-        // Override for `.#{$prefix}--modal-content`
-        padding-right: $spacing-05;
-      }
     }
 
     @include carbon--breakpoint(lg) {
@@ -223,50 +251,9 @@
     }
   }
 
-  .#{$prefix}--modal-header {
-    padding-top: $spacing-05;
-    padding-right: $spacing-09;
-    margin-bottom: $spacing-03;
-    grid-column: 1/-1;
-    grid-row: 1/1;
-  }
-
-  .#{$prefix}--modal-header__label {
-    @include type-style('label-01');
-
-    margin-bottom: $spacing-02;
-    color: $text-02;
-  }
-
-  .#{$prefix}--modal-header__heading {
-    @include type-style('productive-heading-03');
-
-    color: $text-01;
-  }
-
-  .#{$prefix}--modal-content {
-    @include type-style('body-long-01');
-
-    position: relative;
-    // Required to accommodate focus outline's negative offset:
-    padding-top: $spacing-03;
-    margin-bottom: $spacing-09;
-    color: $text-01;
-
-    font-weight: 400;
-    grid-column: 1/-1;
-    grid-row: 2/-2;
-    overflow-y: auto;
-
-    &:focus {
-      @include focus-outline('outline');
-    }
-  }
-
-  .#{$prefix}--modal-content > p {
-    @include type-style('body-long-01');
-  }
-
+  // -----------------------------
+  // Modal overflow
+  // -----------------------------
   // Required so overflow-indicator disappears at end of content
   .#{$prefix}--modal-scroll-content > *:last-child {
     padding-bottom: $spacing-07;
@@ -313,6 +300,9 @@
     }
   }
 
+  // -----------------------------
+  // Modal footer
+  // -----------------------------
   .#{$prefix}--modal-footer {
     display: flex;
     height: rem(64px);
@@ -336,6 +326,9 @@
     align-items: flex-start;
   }
 
+  // -----------------------------
+  // Modal close btn
+  // -----------------------------
   .#{$prefix}--modal-close {
     position: absolute;
     z-index: 2;

package/styles/vendor/carbon-components/scss/components/notification/_inline-notification.scss

@@ -33,8 +33,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $carbon--spacing-05;
-    margin-bottom: $carbon--spacing-05;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-top: $carbon--spacing-05;
+      margin-bottom: $carbon--spacing-05;
+    }
+
     color: $inverse-01;
 
     @include carbon--breakpoint(md) {

package/styles/vendor/carbon-components/scss/components/notification/_mixins.scss

@@ -37,7 +37,8 @@
   background: $background-color;
 
   .#{$prefix}--inline-notification__icon,
-  .#{$prefix}--toast-notification__icon {
+  .#{$prefix}--toast-notification__icon,
+  .#{$prefix}--actionable-notification__icon {
     fill: $color;
   }
 }

package/styles/vendor/carbon-components/scss/components/notification/_toast-notification.scss

@@ -29,14 +29,19 @@
     width: rem(288px);
     height: auto;
     padding-left: $carbon--spacing-05;
-    margin-top: $carbon--spacing-03;
-    margin-right: $carbon--spacing-05;
-    margin-bottom: $carbon--spacing-03;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-top: $carbon--spacing-03;
+      margin-right: $carbon--spacing-05;
+      margin-bottom: $carbon--spacing-03;
+    }
+
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
     color: $inverse-01;
 
-    &:first-child {
-      margin-top: $carbon--spacing-05;
+    @if not feature-flag-enabled('enable-v11-release') {
+      &:first-child {
+        margin-top: $carbon--spacing-05;
+      }
     }
 
     @include carbon--breakpoint(max) {

package/styles/vendor/carbon-components/scss/components/number-input/_number-input.scss

@@ -26,7 +26,7 @@
   }
 
   .#{$prefix}--number input[type='number'] {
-    @include type-style('body-short-01');
+    @include type-style('code-01');
     @include focus-outline('reset');
 
     display: inline-flex;
@@ -371,9 +371,13 @@
     background-color: transparent;
   }
 
+  // We include `:not(:focus)` here because the pseudo elements will overlap the
+  // focus outline on the button if we set their background-color on focus
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::before,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after {
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::before,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::after {
     background-color: $hover-light-ui;
   }
 
@@ -421,7 +425,9 @@
   }
 
   //No label positioning adjustment
-  .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text {
+  .#{$prefix}--number--nolabel
+    .#{$prefix}--label
+    + .#{$prefix}--form__helper-text {
     margin-top: 0;
   }
 

package/styles/vendor/carbon-components/scss/components/overflow-menu/_overflow-menu.scss

@@ -110,6 +110,10 @@
       content: '';
       transition: background-color $duration--fast-02
         motion(entrance, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 
@@ -119,6 +123,7 @@
 
   .#{$prefix}--overflow-menu-options--light {
     background-color: $field-02;
+
     &::after {
       background-color: $field-02;
     }
@@ -161,6 +166,7 @@
     &[data-floating-menu-direction='top']::after {
       width: rem(32px);
     }
+
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
       height: rem(32px);
@@ -174,6 +180,7 @@
     &[data-floating-menu-direction='top']::after {
       width: rem(48px);
     }
+
     &[data-floating-menu-direction='left']::after,
     &[data-floating-menu-direction='right']::after {
       height: rem(48px);

package/styles/vendor/carbon-components/scss/components/pagination/_pagination.scss

@@ -12,6 +12,7 @@ $css--helpers: true;
 @import '../../globals/scss/typography';
 @import '../../globals/scss/layout';
 @import '../../globals/scss/css--helpers';
+@import '../../globals/scss/vendor/@carbon/layout/scss/generated/size';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../select/select';
 @import '../text-input/text-input';
@@ -31,7 +32,7 @@ $css--helpers: true;
 
     display: flex;
     width: calc(100% - 1px);
-    min-height: rem(48px);
+    min-height: $size-md;
     align-items: center;
     justify-content: space-between;
     border-top: 1px solid $ui-03;
@@ -63,6 +64,14 @@ $css--helpers: true;
     }
   }
 
+  .#{$prefix}--pagination--sm {
+    min-height: $size-sm;
+  }
+
+  .#{$prefix}--pagination--lg {
+    min-height: $size-lg;
+  }
+
   .#{$prefix}--pagination .#{$prefix}--select {
     height: 100%;
     align-items: center;
@@ -78,14 +87,38 @@ $css--helpers: true;
 
     width: auto;
     min-width: auto;
-    height: rem(48px);
+    height: 100%;
     padding: 0 2.25rem 0 $spacing-05;
+    background-color: $ui-01;
+    line-height: $size-md;
+  }
+
+  .#{$prefix}--pagination--sm .#{$prefix}--select-input {
+    line-height: $size-sm;
+  }
+
+  .#{$prefix}--pagination--lg .#{$prefix}--select-input {
+    line-height: $size-lg;
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input:hover {
     background: $hover-ui;
   }
 
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus,
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus
+    option,
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus
+    optgroup {
+    background-color: $layer;
+  }
+
   .#{$prefix}--pagination .#{$prefix}--select__arrow {
     top: 50%;
     transform: translate(-0.5rem, -50%);
@@ -106,7 +139,7 @@ $css--helpers: true;
   .#{$prefix}--pagination__left,
   .#{$prefix}--pagination__right {
     display: flex;
-    height: rem(48px);
+    height: 100%;
     align-items: center;
   }
 
@@ -153,8 +186,9 @@ $css--helpers: true;
     @include reset;
 
     display: flex;
-    width: $carbon--spacing-09;
-    height: 100%;
+    width: $size-md;
+    height: $size-md;
+    min-height: $size-sm;
     align-items: center;
     justify-content: center;
     border: none;
@@ -167,6 +201,20 @@ $css--helpers: true;
       background-color $duration--fast-02 motion(standard, productive);
   }
 
+  .#{$prefix}--pagination--sm .#{$prefix}--pagination__button,
+  .#{$prefix}--pagination--sm
+    .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
+    width: $size-sm;
+    height: $size-sm;
+  }
+
+  .#{$prefix}--pagination--lg .#{$prefix}--pagination__button,
+  .#{$prefix}--pagination--lg
+    .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
+    width: $size-lg;
+    height: $size-lg;
+  }
+
   .#{$prefix}--pagination__button:focus,
   .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button {
     @include focus-outline('outline');

package/styles/vendor/carbon-components/scss/components/pagination-nav/_pagination-nav.scss

@@ -33,12 +33,16 @@
       content: '';
       opacity: 0;
       transition: width $duration--fast-02 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 
   .#{$prefix}--pagination-nav__page--active + &::after,
   &.#{$prefix}--pagination-nav__page--active::after {
-    left: calc(50% - #{$carbon--spacing-05 / 2});
+    left: calc(50% - #{$carbon--spacing-05 * 0.5});
     width: $carbon--spacing-05;
     opacity: 1;
   }
@@ -187,8 +191,8 @@
 
   .#{$prefix}--pagination-nav__select-icon {
     position: absolute;
-    top: calc(50% - #{$select-icon-top-position / 2});
-    left: calc(50% - #{$select-icon-top-position / 2});
+    top: calc(50% - #{$select-icon-top-position * 0.5});
+    left: calc(50% - #{$select-icon-top-position * 0.5});
     pointer-events: none;
   }
 

package/styles/vendor/carbon-components/scss/components/progress-bar/_progress-bar.scss

@@ -28,13 +28,21 @@
     background-color: $layer;
   }
 
+  .#{$prefix}--progress-bar--big .#{$prefix}--progress-bar__track {
+    height: rem(8px);
+  }
+
+  .#{$prefix}--progress-bar--small .#{$prefix}--progress-bar__track {
+    height: rem(4px);
+  }
+
   .#{$prefix}--progress-bar__bar {
     display: block;
     width: 100%;
     height: 100%;
     background-color: $interactive;
     transform: scaleX(0);
-    transform-origin: 0 50%;
+    transform-origin: 0 center #{'/*rtl:100% center*/'};
     transition: transform $duration--fast-02 motion(standard, productive);
   }
 
@@ -76,6 +84,27 @@
       background-position-x: -105%;
     }
   }
+
+  .#{$prefix}--progress-bar--inline {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__label {
+    flex-shrink: 0;
+    margin-right: $spacing-05;
+    margin-bottom: 0;
+  }
+
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__helper-text {
+    @include hidden;
+  }
+
+  .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__label,
+  .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__helper-text {
+    padding-right: $spacing-05;
+    padding-left: $spacing-05;
+  }
 }
 
 @include exports('progress-bar') {