@carbon/charts 0.58.0 → 0.58.1

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/components/loading/_animation.scss

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

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/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/globals/scss/vendor/@carbon/styles/scss/components/loading/_loading.scss

@@ -12,23 +12,10 @@
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
 @use '../../utilities/z-index' as *;
+@use 'vars' as *;
+@use 'functions' as *;
 @use 'animation';
 
-/// @type Number
-/// @access private
-/// @group loading
-$-loading-gap: 16;
-
-/// @type Number
-/// @access private
-/// @group loading
-$-loading-gap-small: 110;
-
-/// @type Number
-/// @access private
-/// @group loading
-$-loading-size: 5.5rem;
-
 /// Loading styles
 /// @access private
 /// @group loading
@@ -37,8 +24,8 @@ $-loading-size: 5.5rem;
     @include component-reset.reset;
     @include animation.spin;
 
-    width: $-loading-size;
-    height: $-loading-size;
+    width: $loading-size;
+    height: $loading-size;
   }
 
   // Animation (Spin by default)
@@ -47,18 +34,18 @@ $-loading-size: 5.5rem;
   }
 
   .#{$prefix}--loading__svg circle {
-    stroke-dasharray: 240;
+    stroke-dasharray: $circumference $circumference;
     stroke-linecap: butt;
     stroke-width: 10;
   }
 
   .#{$prefix}--loading__stroke {
     stroke: $interactive;
-    stroke-dashoffset: $-loading-gap;
+    stroke-dashoffset: loading-progress($circumference, 81);
   }
 
   .#{$prefix}--loading--small .#{$prefix}--loading__stroke {
-    stroke-dashoffset: $-loading-gap-small;
+    stroke-dashoffset: loading-progress($circumference, 48);
   }
 
   .#{$prefix}--loading--stop {
@@ -115,6 +102,7 @@ $-loading-size: 5.5rem;
     0% {
       transform: rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg);
     }
@@ -135,19 +123,21 @@ $-loading-size: 5.5rem;
   /* 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/scss/globals/scss/vendor/@carbon/styles/scss/components/loading/_vars.scss

@@ -0,0 +1,21 @@
+//
+// 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.
+//
+
+/// @type Number
+/// @access private
+/// @group loading
+$radius: 44;
+
+/// @type Number
+/// @access private
+/// @group loading
+$circumference: $radius * 2 * 3.1416;
+
+/// @type Number
+/// @access private
+/// @group loading
+$loading-size: 5.5rem;

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

@@ -41,6 +41,7 @@
 
   .#{$prefix}--menu--invisible {
     opacity: 0;
+    pointer-events: none;
   }
 
   .#{$prefix}--menu-option {
@@ -97,7 +98,7 @@
   }
 
   .#{$prefix}--menu-option__label {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     overflow: hidden;
     flex-grow: 1;

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

@@ -45,6 +45,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`?
@@ -57,7 +61,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;
     }
   }
@@ -67,6 +72,9 @@
     transition: transform $duration-moderate-02 motion(entrance, expressive);
   }
 
+  // -----------------------------
+  // Modal container
+  // -----------------------------
   .#{$prefix}--modal-container {
     position: fixed;
     top: 0;
@@ -90,17 +98,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 breakpoint(lg) {
@@ -113,30 +110,81 @@
     }
   }
 
-  .#{$prefix}--modal-header,
+  // -----------------------------
+  // Modal content
+  // -----------------------------
   .#{$prefix}--modal-content {
+    @include type-style('body-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-primary;
+    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-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-secondary;
+  }
+
+  .#{$prefix}--modal-header__heading {
+    @include type-style('heading-03');
+
+    color: $text-primary;
+  }
+
+  // -----------------------------
+  // XS Modal
+  // -----------------------------
   .#{$prefix}--modal-container--xs {
-    .#{$prefix}--modal-header {
-      padding-right: $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 breakpoint(md) {
@@ -153,15 +201,18 @@
     }
   }
 
+  // -----------------------------
+  // SM Modal
+  // -----------------------------
   .#{$prefix}--modal-container--sm {
-    .#{$prefix}--modal-header {
-      padding-right: $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 breakpoint(md) {
@@ -171,48 +222,24 @@
     @include breakpoint(lg) {
       width: 42%;
       max-height: 72%;
-    }
-
-    @include 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 breakpoint(xlg) {
+      width: 36%;
     }
   }
 
+  // -----------------------------
+  // LG Modal
+  // -----------------------------
   .#{$prefix}--modal-container--lg {
-    .#{$prefix}--modal-header {
-      padding-right: $spacing-09;
-    }
-
-    .#{$prefix}--modal-content,
-    .#{$prefix}--modal-content__regular-content,
-    .#{$prefix}--modal-content--with-form {
-      padding-right: $spacing-05;
-    }
-
     @include 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 breakpoint(lg) {
@@ -225,49 +252,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-secondary;
-  }
-
-  .#{$prefix}--modal-header__heading {
-    @include type-style('productive-heading-03');
-
-    color: $text-primary;
-  }
-
-  .#{$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-primary;
-    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/globals/scss/vendor/@carbon/styles/scss/components/multiselect/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'multiselect';
+@use 'multiselect';
+
+@include multiselect.multiselect;

package/styles/vendor/carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/components/multiselect/_multiselect.scss

@@ -0,0 +1,103 @@
+//
+// 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.
+//
+
+@use '../list-box';
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+
+/// Multi select styles
+/// @access public
+/// @group multi-select
+@mixin multiselect {
+  .#{$prefix}--multi-select .#{$prefix}--tag {
+    min-width: auto;
+    margin: 0 $spacing-03 0 0;
+  }
+
+  .#{$prefix}--multi-select--filterable .#{$prefix}--tag {
+    margin: 0 $spacing-03 0 $spacing-05;
+  }
+
+  .#{$prefix}--multi-select .#{$prefix}--list-box__menu {
+    min-width: auto;
+  }
+
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    .#{$prefix}--checkbox-wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+  }
+
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    .#{$prefix}--checkbox-label {
+    display: inline-block;
+    overflow: hidden;
+    width: 100%;
+    padding-left: rem(28px);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item__option
+    > .#{$prefix}--form-item {
+    flex-direction: row;
+    margin: 0;
+  }
+
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__menu-item
+    .#{$prefix}--checkbox:checked
+    ~ .#{$prefix}--checkbox-label-text {
+    color: $text-primary;
+  }
+
+  .#{$prefix}--multi-select--filterable {
+    transition: outline-color $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--multi-select--filterable.#{$prefix}--combo-box
+    .#{$prefix}--text-input {
+    border: rem(2px) solid transparent;
+    background-clip: padding-box;
+    outline: none;
+  }
+
+  .#{$prefix}--multi-select--filterable--input-focused {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
+    .#{$prefix}--text-input {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover
+    .#{$prefix}--text-input {
+    background-color: $field;
+  }
+
+  .#{$prefix}--multi-select--filterable
+    .#{$prefix}--list-box__selection--multi {
+    margin: 0 0 0 $spacing-05;
+  }
+
+  .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline,
+  .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline
+    .#{$prefix}--text-input {
+    border-bottom: 0;
+    background-color: transparent;
+  }
+}