@carbon/ibm-products 1.27.0 → 1.32.0

package/scss/components/AddSelect/_add-select.scss

@@ -26,7 +26,6 @@
 
   .#{$block-class}__selections {
     &.#{$carbon-prefix}--structured-list {
-      border-top: 1px solid $ui-03;
       margin-bottom: 0;
     }
 
@@ -36,8 +35,11 @@
 
     &-cell-wrapper {
       display: flex;
+      height: 3rem;
       align-items: center;
       justify-content: space-between;
+      padding: 0 $spacing-05;
+      border-bottom: 1px solid $ui-03;
     }
 
     &-cell-title {
@@ -52,6 +54,12 @@
       color: $text-02;
     }
 
+    &-cell {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
     &-cell:hover .#{$block-class}__selections-hidden-hover {
       visibility: visible;
     }
@@ -60,12 +68,9 @@
       visibility: hidden;
     }
 
-    &-row-selected {
-      background: #e5e5e5;
-    }
-
-    &-row-selected .#{$block-class}__selections-hidden-hover {
-      visibility: visible;
+    &-row-selected#{$carbon-prefix}--structured-list-row {
+      border-bottom: 1px solid $selected-ui;
+      background-color: $selected-ui;
     }
 
     &-checkbox {
@@ -75,7 +80,7 @@
 
     &-checkbox-label-wrapper {
       display: flex;
-      margin-left: $spacing-03;
+      margin-left: $spacing-05;
     }
 
     &-checkbox-label-text {
@@ -98,6 +103,15 @@
     &-cell-icon {
       margin-right: $spacing-03;
     }
+
+    &-row {
+      border-left: 0.125rem solid transparent;
+    }
+
+    &-row-meta-selected {
+      border-left: 0.125rem solid $interactive-04;
+      background-color: $hover-row;
+    }
   }
 
   .#{$block-class} .#{$block-class}__selections-row:hover {
@@ -116,17 +130,38 @@
     }
   }
 
+  .#{$block-class}
+    #{$carbon-prefix}--structured-list--selection
+    .#{$block-class}__selections-row-selected#{$carbon-prefix}--structured-list-row:hover:not(#{$carbon-prefix}--structured-list-row--header-row):not(#{$carbon-prefix}--structured-list-row--selected) {
+    border-bottom: 1px solid $hover-selected-ui;
+    background-color: $hover-selected-ui;
+  }
+
   .#{$block-class}__sub-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
+
+    &-multi {
+      padding: 0 $spacing-05;
+    }
+  }
+
+  .#{$block-class} #{$carbon-prefix}--structured-list-row {
+    border-bottom: 0;
+  }
+
+  .#{$block-class}
+    #{$carbon-prefix}--structured-list--selection
+    #{$carbon-prefix}--structured-list-row:hover:not(#{$carbon-prefix}--structured-list-row--header-row):not(#{$carbon-prefix}--structured-list-row--selected) {
+    border-bottom: 0;
   }
 
   // sidebar
 
   .#{$block-class}__sidebar-header {
     display: flex;
-    padding: $spacing-06 $spacing-05 $spacing-03 $spacing-05;
+    padding: $spacing-07 $spacing-05 $spacing-03 $spacing-05;
     border-bottom: 1px solid $ui-03;
 
     .#{$block-class}__sidebar-title {
@@ -151,7 +186,7 @@
   }
 
   .#{$block-class}__sidebar-body {
-    padding: $spacing-05;
+    padding: 0 $spacing-05;
   }
 
   .#{$block-class} .#{$block-class}__sidebar-item-header {
@@ -182,22 +217,52 @@
   .#{$block-class}__columns {
     display: flex;
     flex-direction: row;
+    flex-grow: 1;
     overflow-x: auto;
+
+    .#{$block-class}__selections-checkbox-label-wrapper {
+      margin-left: $spacing-03;
+    }
+
+    .#{$block-class}__selections-row#{$carbon-prefix}--structured-list-row {
+      border-left: 0;
+    }
+
+    .#{$block-class}__selections .#{$block-class}__selections-cell {
+      padding: 0;
+    }
+
+    .#{$block-class}__selections-cell-wrapper {
+      height: auto;
+      padding: 0 $spacing-03;
+    }
+
+    .#{$block-class}__tag-container {
+      padding: 0 $spacing-03;
+      margin-bottom: 0;
+    }
+
+    .#{$block-class}__selections-wrapper-multi {
+      padding: 0;
+    }
+
+    .#{$block-class}__selections#{$carbon-prefix}--structured-list {
+      border-top: 0;
+    }
   }
 
-  // table override
-  .#{$block-class}
-    .#{$block-class}__columns
-    .#{$carbon-prefix}--structured-list-td {
-    height: 0;
-    // stylelint-disable-next-line
-    padding: 0 !important;
+  .#{$block-class}__selections-wrapper-multi .#{$block-class}__selections-cell {
+    padding: 0 $spacing-05;
+  }
+
+  .#{$block-class}__selections-row:first-child
+    .#{$block-class}__selections-cell-wrapper {
+    border-top: 1px solid $ui-03;
   }
 
   .#{$block-class}__column {
     overflow: auto;
-    max-width: 15rem;
-    flex: 1 0 15rem;
+    flex: 0 0 20rem;
     padding: $spacing-05;
     border-top: 1px solid $ui-03;
     border-right: 1px solid $ui-03;
@@ -316,8 +381,7 @@
 
   // the influencer sidebar needs to be even with the buttons
   .#{$block-class} .#{$tearsheet-class}__influencer {
-    max-width: 29rem;
-    flex: 0 0 50%;
+    flex-basis: 22.5rem;
   }
 
   .#{$block-class} .#{$tearsheet-class}__header-description {
@@ -329,6 +393,12 @@
     flex-direction: column;
   }
 
+  .#{$block-class}.#{$block-class}__multi
+    .#{$pkg-prefix}--action-set.#{$carbon-prefix}--btn-set.#{$pkg-prefix}--action-set--max
+    .#{$pkg-prefix}--action-set__action-button {
+    max-width: 11.25rem;
+  }
+
   .#{$block-class} .#{$block-class}__items-label {
     @include carbon--type-style('productive-heading-01');
   }
@@ -340,13 +410,6 @@
     padding-right: 0;
   }
 
-  .#{$block-class} .#{$carbon-prefix}--structured-list-td {
-    height: $layout-04;
-    padding-top: 0;
-    padding-bottom: 0;
-    vertical-align: middle;
-  }
-
   .#{$block-class} .#{$carbon-prefix}--radio-button__appearance {
     margin: 0 $spacing-05 0 0;
   }
@@ -374,6 +437,41 @@
   .#{$block-class} .#{$carbon-prefix}--checkbox-label-text {
     padding-left: $spacing-03;
   }
+
+  .#{$block-class}__multi .#{$pkg-prefix}--empty-state {
+    max-width: 16rem;
+    margin-top: $layout-04;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--accordion__arrow {
+    transform: rotate(0deg);
+  }
+
+  .#{$block-class}
+    .#{$carbon-prefix}--accordion__item--active
+    .#{$carbon-prefix}--accordion__arrow {
+    transform: rotate(90deg);
+  }
+
+  .#{$block-class}
+    #{$carbon-prefix}--accordion--start
+    #{$carbon-prefix}--accordion__arrow {
+    margin: 0 0 0 $spacing-05;
+  }
+
+  .#{$block-class}
+    #{$carbon-prefix}--accordion--start
+    #{$carbon-prefix}--accordion__title {
+    margin: 0 $spacing-05 0 $spacing-03;
+  }
+
+  .#{$block-class}
+    #{$carbon-prefix}--accordion__item--active
+    #{$carbon-prefix}--accordion__content {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: $spacing-03;
+  }
 }
 
 @include exports('add-select') {

package/scss/components/Card/_card.scss

@@ -23,6 +23,7 @@
 
   .#{$block-class}__clickable {
     cursor: pointer;
+    // stylelint-disable-next-line carbon/motion-easing-use
     transition: background $duration--fast-02;
   }
 

package/scss/components/Cascade/_cascade.scss

@@ -30,7 +30,7 @@
   .#{$block-class}__element,
   .#{$block-class}__col {
     @media (prefers-reduced-motion: no-preference) {
-      // stylelint-disable-next-line carbon/motion-duration-use
+      // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
       animation: $animationProps fade; // stylelint note animation duration declared in $animationProps
       animation-fill-mode: forwards;
       opacity: 0;

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -51,6 +51,7 @@
   }
 
   .#{$block-class} .#{$step-block-class}__step--visible-step {
+    // stylelint-disable-next-line carbon/motion-easing-use
     animation: step-content-entrance $duration--slow-01;
     animation-fill-mode: forwards;
     animation-timing-function: $carbon--standard-easing;

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -39,6 +39,23 @@
       outline: 2px solid $inverse-link;
     }
 
+    &.#{$block-class}__dark {
+      .#{$block-class}__active-cell--highlight,
+      .#{$block-class}__selection-area--element,
+      .#{$block-class}__active-cell--highlight:focus {
+        /* stylelint-disable-next-line carbon/theme-token-use */
+        border-color: $cyan-30;
+      }
+      .#{$block-class}__selection-area--element::before {
+        /* stylelint-disable-next-line carbon/theme-token-use */
+        background-color: $cyan-70;
+      }
+      .#{$block-class}__cell-editor.#{$block-class}__cell-editor--active {
+        /* stylelint-disable-next-line carbon/theme-token-use */
+        outline-color: $cyan-30;
+      }
+    }
+
     .#{$block-class}__header--container {
       position: relative;
     }
@@ -170,7 +187,7 @@
       padding-left: calc(#{$spacing-03} - #{$spacing-01});
       border: $spacing-01 solid $interactive-01;
       background-color: $body-cell-background;
-      color: $text-01;
+      color: $text-02;
       text-align: left;
 
       &[data-active-row-index='header'],

package/scss/components/Datagrid/_storybook-styles.scss

@@ -19,7 +19,7 @@ $block-class: #{$pkg-prefix}--datagrid;
 .sb-show-main.sb-main-centered #root {
   width: 100%;
   height: 100vh;
-  padding: 0;
+  padding: $spacing-07;
 }
 
 .preview-position-fix {

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -35,12 +35,20 @@
         align-items: center;
         color: $text-01;
       }
+      .#{$block-class}__head-select-all.#{$block-class}__checkbox-cell.#{$block-class}__checkbox-cell-sticky-left {
+        position: sticky;
+        z-index: 1;
+        left: 0;
+      }
     }
 
     .#{$block-class}__cell {
       align-items: center;
       padding-top: 0;
       padding-bottom: 0;
+      &.#{$block-class}__cell--spacer {
+        padding: 0;
+      }
     }
 
     td.#{$carbon-prefix}--table-column-checkbox,
@@ -53,6 +61,10 @@
         align-items: center;
         padding-top: 0;
       }
+      &.#{$block-class}__checkbox-cell-sticky-left {
+        position: sticky;
+        left: 0;
+      }
     }
 
     .#{$block-class}__checkbox-cell {
@@ -263,10 +275,6 @@
   flex: 1 1 auto;
 }
 
-.#{$block-class}__with-pagination table tr:last-of-type > td {
-  border-bottom: none;
-}
-
 .#{$block-class}__resizer {
   position: absolute;
   z-index: 1;
@@ -311,6 +319,12 @@
 
 .#{$block-class}__head-hidden-select-all {
   padding-right: $spacing-08;
+  &.#{$block-class}__select-all-sticky-left {
+    position: sticky;
+    z-index: 1;
+    left: 0;
+    background-color: $ui-03;
+  }
 }
 
 .#{$block-class}__simple-body {
@@ -505,3 +519,12 @@
     margin: 0;
   }
 }
+
+.#{$block-class} .#{$pkg-prefix}--button-menu {
+  height: $spacing-09;
+}
+
+.#{$block-class} .#{$block-class}__table-grid-active {
+  border: 2px solid $inverse-link;
+  outline: 0;
+}

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -24,14 +24,31 @@ svg.#{$block-class}__draggable-handleStyle.disable {
 
 .#{$block-class}__draggable-handleHolder {
   display: flex;
-  height: $spacing-07;
-  padding-left: $spacing-02;
-  margin-bottom: $spacing-03;
-  background: $ui-02;
-  &.#{$block-class}__draggable-handleHolder-isOver {
-    border: 2px dashed $focus;
-    background-color: $highlight;
-  }
+  height: $spacing-09;
+  padding-left: $spacing-05;
+  border-bottom: 1px solid $layer-active;
+  background-color: $layer;
+}
+
+.#{$block-class}__draggable-handleHolder:hover {
+  background-color: $layer-hover;
+}
+
+.#{$block-class}__draggable-handleHolder-selected {
+  display: flex;
+  height: $spacing-09;
+  padding-left: $spacing-05;
+  border-bottom: 1px solid $layer-active;
+  background-color: $layer-selected;
+}
+
+.#{$block-class}__draggable-handleHolder-selected:hover {
+  background-color: $hover-selected-ui;
+}
+
+.#{$block-class}__draggable-handleHolder-isOver {
+  border: 2px dashed $focus;
+  background-color: $hover-selected-ui;
 }
 
 .#{$block-class}__draggable-handleHolder-droppable {
@@ -39,7 +56,7 @@ svg.#{$block-class}__draggable-handleStyle.disable {
   width: 100%;
 }
 
-.#{$block-class}__draggable-handleHolder--grabbed {
+.#{$block-class}__draggable-handleHolder-grabbed {
   background-color: $highlight;
   color: $text-01;
 }

package/scss/components/Datagrid/styles/_index.scss

@@ -18,3 +18,4 @@
 @import './useSelectAllToggle';
 @import './useExpandedRow';
 @import './draggableElement';
+@import './useInlineEdit';

package/scss/components/Datagrid/styles/_useActionsColumn.scss

@@ -22,3 +22,15 @@
 .#{$block-class}__actions-column-loading {
   margin-bottom: $spacing-03;
 }
+
+.#{$block-class} .#{$block-class}__disabled-row-action-button {
+  cursor: not-allowed;
+}
+
+.#{$block-class} .#{$block-class}__disabled-row-action {
+  pointer-events: none;
+}
+
+.#{$block-class} .#{$block-class}__disabled-row-action svg {
+  fill: $disabled-03;
+}

package/scss/components/Datagrid/styles/_useExpandedRow.scss

@@ -5,3 +5,33 @@
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */
+
+@import './variables';
+
+@mixin shared-pseudo-styles() {
+  height: 1px;
+  background-color: $ui-03;
+  content: '';
+}
+
+.#{$block-class} .#{$block-class}__expanded-row-content {
+  position: relative;
+  padding: $spacing-05 $spacing-05 $spacing-06 $spacing-09;
+}
+
+.#{$block-class} .#{$block-class}__expanded-row-content::before {
+  position: absolute;
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  top: -1px;
+  right: 0;
+  width: calc(100% - #{$spacing-09});
+  @include shared-pseudo-styles();
+}
+
+.#{$block-class} .#{$block-class}__expanded-row-content::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  @include shared-pseudo-styles();
+}