@carbon/ibm-products 2.10.2 → 2.11.1

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

@@ -9,6 +9,7 @@
 // stylelint-disable carbon/layout-token-use
 
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/layout' as *;
@@ -16,7 +17,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 +29,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 +41,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 +59,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 +80,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 +96,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

@@ -8,13 +8,15 @@
 
 @use '../variables' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '../../../../global/styles/project-settings' as c4p-settings;
 
 .#{$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 +31,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 +98,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

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 @use '../../global/styles/project-settings' as *;
+@use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 
@@ -13,7 +14,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;
-}