@carbon/ibm-products 1.18.0 → 1.19.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -34,7 +34,7 @@
   },
   "scripts": {
     "build": "run-s clean build-first build-all",
-    "build-all": "run-p build:*",
+    "build-all": "run-p 'build:*'",
     "build-first": "copyfiles 'src/**/*.scss' scss -u 1",
     "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
     "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
@@ -58,16 +58,16 @@
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "fs-extra": "^10.1.0",
-    "glob": "^8.0.1",
-    "jest": "^28.0.3",
-    "jest-config-ibm-cloud-cognitive": "^0.23.18",
+    "glob": "^8.0.3",
+    "jest": "^28.1.0",
+    "jest-config-ibm-cloud-cognitive": "^0.24.0",
     "jest-environment-jsdom": "^28.1.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^12.5.11",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "sass": "^1.51.0",
-    "yargs": "^17.4.1"
+    "yargs": "^17.5.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
@@ -93,5 +93,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "6bf1f85853417a8b5142207318b12290254201bf"
+  "gitHead": "0b3c895c53963a176ff7e274639c5cce460c0ef1"
 }

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

@@ -52,11 +52,11 @@
       color: $text-02;
     }
 
-    &-cell:hover .#{$block-class}__selections-dropdown {
+    &-cell:hover .#{$block-class}__selections-hidden-hover {
       visibility: visible;
     }
 
-    &-dropdown {
+    &-hidden-hover {
       visibility: hidden;
     }
 
@@ -64,7 +64,7 @@
       background: #e5e5e5;
     }
 
-    &-row-selected .#{$block-class}__selections-dropdown {
+    &-row-selected .#{$block-class}__selections-hidden-hover {
       visibility: visible;
     }
 
@@ -102,7 +102,7 @@
 
   .#{$block-class}__sub-header {
     display: flex;
-    align-items: end;
+    align-items: flex-end;
     justify-content: space-between;
   }
 
@@ -169,7 +169,11 @@
     overflow-x: auto;
   }
 
-  .#{$block-class}__columns .#{$block-class}__selections-cell {
+  // table override
+  .#{$block-class}
+    .#{$block-class}__columns
+    .#{$carbon-prefix}--structured-list-td {
+    height: 0;
     // stylelint-disable-next-line
     padding: 0 !important;
   }
@@ -217,6 +221,7 @@
     width: 100%;
     max-width: 40rem;
     background: $ui-01;
+    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
     transform: translate(0, 100%);
 
     &-search {
@@ -252,6 +257,39 @@
   button.#{$block-class}__global-filter-toggle {
     border-bottom-color: $ui-04;
     background: $field-01;
+
+    &--open {
+      border-bottom: $ui-01;
+      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  // meta panel
+  .#{$block-class}__meta-panel {
+    padding: $spacing-05;
+
+    &-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: $spacing-05;
+    }
+
+    &-entry {
+      margin-bottom: $spacing-05;
+    }
+  }
+
+  .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-title {
+    @include carbon--type-style('productive-heading-03');
+  }
+
+  .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-title {
+    @include carbon--type-style('productive-heading-01');
+  }
+
+  .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-body {
+    @include carbon--type-style('body-short-01');
   }
 
   // overrides
@@ -287,7 +325,9 @@
   }
 
   .#{$block-class} .#{$carbon-prefix}--structured-list-td {
-    padding-bottom: $spacing-05;
+    height: 4rem;
+    padding: $spacing-05;
+    vertical-align: middle;
   }
 
   .#{$block-class} .#{$carbon-prefix}--radio-button__appearance {

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -12,6 +12,10 @@
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.
 @mixin set-header-borders {
+  border-right: 1px solid $active-ui;
+  border-bottom: 1px solid $active-ui;
+}
+@mixin set-active-header-borders {
   border-right: 1px solid $text-03;
   border-bottom: 1px solid $text-03;
 }
@@ -211,15 +215,18 @@
       z-index: 4;
       width: $spacing-01;
       background-color: $interactive-01;
+      pointer-events: none;
     }
     .#{$block-class}__th--active-header,
     .#{$block-class}__td-th--active-header.#{$block-class}__td {
+      @include set-active-header-borders();
+
       background-color: $hover-selected-ui;
     }
     .#{$block-class}__th--selected-header,
     .#{$block-class}__td-th--selected-header.#{$block-class}__td {
       background-color: $inverse-02;
-      color: $text-04;
+      color: $inverse-01;
 
       &:focus,
       &:hover {

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

@@ -14,9 +14,14 @@ $block-class: #{$pkg-prefix}--datagrid;
 
 .sb-show-main.sb-main-centered #root {
   width: 100%;
+  height: 100vh;
   padding: 0;
 }
 
+.preview-position-fix {
+  height: 100%;
+}
+
 .carbon-nested-table {
   border-bottom: 1px solid $ui-03;
 

package/scss/components/Datagrid/styles/datagrid.scss

@@ -26,6 +26,7 @@
 .#{$block-class}__grid-container table {
   /* Removes additional scroll introduced by Carbon table */
   overflow: hidden;
+
   &.#{$block-class}__vertical-align-center {
     .#{$block-class}__head {
       .#{$carbon-prefix}--table-header-label {
@@ -46,12 +47,14 @@
     th.#{$carbon-prefix}--table-column-checkbox {
       /* stylelint-disable-next-line carbon/layout-token-use */
       padding-top: 0.6875rem;
+
       &.#{$block-class}__checkbox-cell {
         display: flex;
         align-items: center;
         padding-top: 0;
       }
     }
+
     .#{$block-class}__checkbox-cell {
       th.#{$carbon-prefix}--table-column-checkbox {
         display: flex;
@@ -60,6 +63,7 @@
         padding-top: 0;
       }
     }
+
     &.#{$block-class}__variable-row-height {
       &.#{$carbon-prefix}--data-table--compact,
       &.#{$carbon-prefix}--data-table--xs {
@@ -68,6 +72,7 @@
           padding-bottom: $spacing-01;
         }
       }
+
       &.#{$carbon-prefix}--data-table--short,
       &.#{$carbon-prefix}--data-table--sm,
       &.#{$carbon-prefix}--data-table--md {
@@ -78,6 +83,7 @@
           padding-bottom: rem(6px);
         }
       }
+
       &.#{$carbon-prefix}--data-table--tall,
       &.#{$carbon-prefix}--data-table--lg,
       &.#{$carbon-prefix}--data-table--xl {
@@ -88,6 +94,7 @@
       }
     }
   }
+
   &.#{$block-class}__vertical-align-top {
     &.#{$carbon-prefix}--data-table--tall,
     &.#{$carbon-prefix}--data-table--lg,
@@ -95,14 +102,17 @@
       .#{$block-class}__cell {
         padding-top: $spacing-05;
       }
+
       .#{$carbon-prefix}--table-header-label {
         padding-top: $spacing-05;
       }
+
       .#{$carbon-prefix}--table-column-checkbox {
         /* stylelint-disable-next-line carbon/layout-token-use */
         padding-top: rem(13px);
       }
     }
+
     &.#{$block-class}__variable-row-height {
       &.#{$carbon-prefix}--data-table--tall,
       &.#{$carbon-prefix}--data-table--lg,
@@ -110,12 +120,14 @@
         .#{$block-class}__cell {
           padding-bottom: $spacing-05;
         }
+
         .#{$carbon-prefix}--table-header-label {
           padding-bottom: $spacing-05;
         }
       }
     }
   }
+
   &.#{$block-class}__variable-row-height {
     tr.#{$block-class}__carbon-row {
       height: auto;
@@ -150,17 +162,13 @@
   .#{$block-class}__head {
     display: flex;
   }
+
   .#{$block-class}__head .header {
     /* Each cell should grow equally */
     width: 1%;
     align-items: center;
   }
 
-  .#{$block-class}__empty-state-body {
-    display: flex;
-    width: 100%;
-  }
-
   .#{$block-class}__virtual-scrollbar {
     //makes thin scrollbar in chrome and firefox
     scrollbar-width: thin;
@@ -195,9 +203,11 @@
     height: 100%;
     flex-direction: column;
   }
+
   .#{$block-class}__carbon-row {
     /* stylelint-disable-next-line declaration-no-important */
     flex: none !important;
+
     .#{$block-class}__carbon-row:hover a {
       /* stylelint-disable-next-line declaration-no-important */
       color: $hover-primary-text !important;
@@ -219,6 +229,31 @@
   }
 }
 
+.#{$block-class}__empty-state .#{$block-class}__table-simple {
+  display: table;
+  height: 100%;
+
+  .#{$pkg-prefix}--empty-state {
+    max-width: 280px;
+  }
+}
+
+.#{$block-class}__empty-state .#{$block-class}__table-simple tr:hover {
+  background: transparent;
+}
+
+.#{$block-class}__empty-state .#{$block-class}__table-simple tr:hover td {
+  background: transparent;
+}
+
+.#{$block-class}__empty-state .#{$block-class}__table-simple td {
+  padding: $spacing-11;
+}
+
+.#{$block-class}__empty-state .#{$block-class}__grid-container {
+  flex: 1 1 auto;
+}
+
 .#{$block-class}__resizer {
   position: absolute;
   z-index: 1;
@@ -239,12 +274,14 @@
 .#{$block-class}__sortableColumn:hover {
   background-color: $hover-selected-ui;
 }
+
 .#{$block-class}__resizableColumn {
   &.#{$block-class}__isResizing {
     .#{$block-class}__resizer {
       border-right: $spacing-01 solid $hover-secondary;
     }
   }
+
   &.#{$block-class}__isSorted {
     background-color: $hover-selected-ui;
   }
@@ -252,6 +289,7 @@
 
 .#{$block-class}__resizableColumn:hover {
   background-color: $hover-selected-ui;
+
   .#{$block-class}__resizer {
     border-right: $spacing-01 solid $ui-04;
     background-color: $hover-selected-ui;