@carbon/charts 0.41.91 → 0.41.95

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

@@ -10,6 +10,8 @@
 @import '../../globals/scss/css--reset';
 @import '../../globals/scss/typography';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../button/button';
+@import '../tooltip/tooltip';
 
 /// Progress indicator styles
 /// @access private
@@ -17,6 +19,7 @@
 @mixin progress-indicator {
   .#{$prefix}--progress {
     @include reset;
+
     display: flex;
     list-style: none;
   }
@@ -24,72 +27,90 @@
   .#{$prefix}--progress-step {
     position: relative;
     display: inline-flex;
-    flex-direction: row;
-    min-width: 7rem;
-    width: rem(128px);
     overflow: visible;
+    width: rem(128px);
+    min-width: 7rem;
+    flex-direction: row;
 
     .#{$prefix}--tooltip__label {
       display: block;
     }
   }
 
+  .#{$prefix}--progress--space-equal .#{$prefix}--progress-step {
+    min-width: 8rem;
+    flex-grow: 1;
+  }
+
   .#{$prefix}--progress-line {
     position: absolute;
     left: 0;
-    height: 1px;
     width: rem(128px);
+    height: 1px;
     border: $progress-indicator-bar-width;
   }
 
+  .#{$prefix}--progress--space-equal .#{$prefix}--progress-line {
+    width: 100%;
+    min-width: rem(128px);
+  }
+
   .#{$prefix}--progress-step svg {
     position: relative;
     z-index: 1;
     width: $carbon--spacing-05;
     height: $carbon--spacing-05;
+    flex-shrink: 0;
+    margin: rem(10px) $carbon--spacing-03 0 0;
     border-radius: 50%;
-    margin: 9px $carbon--spacing-03 0 0;
-    fill: $interactive-01;
+    fill: $interactive-04;
   }
 
   .#{$prefix}--progress-label {
     @include type-style('body-short-01');
-    line-height: 1.45;
+
+    overflow: hidden;
     max-width: rem(88px);
     margin: $carbon--spacing-03 0 0 0;
-    white-space: nowrap;
-    overflow: hidden;
+    color: $text-01;
+    line-height: 1.45;
     text-overflow: ellipsis;
     transition: box-shadow $duration--fast-02 motion(standard, productive),
       color $duration--fast-02 motion(standard, productive);
+    white-space: nowrap;
 
     &::before {
-      content: '';
       display: block;
+      content: '';
     }
   }
 
   .#{$prefix}--progress-label:hover {
+    box-shadow: 0 rem(1px) $link-01;
     color: $link-01;
     cursor: pointer;
-    box-shadow: 0 rem(1px) $link-01;
   }
 
   .#{$prefix}--progress-label:focus {
-    outline: none;
-    color: $link-01;
     box-shadow: 0 rem(3px) 0 0 $link-01;
+    color: $link-01;
+    outline: none;
+  }
+
+  .#{$prefix}--progress--space-equal .#{$prefix}--progress-label {
+    max-width: 100%;
+    margin-right: 0.75rem;
   }
 
   .#{$prefix}--progress-label:active {
-    color: $interactive-01;
     box-shadow: 0 rem(3px) 0 0 $interactive-01;
+    color: $interactive-01;
   }
 
   //OVERFLOW STYLING
   .#{$prefix}--progress-label-overflow:hover ~ .#{$prefix}--tooltip,
   .#{$prefix}--progress-label-overflow:focus ~ .#{$prefix}--tooltip {
-    visibility: visible;
+    visibility: inherit;
   }
 
   .#{$prefix}--progress-step .#{$prefix}--tooltip .#{$prefix}--tooltip__caret {
@@ -105,20 +126,23 @@
   //single line tooltip
   .#{$prefix}--progress-step .#{$prefix}--tooltip {
     @include type-style('body-long-01');
-    min-width: rem(115px);
+
+    display: block;
     width: rem(125px);
+
+    min-width: rem(115px);
     min-height: $carbon--spacing-06;
-    margin-left: rem(22px);
-    margin-top: rem(40px);
     padding: $carbon--spacing-03 $carbon--spacing-05;
-    display: block;
-    visibility: hidden;
+    margin-top: rem(40px);
+    margin-left: rem(22px);
     color: $inverse-01;
+    visibility: hidden;
   }
 
   //multiline tooltip
   .#{$prefix}--progress-step .#{$prefix}--tooltip_multi {
     @include type-style('body-long-01');
+
     width: rem(150px);
     height: auto;
     color: $inverse-01;
@@ -127,27 +151,22 @@
   //OPTIONAL HELPER TEXT STYLING
   .#{$prefix}--progress-optional {
     @include type-style('label-01');
+
     position: absolute;
     left: 0;
-    margin-left: $carbon--spacing-06;
     margin-top: rem(28px);
-    color: $text-01;
+    margin-left: $carbon--spacing-06;
+    color: $text-02;
+    text-align: start;
   }
 
   //CURRENT STYLING
   .#{$prefix}--progress-step--current {
     .#{$prefix}--progress-line {
-      background-color: $interactive-01;
+      background-color: $interactive-04;
     }
   }
 
-  .#{$prefix}--progress-step--current svg {
-    width: 14px;
-    height: 14px;
-    fill: $interactive-01;
-    margin-top: rem(9.5px);
-  }
-
   //INCOMPLETE STYLING
   .#{$prefix}--progress-step--incomplete {
     svg {
@@ -162,40 +181,59 @@
   //COMPLETED STYLING
   .#{$prefix}--progress-step--complete {
     .#{$prefix}--progress-line {
-      background-color: $interactive-01;
+      background-color: $interactive-04;
     }
   }
 
   //interactive button
   .#{$prefix}--progress-step-button {
+    @include button-reset();
+
     display: flex;
+    text-align: left;
   }
 
   //unclickable button
   .#{$prefix}--progress-step-button--unclickable {
+    cursor: default;
     outline: none;
   }
 
+  .#{$prefix}--progress-step-button--unclickable
+    .#{$prefix}--progress-label:hover {
+    box-shadow: none;
+    color: $text-01;
+    cursor: default;
+  }
+
+  .#{$prefix}--progress-step-button--unclickable
+    .#{$prefix}--tooltip__label:hover {
+    box-shadow: 0 rem(1px) $link-01;
+    color: $link-01;
+    cursor: pointer;
+  }
+
   //DISABLED STYLING
   .#{$prefix}--progress-step--disabled {
     cursor: not-allowed;
+    pointer-events: none;
 
     svg {
-      fill: $disabled;
       cursor: not-allowed;
+      fill: $disabled;
     }
 
     .#{$prefix}--progress-label,
     .#{$prefix}--progress-label:hover {
+      box-shadow: none;
       color: $disabled;
       cursor: not-allowed;
-      box-shadow: none;
     }
 
     .#{$prefix}--progress-label:focus,
     .#{$prefix}--progress-label:active {
-      outline: none;
       box-shadow: none;
+      outline: none;
     }
 
     .#{$prefix}--progress-line {
@@ -209,44 +247,50 @@
     }
   }
 
-  //ERROR STYLING
-  .#{$prefix}--progress__warning > path {
+  // ERROR STYLING
+  .#{$prefix}--progress__warning > * {
     fill: $support-01;
   }
 
   // Skeleton State
   .#{$prefix}--progress.#{$prefix}--skeleton .#{$prefix}--progress-label {
     @include skeleton;
-    height: rem(12px);
+
     width: rem(40px);
+    height: rem(14px);
+    margin-top: 0.625rem;
   }
 
+  // Vertical Variant
+
   .#{$prefix}--progress--vertical {
-    display: block;
+    display: flex;
+    flex-direction: column;
   }
 
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step {
-    display: list-item;
-    min-height: 6rem;
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step,
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button {
     width: initial;
     min-width: initial;
-
-    svg {
-      display: inline-block;
-      margin: 0.1rem 0.5rem;
-    }
+    min-height: 3.625rem;
+    flex-wrap: wrap;
+    align-content: flex-start;
   }
 
-  .#{$prefix}--progress--vertical .#{$prefix}--progress-step--current svg {
-    margin-left: 0.563rem;
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step svg,
+  .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button svg {
+    display: inline-block;
+    // 1px top margin based on visual review
+    margin: rem(1px) $carbon--spacing-03 0;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-label {
     display: inline-block;
     width: initial;
-    max-width: none;
-    vertical-align: top;
+    max-width: rem(160px);
     margin: 0;
+    vertical-align: top;
+    white-space: initial;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip {
@@ -254,16 +298,18 @@
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-optional {
+    position: static;
+    width: 100%;
     margin-top: auto;
-    position: initial;
-    margin-left: 2.25rem;
+    margin-left: $carbon--spacing-07;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-line {
+    position: absolute;
     top: 0;
     left: 0;
-    height: 100%;
     width: 1px;
+    height: 100%;
   }
 }
 

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

@@ -21,9 +21,16 @@
 /// @group radio-button
 @mixin radio-button {
   .#{$prefix}--radio-button-group {
+    @include reset;
+
+    position: relative;
     display: flex;
     align-items: center;
-    margin-top: rem(6px);
+  }
+
+  // Remove spacing above collection of radio buttons if label is present
+  .#{$prefix}--label + .#{$prefix}--form-item .#{$prefix}--radio-button-group {
+    margin-top: 0;
   }
 
   // vertical radio button
@@ -37,6 +44,7 @@
 
     .#{$prefix}--radio-button__label {
       margin-right: 0;
+      line-height: carbon--mini-units(2.5);
     }
 
     .#{$prefix}--radio-button__label:not(:last-of-type) {
@@ -46,26 +54,29 @@
 
   .#{$prefix}--radio-button {
     @include hidden;
+
     visibility: inherit;
   }
 
   .#{$prefix}--radio-button__label {
     @include type-style('body-short-01');
+
     display: flex;
     align-items: center;
-    cursor: pointer;
     margin-right: $carbon--spacing-05;
+    cursor: pointer;
   }
 
   .#{$prefix}--radio-button__appearance {
     @include reset;
+
+    width: rem(18px);
+    height: rem(18px);
+    flex-shrink: 0;
+    border: $radio-border-width solid $icon-01;
+    margin: rem(1px) $carbon--spacing-03 rem(2px) rem(2px);
     background-color: transparent;
     border-radius: 50%;
-    border: $radio-border-width solid $icon-01;
-    flex-shrink: 0;
-    height: rem(18px);
-    width: rem(18px);
-    margin-right: $carbon--spacing-03;
   }
 
   .#{$prefix}--radio-button:checked
@@ -76,26 +87,28 @@
     justify-content: center;
     border-color: $icon-01;
 
-    &:before {
-      content: '';
-      display: inline-block;
+    &::before {
       position: relative;
-      width: 0.5rem;
-      height: 0.5rem;
-      border-radius: 50%;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
       background-color: $icon-01;
+      border-radius: 50%;
+      content: '';
+      transform: scale(0.5);
 
       // 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
-        background-color: windowText;
+        background-color: WindowText;
       }
-    }
-  }
 
-  // Workaround for: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11295231
-  [disabled] ~ _ {
-    font-size: inherit;
+      // Firefox only HCM solution
+      @media screen and (prefers-contrast) {
+        // Utilize a system color variable to accomodate any user HCM theme
+        border: 2px solid WindowText;
+      }
+    }
   }
 
   .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
@@ -128,6 +141,7 @@
   // Skeleton State
   .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
     @include skeleton;
+
     width: rem(100px);
     height: rem(18px);
   }
@@ -139,7 +153,7 @@
 
   .#{$prefix}--radio-button-wrapper .#{$prefix}--radio-button__label {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
     margin: 0;
   }