@carbon/ibm-products 2.22.0 → 2.23.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -76,7 +76,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10",
-    "@carbon/ibm-products-styles": "^2.21.0",
+    "@carbon/ibm-products-styles": "^2.22.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
@@ -98,5 +98,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "cc3061b3debb02bbbe32a8981d1ff39e9bca0f4a"
+  "gitHead": "53994e2a9217f53da099f5599541618fbfbc7790"
 }

package/scss/components/CreateSidePanel/_create-side-panel.scss

@@ -24,25 +24,6 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
   padding-right: calc(20% - #{$spacing-05});
 }
 
-@each $size, $value in side-panel-vars.$side-panel-sizes {
-  .#{$create-side-panel-block-class}.#{$side-panel-block-class}__container--#{$size}
-    .#{$side-panel-block-class}__title-text {
-    width: calc(#{$value} - #{$spacing-05});
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
-    margin-bottom: $spacing-02;
-  }
-  .#{$create-side-panel-block-class}.#{$side-panel-block-class}__container--#{$size}
-    .#{$side-panel-block-class}__subtitle-text {
-    width: calc(#{$value} - #{$spacing-05});
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
-    padding-bottom: $spacing-05;
-    border-bottom: 1px solid $layer-accent-01;
-    color: $text-secondary;
-  }
-}
-
 .#{c4p-settings.$carbon-prefix}--form.#{$create-side-panel-block-class}__form {
   padding-top: $spacing-05;
 }
@@ -70,24 +51,6 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
   display: none;
 }
 
-.#{$create-side-panel-block-class}__title {
-  @include type.type-style('heading-03');
-
-  margin-bottom: $spacing-02;
-}
-
-.#{$create-side-panel-block-class}__subtitle {
-  @include type.type-style('body-compact-01');
-
-  margin-bottom: $spacing-03;
+.#{$create-side-panel-block-class} .#{$side-panel-block-class}__subtitle-text {
   color: $text-secondary;
 }
-.#{$side-panel-block-class}
-  .#{$create-side-panel-block-class}__actions-container {
-  position: absolute;
-  z-index: 4;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  margin-bottom: 0;
-}

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

@@ -6,6 +6,7 @@
 //
 
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/react/scss/components/button/tokens' as *;
@@ -157,6 +158,16 @@
   background-color: $background;
 }
 
+.#{$block-class} th.#{$block-class}__with-slug {
+  @include ai-gradient('top', 100%);
+}
+
+.#{$block-class}
+  th.#{$block-class}__with-slug
+  .#{c4p-settings.$carbon-prefix}--slug {
+  margin-left: $spacing-03;
+}
+
 .#{$block-class}__grid-container {
   display: block;
   width: 100%;
@@ -243,6 +254,10 @@
     white-space: initial;
   }
 
+  .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--slug {
+    width: fit-content;
+  }
+
   .#{$block-class}__expanded-row {
     display: flex;
     overflow: hidden;

package/scss/components/EditSidePanel/_edit-side-panel.scss

@@ -45,22 +45,4 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
     .#{c4p-settings.$carbon-prefix}--btn.#{$side-panel-block-class}__close-button {
     display: none;
   }
-
-  .#{$side-panel-block-class} .#{$block-class}__actions-container {
-    position: absolute;
-    z-index: 4;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    margin-bottom: 0;
-  }
-
-  .#{$block-class}__actions-container {
-    position: absolute;
-    z-index: 4;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    margin-bottom: 0;
-  }
 }

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

@@ -8,6 +8,7 @@
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
 
 $block-class: #{$pkg-prefix}--filter-summary;
 
@@ -16,13 +17,33 @@ $block-class: #{$pkg-prefix}--filter-summary;
   width: 100%;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
   height: to-rem(48px);
-  align-items: center;
+  align-items: start;
   padding: $spacing-03;
   border-top: 1px solid $border-subtle-01;
   background: $layer-01;
+  &.#{$block-class}__expanded {
+    height: fit-content;
+  }
 }
 
 .#{$block-class}
   .#{$pkg-prefix}--tag-set.#{$pkg-prefix}--tag-set.#{$block-class}__clear-button-inline {
   width: auto;
 }
+
+.#{$block-class}__view-all--wrapper {
+  position: absolute;
+  top: $spacing-03;
+  right: 0;
+}
+
+.#{$block-class}__expanded
+  .#{$block-class}__clear-all-button.#{$carbon-prefix}--btn {
+  margin-right: $spacing-07;
+}
+
+.#{$block-class}__view-all--wrapper
+  .#{$block-class}__view-all--chevron-multiline {
+  transform: rotate(180deg);
+  transition: transform $duration-fast-01 motion(standard);
+}