@carbon/charts 0.57.1 → 0.58.1

package/styles/vendor/carbon-components/src/components/progress-indicator/_progress-indicator.scss

@@ -102,9 +102,10 @@
     margin-right: 0.75rem;
   }
 
-  .#{$prefix}--progress-label:active {
-    box-shadow: 0 rem(3px) 0 0 $interactive-01;
-    color: $interactive-01;
+  .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable)
+    .#{$prefix}--progress-label:active {
+    box-shadow: 0 rem(3px) 0 0 $interactive;
+    color: $interactive;
   }
 
   //OVERFLOW STYLING
@@ -268,12 +269,17 @@
     flex-direction: column;
   }
 
+  .#{$prefix}--progress--vertical,
+  .#{$prefix}--progress-text {
+    display: flex;
+    flex-direction: column;
+  }
+
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step,
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button {
     width: initial;
     min-width: initial;
     min-height: 3.625rem;
-    flex-wrap: wrap;
     align-content: flex-start;
   }
 
@@ -293,15 +299,16 @@
     white-space: initial;
   }
 
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip {
+  .#{$prefix}--progress--vertical
+    .#{$prefix}--progress-step
+    .#{$prefix}--tooltip {
     margin-top: 0.5rem;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-optional {
     position: static;
     width: 100%;
-    margin-top: auto;
-    margin-left: $carbon--spacing-07;
+    margin: auto 0;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-line {

package/styles/vendor/carbon-components/src/components/progress-indicator/progress-indicator.js

@@ -136,7 +136,7 @@ class ProgressIndicator extends mixin(createComponent, initComponentBySearch) {
   }
 
   /**
-   * Returns HTML string for an SVG used to represent a compelted step (checkmark)
+   * Returns HTML string for an SVG used to represent a completed step (checkmark)
    */
   _getSVGComplete() {
     return `<svg width="24px" height="24px" viewBox="0 0 24 24">
@@ -156,7 +156,7 @@ class ProgressIndicator extends mixin(createComponent, initComponentBySearch) {
   }
 
   /**
-   * Returns HTML string for an SVG used to represent incomple step (grey empty circle)
+   * Returns HTML string for an SVG used to represent incomplete step (grey empty circle)
    */
   _getIncompleteSVG() {
     return `<svg>
@@ -192,7 +192,7 @@ class ProgressIndicator extends mixin(createComponent, initComponentBySearch) {
    * The component options.
    * If `options` is specified in the constructor,
    * {@linkcode ProgressIndicator.create .create()}, or {@linkcode ProgressIndicator.init .init()},
-   * properties in this object are overriden for the instance being created.
+   * properties in this object are overridden for the instance being created.
    * @member ProgressIndicator.options
    * @type {object}
    * @property {string} selectorInit The CSS selector to find content switcher button set.

package/styles/vendor/carbon-components/src/components/radio-button/_radio-button.scss

@@ -99,13 +99,13 @@
 
       // Allow the selected button to be seen in Windows HCM for IE/Edge
       @media screen and (-ms-high-contrast: active) {
-        // Utilize a system color variable to accomodate any user HCM theme
+        // Utilize a system color variable to accommodate any user HCM theme
         background-color: WindowText;
       }
 
       // Firefox only HCM solution
       @media screen and (prefers-contrast) {
-        // Utilize a system color variable to accomodate any user HCM theme
+        // Utilize a system color variable to accommodate any user HCM theme
         border: 2px solid WindowText;
       }
     }
@@ -134,8 +134,8 @@
   .#{$prefix}--radio-button:focus
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
-    box-shadow: 0 0 0 2px $focus;
-    outline: 1px solid transparent;
+    outline: 2px solid $focus;
+    outline-offset: 1.5px;
   }
 
   // Skeleton State

package/styles/vendor/carbon-components/src/components/search/_search.scss

@@ -62,7 +62,7 @@
 
   .#{$prefix}--search-input[disabled] {
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
+    background-color: $field;
     color: $disabled;
     cursor: not-allowed;
 
@@ -75,6 +75,10 @@
     background: $field-02;
   }
 
+  .#{$prefix}--search--light .#{$prefix}--search-close::before {
+    background: $field-02;
+  }
+
   // Small styles
   .#{$prefix}--search--sm .#{$prefix}--search-input,
   .#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded
@@ -143,6 +147,10 @@
       content: '';
       transition: background-color $duration--fast-02
         motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &:hover {

package/styles/vendor/carbon-components/src/components/search/search.js

@@ -75,7 +75,7 @@ class Search extends mixin(createComponent, initComponentBySearch, handles) {
 
   /**
    * Toggles between the grid and list layout.
-   * @param {HTMLElement} element The element contining the layout toggle.
+   * @param {HTMLElement} element The element continuing the layout toggle.
    */
   toggleLayout(element) {
     toArray(element.querySelectorAll(this.options.selectorSearchView)).forEach(
@@ -98,7 +98,7 @@ class Search extends mixin(createComponent, initComponentBySearch, handles) {
    * The component options.
    * If `options` is specified in the constructor,
    * {@linkcode Search.create .create()}, or {@linkcode Search.init .init()},
-   * properties in this object are overriden for the instance being created
+   * properties in this object are overridden for the instance being created
    * and how {@linkcode Search.init .init()} works.
    * @member Search.options
    * @type {object}

package/styles/vendor/carbon-components/src/components/select/_select.scss

@@ -52,6 +52,7 @@
     border-radius: 0;
     color: $text-01;
     cursor: pointer;
+    font-family: inherit;
     // reset disabled <select> opacity
     opacity: 1;
 
@@ -172,9 +173,10 @@
     opacity: 1;
   }
 
-  .#{$prefix}--select-optgroup,
+  optgroup.#{$prefix}--select-optgroup,
   .#{$prefix}--select-option {
     // For the options to show in IE11
+    background-color: $background-hover;
     color: $text-01;
 
     &:disabled {
@@ -211,10 +213,16 @@
     padding-right: $spacing-07;
     padding-left: $carbon--spacing-03;
     border-bottom: none;
-    background-color: $ui-background;
+    background-color: transparent;
     color: $text-01;
   }
 
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus,
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus option,
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus optgroup {
+    background-color: $background;
+  }
+
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled],
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled]:hover {
     background-color: $disabled-01;

package/styles/vendor/carbon-components/src/components/slider/_slider.scss

@@ -31,7 +31,9 @@
     width: 100%;
     min-width: rem(200px);
     max-width: rem(640px);
+    padding: $spacing-05 0;
     margin: 0 $carbon--spacing-05;
+    cursor: pointer;
   }
 
   .#{$prefix}--slider__range-label {
@@ -50,7 +52,6 @@
     width: 100%;
     height: rem(2px);
     background: $ui-03;
-    cursor: pointer;
     transform: translate(0%, -50%);
   }
 
@@ -80,13 +81,11 @@
   .#{$prefix}--slider__thumb {
     position: absolute;
     z-index: 3;
-    top: 0;
     width: rem(14px);
     height: rem(14px);
     background: $ui-05;
     border-radius: 50%;
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
-    cursor: pointer;
     outline: none;
     transform: translate(-50%, -50%);
     transition: transform $duration--fast-02 motion(standard, productive),
@@ -117,7 +116,7 @@
 
   .#{$prefix}--slider-text-input,
   .#{$prefix}-slider-text-input {
-    width: auto;
+    width: rem(64px);
     height: rem(40px);
     -moz-appearance: textfield;
     text-align: center;
@@ -128,6 +127,10 @@
     }
   }
 
+  .#{$prefix}--slider-text-input.#{$prefix}--text-input--invalid {
+    padding-right: 1rem;
+  }
+
   .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
     background-color: $interactive-04;
   }
@@ -139,6 +142,10 @@
     color: $disabled-02;
   }
 
+  .#{$prefix}--slider--disabled.#{$prefix}--slider {
+    cursor: not-allowed;
+  }
+
   .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
     background-color: $ui-03;
 
@@ -166,7 +173,6 @@
     .#{$prefix}--slider__thumb:focus
     ~ .#{$prefix}--slider__filled-track {
     background-color: $ui-03;
-    cursor: not-allowed;
   }
 
   .#{$prefix}--slider--disabled

package/styles/vendor/carbon-components/src/components/slider/slider.js

@@ -235,7 +235,7 @@ class Slider extends mixin(
   /**
    * The component options.
    * If `options` is specified in the constructor,
-   * properties in this object are overriden for the instance being created.
+   * properties in this object are overridden for the instance being created.
    * @property {string} selectorInit The CSS selector to find slider instances.
    */
   static get options() {

package/styles/vendor/carbon-components/src/components/structured-list/_mixins.scss

@@ -10,7 +10,7 @@
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding-td--condensed($padding: $structured-list-padding) {
-  padding: $padding / 4;
+  padding: $padding * 0.25;
 }
 
 /// Used only for [data-structured-list]
@@ -18,13 +18,13 @@
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding--data-structured-list($padding: $structured-list-padding) {
-  padding-right: $padding / 2;
-  padding-left: $padding / 2;
+  padding-right: $padding * 0.5;
+  padding-left: $padding * 0.5;
 
   // Controls gutter sizes for check
   &:first-child {
-    padding-right: $padding / 2;
-    padding-left: $padding / 2;
+    padding-right: $padding * 0.5;
+    padding-left: $padding * 0.5;
   }
 }
 

package/styles/vendor/carbon-components/src/components/structured-list/_structured-list.scss

@@ -32,12 +32,14 @@
 
     display: table;
     width: 100%;
-    margin-bottom: 5rem;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: 5rem;
+    }
+
     background-color: transparent;
     border-collapse: collapse;
     border-spacing: 0;
     overflow-x: auto;
-    overflow-y: hidden;
 
     // Condensed list
     &.#{$prefix}--structured-list--condensed .#{$prefix}--structured-list-td,

package/styles/vendor/carbon-components/src/components/tabs/_tabs.scss

@@ -710,8 +710,11 @@
       @include focus-outline('reset');
       @include type-style('body-short-01');
 
+      @if not feature-flag-enabled('enable-v11-release') {
+        width: rem(160px);
+      }
+
       overflow: hidden;
-      width: rem(160px);
       padding: $spacing-04 $spacing-05 $spacing-03;
       border-bottom: $tab-underline-color;
       color: $text-02;

package/styles/vendor/carbon-components/src/components/tabs/tabs.js

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

package/styles/vendor/carbon-components/src/components/tag/_tag.scss

@@ -130,6 +130,12 @@
     @include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui);
   }
 
+  .#{$prefix}--tag--outline {
+    @include tag-theme($background, $text-01, $hover-ui);
+
+    box-shadow: inset 0 0 0 1px $inverse-02;
+  }
+
   .#{$prefix}--tag--disabled,
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
   .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
@@ -188,6 +194,7 @@
     cursor: pointer;
     transition: background-color $duration--fast-01 motion(standard, productive),
       box-shadow $duration--fast-01 motion(standard, productive);
+
     svg {
       fill: currentColor;
     }