@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -29,10 +29,6 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
 /* stylelint-disable max-nesting-depth */
 .#{$block-class}__selections {
-  &.#{$carbon-prefix}--structured-list {
-    margin-bottom: 0;
-  }
-
   &-wrapper {
     display: block;
   }
@@ -64,42 +60,33 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     justify-content: center;
   }
 
-  &-cell:hover .#{$block-class}__selections-hidden-hover {
-    visibility: visible;
+  &-dropdown .cds--dropdown {
+    background: transparent;
   }
 
-  &-hidden-hover {
-    visibility: hidden;
+  &-row--selected {
+    background-color: $layer-selected-01;
   }
 
-  &-row-selected#{$carbon-prefix}--structured-list-row {
-    border-bottom: 1px solid $layer-selected-01;
-    background-color: $layer-selected-01;
+  &-row--active {
+    background-color: $layer-active-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;
   }
@@ -112,14 +99,16 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     border-left: 0.125rem solid transparent;
   }
 
-  &-row-meta-selected {
+  &-row-meta--selected {
     border-left: 0.125rem solid $interactive;
     background-color: $layer-hover-01;
   }
 }
 
 .#{$block-class} .#{$block-class}__selections-row:hover {
-  .#{$block-class}__selections-radio {
+  background: $layer-hover-01;
+
+  .#{$block-class}__selections-cell-title {
     color: $interactive;
   }
 
@@ -134,13 +123,6 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 }
 
-.#{$block-class}
-  #{$carbon-prefix}--structured-list--selection
-  .#{$block-class}__selections-row-selected#{$carbon-prefix}--structured-list-row:hover:not(#{$carbon-prefix}--structured-list-row--header-row):not(#{$carbon-prefix}--structured-list-row--selected) {
-  border-bottom: 1px solid $layer-accent-hover-01;
-  background-color: $layer-selected-hover-01;
-}
-
 .#{$block-class}__sub-header {
   display: flex;
   align-items: flex-end;
@@ -151,16 +133,6 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 }
 
-.#{$block-class} #{$carbon-prefix}--structured-list-row {
-  border-bottom: 0;
-}
-
-.#{$block-class}
-  #{$carbon-prefix}--structured-list--selection
-  #{$carbon-prefix}--structured-list-row:hover:not(#{$carbon-prefix}--structured-list-row--header-row):not(#{$carbon-prefix}--structured-list-row--selected) {
-  border-bottom: 0;
-}
-
 // sidebar
 
 .#{$block-class}__sidebar-header {
@@ -224,11 +196,11 @@ $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;
   }
 
-  .#{$block-class}__selections-row#{$carbon-prefix}--structured-list-row {
+  .#{$block-class}__selections-row {
     border-left: 0;
   }
 
@@ -237,11 +209,11 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 
   .#{$block-class}__selections-cell-wrapper {
-    height: auto;
+    height: 2rem;
     padding: 0 $spacing-03;
   }
 
-  .#{$block-class}__tag-container {
+  .#{$block-class}__tags {
     padding: 0 $spacing-03;
     margin-bottom: 0;
   }
@@ -249,10 +221,6 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   .#{$block-class}__selections-wrapper-multi {
     padding: 0;
   }
-
-  .#{$block-class}__selections#{$carbon-prefix}--structured-list {
-    border-top: 0;
-  }
 }
 
 .#{$block-class}__selections-wrapper-multi .#{$block-class}__selections-cell {
@@ -288,7 +256,11 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 }
 
-.#{$block-class}__tag-container {
+.#{$block-class}-sort_overflow {
+  z-index: 9999;
+}
+
+.#{$block-class}__tags {
   display: flex;
   align-items: center;
   margin-top: $spacing-05;
@@ -301,7 +273,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
 .#{$block-class}__global-filter {
   position: absolute;
-  z-index: 6000;
+  z-index: 999999;
   right: 0;
   width: 100%;
   max-width: 40rem;
@@ -379,13 +351,24 @@ button.#{$block-class}__global-filter-toggle {
 
 // overrides
 
-.#{$block-class}__tag-container .#{$carbon-prefix}--tag {
+.#{$block-class}__selections .#{$carbon-prefix}--list-box__menu {
+  left: auto;
+}
+
+.#{$block-class}__tags .#{$carbon-prefix}--tag {
   margin: 0;
 }
 
 // the influencer sidebar needs to be even with the buttons
 .#{$block-class}.#{$tearsheet-class} .#{$tearsheet-class}__influencer {
   flex-basis: 22.5rem;
+  background: $layer-01;
+}
+
+.#{$block-class}.#{$tearsheet-class}.#{$tearsheet-class}--wide
+  .#{$tearsheet-class}__content
+  .cds--dropdown {
+  background-color: transparent;
 }
 
 .#{$block-class}.#{$tearsheet-class} .#{$tearsheet-class}__header-description {
@@ -414,13 +397,6 @@ button.#{$block-class}__global-filter-toggle {
   padding-right: 0;
 }
 
-// TODO check if we can remove – C10/C11 conflict
-.#{$block-class} .#{$carbon-prefix}--structured-list-td {
-  height: 4rem;
-  padding: $spacing-05;
-  vertical-align: middle;
-}
-
 .#{$block-class} .#{$carbon-prefix}--radio-button__appearance {
   margin: 0 $spacing-05 0 0;
 }
@@ -445,10 +421,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;
@@ -465,26 +437,26 @@ button.#{$block-class}__global-filter-toggle {
 }
 
 .#{$block-class}
-  #{$carbon-prefix}--accordion--start
-  #{$carbon-prefix}--accordion__arrow {
+  .#{$carbon-prefix}--accordion--start
+  .#{$carbon-prefix}--accordion__arrow {
   margin: 0 0 0 $spacing-05;
 }
 
 .#{$block-class}
-  #{$carbon-prefix}--accordion--start
-  #{$carbon-prefix}--accordion__title {
+  .#{$carbon-prefix}--accordion--start
+  .#{$carbon-prefix}--accordion__title {
   margin: 0 $spacing-05 0 $spacing-03;
 }
 
 .#{$block-class}
-  #{$carbon-prefix}--accordion__item--active
-  #{$carbon-prefix}--accordion__content {
+  .#{$carbon-prefix}--accordion__item--active
+  .#{$carbon-prefix}--accordion__content {
   padding-top: 0;
   padding-bottom: 0;
   margin-top: $spacing-03;
 }
 
-.#{$carbon-prefix}--tooltip,
-.#{$carbon-prefix}--overflow-menu-options {
+.#{$block-class} + div .#{$carbon-prefix}--tooltip,
+.#{$block-class} + div .#{$carbon-prefix}--overflow-menu-options {
   z-index: 9000;
 }

package/scss/components/AddSelect/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/AddSelect/_storybook-styles.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// 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.
@@ -47,6 +47,15 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
     display: none;
   }
 
+  .#{$_block-class}__back__button.#{c4p-settings.$carbon-prefix}--btn {
+    min-height: revert;
+    padding: 0;
+  }
+
+  .#{$_block-class}__back__button.#{c4p-settings.$carbon-prefix}--btn--ghost:hover {
+    background-color: inherit;
+  }
+
   @include breakpoint-down(md) {
     .#{c4p-settings.$carbon-prefix}--breadcrumb-item {
       display: none;

package/scss/components/Card/_card.scss

@@ -15,18 +15,18 @@
 $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class} {
-  background: $layer-01;
+  background-color: $layer-01;
   color: $text-primary;
 }
 
 .#{$block-class}__clickable {
   cursor: pointer;
   // stylelint-disable-next-line carbon/motion-easing-use
-  transition: background $duration-fast-02;
+  transition: background-color $duration-fast-02;
 }
 
 .#{$block-class}__clickable:hover {
-  background: $background-hover;
+  background-color: $layer-hover-01;
 }
 
 .#{$block-class}__media-left {
@@ -82,7 +82,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 }
 
 .#{$block-class}__body {
-  @include type-style('body-short-01');
+  @include type-style('body-compact-01');
 
   padding: $spacing-05;
   padding-top: 0;
@@ -96,15 +96,22 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 .#{$block-class}__actions {
   display: flex;
   flex-direction: row;
-  margin: $spacing-05;
-  margin-top: 0;
 }
 
 .#{$block-class}__icon {
+  padding: $spacing-03;
   color: inherit;
   cursor: pointer;
 }
 
+.#{$block-class}__icon:hover {
+  background-color: $layer-hover-01;
+}
+
+#{$block-class}__icon:active {
+  color: $link-primary-hover;
+}
+
 .#{$block-class}__link {
   color: inherit;
   text-decoration: inherit;

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/DataSpreadsheet/_data-spreadsheet.scss

@@ -274,7 +274,7 @@ $header-cell-background: $layer-accent-01;
   .#{$block-class}__th--selected-header,
   .#{$block-class}__td-th--selected-header.#{$block-class}__td {
     background-color: $background-inverse;
-    color: $text-on-color;
+    color: $text-inverse;
 
     /* stylelint-disable-next-line max-nesting-depth */
     &:focus,

package/scss/components/Datagrid/_datagrid.scss

@@ -48,7 +48,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
 
 .#{$block-class}__datagridWrap-simple {
   display: flex;
-  overflow: hidden;
   width: 100%;
   height: 100%;
   flex-direction: column;

package/scss/components/Datagrid/_storybook-styles.scss

@@ -93,3 +93,24 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.#{$block-class}-story__hidden-column-id-snippet {
+  padding-top: $spacing-07;
+}
+
+.#{$block-class}__mobile-toolbar-modal
+  .#{c4p-settings.$carbon-prefix}--dropdown__wrapper {
+  margin-bottom: $spacing-07;
+}
+
+.storybook-#{$block-class}__validation-code-snippet {
+  @include type.font-family($name: mono);
+  @include type.type-style('code-01');
+
+  display: inline-block;
+  padding: 0 $spacing-03;
+  border: 2px solid transparent;
+  border-radius: $spacing-02;
+  margin-right: $spacing-03;
+  background-color: $field-01;
+}