@carbon/ibm-products 1.59.0 → 1.60.0

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

@@ -11,7 +11,6 @@
   display: flex;
   align-items: center;
   margin-right: $spacing-03;
-  cursor: grab;
 }
 
 .#{$block-class}__draggable-handleStyle.disabled {
@@ -22,32 +21,56 @@
   fill: $disabled-03;
 }
 
+.#{$block-class}__draggable-underlay {
+  position: absolute;
+  width: 100%;
+}
+
+.#{$block-class}__draggable-underlay-item {
+  // must match draggable item size
+  width: 100%;
+  height: $spacing-09;
+  border: 2px dashed $focus;
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  background-color: $blue-10; // not good in dark mode
+}
+
 .#{$block-class}__draggable-handleHolder {
+  position: relative;
   display: flex;
   height: $spacing-09;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer;
+  border-bottom: 1px solid $active-ui;
+  background-color: $ui-01;
+  cursor: grab;
 }
 
 .#{$block-class}__draggable-handleHolder:hover {
-  background-color: $layer-hover;
+  background-color: $hover-ui;
 }
 
-.#{$block-class}__draggable-handleHolder-selected {
-  display: flex;
-  height: $spacing-09;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer-selected;
+.#{$block-class}__draggable-handleHolder:focus {
+  box-shadow: inset 0 0 0 1px $focus;
+  outline: none;
 }
 
-.#{$block-class}__draggable-handleHolder-selected:hover {
-  background-color: $hover-selected-ui;
+.#{$block-class}__draggable-handleHolder--selected {
+  background-color: $selected-ui;
 }
 
-.#{$block-class}__draggable-handleHolder-isOver {
-  border: 2px dashed $focus;
-  /* stylelint-disable-next-line carbon/theme-token-use */
-  background-color: $blue-10;
+.#{$block-class}__draggable-handleHolder--dragging {
+  z-index: 2; // raise above other items in draggable list
+  background-color: $highlight;
+  color: $text-01;
+  outline: none;
+}
+
+.#{$block-class}__draggable-handleHolder:active,
+.#{$block-class}__draggable-handleHolder--dragging {
+  cursor: grabbing;
+}
+
+.#{$block-class}__draggable-handleHolder-selected:hover {
+  background-color: $hover-selected-ui;
 }
 
 .#{$block-class}__draggable-handleHolder-droppable {
@@ -65,11 +88,6 @@
   transition: opacity $duration--moderate-01 motion(entrance, productive);
 }
 
-.#{$block-class}__draggable-handleHolder-grabbed {
-  background-color: $highlight;
-  color: $text-01;
-}
-
 .#{$block-class}__draggable-handleHolder--sticky {
   color: $disabled-03;
 }
@@ -86,3 +104,9 @@
   text-transform: none;
   white-space: nowrap;
 }
+
+.#{$block-class}__draggable-item
+  .#{$carbon-prefix}--form-item.#{$carbon-prefix}--checkbox-wrapper {
+  max-width: $spacing-06;
+  margin-bottom: 0;
+}

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

@@ -53,3 +53,13 @@
     fill: $ui-05;
   }
 }
+
+.#{$block-class}
+  .#{$carbon-prefix}--data-table
+  tbody
+  tr:hover
+  + .#{$block-class}__expanded-row,
+.#{$block-class} .#{$block-class}__expanded-row:hover,
+.#{$block-class} .#{$block-class}__expandable-row--hover td {
+  background: $layer-hover;
+}

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss

@@ -23,7 +23,6 @@
 .#{$block-class}__customize-columns-checkbox-wrapper {
   display: flex;
   justify-content: center;
-  padding-left: $spacing-02;
 }
 
 .#{$block-class}__customize-columns-column-list