@carbon/charts 0.57.1 → 0.58.1

package/styles/vendor/carbon-components/scss/components/accordion/_accordion.scss

@@ -100,11 +100,11 @@
 
   .#{$prefix}--accordion__item--disabled,
   .#{$prefix}--accordion__item--disabled + .#{$prefix}--accordion__item {
-    border-top: 1px solid $disabled-02;
+    border-top: 1px solid $disabled-01;
   }
 
   li.#{$prefix}--accordion__item--disabled:last-of-type {
-    border-bottom: 1px solid $disabled-02;
+    border-bottom: 1px solid $disabled-01;
   }
 
   .#{$prefix}--accordion__arrow {
@@ -158,11 +158,15 @@
 
   .#{$prefix}--accordion--start .#{$prefix}--accordion__arrow {
     // Alters `$accordion-arrow-margin` token:
-    margin: 2px 0 0 $carbon--spacing-03;
+    margin: 2px 0 0 $carbon--spacing-05;
+  }
+
+  .#{$prefix}--accordion--start .#{$prefix}--accordion__title {
+    margin-right: $carbon--spacing-05;
   }
 
   .#{$prefix}--accordion--start .#{$prefix}--accordion__content {
-    margin-left: $carbon--spacing-06;
+    margin-left: $carbon--spacing-07;
   }
 
   .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content,

package/styles/vendor/carbon-components/scss/components/accordion/_keyframes.scss

@@ -14,6 +14,7 @@
   0% {
     @include content-visible;
   }
+
   100% {
     @include content-hidden;
   }
@@ -23,6 +24,7 @@
   0% {
     @include content-hidden;
   }
+
   100% {
     @include content-visible;
   }

package/styles/vendor/carbon-components/scss/components/breadcrumb/_breadcrumb.scss

@@ -98,6 +98,10 @@
       content: '';
       opacity: 0;
       transition: opacity $duration--fast-01 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 

package/styles/vendor/carbon-components/scss/components/button/_button.scss

@@ -22,7 +22,7 @@
     @include button-base;
   }
 
-  // Reset intrisic padding in Firefox (see #731)
+  // Reset intrinsic padding in Firefox (see #731)
   .#{$prefix}--btn::-moz-focus-inner {
     padding: 0;
     border: 0;
@@ -523,6 +523,15 @@
   .#{$prefix}--btn:focus {
     @include high-contrast-mode('focus');
   }
+
+  // Windows HCM fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
+    .#{$prefix}--btn__icon
+    path:not([data-icon-path]):not([fill='none']),
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('button') {

package/styles/vendor/carbon-components/scss/components/checkbox/_checkbox.scss

@@ -18,6 +18,7 @@
 @mixin checkbox {
   // Spacing between checkboxes
   .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+    position: relative;
     margin-bottom: $carbon--spacing-02;
   }
 
@@ -41,11 +42,15 @@
   // to match the specs.
   .#{$prefix}--checkbox {
     @include hidden;
+
+    //even though its hidden, positioning is for native validation to be aligned to checkbox
+    top: 1.25rem;
+    left: 0.7rem;
   }
 
   // The label corresponds to the content inside of the `label` tag. Since we're
   // creating our own checkbox style, we'll need to position this in order to
-  // accomodate the spacing needed for the checkbox.
+  // accommodate the spacing needed for the checkbox.
   .#{$prefix}--checkbox-label {
     @include reset;
     @include type-style('body-short-01');
@@ -194,6 +199,13 @@
     // Add extra spacing when label is present
     margin: rem(1px) 0 0 rem(6px);
   }
+
+  //-----------------------------------------------
+  // InlineCheckbox
+  //-----------------------------------------------
+  .#{$prefix}--checkbox--inline {
+    position: relative;
+  }
 }
 
 @include exports('checkbox') {

package/styles/vendor/carbon-components/scss/components/content-switcher/_content-switcher.scss

@@ -51,15 +51,41 @@
     color: $text-secondary;
     text-align: left;
     text-decoration: none;
-    transition: all $duration--fast-01 motion(standard, productive);
+    transition: all $duration--moderate-01 motion(standard, productive);
     white-space: nowrap;
 
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: $layer-selected-inverse;
+      content: '';
+      transform: scaleY(0);
+      transform-origin: bottom;
+      transition: all $duration--moderate-01 motion(standard, productive);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &:disabled::after {
+      display: none;
+    }
+
     &:focus {
       z-index: 3;
       border-color: $focus;
       box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
     }
 
+    &:focus::after {
+      clip-path: inset(3px 3px 3px 3px);
+    }
+
     &:hover {
       color: $text-primary;
       cursor: pointer;
@@ -156,6 +182,7 @@
   }
 
   .#{$prefix}--content-switcher__label {
+    z-index: 1;
     overflow: hidden;
     max-width: 100%;
     text-overflow: ellipsis;
@@ -172,6 +199,10 @@
     background-color: $layer-selected-inverse;
     color: $text-inverse;
 
+    &::after {
+      transform: scaleY(1);
+    }
+
     &:disabled {
       background-color: $layer-selected-disabled;
       color: $text-disabled;

package/styles/vendor/carbon-components/scss/components/data-table/_data-table-action.scss

@@ -20,9 +20,8 @@
     // Need for batch actions
     position: relative;
     display: flex;
-    overflow: hidden;
     width: 100%;
-    height: $spacing-09;
+    min-height: $spacing-09;
     background-color: $layer;
   }
 
@@ -46,7 +45,7 @@
   }
 
   //-------------------------------------------------
-  //DEPRECATED v10/v9 search behaviour
+  //DEPRECATED v10/v9 search behavior
   //-------------------------------------------------
   .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-search-container {
     display: flex;
@@ -75,11 +74,15 @@
 
   .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
     height: 100%;
-    padding: 0;
     cursor: pointer;
     opacity: 0;
   }
 
+  .#{$prefix}--toolbar-search-container-expandable:not(.#{$prefix}--toolbar-search-container-active)
+    .#{$prefix}--search-input {
+    padding: 0;
+  }
+
   .#{$prefix}--toolbar-search-container-expandable
     .#{$prefix}--search-magnifier-icon {
     left: 0;
@@ -91,7 +94,7 @@
 
   .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
     .#{$prefix}--search-magnifier-icon {
-    background-color: $layer-disabled;
+    background-color: $layer;
     cursor: not-allowed;
     transition: background-color none;
   }
@@ -320,17 +323,14 @@
   //-------------------------------------------------
   .#{$prefix}--batch-actions {
     position: absolute;
-    top: 0;
+    right: 0;
+    bottom: 0;
     left: 0;
     display: flex;
-    width: 100%;
-    height: 100%;
     align-items: center;
-    padding-right: $spacing-06;
-    padding-left: $spacing-06;
+    justify-content: space-between;
     background-color: $background-brand;
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-    overflow-x: auto;
     pointer-events: none;
     transform: translate3d(0, 48px, 0);
     transition: transform $duration--fast-02 motion(standard, productive),
@@ -344,6 +344,7 @@
   }
 
   .#{$prefix}--batch-actions--active {
+    overflow: auto hidden;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     pointer-events: all;
     transform: translate3d(0, 0, 0);
@@ -351,15 +352,14 @@
 
   //btns container
   .#{$prefix}--action-list {
-    position: absolute;
-    right: 0;
     display: flex;
+    align-items: center;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn {
-    min-width: 0;
     padding: $button-padding-ghost;
     color: $text-on-color;
+    white-space: nowrap;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn:disabled {
@@ -424,22 +424,24 @@
     transition: opacity $transition--base $carbon--standard-easing;
   }
 
-  // cancel btn
-  .#{$prefix}--batch-summary__cancel {
-    position: relative;
-    padding-right: $spacing-05;
-  }
-
   // items selected text
   .#{$prefix}--batch-summary {
-    position: absolute;
+    position: sticky;
+    z-index: 100000;
     left: 0;
     display: flex;
+    min-height: 3rem;
     align-items: center;
-    margin-left: $spacing-05;
+    padding: 0 $spacing-05;
+    background-color: $background-brand;
+
     color: $text-on-color;
   }
 
+  .#{$prefix}--batch-summary__scroll {
+    box-shadow: 0.5px 0 0.2px $hover-primary-text;
+  }
+
   .#{$prefix}--batch-summary__para {
     @include type-style('body-short-01');
   }
@@ -451,6 +453,7 @@
   .#{$prefix}--table-toolbar--small,
   .#{$prefix}--table-toolbar--sm {
     height: rem(32px);
+    min-height: rem(32px);
 
     .#{$prefix}--toolbar-search-container-expandable,
     .#{$prefix}--toolbar-search-container-persistent {
@@ -534,6 +537,17 @@
 
       background-color: transparent;
     }
+
+    .#{$prefix}--overflow-menu.#{$prefix}--toolbar-action {
+      width: rem(32px);
+      //:after element is 2rem but w/o this trigger button is for some reason 28px
+      min-width: rem(32px);
+      height: rem(32px);
+    }
+
+    .#{$prefix}--toolbar-content {
+      height: rem(32px);
+    }
   }
 
   .#{$prefix}--search--disabled .#{$prefix}--search-magnifier-icon:hover {
@@ -588,6 +602,12 @@
     overflow: hidden;
     height: rem(32px);
   }
+
+  // V11: remove --small selector block
+  .#{$prefix}--table-toolbar--small .#{$prefix}--batch-summary,
+  .#{$prefix}--table-toolbar--sm .#{$prefix}--batch-summary {
+    min-height: 2rem;
+  }
 }
 
 @include exports('data-table-v2-action') {

package/styles/vendor/carbon-components/scss/components/data-table/_data-table-core.scss

@@ -18,6 +18,7 @@
   // Container
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table-container {
+    position: relative;
     // Allow space for focus styles
     padding-top: $spacing-01;
   }
@@ -92,11 +93,14 @@
     color: $text-primary;
   }
 
-  .#{$prefix}--data-table tbody tr:hover td .#{$prefix}--link,
-  .#{$prefix}--data-table tbody tr:hover th .#{$prefix}--link {
+  .#{$prefix}--data-table tr:hover .#{$prefix}--link {
     color: $link-secondary;
   }
 
+  .#{$prefix}--data-table tr:hover .#{$prefix}--link--disabled {
+    color: $disabled-02;
+  }
+
   .#{$prefix}--data-table th,
   .#{$prefix}--data-table td {
     text-align: left;
@@ -236,7 +240,8 @@
     }
   }
 
-  .#{$prefix}--data-table--selected .#{$prefix}--link {
+  .#{$prefix}--data-table--selected
+    .#{$prefix}--link:not(.#{$prefix}--link--disabled) {
     color: $link-secondary;
   }
 
@@ -339,6 +344,7 @@
 
   .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
+    width: 2.5rem;
     // spacing between checkbox / chevron and next cell should be 8px / 0.5rem
     padding-right: rem(4px);
     padding-left: 1rem;
@@ -400,8 +406,26 @@
     padding-top: $spacing-05;
   }
 
-  .#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover {
-    background: $data-table-column-hover;
+  // Disabled radio button, checkbox fix #10913
+  tr.#{$prefix}--data-table--selected:hover
+    .#{$prefix}--radio-button[disabled]
+    + .#{$prefix}--radio-button__label,
+  tr.#{$prefix}--data-table--selected:hover
+    .#{$prefix}--checkbox[disabled]
+    + .#{$prefix}--checkbox-label,
+  tr.#{$prefix}--data-table--selected:hover .#{$prefix}--link--disabled {
+    color: $disabled-03;
+  }
+
+  // Disabled radio button, checkbox fix #10913
+  tr.#{$prefix}--data-table--selected:hover
+    .#{$prefix}--radio-button[disabled]
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance,
+  tr.#{$prefix}--data-table--selected:hover
+    .#{$prefix}--checkbox[disabled]
+    + .#{$prefix}--checkbox-label:before {
+    border-color: $disabled-03;
   }
 
   //----------------------------------------------------------------------------
@@ -722,6 +746,10 @@
     width: auto;
   }
 
+  .#{$prefix}--data-table-container--static {
+    width: fit-content;
+  }
+
   // -------------
   // Sticky header
   // -------------
@@ -968,7 +996,8 @@
   // -------------------
   // with boolean column
   // -------------------
-  .#{$prefix}--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type {
+  .#{$prefix}--data-table
+    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
     margin: 0;
   }
 

package/styles/vendor/carbon-components/scss/components/data-table/_data-table-sort.scss

@@ -40,6 +40,7 @@
     color: $text-primary;
     font: inherit;
     line-height: 1;
+    text-align: left;
     transition: background-color $duration--fast-01 motion(entrance, productive),
       outline $duration--fast-01 motion(entrance, productive);
   }

package/styles/vendor/carbon-components/scss/components/date-picker/_date-picker.scss

@@ -11,7 +11,7 @@
 @import '../../globals/scss/helper-mixins';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../form/form';
-@import 'flatpickr.scss';
+@import './flatpickr';
 
 @include flatpickr;
 
@@ -99,7 +99,7 @@
 
     &:disabled {
       border-bottom: 1px solid transparent;
-      background-color: $field-disabled;
+      background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
     }
@@ -134,8 +134,8 @@
     // vertically center icon within parent container on IE11
     top: 50%;
     right: 1rem;
-    cursor: pointer;
     fill: $icon-primary;
+    pointer-events: none;
     transform: translateY(-50%);
   }
 

package/styles/vendor/carbon-components/scss/components/date-picker/_flatpickr.scss

@@ -211,6 +211,7 @@
     cursor: pointer;
     transition: background-color $duration--fast-01 motion(standard, productive);
     fill: $icon-01;
+    user-select: none;
 
     &:hover {
       background-color: $hover-ui;

package/styles/vendor/carbon-components/scss/components/dropdown/_dropdown.scss

@@ -24,7 +24,7 @@
   .#{$prefix}--dropdown__wrapper--inline {
     display: inline-grid;
     align-items: center;
-    grid-gap: rem(24px);
+    grid-gap: 0 rem(24px);
     grid-template: auto auto / auto min-content;
 
     .#{$prefix}--label {

package/styles/vendor/carbon-components/scss/components/file-uploader/_file-uploader.scss

@@ -57,7 +57,10 @@
     display: inline-block;
     width: 100%;
     max-width: rem(320px);
-    margin-bottom: $carbon--spacing-03;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: $carbon--spacing-03;
+    }
+
     color: $link-01;
     cursor: pointer;
     outline: 2px solid transparent;

package/styles/vendor/carbon-components/scss/components/form/_form.scss

@@ -18,11 +18,15 @@
   .#{$prefix}--fieldset {
     @include reset;
 
-    margin-bottom: $carbon--spacing-07;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: $carbon--spacing-07;
+    }
   }
 
-  .#{$prefix}--fieldset--no-margin {
-    margin-bottom: 0;
+  @if not feature-flag-enabled('enable-v11-release') {
+    .#{$prefix}--fieldset--no-margin {
+      margin-bottom: 0;
+    }
   }
 
   .#{$prefix}--form-item {
@@ -49,6 +53,12 @@
     vertical-align: baseline;
   }
 
+  @if feature-flag-enabled('enable-v11-release') {
+    .#{$prefix}--label--no-margin {
+      margin-bottom: 0;
+    }
+  }
+
   .#{$prefix}--label .#{$prefix}--tooltip__trigger {
     // When tooltip trigger is put in form label the trigger button should fit in the size of label
     // https://github.com/IBM/carbon-components-react/issues/115
@@ -125,8 +135,10 @@
     display: block;
   }
 
-  .#{$prefix}--form--fluid .#{$prefix}--fieldset {
-    margin: 0;
+  @if not feature-flag-enabled('enable-v11-release') {
+    .#{$prefix}--form--fluid .#{$prefix}--fieldset {
+      margin: 0;
+    }
   }
 
   .#{$prefix}--form--fluid input[data-invalid] {

package/styles/vendor/carbon-components/scss/components/inline-loading/_inline-loading.scss

@@ -21,14 +21,6 @@
     width: 100%;
     min-height: 2rem;
     align-items: center;
-
-    .#{$prefix}--loading__svg circle {
-      stroke-width: 12;
-    }
-
-    .#{$prefix}--loading__stroke {
-      stroke-dashoffset: $loading--small__gap;
-    }
   }
 
   .#{$prefix}--inline-loading__text {

package/styles/vendor/carbon-components/scss/components/list-box/_list-box.scss

@@ -277,7 +277,7 @@ $list-box-menu-width: rem(300px);
     max-width: rem(480px);
   }
 
-  .#{$prefix}--dropdown--inline .bx--list-box__menu {
+  .#{$prefix}--dropdown--inline .#{$prefix}--list-box__menu {
     min-width: rem(288px);
     max-width: rem(480px);
   }
@@ -408,7 +408,7 @@ $list-box-menu-width: rem(300px);
     position: absolute;
     top: 50%;
     /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
-    right: rem(36px);
+    right: rem(40px);
     display: flex;
     width: rem(24px);
     height: rem(24px);
@@ -658,6 +658,36 @@ $list-box-menu-width: rem(300px);
     color: $disabled-02;
   }
 
+  .#{$prefix}--list-box__menu-item[disabled],
+  .#{$prefix}--list-box__menu-item[disabled] *,
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box__menu-item[disabled]:hover {
+    color: $disabled-02;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]:hover {
+    background-color: revert;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--checkbox-label::before {
+    border-color: $disabled-02;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $ui-03;
+  }
+
+  .#{$prefix}--list-box__menu-item[disabled]:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $ui-03;
+  }
+
   .#{$prefix}--list-box.#{$prefix}--list-box--inline
     .#{$prefix}--list-box__menu-item__option {
     margin: 0 $carbon--spacing-03;

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

@@ -0,0 +1,10 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@function loading-progress($circumference, $percentage) {
+  @return $circumference - $percentage * 0.01 * $circumference;
+}

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

@@ -6,11 +6,13 @@
 //
 
 @import 'vars';
+@import 'functions';
 
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -31,18 +33,20 @@
 /* Stroke animations */
 @keyframes init-stroke {
   0% {
-    stroke-dashoffset: 240;
+    stroke-dashoffset: loading-progress($circumference, 0);
   }
+
   100% {
-    stroke-dashoffset: $loading__gap;
+    stroke-dashoffset: loading-progress($circumference, 81);
   }
 }
 
 @keyframes stroke-end {
   0% {
-    stroke-dashoffset: $loading__gap;
+    stroke-dashoffset: loading-progress($circumference, 81);
   }
+
   100% {
-    stroke-dashoffset: 240;
+    stroke-dashoffset: loading-progress($circumference, 0);
   }
 }