@carbon/ibm-products 2.0.0-rc.2 → 2.0.0-rc.20

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.
@@ -30,7 +30,6 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 /* stylelint-disable max-nesting-depth */
 .#{$block-class}__selections {
   &.#{$carbon-prefix}--structured-list {
-    border-top: 1px solid $layer-accent-01;
     margin-bottom: 0;
   }
 
@@ -40,8 +39,11 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
   &-cell-wrapper {
     display: flex;
+    height: 3rem;
     align-items: center;
     justify-content: space-between;
+    padding: 0 $spacing-05;
+    border-bottom: 1px solid $layer-accent-01;
   }
 
   &-cell-title {
@@ -56,7 +58,15 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     color: $text-secondary;
   }
 
-  &-cell:hover .#{$block-class}__selections-hidden-hover {
+  &-cell {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &-cell:hover .#{$block-class}__selections-hidden-hover,
+  .#{$carbon-prefix}--structured-list-row:focus-within
+    .#{$block-class}__selections-hidden-hover {
     visibility: visible;
   }
 
@@ -64,12 +74,9 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     visibility: hidden;
   }
 
-  &-row-selected {
-    background: #e5e5e5;
-  }
-
-  &-row-selected .#{$block-class}__selections-hidden-hover {
-    visibility: visible;
+  &-row--selected.#{$carbon-prefix}--structured-list-row {
+    border-bottom: 1px solid $layer-selected-01;
+    background-color: $layer-selected-01;
   }
 
   &-checkbox {
@@ -79,7 +86,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
   &-checkbox-label-wrapper {
     display: flex;
-    margin-left: $spacing-03;
+    margin-left: $spacing-05;
   }
 
   &-checkbox-label-text {
@@ -102,6 +109,15 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   &-cell-icon {
     margin-right: $spacing-03;
   }
+
+  &-row {
+    border-left: 0.125rem solid transparent;
+  }
+
+  &-row-meta--selected {
+    border-left: 0.125rem solid $interactive;
+    background-color: $layer-hover-01;
+  }
 }
 
 .#{$block-class} .#{$block-class}__selections-row:hover {
@@ -124,13 +140,27 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
+
+  &-multi {
+    padding: 0 $spacing-05;
+  }
+}
+
+.#{$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 {
   display: flex;
-  padding: $spacing-06 $spacing-05 $spacing-03 $spacing-05;
+  padding: $spacing-07 $spacing-05 $spacing-03 $spacing-05;
   border-bottom: 1px solid $layer-accent-01;
 
   .#{$block-class}__sidebar-title {
@@ -155,7 +185,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 }
 
 .#{$block-class}__sidebar-body {
-  padding: $spacing-05;
+  padding: 0 $spacing-05;
 }
 
 .#{$block-class} .#{$block-class}__sidebar-item-header {
@@ -186,22 +216,52 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 .#{$block-class}__columns {
   display: flex;
   flex-direction: row;
+  flex-grow: 1;
   overflow-x: auto;
+
+  .#{$block-class}__selections-checkbox-label-wrapper {
+    margin-left: $spacing-03;
+  }
+
+  .#{$block-class}__selections-row.#{$carbon-prefix}--structured-list-row {
+    border-left: 0;
+  }
+
+  .#{$block-class}__selections .#{$block-class}__selections-cell {
+    padding: 0;
+  }
+
+  .#{$block-class}__selections-cell-wrapper {
+    height: auto;
+    padding: 0 $spacing-03;
+  }
+
+  .#{$block-class}__tags {
+    padding: 0 $spacing-03;
+    margin-bottom: 0;
+  }
+
+  .#{$block-class}__selections-wrapper-multi {
+    padding: 0;
+  }
+
+  .#{$block-class}__selections.#{$carbon-prefix}--structured-list {
+    border-top: 0;
+  }
 }
 
-// table override
-.#{$block-class}
-  .#{$block-class}__columns
-  .#{$carbon-prefix}--structured-list-td {
-  height: 0;
-  // stylelint-disable-next-line
-  padding: 0 !important;
+.#{$block-class}__selections-wrapper-multi .#{$block-class}__selections-cell {
+  padding: 0 $spacing-05;
+}
+
+.#{$block-class}__selections-row:first-child
+  .#{$block-class}__selections-cell-wrapper {
+  border-top: 1px solid $border-subtle-01;
 }
 
 .#{$block-class}__column {
   overflow: auto;
-  max-width: 15rem;
-  flex: 1 0 15rem;
+  flex: 0 0 20rem;
   padding: $spacing-05;
   border-top: 1px solid $border-subtle-01;
   border-right: 1px solid $border-subtle-01;
@@ -223,7 +283,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   }
 }
 
-.#{$block-class}__tag-container {
+.#{$block-class}__tags {
   display: flex;
   align-items: center;
   margin-top: $spacing-05;
@@ -308,27 +368,23 @@ button.#{$block-class}__global-filter-toggle {
   @include type.type-style('productive-heading-01');
 }
 
-.#{$block-class} .#{$carbon-prefix}--structured-list-td {
-  height: $spacing-09;
-  padding-top: 0;
-  padding-bottom: 0;
-  vertical-align: middle;
-}
-
 .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-body {
   @include type.type-style('body-short-01');
 }
 
 // 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 {
-  max-width: 29rem;
-  flex: 0 0 50%;
+  flex-basis: 22.5rem;
 }
 
 .#{$block-class}.#{$tearsheet-class} .#{$tearsheet-class}__header-description {
@@ -340,6 +396,12 @@ button.#{$block-class}__global-filter-toggle {
   flex-direction: column;
 }
 
+.#{$block-class}.#{$block-class}__multi
+  .#{$pkg-prefix}--action-set.#{$carbon-prefix}--btn-set.#{$pkg-prefix}--action-set--max
+  .#{$pkg-prefix}--action-set__action-button {
+  max-width: 11.25rem;
+}
+
 .#{$block-class} .#{$block-class}__items-label {
   @include type.type-style('productive-heading-01');
 }
@@ -351,6 +413,7 @@ 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;
@@ -385,7 +448,42 @@ button.#{$block-class}__global-filter-toggle {
   padding-left: $spacing-03;
 }
 
-.#{$carbon-prefix}--tooltip,
-.#{$carbon-prefix}--overflow-menu-options {
+.#{$block-class}__multi .#{$pkg-prefix}--empty-state {
+  max-width: 16rem;
+  margin-top: $spacing-09;
+}
+
+.#{$block-class} .#{$carbon-prefix}--accordion__arrow {
+  transform: rotate(0deg);
+}
+
+.#{$block-class}
+  .#{$carbon-prefix}--accordion__item--active
+  .#{$carbon-prefix}--accordion__arrow {
+  transform: rotate(90deg);
+}
+
+.#{$block-class}
+  .#{$carbon-prefix}--accordion--start
+  .#{$carbon-prefix}--accordion__arrow {
+  margin: 0 0 0 $spacing-05;
+}
+
+.#{$block-class}
+  .#{$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 {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: $spacing-03;
+}
+
+.#{$block-class} .#{$carbon-prefix}--tooltip,
+.#{$block-class} .#{$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/Card/_card.scss

@@ -21,6 +21,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
 
 .#{$block-class}__clickable {
   cursor: pointer;
+  // stylelint-disable-next-line carbon/motion-easing-use
   transition: background $duration-fast-02;
 }
 

package/scss/components/Cascade/_cascade.scss

@@ -31,7 +31,7 @@ $fadeEnd: translateY(0);
 .#{$block-class}__col {
   /* stylelint-disable-next-line max-nesting-depth */
   @media (prefers-reduced-motion: no-preference) {
-    /* stylelint-disable-next-line carbon/motion-duration-use -- Carbon animation duration defined above in $animationProps */
+    /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- Carbon animation duration defined above in $animationProps */
     animation: $animationProps fade;
     animation-fill-mode: forwards;
     opacity: 0;

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

@@ -41,6 +41,7 @@ $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 {
+  // stylelint-disable-next-line carbon/motion-easing-use
   animation: step-content-entrance $duration-slow-01;
   animation-fill-mode: forwards;
   animation-timing-function: $standard-easing;
@@ -61,6 +62,7 @@ $tearsheet-fieldset-class: #{c4p-settings.$pkg-prefix}--tearsheet-create__step--
 }
 
 .#{$create-tearsheet-block-class} .#{$step-block-class}__step--visible-step {
+  // stylelint-disable-next-line carbon/motion-easing-use
   animation: step-content-entrance $duration-slow-01;
   animation-fill-mode: forwards;
   animation-timing-function: $standard-easing;

package/scss/components/Datagrid/_datagrid.scss

@@ -12,6 +12,8 @@
 
 @use './styles/index';
 
+/* stylelint-disable max-nesting-depth */
+
 // Other Carbon settings.
 // TODO: @use '@carbon/react/scss/grid'; if needed
 
@@ -30,6 +32,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   :global(.#{c4p-settings.$carbon-prefix}--checkbox) {
     display: none;
   }
+
+  .bx--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
+    left: $spacing-01;
+    width: 112px;
+  }
 }
 
 .#{$block-class}__datagridWrap
@@ -41,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

@@ -23,11 +23,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
 .sb-show-main.sb-main-centered #root {
   width: 100%;
   height: 100vh;
-  padding: 0;
-}
-
-.preview-position-fix {
-  height: 100%;
+  padding: $spacing-07;
 }
 
 .carbon-nested-table {
@@ -90,3 +86,31 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   .#{c4p-settings.$pkg-prefix}--side-panel__inner-content {
   height: 100%;
 }
+
+.#{$block-class}-story__custom-cell-wrapper.#{c4p-settings.$carbon-prefix}--link {
+  display: block;
+  overflow: hidden;
+  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;
+  margin-right: $spacing-03;
+  background-color: $field-01;
+  border-radius: $spacing-02;
+}

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

@@ -39,6 +39,11 @@
         align-items: center;
         color: $text-primary;
       }
+      .#{$block-class}__head-select-all.#{$block-class}__checkbox-cell.#{$block-class}__checkbox-cell-sticky-left {
+        position: sticky;
+        z-index: 1;
+        left: 0;
+      }
     }
 
     .#{$block-class}__cell {
@@ -57,6 +62,10 @@
         align-items: center;
         padding-top: 0;
       }
+      &.#{$block-class}__checkbox-cell-sticky-left {
+        position: sticky;
+        left: 0;
+      }
     }
 
     .#{$block-class}__checkbox-cell {
@@ -157,9 +166,12 @@
     overflow-x: auto;
   }
 
-  .#{$block-class}__table-simple {
-    overflow: hidden;
+  table.#{$block-class}__table-simple {
+    display: flex;
+    overflow: auto;
     max-height: 100%;
+    flex-direction: column;
+    background-color: $layer-01;
   }
 
   .#{$block-class}__head {
@@ -264,10 +276,6 @@
   flex: 1 1 auto;
 }
 
-.#{$block-class}__with-pagination table tr:last-of-type > td {
-  border-bottom: none;
-}
-
 .#{$block-class}__resizer {
   position: absolute;
   z-index: 1;
@@ -311,6 +319,12 @@
 
 .#{$block-class}__head-hidden-select-all {
   padding-right: $spacing-08;
+  &.#{$block-class}__select-all-sticky-left {
+    position: sticky;
+    z-index: 1;
+    left: 0;
+    background-color: $layer-accent-01;
+  }
 }
 
 .#{$block-class}__simple-body {
@@ -336,14 +350,6 @@
   min-width: 0 !important;
 }
 
-.#{$block-class}__table-simple::-webkit-scrollbar {
-  width: 6px;
-  background-color: $background;
-}
-
-.#{$block-class}__table-simple::-webkit-scrollbar-thumb {
-  background-color: $text-placeholder;
-}
 .#{$block-class}__sticky.#{$block-class}__simple-body {
   overflow: auto;
 }
@@ -362,26 +368,20 @@
   flex-direction: row;
 }
 
-.#{$block-class}__datagridLeftPanel {
-  display: flex;
-  width: 388px; // as per UX specs.
-  background-color: $layer-01;
-}
-
-.#{$block-class}__leftPanel-position {
-  display: inherit;
+.#{$block-class}__table-container-inner {
+  overflow: hidden;
+  flex: 1;
 }
 
 .#{$block-class}__datagridWithPanel {
   position: relative;
   display: flex;
-  width: 100%;
   height: 100%;
   flex-direction: column;
 
   .#{$block-class}__grid-container {
     display: flex;
-    overflow: hidden;
+    overflow: visible;
     flex-direction: column;
   }
 
@@ -389,15 +389,18 @@
     width: 100%;
   }
 
-  .#{$block-class}__datagridLeftPanel {
-    flex: 0 0 auto;
+  .#{$block-class}__table-container {
+    display: flex;
+    overflow: visible;
+    background-color: $layer-01;
   }
 
-  .#{c4p-settings.$carbon-prefix}--data-table-content {
-    flex: 1 1 0%;
+  .#{$block-class}__table-container .#{$block-class}__filter-summary {
+    border-bottom: 1px solid $layer-03;
   }
-  .#{$block-class}__table-container {
-    overflow: hidden;
+
+  .#{c4p-settings.$pkg-prefix}--datagrid__table-simple {
+    height: 100%;
   }
 }
 
@@ -407,13 +410,24 @@
   overflow: auto;
   width: 100%;
   max-height: 100%;
+  overflow-y: auto;
 }
 
 .#{$block-class}__carbon-row-expanded {
-  // Border applied to nested rows only on open chevron hover
-  &.#{$block-class}__carbon-row-expanded-hover-active
-    ~ .#{$block-class}__carbon-nested-row {
-    border-left: 1px solid $button-primary;
+  position: relative;
+  &.#{$block-class}__carbon-row-expanded-hover-active::before {
+    position: absolute;
+    z-index: 2;
+    /* stylelint-disable-next-line carbon/layout-token-use */
+    top: var(--#{$block-class}--row-height);
+    /* stylelint-disable-next-line carbon/layout-token-use */
+    left: calc(
+      var(--#{$block-class}--indicator-offset-amount) + #{$spacing-05}
+    );
+    width: 1px;
+    height: var(--#{$block-class}--indicator-height);
+    border-left: 1px solid $background-brand;
+    content: '';
   }
 }
 
@@ -431,8 +445,9 @@
   }
 
   .#{$block-class}__table-toolbar {
-    flex: 0 0 auto;
+    flex: 1 0 auto;
   }
+
   .#{c4p-settings.$carbon-prefix}--table-toolbar {
     background: transparent;
   }
@@ -465,10 +480,10 @@
   .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row) {
   position: relative;
 }
-
 .#{$block-class}
   .#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
   position: absolute;
+  top: 0;
   left: 0;
   width: $spacing-02;
   height: 100%;
@@ -509,8 +524,87 @@
   justify-content: center;
   padding: 0;
   margin: 0;
-
   .#{c4p-settings.$carbon-prefix}--btn__icon {
     margin: 0;
   }
 }
+
+.#{$block-class} .#{c4p-settings.$pkg-prefix}--button-menu {
+  height: $spacing-09;
+}
+
+.#{$block-class} .#{$block-class}__row-size-button {
+  display: flex;
+  width: $spacing-09;
+  height: $spacing-09;
+  justify-content: center;
+}
+
+.#{$block-class}__customize-columns-checkbox-wrapper.#{c4p-settings.$carbon-prefix}--form-item {
+  flex: 0 0 auto;
+  margin-right: $spacing-03;
+}
+
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
+  width: 10px;
+  height: 7px;
+}
+
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-track {
+  background: $layer;
+}
+
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+}
+
+.#{$block-class}__virtualScrollContainer {
+  width: 100%;
+}
+
+.#{c4p-settings.$carbon-prefix}--body--with-modal-open
+  .#{$block-class}__grid-container {
+  overflow: hidden;
+  height: 100vh;
+}
+
+.#{$block-class} .#{c4p-settings.$carbon-prefix}--modal {
+  width: 100%;
+}
+
+.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__toolbar-menu__trigger {
+  flex-shrink: 0;
+  background-color: $interactive;
+}
+
+.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__toolbar-menu__trigger
+  svg {
+  fill: $background;
+}
+
+.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__toolbar-menu__trigger:hover,
+.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__toolbar-menu__trigger.#{c4p-settings.$carbon-prefix}--overflow-menu--open:hover,
+.#{c4p-settings.$carbon-prefix}--overflow-menu.#{$block-class}__toolbar-menu__trigger.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
+  background-color: $button-primary-hover;
+}
+
+// extra specificity to override Carbon default
+.#{$block-class}__toolbar-options.#{$block-class}__toolbar-options {
+  background-color: $layer-02;
+}
+
+.#{$block-class}__toolbar-options.#{c4p-settings.$carbon-prefix}--overflow-menu-options::after {
+  background-color: transparent;
+}
+
+.#{$block-class}__mobile-toolbar-modal
+  .#{c4p-settings.$carbon-prefix}--modal-container {
+  position: absolute;
+}
+
+.#{$block-class}__table-toolbar--sm,
+.#{$block-class}__table-toolbar--xs {
+  .#{c4p-settings.$pkg-prefix}--filter-summary {
+    padding: 0 $spacing-03;
+  }
+}