@carbon/charts 0.58.0 → 0.58.1

package/styles/vendor/carbon-components/src/components/data-table/migrate-to-10.x.md

@@ -58,36 +58,36 @@ pagination
 
 ### Selectors
 
-| Category                    | v9                               | v10                                       | Notes                                                                                                      |
-| --------------------------- | -------------------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| **Table container**         | `.bx--data-table-v2-container`   | `.bx--data-table-container`               | :eyes: Changed                                                                                             |
-| **Table header**            | `.bx--data-table-v2-header`      | `.bx--data-table-header`                  | :eyes: Changed; Also, now a container class on a `div` instead of an `h4`                                  |
-|                             | -                                | `.bx--data-table-header__title`           | :sparkles: New                                                                                             |
-|                             | -                                | `.bx--data-table-header__description`     | :sparkles: New                                                                                             |
-| **Toolbar**                 | `bx--toolbar-search-container`   | `bx--toolbar-search-container-expandable` | :sparkles: New; Default is expandable search                                                               |
-|                             | -                                | `bx--toolbar-search-container-persistent` | :sparkles: New; Optional persistent search                                                                 |
-| **Data Table**              | `.bx--data-table-v2--no-border`  | -                                         | :skull: Removed                                                                                            |
-|                             | `.bx--data-table-v2--static`     | `.bx--data-table--static`                 | :eyes: Changed                                                                                             |
-|                             | `.bx--data-table-v2--selected`   | `.bx--data-table--selected`               | :eyes: Changed                                                                                             |
-|                             | `.bx--data-table-v2--zebra`      | `.bx--data-table--zebra`                  | :eyes: Changed                                                                                             |
-|                             | -                                | `.bx--data-table—-sort`                   | :sparkles: New                                                                                             |
-|                             | `.bx--data-table-v2—-small`      | `.bx--data-table—-small`                  | :eyes: Changed                                                                                             |
-|                             | `.bx--data-table-v2—-compact`    | `.bx--data-table—-compact`                | :eyes: Changed                                                                                             |
-|                             | `.bx--data-table-v2—-tall`       | `.bx--data-table—-tall`                   | :eyes: Changed                                                                                             |
-|                             | `.bx--data-table-v2--compact`    | `.bx--data-table--compact`                | :eyes: Changed                                                                                             |
-|                             | `.bx--data-table-v2--short`      | `.bx--data-table--short`                  | :eyes: Changed                                                                                             |
-|                             | `.bx--data-table-v2--tall`       | `.bx--data-table--tall`                   | :eyes: Changed                                                                                             |
-| **Table Rows**              | `.bx--parent-row-v2`             | `.bx--parent-row`                         | :eyes: Changed                                                                                             |
-|                             | `.bx--expandable-row-v2`         | `.bx--expandable-row`                     | :eyes: Changed                                                                                             |
-|                             | `.bx--expandable-row--hidden-v2` | `.bx--expandable-row--hidden`             | :eyes: Changed                                                                                             |
-|                             | `.bx--expandable-row--hover-v2`  | `.bx--expandable-row--hover`              | :eyes: Changed                                                                                             |
-| **Table Columns**           | -                                | `.bx—table-column-checkbox`               | :sparkles: New; Used in `th`'s and `td`'s with checkbox.                                                   |
-|                             | -                                | `.bx—table-column-menu`                   | :sparkles: New; Used in `td`'s with overflow menu                                                          |
-|                             | `.bx—table-expand-v2`            | `.bx—table-expand`                        | :eyes: Changed                                                                                             |
-|                             | -                                | `.bx--child-row-inner-container`          | :sparkles: New; Container inside expand child row `td`, allows for motion animation                        |
-| **Buttons, Icons and more** | `bx--table-sort-v2`              | `bx--table-sort`                          | :eyes: Changed                                                                                             |
-|                             | `bx--table-sort-v2__icon`        | `bx--table-sort__icon`                    | :eyes: Changed                                                                                             |
-|                             | -                                | `.bx--table-sort__icon-unsorted`          | :sparkles: New                                                                                             |
-|                             | `bx--table-expand-v2__button`    | `bx--table-expand__button`                | :eyes: Changed                                                                                             |
-|                             | `bx--table-expand-v2__svg`       | `bx--table-expand__svg`                   | :eyes: Changed                                                                                             |
-|                             | -                                | `bx--table-row--menu-option`              | :sparkles: New; Addional class added to `li.bx--overflow-menu-options__option` in table row overflow menus |
+| Category                    | v9                               | v10                                       | Notes                                                                                                        |
+| --------------------------- | -------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| **Table container**         | `.bx--data-table-v2-container`   | `.bx--data-table-container`               | :eyes: Changed                                                                                               |
+| **Table header**            | `.bx--data-table-v2-header`      | `.bx--data-table-header`                  | :eyes: Changed; Also, now a container class on a `div` instead of an `h4`                                    |
+|                             | -                                | `.bx--data-table-header__title`           | :sparkles: New                                                                                               |
+|                             | -                                | `.bx--data-table-header__description`     | :sparkles: New                                                                                               |
+| **Toolbar**                 | `bx--toolbar-search-container`   | `bx--toolbar-search-container-expandable` | :sparkles: New; Default is expandable search                                                                 |
+|                             | -                                | `bx--toolbar-search-container-persistent` | :sparkles: New; Optional persistent search                                                                   |
+| **Data Table**              | `.bx--data-table-v2--no-border`  | -                                         | :skull: Removed                                                                                              |
+|                             | `.bx--data-table-v2--static`     | `.bx--data-table--static`                 | :eyes: Changed                                                                                               |
+|                             | `.bx--data-table-v2--selected`   | `.bx--data-table--selected`               | :eyes: Changed                                                                                               |
+|                             | `.bx--data-table-v2--zebra`      | `.bx--data-table--zebra`                  | :eyes: Changed                                                                                               |
+|                             | -                                | `.bx--data-table—-sort`                   | :sparkles: New                                                                                               |
+|                             | `.bx--data-table-v2—-small`      | `.bx--data-table—-small`                  | :eyes: Changed                                                                                               |
+|                             | `.bx--data-table-v2—-compact`    | `.bx--data-table—-compact`                | :eyes: Changed                                                                                               |
+|                             | `.bx--data-table-v2—-tall`       | `.bx--data-table—-tall`                   | :eyes: Changed                                                                                               |
+|                             | `.bx--data-table-v2--compact`    | `.bx--data-table--compact`                | :eyes: Changed                                                                                               |
+|                             | `.bx--data-table-v2--short`      | `.bx--data-table--short`                  | :eyes: Changed                                                                                               |
+|                             | `.bx--data-table-v2--tall`       | `.bx--data-table--tall`                   | :eyes: Changed                                                                                               |
+| **Table Rows**              | `.bx--parent-row-v2`             | `.bx--parent-row`                         | :eyes: Changed                                                                                               |
+|                             | `.bx--expandable-row-v2`         | `.bx--expandable-row`                     | :eyes: Changed                                                                                               |
+|                             | `.bx--expandable-row--hidden-v2` | `.bx--expandable-row--hidden`             | :eyes: Changed                                                                                               |
+|                             | `.bx--expandable-row--hover-v2`  | `.bx--expandable-row--hover`              | :eyes: Changed                                                                                               |
+| **Table Columns**           | -                                | `.bx—table-column-checkbox`               | :sparkles: New; Used in `th`'s and `td`'s with checkbox.                                                     |
+|                             | -                                | `.bx—table-column-menu`                   | :sparkles: New; Used in `td`'s with overflow menu                                                            |
+|                             | `.bx—table-expand-v2`            | `.bx—table-expand`                        | :eyes: Changed                                                                                               |
+|                             | -                                | `.bx--child-row-inner-container`          | :sparkles: New; Container inside expand child row `td`, allows for motion animation                          |
+| **Buttons, Icons and more** | `bx--table-sort-v2`              | `bx--table-sort`                          | :eyes: Changed                                                                                               |
+|                             | `bx--table-sort-v2__icon`        | `bx--table-sort__icon`                    | :eyes: Changed                                                                                               |
+|                             | -                                | `.bx--table-sort__icon-unsorted`          | :sparkles: New                                                                                               |
+|                             | `bx--table-expand-v2__button`    | `bx--table-expand__button`                | :eyes: Changed                                                                                               |
+|                             | `bx--table-expand-v2__svg`       | `bx--table-expand__svg`                   | :eyes: Changed                                                                                               |
+|                             | -                                | `bx--table-row--menu-option`              | :sparkles: New; Additional class added to `li.bx--overflow-menu-options__option` in table row overflow menus |

package/styles/vendor/carbon-components/src/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/src/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/src/components/date-picker/date-picker.js

@@ -489,7 +489,7 @@ class DatePicker extends mixin(
    * The component options.
    * If `options` is specified in the constructor,
    * {@linkcode DatePicker.create .create()}, or {@linkcode DatePicker.init .init()},
-   * properties in this object are overriden for the instance being create and how {@linkcode DatePicker.init .init()} works.
+   * properties in this object are overridden for the instance being create and how {@linkcode DatePicker.init .init()} works.
    * @property {string} selectorInit The CSS selector to find date picker UIs.
    */
   static get options() {

package/styles/vendor/carbon-components/src/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/src/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/src/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/src/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/src/components/inline-loading/inline-loading.js

@@ -123,7 +123,7 @@ class InlineLoading extends mixin(
    * The component options.
    * If `options` is specified in the constructor, {@linkcode InlineLoading.create .create()},
    * or {@linkcode InlineLoading.init .init()},
-   * properties in this object are overriden for the instance being create and how {@linkcode InlineLoading.init .init()} works.
+   * properties in this object are overridden for the instance being create and how {@linkcode InlineLoading.init .init()} works.
    * @member InlineLoading.options
    * @type {object}
    * @property {string} selectorInit The CSS selector to find inline loading components.

package/styles/vendor/carbon-components/src/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/src/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/src/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);
   }
 }

package/styles/vendor/carbon-components/src/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/src/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/src/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/src/components/loading/loading.js

@@ -115,7 +115,7 @@ class Loading extends mixin(createComponent, initComponentBySearch, handles) {
   /**
    * The component options.
    * If `options` is specified in the constructor, {@linkcode Loading.create .create()}, or {@linkcode Loading.init .init()},
-   * properties in this object are overriden for the instance being create and how {@linkcode Loading.init .init()} works.
+   * properties in this object are overridden for the instance being create and how {@linkcode Loading.init .init()} works.
    * @member Loading.options
    * @type {object}
    * @property {string} selectorInit The CSS selector to find spinners.

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

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