@carbon/ibm-products 2.0.0-rc.24 → 2.0.0-rc.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.0.0-rc.24",
+  "version": "2.0.0-rc.26",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "00afe9a823d141de55b2f2590429a1bcf4a637d8"
+  "gitHead": "021c153ea593848f7c1a2049c95af0b880603c9e"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -69,29 +69,21 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     background-color: $layer-selected-01;
   }
 
-  &-checkbox {
+  &-form-control {
     display: flex;
     align-items: center;
   }
 
-  &-checkbox-label-wrapper {
+  &-form-control-label-wrapper {
     display: flex;
     margin-left: $spacing-05;
   }
 
-  &-checkbox-label-text {
+  &-form-control-label-text {
     display: flex;
     flex-direction: column;
   }
 
-  &-checkbox-wrapper.#{$carbon-prefix}--form-item {
-    flex: 0;
-  }
-
-  &-checkbox-wrapper .#{$carbon-prefix}--checkbox-label-text {
-    display: none;
-  }
-
   &-cell-avatar {
     margin-right: $spacing-03;
   }
@@ -209,7 +201,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   flex-grow: 1;
   overflow-x: auto;
 
-  .#{$block-class}__selections-checkbox-label-wrapper {
+  .#{$block-class}__selections-form-control-label-wrapper {
     margin-left: $spacing-03;
   }
 
@@ -434,10 +426,6 @@ button.#{$block-class}__global-filter-toggle {
   }
 }
 
-.#{$block-class} .#{$carbon-prefix}--checkbox-label-text {
-  padding-left: $spacing-03;
-}
-
 .#{$block-class}__multi .#{$pkg-prefix}--empty-state {
   max-width: 16rem;
   margin-top: $spacing-09;

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 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.
@@ -43,16 +43,12 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 .#{$block-class} .#{$block-class}__step-subtitle {
   @include type.type-style('productive-heading-01');
 
-  max-width: 50%;
-  padding-left: $spacing-08;
   margin-bottom: $spacing-03;
 }
 
 .#{$block-class} .#{$block-class}__step-description {
   @include type.type-style('body-long-01');
 
-  max-width: 50%;
-  padding-left: $spacing-08;
   margin-bottom: $spacing-06;
 }
 
@@ -106,9 +102,10 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 .#{$block-class} .#{$block-class}__step {
   position: relative;
   padding-bottom: $spacing-07;
-  .#{c4p-settings.$carbon-prefix}--css-grid {
-    margin-left: 0;
-  }
+}
+
+.#{$block-class}__step .#{c4p-settings.$carbon-prefix}--css-grid {
+  margin-left: 0;
 }
 
 .#{$block-class} .#{c4p-settings.$carbon-prefix}--side-nav--ux {
@@ -144,8 +141,6 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
 .#{$block-class} .#{$block-class}__step-title {
   @include type.type-style('productive-heading-04');
 
-  max-width: 50%;
-  padding-left: $spacing-08;
   margin-bottom: $spacing-05;
 }
 

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 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.
@@ -41,6 +41,11 @@ $tearsheet-divider-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__section
 $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--fieldset;
 
 .#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
+  padding-right: $spacing-03;
+  padding-left: $spacing-03;
+
+  margin-left: 0;
+
   // stylelint-disable-next-line carbon/motion-easing-use
   animation: step-content-entrance $duration-slow-01;
   animation-fill-mode: forwards;
@@ -53,7 +58,6 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
 }
 
 .#{$step-block-class} .#{c4p-settings.$carbon-prefix}--css-grid {
-  padding-left: 0;
   margin-left: 0;
 }
 
@@ -78,7 +82,8 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
 
 .#{$create-tearsheet-block-class} .#{$create-tearsheet-block-class}__content {
   height: 100%;
-  padding: $spacing-06;
+  padding-top: $spacing-06;
+  padding-bottom: $spacing-06;
   overflow-x: hidden;
 }
 

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

@@ -628,3 +628,7 @@
     padding: 0 $spacing-03;
   }
 }
+
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap {
+  background-color: $layer-accent;
+}

package/scss/components/Datagrid/styles/_useSortableColumns.scss

@@ -24,7 +24,9 @@
     .#{c4p-settings.$carbon-prefix}--table-sort:focus,
   .#{c4p-settings.$carbon-prefix}--table-header-label
     .#{c4p-settings.$carbon-prefix}--table-sort:active,
-  .#{c4p-settings.$carbon-prefix}--table-header-label button:focus svg {
+  .#{c4p-settings.$carbon-prefix}--table-header-label
+    button:focus
+    .#{$block-class}__sortable-icon {
     /* stylelint-disable-next-line declaration-no-important */
     background: none !important;
     /* stylelint-disable-next-line declaration-no-important */
@@ -54,7 +56,7 @@
   }
   .#{c4p-settings.$carbon-prefix}--table-header-label
     .#{c4p-settings.$carbon-prefix}--table-sort
-    svg {
+    .#{$block-class}__sortable-icon {
     fill: $text-primary;
     opacity: 0;
     visibility: hidden;
@@ -69,7 +71,8 @@
 .#{$block-class}__sortableColumn:hover,
 .#{$block-class}__sortableColumn:focus-within,
 .#{$block-class}__sortableColumn.#{$block-class}__isSorted {
-  .#{c4p-settings.$carbon-prefix}--table-header-label svg {
+  .#{c4p-settings.$carbon-prefix}--table-header-label
+    .#{$block-class}__sortable-icon {
     opacity: 1;
     visibility: visible;
   }

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

@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/type/scss/font-family';
 @use '@carbon/layout' as *;
+@use '@carbon/layout/scss/convert';
 
 @use '../../../../global/styles/project-settings' as c4p-settings;
 @use '../variables';
@@ -28,10 +29,18 @@
   border-bottom: 1px solid $background-active;
 }
 
-.#{variables.$block-class}__customize-columns-checkbox-wrapper {
+.#{c4p-settings.$carbon-prefix}--form-item.#{c4p-settings.$carbon-prefix}--checkbox-wrapper.#{variables.$block-class}__customize-columns-checkbox {
   display: flex;
+  flex: initial;
+  align-items: center;
   justify-content: center;
-  padding-left: $spacing-02;
+}
+
+.#{variables.$block-class}__customize-columns-column-list
+  .#{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);
 }
 
 .#{variables.$block-class}__customize-columns-column-list
@@ -44,6 +53,10 @@
   overflow: auto;
 }
 
+.#{variables.$block-class}__customize-columns-select-all {
+  align-items: center;
+}
+
 .#{variables.$block-class}__customize-columns-select-all,
 .#{variables.$block-class}__customize-columns-select-all--selected {
   position: sticky;

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

@@ -11,17 +11,22 @@
 @use '../../../../global/styles/project-settings' as c4p-settings;
 @use '../variables';
 
-.#{variables.$block-class}__row-size-dropdown {
-  padding: $spacing-05;
+.#{variables.$block-class}
+  .#{variables.$block-class}__row-size-toggle-tip-content {
   background-color: $layer-02;
-
   box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
 }
 
-.#{c4p-settings.$carbon-prefix}--btn--ghost.#{variables.$block-class}__row-size-button--open {
-  background-color: $layer-02;
+.#{variables.$block-class}
+  .#{variables.$block-class}__row-size-radio-button
+  .#{c4p-settings.$carbon-prefix}--radio-button__label {
+  color: $text-primary;
+}
 
-  box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
+.#{variables.$block-class}
+  .#{variables.$block-class}__row-size-toggle-tip
+  .#{c4p-settings.$carbon-prefix}--popover-caret {
+  background-color: $layer-02;
 }
 
 .#{variables.$block-class}
@@ -31,3 +36,10 @@
   /* stylelint-disable-next-line carbon/layout-token-use */
   left: -4px;
 }
+
+.#{variables.$block-class}__row-size-toggle-tip-button.#{c4p-settings.$carbon-prefix}--toggletip-button {
+  display: flex;
+  width: $spacing-09;
+  height: $spacing-09;
+  justify-content: center;
+}

package/scss/components/EmptyStates/_empty-state.scss

@@ -18,8 +18,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--empty-state;
 
   .#{$block-class}__header {
     @include type.type-style('heading-03');
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-bottom: calc($spacing-01 + $spacing-02);
+
+    padding-bottom: $spacing-03;
     margin: 0;
   }
 

package/scss/components/InlineEditV1/_inline-edit-v1.scss

@@ -32,17 +32,6 @@
   }
 }
 
-@mixin input-button-defaults($block-class) {
-  display: inline-flex;
-  height: 100%;
-  min-height: initial;
-  max-height: var(--#{$block-class}--size);
-  align-items: center;
-  justify-content: center;
-
-  border: 2px solid transparent;
-}
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
 
@@ -58,7 +47,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
 
   &:hover {
     --#{$block-class}--background-color: #{$background-hover};
-    // background-color: $background-color;
   }
 
   position: relative;
@@ -112,6 +100,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
     margin-right: var(--#{$block-class}--toolbar-width);
     // room for toolbar
     margin-left: $spacing-05;
+    color: $text-primary;
     font-family: inherit;
     // stylelint-disable-next-line carbon/type-token-use
     line-height: var(--#{$block-class}--size);
@@ -203,8 +192,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
     --#{$block-class}--toolbar-width: calc(3 * var(--#{$block-class}--size));
   }
 
-  .#{$block-class}__toolbar--animation {
-    // width: ;
+  .#{$block-class}__toolbar {
+    display: flex;
+    align-items: center;
   }
 
   &.#{$block-class}--editing .#{$block-class}__toolbar::after {
@@ -227,38 +217,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
 
   &.#{$block-class}.#{$block-class} .#{$block-class}__save,
   &.#{$block-class}.#{$block-class} .#{$block-class}__cancel {
-    @include input-button-defaults($block-class);
-
-    // input does not have focus
-    &:hover {
-      outline: initial;
-    }
-
-    &:focus:active,
-    &:focus {
-      // border focus input does NOT have focus
-      border-color: $focus;
-      box-shadow: initial;
-      outline: initial;
-    }
-
-    &:focus:active:hover {
-      box-shadow: inset 0 0 0 1px $field-01;
-    }
-
-    &::before {
-      background-color: transparent;
-    }
-
-    &[disabled] {
-      border-color: transparent;
-    }
+    display: inline-flex;
   }
 
   &.#{$block-class}--editing
     .#{$block-class}__toolbar--animation
     .#{$block-class}__save {
-    overflow: visible;
     width: var(--#{$block-class}--edit-size);
     transition: all $duration-moderate-02 motion(standard, productive);
     transition-property: margin, padding;
@@ -267,56 +231,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
   &.#{$block-class}--editing
     .#{$block-class}__toolbar--animation:not(.#{$block-class}__toolbar--saveable)
     .#{$block-class}__save {
-    overflow: hidden;
     width: 0;
     padding: 0;
     border-right: 0;
     border-left: 0;
   }
 
-  &.#{$block-class}--editing
-    .#{$block-class}__toolbar--animation
-    .#{$block-class}__save {
-    margin-right: 0;
-    transition: all $duration-moderate-02 motion(standard, productive);
-    transition-property: margin, padding;
-
-    svg {
-      transition: width $duration-moderate-02 motion(standard, productive);
-      @media (prefers-reduced-motion: reduce) {
-        transition: none;
-      }
-    }
-  }
-
-  &.#{$block-class}--editing
-    .#{$block-class}__toolbar--animation:not(.#{$block-class}__toolbar--saveable)
-    .#{$block-class}__save {
-    padding-right: 0;
-    padding-left: 0;
-    border-right: 0;
-    border-left: 0;
-    margin-right: calc(-1 * var(--#{$block-class}--size));
-
-    svg {
-      overflow: hidden;
-      width: 0;
-    }
-  }
-
-  &.#{$block-class}.#{$block-class} .#{$block-class}__edit {
-    @include input-button-defaults($block-class);
-    // pointer-events: none;
-    &:hover,
-    &:active,
-    &:focus {
-      border-color: transparent;
-      background-color: transparent;
-      box-shadow: initial;
-      outline: initial;
-    }
-  }
-
   @media (hover: hover) {
     // if hover is the primary input mechanism hide edit button
     .#{$block-class}__edit {
@@ -333,10 +253,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
     opacity: 1;
   }
 
-  .#{$block-class}__validation-icon {
-    @include input-button-defaults($block-class);
-  }
-
   &.#{$block-class}--invalid .#{$block-class}__validation-icon {
     color: $support-error;
   }

package/scss/components/InlineEditV2/_inline-edit-v2.scss

@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '../../global/styles/project-settings' as *;
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/motion' as *;
 
 $block-class: #{$pkg-prefix}--inline-edit-v2;
 $carbon-input: #{$carbon-prefix}--text-input;
@@ -37,7 +38,7 @@ $carbon-input: #{$carbon-prefix}--text-input;
   visibility: hidden;
 }
 
-.#{$block-class}-focused {
+.#{$block-class}--focused {
   background: $field-01;
   outline: 2px solid $focus;
 }
@@ -51,8 +52,7 @@ $carbon-input: #{$carbon-prefix}--text-input;
 }
 
 .#{$block-class}__warning-icon {
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  margin-right: 0.4375rem;
+  margin: $spacing-03;
   color: $support-error;
 }
 
@@ -81,3 +81,42 @@ $carbon-input: #{$carbon-prefix}--text-input;
 .#{$block-class}__text-input.#{$carbon-input}:active {
   outline: none;
 }
+
+.#{$block-class}__toolbar {
+  --toolbar-width: #{$spacing-07};
+  --toolbar-width-focussed: #{$spacing-10};
+
+  // animation div
+  display: inline-flex;
+  overflow: hidden;
+  width: var(--toolbar-width);
+}
+
+.#{$block-class}--invalid .#{$block-class}__toolbar {
+  --toolbar-width: #{$spacing-07};
+  --toolbar-width-focussed: #{$spacing-12};
+}
+
+@keyframes slide-in {
+  0% {
+    overflow: hidden;
+    width: var(--toolbar-width);
+  }
+
+  99% {
+    overflow: hidden;
+    width: var(--toolbar-width-focussed);
+  }
+
+  100% {
+    overflow: visible;
+    width: var(--toolbar-width-focussed);
+  }
+}
+
+.#{$block-class}--focused .#{$block-class}__toolbar {
+  overflow: initial;
+  width: var(--toolbar-width-focussed);
+
+  animation: slide-in $duration-moderate-01 motion(entrance, productive);
+}

package/scss/components/SidePanel/_side-panel.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// Copyright IBM Corp. 2020, 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.
@@ -314,19 +314,10 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     margin-bottom: $spacing-03;
     background-color: $layer-01;
     transition: transform $duration-moderate-01 motion(standard);
-    .#{$block-class}__action-toolbar-button {
-      min-width: 2rem;
-      &.#{$block-class}__action-toolbar-icon-only-button {
-        padding: 0;
-        color: $text-primary;
-      }
-      &.#{$block-class}__action-toolbar-icon-only-button svg {
-        margin-left: $spacing-03;
-      }
-      &.#{$block-class}__action-toolbar-leading-button {
-        margin-right: $spacing-03;
-      }
-    }
+  }
+
+  .#{$block-class}__action-toolbar-leading-button {
+    margin-right: $spacing-03;
   }
 
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__navigation-back-button {
@@ -341,6 +332,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     padding: 0;
     color: $text-primary;
   }
+
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button {
     position: absolute;
     z-index: 5;
@@ -349,8 +341,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: $layer-01;
   }
+
   .#{c4p-settings.$carbon-prefix}--btn.#{$block-class}__close-button
     .#{c4p-settings.$carbon-prefix}--btn__icon {
     margin: 0;