@carbon/charts 0.57.1 → 0.58.1

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/action/_data-table-action.scss

@@ -26,9 +26,8 @@
     // Need for batch actions
     position: relative;
     display: flex;
-    overflow: hidden;
     width: 100%;
-    height: $spacing-09;
+    min-height: $spacing-09;
     background-color: $layer;
   }
 
@@ -47,12 +46,19 @@
   }
 
   .#{$prefix}--toolbar-content .#{$prefix}--search .#{$prefix}--search-input {
+    height: 3rem;
+    padding: 0 3rem;
     // For toolbar animation with (esp.) persistent search box
     background-color: transparent;
   }
 
+  .#{$prefix}--toolbar-content .#{$prefix}--overflow-menu {
+    width: 3rem;
+    height: 3rem;
+  }
+
   //-------------------------------------------------
-  //DEPRECATED v10/v9 search behaviour
+  //DEPRECATED v10/v9 search behavior
   //-------------------------------------------------
   .#{$prefix}--batch-actions ~ .#{$prefix}--toolbar-search-container {
     display: flex;
@@ -70,7 +76,7 @@
     height: $spacing-09;
     box-shadow: none;
     cursor: pointer;
-    transition: width $transition--expansion $standard-easing,
+    transition: width $transition-expansion $standard-easing,
       background-color $duration-fast-02 motion(entrance, productive);
 
     &:hover {
@@ -78,26 +84,19 @@
     }
   }
 
+  .#{$prefix}--search.#{$prefix}--toolbar-search-container-expandable {
+    width: 3rem;
+  }
+
   .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
     height: 100%;
-    padding: 0;
     cursor: pointer;
     opacity: 0;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable
-    .#{$prefix}--search-magnifier-icon {
-    left: 0;
-    width: $spacing-09;
-    height: $spacing-09;
-    padding: $spacing-05;
-  }
-
-  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
-    .#{$prefix}--search-magnifier-icon {
-    background-color: $layer-disabled;
-    cursor: not-allowed;
-    transition: background-color none;
+  .#{$prefix}--toolbar-search-container-expandable:not(.#{$prefix}--toolbar-search-container-active)
+    .#{$prefix}--search-input {
+    padding: 0;
   }
 
   .#{$prefix}--toolbar-search-container-disabled .#{$prefix}--search-input {
@@ -126,6 +125,68 @@
     background-color: $focus;
   }
 
+  //-------------------------------------------------
+  // Seach icon
+  //-------------------------------------------------v
+  // lg expandable icon spacing
+  .#{$prefix}--table-toolbar
+    .#{$prefix}--search--lg
+    .#{$prefix}--search-magnifier-icon {
+    left: 0;
+  }
+
+  // lg persistent icon spacing
+  .#{$prefix}--table-toolbar:not(.#{$prefix}--table-toolbar--sm)
+    .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--lg
+    .#{$prefix}--search-magnifier-icon {
+    left: 1rem;
+  }
+
+  // sm expandable icon spacing
+  .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm
+    .#{$prefix}--search--sm:not(.#{$prefix}--toolbar-search-container-active):not(.#{$prefix}--toolbar-search-container-persistent)
+    .#{$prefix}--search-magnifier-icon {
+    left: 0;
+  }
+
+  .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm
+    .#{$prefix}--search--sm.#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon {
+    left: 0.5rem;
+  }
+
+  // sm persistent icon spacing
+  .#{$prefix}--table-toolbar
+    .#{$prefix}--toolbar-search-container-persistent.#{$prefix}--search--sm
+    .#{$prefix}--search-magnifier-icon {
+    left: 0.5rem;
+  }
+
+  .#{$prefix}--toolbar-search-container-expandable
+    .#{$prefix}--search-magnifier-icon {
+    width: $spacing-09;
+    height: $spacing-09;
+    padding: $spacing-05;
+  }
+
+  .#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
+    .#{$prefix}--search-magnifier-icon {
+    background-color: $layer;
+    cursor: not-allowed;
+    transition: background-color none;
+  }
+
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon:focus,
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon:active,
+  .#{$prefix}--toolbar-search-container-active
+    .#{$prefix}--search-magnifier-icon:hover {
+    border: none;
+    background-color: transparent;
+    outline: none;
+  }
+
   //-------------------------------------------------
   //ACTIVE SEARCH - DEFAULT TOOLBAR
   //-------------------------------------------------
@@ -158,17 +219,6 @@
     background-color: $field-hover;
   }
 
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier-icon:focus,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier-icon:active,
-  .#{$prefix}--toolbar-search-container-active
-    .#{$prefix}--search-magnifier-icon:hover {
-    border: none;
-    background-color: transparent;
-    outline: none;
-  }
-
   //-------------------------------------------------
   //SEARCH CLOSE BUTTON
   //-------------------------------------------------
@@ -324,17 +374,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),
@@ -348,6 +395,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);
@@ -355,15 +403,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 {
@@ -425,36 +472,38 @@
 
   .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel:hover::before {
     opacity: 0;
-    transition: opacity $transition--base $standard-easing;
-  }
-
-  // cancel btn
-  .#{$prefix}--batch-summary__cancel {
-    position: relative;
-    padding-right: $spacing-05;
+    transition: opacity $transition-base $standard-easing;
   }
 
   // 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 $link-primary-hover;
+  }
+
   .#{$prefix}--batch-summary__para {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
   }
 
   //-------------------------------------------------
   //SMALL TOOLBAR
   //-------------------------------------------------
-  // V11: remove --small
-  .#{$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 {
@@ -530,6 +579,22 @@
 
       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}--toolbar-content .#{$prefix}--overflow-menu {
+      width: 2rem;
+      height: 2rem;
+    }
   }
 
   .#{$prefix}--search--disabled .#{$prefix}--search-magnifier-icon:hover {
@@ -539,26 +604,19 @@
   //-------------------------------------------------
   // SMALL BATCH ACTIONS
   //-------------------------------------------------
-  // V11: remove --small selector block
-  .#{$prefix}--table-toolbar--small
-    .#{$prefix}--batch-actions
-    .#{$prefix}--action-list,
+
   .#{$prefix}--table-toolbar--sm
     .#{$prefix}--batch-actions
     .#{$prefix}--action-list {
     height: rem(32px);
   }
 
-  // V11: remove --small selector block
-  .#{$prefix}--table-toolbar--small .#{$prefix}--toolbar-action,
   .#{$prefix}--table-toolbar--sm .#{$prefix}--toolbar-action {
     width: rem(32px);
     height: rem(32px);
     padding: $spacing-03 0;
   }
 
-  // V11: remove --small selector block
-  .#{$prefix}--table-toolbar--small .#{$prefix}--btn--primary,
   .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary {
     height: rem(32px);
     min-height: auto;
@@ -566,22 +624,19 @@
     padding-bottom: calc(0.375rem - 3px);
   }
 
-  // V11: remove --small selector block
-  .#{$prefix}--table-toolbar--small
-    .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before,
   .#{$prefix}--table-toolbar--sm
     .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel::before {
     top: rem(8px);
   }
 
-  // V11: remove --small selector block
-  .#{$prefix}--table-toolbar--small
-    .#{$prefix}--toolbar-action
-    ~ .#{$prefix}--btn,
   .#{$prefix}--table-toolbar--sm
     .#{$prefix}--toolbar-action
     ~ .#{$prefix}--btn {
     overflow: hidden;
     height: rem(32px);
   }
+
+  .#{$prefix}--table-toolbar--sm .#{$prefix}--batch-summary {
+    min-height: 2rem;
+  }
 }

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/expandable/_data-table-expandable.scss

@@ -226,13 +226,11 @@
   }
 
   .#{$prefix}--table-expand__svg {
-    fill: $ui-05;
+    fill: $layer-selected-inverse;
     transform: rotate(90deg);
     transition: transform $duration-moderate-01 motion(standard, productive);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall .#{$prefix}--table-expand__button,
   .#{$prefix}--data-table--xl .#{$prefix}--table-expand__button {
     width: rem(32px);
     padding: 0;

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/sort/_data-table-sort.scss

@@ -45,6 +45,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);
   }
@@ -83,8 +84,7 @@
     justify-content: space-between;
   }
 
-  // V11: Remove compact, short, tall
-  .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--compact):not(.#{$prefix}--data-table--short):not(.#{$prefix}--data-table--tall):not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--sm):not(.#{$prefix}--data-table--md):not(.#{$prefix}--data-table--xl)
+  .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--sm):not(.#{$prefix}--data-table--md):not(.#{$prefix}--data-table--xl)
     th
     .#{$prefix}--table-sort__flex {
     /* IE11 workaround for align-items: center and min-height
@@ -95,20 +95,12 @@
     }
   }
 
-  // V11: remove compact
-  .#{$prefix}--data-table--compact.#{$prefix}--data-table--sort
-    th
-    .#{$prefix}--table-sort__flex,
   .#{$prefix}--data-table--xs.#{$prefix}--data-table--sort
     th
     .#{$prefix}--table-sort__flex {
     min-height: 1.5rem;
   }
 
-  // V11: remove short
-  .#{$prefix}--data-table--short.#{$prefix}--data-table--sort
-    th
-    .#{$prefix}--table-sort__flex,
   .#{$prefix}--data-table--sm.#{$prefix}--data-table--sort
     th
     .#{$prefix}--table-sort__flex {
@@ -121,10 +113,6 @@
     min-height: 2.5rem;
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
-    th
-    .#{$prefix}--table-sort__flex,
   .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort
     th
     .#{$prefix}--table-sort__flex {
@@ -181,43 +169,32 @@
     fill: $icon-primary;
     opacity: 1;
     transform: rotate(0);
-    transition: transform $transition--base $standard-easing;
+    transition: transform $transition-base $standard-easing;
   }
 
   //----------------------------------------------------------------------------
   // Compact, Short, Tall Sortable
   //----------------------------------------------------------------------------
   // Sortable compact
-  // V11: remove compact
-  .#{$prefix}--data-table--compact.#{$prefix}--data-table--sort th,
   .#{$prefix}--data-table--xs.#{$prefix}--data-table--sort th {
     height: rem(24px);
   }
 
   // Sortable Short
-  // V11: remove short
-  .#{$prefix}--data-table--short.#{$prefix}--data-table--sort th,
   .#{$prefix}--data-table--sm.#{$prefix}--data-table--sort th {
     height: rem(32px);
   }
 
   // Sortable Medium
-  // V11: remove short
   .#{$prefix}--data-table--md.#{$prefix}--data-table--sort th {
     height: rem(40px);
   }
 
   // Sortable Tall
-  // V11: remove tall
-  .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort th,
   .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort th {
     height: rem(64px);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall.#{$prefix}--data-table--sort
-    th
-    .#{$prefix}--table-sort,
   .#{$prefix}--data-table--xl.#{$prefix}--data-table--sort
     th
     .#{$prefix}--table-sort {
@@ -225,9 +202,6 @@
     height: rem(64px);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall .#{$prefix}--table-sort__icon-unsorted,
-  .#{$prefix}--data-table--tall .#{$prefix}--table-sort__icon,
   .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon-unsorted,
   .#{$prefix}--data-table--xl .#{$prefix}--table-sort__icon {
     margin-top: rem(13px);

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/date-picker/_date-picker.scss

@@ -106,7 +106,7 @@
 
     &:disabled {
       border-bottom: 1px solid transparent;
-      background-color: $field-disabled;
+      background-color: $field;
       color: $text-disabled;
       cursor: not-allowed;
     }
@@ -125,8 +125,6 @@
   }
 
   // Size variant styles
-  // TODO V11: Remove xl selector
-  .#{$prefix}--date-picker__input--xl,
   .#{$prefix}--date-picker__input--lg {
     height: rem(48px);
   }
@@ -141,8 +139,8 @@
     // vertically center icon within parent container on IE11
     top: 50%;
     right: 1rem;
-    cursor: pointer;
     fill: $icon-primary;
+    pointer-events: none;
     transform: translateY(-50%);
   }