@carbon/ibm-products 2.13.0 → 2.15.0

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -252,7 +252,7 @@ $row-heights: (
 // containers, using default border caused grid area width to be changed and
 // outlines were not present be
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active::before {
+  .#{variables.$block-class}__grid-container-active::before {
   position: absolute;
   z-index: 2;
   bottom: 0;
@@ -266,7 +266,7 @@ $row-heights: (
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active::after {
+  .#{variables.$block-class}__grid-container-active::after {
   position: absolute;
   z-index: 2;
   right: 0;
@@ -280,7 +280,7 @@ $row-heights: (
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active
+  .#{variables.$block-class}__grid-container-active
   .#{c4p-settings.$carbon-prefix}--data-table-content::before {
   position: absolute;
   z-index: 2;
@@ -293,16 +293,16 @@ $row-heights: (
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::before,
+  .#{variables.$block-class}__grid-container-active.#{variables.$block-class}__grid-container-active--without-toolbar::before,
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active.#{variables.$block-class}__grid-container-grid-active--without-toolbar::after {
+  .#{variables.$block-class}__grid-container-active.#{variables.$block-class}__grid-container-active--without-toolbar::after {
   height: calc(
     100% - 2px - var(--#{variables.$block-class}--grid-header-height)
   );
 }
 
 .#{variables.$block-class}
-  .#{variables.$block-class}__grid-container-grid-active
+  .#{variables.$block-class}__grid-container-active
   .#{variables.$block-class}__table-container {
   outline: 2px solid $link-inverse;
   outline-offset: -2px;

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

@@ -44,7 +44,43 @@
   justify-content: center;
 }
 
+// Top align cell content for xl row size
 .#{variables.$block-class}
-  .#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  td,
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  td {
+  align-items: flex-start;
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-05;
+
+  &.#{variables.$block-class}__actions-column-cell {
+    padding-left: $spacing-03;
+  }
+}
+
+// Top align header content for xl row size
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  th,
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-top
+  th {
+  .#{c4p-settings.$carbon-prefix}--table-header-label {
+    align-items: flex-start;
+  }
+}
+
+// Top align checkbox row header for xl row size
+.#{variables.$block-class}
+  table.#{c4p-settings.$carbon-prefix}--data-table--xl.#{variables.$block-class}__vertical-align-center
+  .#{variables.$block-class}__checkbox-cell
+  th.cds--table-column-checkbox {
+  align-items: flex-start;
+  padding-top: $spacing-04;
+}
+
+.#{variables.$block-class}__row-size__row-settings-trigger--open.#{c4p-settings.$carbon-prefix}--btn--ghost {
   background-color: $layer-02;
 }

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

@@ -140,11 +140,19 @@ $block-class-modal: #{$_block-class}-modal;
   }
 
   .#{$block-class-overflow}__tag-list {
+    display: flex;
+    flex-direction: column;
     margin-bottom: $spacing-03;
   }
 
-  .#{$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: $background-inverse-hover;
+  }
+
+  .#{$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 type.type-style('body-compact-01');
 
     display: block;