@carbon/ibm-products 1.59.1 → 1.61.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/_useInlineEdit.scss

@@ -108,18 +108,14 @@ $row-heights: (
     justify-content: flex-start;
   }
   // Always show renderIcon if inline edit columns are less than half of total columns
-  &:not(
-      .#{$block-class}__inline-edit-button--edit-less-than-half-of-total-cols
-    ) {
-    .#{$block-class}__inline-edit-button-icon {
-      display: none;
-    }
+  .#{$block-class}__inline-edit-button-icon {
+    display: none;
+  }
 
-    /* stylelint-disable-next-line */
-    &:hover {
-      .#{$block-class}__inline-edit-button-icon {
-        display: block;
-      }
+  &:hover,
+  &.#{$block-class}__inline-edit-button--active {
+    .#{$block-class}__inline-edit-button-icon {
+      display: block;
     }
   }
 }

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

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

@@ -22,7 +22,48 @@
 }
 
 .#{$carbon-prefix}--btn--ghost.#{$block-class}__row-size-button--open {
-  background-color: $ui-background;
+  background-color: $ui-02;
 
   box-shadow: 1px 4px 8px -3px $overlay-01, -1px 6px 8px -5px $overlay-01;
 }
+
+// Top align cell content for xl row size
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-center
+  td,
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-top
+  td {
+  align-items: flex-start;
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-05;
+
+  &.#{$block-class}__actions-column-cell {
+    padding-left: $spacing-03;
+  }
+}
+
+// Top align header content for xl row size
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-center
+  th,
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-top
+  th {
+  .#{$carbon-prefix}--table-header-label {
+    align-items: flex-start;
+  }
+}
+
+// Top align checkbox row header for xl row size
+.#{$block-class}
+  table.#{$carbon-prefix}--data-table--xl.#{$block-class}__vertical-align-center
+  .#{$block-class}__checkbox-cell
+  th.#{$carbon-prefix}--table-column-checkbox {
+  align-items: flex-start;
+  padding-top: $spacing-04;
+}
+
+.#{$block-class}__row-size__row-settings-trigger--open.#{$carbon-prefix}--btn--ghost {
+  background-color: $ui-02;
+}

package/scss/components/TagSet/_tag-set.scss

@@ -70,7 +70,7 @@ $block-class-modal: #{$block-class}-modal;
   }
 
   .#{$block-class-overflow}__tooltip
-    .#{$block-class-overflow}__tag-item
+    .#{$block-class-overflow}__tag-item--default
     .#{$carbon-prefix}--tag {
     border-radius: 0;
   }
@@ -127,13 +127,23 @@ $block-class-modal: #{$block-class}-modal;
       text-align: left;
     }
 
+    &.#{$carbon-prefix}--tooltip button {
+      padding-right: 0;
+    }
+
     .#{$block-class-overflow}__show-all-tags-link {
       display: inline-block;
       margin: $spacing-03 0 $spacing-02; // to match the tags
     }
 
-    .#{$block-class-overflow}__tag-item,
-    .#{$block-class-overflow}__tag-item .#{$carbon-prefix}--tag {
+    .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
+      .#{$carbon-prefix}--tag {
+      background-color: $inverse-hover-ui;
+    }
+
+    .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,
+    .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default
+      .#{$carbon-prefix}--tag {
       @include carbon--type-style('body-short-01');
 
       display: block;

package/es/components/Datagrid/utils/getColTitle.js

@@ -1,25 +0,0 @@
-// This function recursively looks for the nested header element until we can find the key which contains the title.
-// This can happen if multiple hooks are used together that manipulate the rendering of the column
-// header, such as `useColumnCenterAlign` and `useSortableColumns`.
-var getNestedTitle = function getNestedTitle(component) {
-  if (component && !component.key) {
-    return getNestedTitle(component.children);
-  }
-  if (component && component.key && typeof component.key === 'string') {
-    return component.key;
-  }
-};
-var getColTitle = function getColTitle(col) {
-  var _col$Header, _col$Header$props;
-  if (!col) {
-    return;
-  }
-  var checkTitle = function checkTitle() {
-    if (col.Header().props.children.props && col.Header().props.children.props.title) {
-      return col.Header().props.children.props.title;
-    }
-    return getNestedTitle(col.Header().props.children.props);
-  };
-  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 ? void 0 : (_col$Header = col.Header) === null || _col$Header === void 0 ? void 0 : (_col$Header$props = _col$Header.props) === null || _col$Header$props === void 0 ? void 0 : _col$Header$props.title;
-};
-export default getColTitle;

package/lib/components/Datagrid/utils/getColTitle.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-// This function recursively looks for the nested header element until we can find the key which contains the title.
-// This can happen if multiple hooks are used together that manipulate the rendering of the column
-// header, such as `useColumnCenterAlign` and `useSortableColumns`.
-var getNestedTitle = function getNestedTitle(component) {
-  if (component && !component.key) {
-    return getNestedTitle(component.children);
-  }
-  if (component && component.key && typeof component.key === 'string') {
-    return component.key;
-  }
-};
-var getColTitle = function getColTitle(col) {
-  var _col$Header, _col$Header$props;
-  if (!col) {
-    return;
-  }
-  var checkTitle = function checkTitle() {
-    if (col.Header().props.children.props && col.Header().props.children.props.title) {
-      return col.Header().props.children.props.title;
-    }
-    return getNestedTitle(col.Header().props.children.props);
-  };
-  return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col === null || col === void 0 ? void 0 : (_col$Header = col.Header) === null || _col$Header === void 0 ? void 0 : (_col$Header$props = _col$Header.props) === null || _col$Header$props === void 0 ? void 0 : _col$Header$props.title;
-};
-var _default = getColTitle;
-exports.default = _default;