@carbon/ibm-products 2.10.2 → 2.11.0

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

@@ -92,10 +92,10 @@
       &.#{c4p-settings.$carbon-prefix}--data-table--sm,
       &.#{c4p-settings.$carbon-prefix}--data-table--md {
         .#{$block-class}__cell {
-          /* stylelint-disable-next-line carbon/layout-token-use */
-          padding-top: rem(7px);
-          /* stylelint-disable-next-line carbon/layout-token-use */
-          padding-bottom: rem(6px);
+          /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+          padding-top: to-rem(7px);
+          /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+          padding-bottom: to-rem(6px);
         }
       }
 
@@ -123,8 +123,8 @@
       }
 
       .#{c4p-settings.$carbon-prefix}--table-column-checkbox {
-        /* stylelint-disable-next-line carbon/layout-token-use */
-        padding-top: rem(13px);
+        /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+        padding-top: to-rem(13px);
       }
     }
 

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

@@ -15,7 +15,6 @@
   display: flex;
   align-items: center;
   margin-right: $spacing-03;
-  cursor: grab;
 }
 
 .#{variables.$block-class}__draggable-handleStyle.disabled {
@@ -26,32 +25,56 @@
   fill: $icon-on-color-disabled;
 }
 
+.#{variables.$block-class}__draggable-underlay {
+  position: absolute;
+  width: 100%;
+}
+
+.#{variables.$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: colors.$blue-10; // not good in dark mode
+}
+
 .#{variables.$block-class}__draggable-handleHolder {
+  position: relative; // above underlay
   display: flex;
   height: $spacing-09;
   border-bottom: 1px solid $layer-active;
   background-color: $layer;
+  cursor: grab;
 }
 
 .#{variables.$block-class}__draggable-handleHolder:hover {
   background-color: $layer-hover;
 }
 
-.#{variables.$block-class}__draggable-handleHolder-selected {
-  display: flex;
-  height: $spacing-09;
-  border-bottom: 1px solid $layer-active;
+.#{variables.$block-class}__draggable-handleHolder:focus {
+  box-shadow: inset 0 0 0 1px $focus;
+  outline: none;
+}
+
+.#{variables.$block-class}__draggable-handleHolder--selected {
   background-color: $layer-selected;
 }
 
-.#{variables.$block-class}__draggable-handleHolder-selected:hover {
-  background-color: $layer-selected-hover-01;
+.#{variables.$block-class}__draggable-handleHolder--dragging {
+  z-index: 2; // raise above other items in draggable list
+  background-color: $highlight;
+  color: $text-primary;
+  outline: none;
 }
 
-.#{variables.$block-class}__draggable-handleHolder-isOver {
-  border: 2px dashed $focus;
-  /* stylelint-disable-next-line carbon/theme-token-use */
-  background-color: colors.$blue-10;
+.#{variables.$block-class}__draggable-handleHolder:active,
+.#{variables.$block-class}__draggable-handleHolder--dragging {
+  cursor: grabbing;
+}
+
+.#{variables.$block-class}__draggable-handleHolder-selected:hover {
+  background-color: $layer-selected-hover-01;
 }
 
 .#{variables.$block-class}__draggable-handleHolder-droppable {
@@ -69,11 +92,6 @@
   transition: opacity $duration-moderate-01 motion(entrance, productive);
 }
 
-.#{variables.$block-class}__draggable-handleHolder-grabbed {
-  background-color: $highlight;
-  color: $text-primary;
-}
-
 .#{variables.$block-class}__draggable-handleHolder--sticky {
   color: $text-on-color-disabled;
 }

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

@@ -52,9 +52,22 @@
   width: $spacing-07;
   height: $spacing-07;
   min-height: $spacing-07;
+  align-items: center;
   justify-content: center;
   padding: 0;
   .#{variables.$block-class}__row-expander--icon {
     fill: $layer-selected-inverse;
   }
 }
+
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  tbody
+  tr:hover
+  + .#{variables.$block-class}__expanded-row,
+.#{variables.$block-class} .#{variables.$block-class}__expanded-row:hover,
+.#{variables.$block-class}
+  .#{variables.$block-class}__expandable-row--hover
+  td {
+  background: $layer-hover;
+}

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

@@ -40,7 +40,7 @@
   .#{variables.$block-class}__customize-columns-checkbox-visible-label {
   // Disabling linter only to match the spacing that Carbon uses for the Checkbox label
   /* stylelint-disable-next-line */
-  padding-left: convert.rem(6px);
+  padding-left: convert.to-rem(6px);
 }
 
 .#{variables.$block-class}__customize-columns-column-list

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

@@ -16,7 +16,8 @@
 @use '../../../../global/styles/project-settings' as c4p-settings;
 @use '../variables';
 
-$action-set-height: rem(64px);
+/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+$action-set-height: to-rem(64px);
 
 .#{variables.$block-class}-filter-flyout__container {
   position: relative;
@@ -27,9 +28,11 @@ $action-set-height: rem(64px);
   top: $spacing-09;
   right: 0;
   display: none;
-  width: rem(642px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  width: to-rem(642px);
   background-color: $layer-02;
-  box-shadow: 0 1px rem(8px) 0 rgba(0, 0, 0, 0.25);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  box-shadow: 0 1px to-rem(8px) 0 rgba(0, 0, 0, 0.25);
 }
 
 .#{variables.$block-class}-filter-flyout--open {
@@ -37,12 +40,15 @@ $action-set-height: rem(64px);
 }
 
 .#{variables.$block-class}-filter-flyout--batch {
-  min-height: rem(346px);
-  grid-template-rows: 1fr rem(48px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  min-height: to-rem(346px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  grid-template-rows: 1fr to-rem(48px);
 }
 
 .#{variables.$block-class}-filter-flyout--instant {
-  min-height: rem(282px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  min-height: to-rem(282px);
   grid-template-rows: 1fr;
 }
 
@@ -52,11 +58,14 @@ $action-set-height: rem(64px);
 
 .#{variables.$block-class}-filter-flyout__inner-container::before {
   position: absolute;
-  top: rem(-7px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  top: to-rem(-7px);
   right: 1px;
   display: block;
-  width: rem(46px);
-  height: rem(15px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  width: to-rem(46px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  height: to-rem(15px);
   background-color: $layer-02;
   content: '';
 }
@@ -70,7 +79,8 @@ $action-set-height: rem(64px);
 
 .#{variables.$block-class}-filter-flyout__filters {
   display: grid;
-  gap: rem(16px) rem(32px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  gap: to-rem(16px) rem(32px);
   grid-template-columns: 1fr 1fr;
 }
 
@@ -85,7 +95,8 @@ $action-set-height: rem(64px);
 .#{variables.$block-class}-filter-flyout__trigger--open.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--icon-only {
   position: relative;
   background-color: $layer-02;
-  box-shadow: 0 1px rem(8px) 0 rgba(0, 0, 0, 0.25);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  box-shadow: 0 1px to-rem(8px) 0 rgba(0, 0, 0, 0.25);
 }
 
 .#{variables.$block-class}-filter-flyout

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

@@ -14,7 +14,8 @@
 
 .#{$block-class}-filter-panel__container {
   position: relative;
-  width: rem(320px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  width: to-rem(320px);
   height: clamp(var(--filter-panel-min-height), 100%, 100vh);
   border-top: 1px $layer-accent-01 solid;
   background-color: $layer-01;
@@ -29,7 +30,8 @@
   top: -1px; // stylelint-disable-line
   left: 0;
   display: block;
-  width: rem(47px); // size of filter panel button
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  width: to-rem(47px); // size of filter panel button
   height: 1px;
   background-color: $layer-01;
   content: '';
@@ -95,7 +97,8 @@
   position: sticky;
   z-index: 1; // To layer action set on top of content behind when sticky
   bottom: 0;
-  height: rem(64px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  height: to-rem(64px);
   margin-top: auto;
 }
 

package/scss/components/FilterSummary/_filter-summary.scss

@@ -13,7 +13,8 @@ $block-class: #{$pkg-prefix}--filter-summary;
 .#{$block-class} {
   display: flex;
   width: 100%;
-  height: rem(48px);
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  height: to-rem(48px);
   align-items: center;
   padding: $spacing-03;
   border-top: 1px solid $border-subtle-01;

package/scss/global/decorators/_side-panel-decorator.scss

@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 @mixin side-panel-decorator($prefix) {
   .#{$prefix}container {
     display: flex;

package/scss/global/js/utils/_story-as-full-page.scss

@@ -1,6 +0,0 @@
-.story-helper__full-page {
-  display: flex;
-  width: 100vw;
-  height: 100vh;
-  flex-direction: column;
-}