@carbon/charts 0.57.1 → 0.58.1

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/type/scss/vendor/@carbon/grid/vendor/@carbon/layout/modules/generated/_spacing.scss

@@ -0,0 +1,91 @@
+// Code generated by @carbon/layout. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-01: 0.125rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-02: 0.25rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-03: 0.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-04: 0.75rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-05: 1rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-06: 1.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-07: 2rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-08: 2.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-09: 3rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-10: 4rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-11: 5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-12: 6rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-13: 10rem !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$spacing: (
+  spacing-01: $spacing-01,
+  spacing-02: $spacing-02,
+  spacing-03: $spacing-03,
+  spacing-04: $spacing-04,
+  spacing-05: $spacing-05,
+  spacing-06: $spacing-06,
+  spacing-07: $spacing-07,
+  spacing-08: $spacing-08,
+  spacing-09: $spacing-09,
+  spacing-10: $spacing-10,
+  spacing-11: $spacing-11,
+  spacing-12: $spacing-12,
+  spacing-13: $spacing-13,
+);

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/type/scss/vendor/@carbon/import-once/import-once.scss

@@ -18,7 +18,7 @@ $imported-modules: () !default;
 /// @content Declaration blocks to be imported
 /// @group @carbon/import-once
 @mixin exports($name, $warn: false) {
-  @if (index($imported-modules, $name) == null) {
+  @if not(index($imported-modules, $name)) {
     $imported-modules: append($imported-modules, $name) !global;
     @content;
   } @else if $warn == true {

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

@@ -39,7 +39,7 @@ class Accordion extends mixin(createComponent, initComponentBySearch, handles) {
      *
      *  DEPRECATE in v8
      *
-     *  Swapping to a button elemenet instead of a div
+     *  Swapping to a button element instead of a div
      *  automatically maps click events to keypress as well
      *  This event listener now is only added if user is using
      *  the older markup
@@ -97,7 +97,7 @@ class Accordion extends mixin(createComponent, initComponentBySearch, handles) {
    * The component options.
    * If `options` is specified in the constructor,
    * {@linkcode NumberInput.create .create()}, or {@linkcode NumberInput.init .init()},
-   * properties in this object are overriden for the instance being create and how {@linkcode NumberInput.init .init()} works.
+   * properties in this object are overridden for the instance being create and how {@linkcode NumberInput.init .init()} works.
    * @property {string} selectorInit The CSS selector to find accordion UIs.
    */
   static get options() {

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

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

package/styles/vendor/carbon-components/src/components/code-snippet/code-snippet.js

@@ -74,7 +74,7 @@ class CodeSnippet extends mixin(
    * The component options.
    * If `options` is specified in the constructor, {@linkcode CodeSnippet.create .create()},
    * or {@linkcode CodeSnippet.init .init()},
-   * properties in this object are overriden for the instance being create and how {@linkcode CodeSnippet.init .init()} works.
+   * properties in this object are overridden for the instance being create and how {@linkcode CodeSnippet.init .init()} works.
    * @member CodeSnippet.options
    * @type {object}
    * @property {string} selectorInit The data attribute to find code snippet UIs.

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

@@ -153,7 +153,7 @@ class ContentSwitcher extends mixin(
    * The component options.
    * If `options` is specified in the constructor,
    * {@linkcode ContentSwitcher.create .create()}, or {@linkcode ContentSwitcher.init .init()},
-   * properties in this object are overriden for the instance being create and how {@linkcode ContentSwitcher.init .init()} works.
+   * props in this object are overridden for the instance being created and how {@linkcode ContentSwitcher.init .init()} works.
    * @member ContentSwitcher.options
    * @type {object}
    * @property {string} selectorInit The CSS selector to find content switcher button set.

package/styles/vendor/carbon-components/src/components/copy-button/copy-button.js

@@ -74,7 +74,7 @@ class CopyButton extends mixin(
   /**
    * The component options.
    * If `options` is specified in the constructor, {@linkcode CopyBtn.create .create()}, or {@linkcode CopyBtn.init .init()},
-   * properties in this object are overriden for the instance being create and how {@linkcode CopyBtn.init .init()} works.
+   * properties in this object are overridden for the instance being create and how {@linkcode CopyBtn.init .init()} works.
    * @member CopyBtn.options
    * @type {object}
    * @property {string} selectorInit The data attribute to find copy button UIs.

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