@carbon/ibm-products 1.14.0 → 1.17.0

package/lib/global/js/package-settings.js

@@ -64,6 +64,7 @@ var defaults = {
     ToolbarButton: false,
     ToolbarGroup: false,
     WebTerminal: false,
+    WebTerminalContentWrapper: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
     InlineEdit: false,
@@ -74,7 +75,8 @@ var defaults = {
   },
   // feature level flags
   feature: {
-    'a-new-feature': false
+    'a-new-feature': false,
+    'default-portal-target-body': true
   }
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.14.0",
+  "version": "1.17.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -47,36 +47,36 @@
     "postinstall": "carbon-telemetry collect --install",
     "test": "jest --colors",
     "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
-    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$)/'"
+    "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.8",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.12",
+    "@babel/core": "^7.17.9",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.14",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "fs-extra": "^10.0.1",
-    "glob": "^7.2.0",
+    "fs-extra": "^10.1.0",
+    "glob": "^8.0.1",
     "jest": "^27.5.1",
-    "jest-config-ibm-cloud-cognitive": "^0.23.14",
+    "jest-config-ibm-cloud-cognitive": "^0.23.17",
     "namor": "^1.1.2",
-    "npm-check-updates": "^12.5.4",
+    "npm-check-updates": "^12.5.10",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.10",
-    "yargs": "^17.4.0"
+    "sass": "^1.51.0",
+    "yargs": "^17.4.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.8",
+    "@babel/runtime": "^7.17.9",
     "@carbon/telemetry": "^0.1.0",
     "immutability-helper": "^3.1.1",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
     "react-resize-detector": "^7.0.0",
     "react-table": "^7.7.0",
-    "react-window": "^1.8.6"
+    "react-window": "^1.8.7"
   },
   "peerDependencies": {
     "@carbon/colors": "^10.37.1",
@@ -92,5 +92,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "2d85df61f66068c1c23e29a498eb84b94b334d90"
+  "gitHead": "dcf8ef9163dbb8cad6bfc6e70165bfa7288c654e"
 }

package/scss/components/AboutModal/_about-modal.scss

@@ -61,6 +61,10 @@
     bottom: calc(#{$spacing-09} + #{$spacing-08});
   }
 
+  .#{$block-class} .#{$carbon-prefix}--modal-content--overflow-indicator {
+    background-image: linear-gradient(to bottom, #00000000, $ui-01);
+  }
+
   .#{$block-class} .#{$block-class}__links-container {
     margin-top: $spacing-05;
   }

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

@@ -228,6 +228,13 @@
       grid-gap: $spacing-05 2rem;
       grid-template-columns: repeat(2, 1fr);
     }
+
+    &-applied {
+      display: flex;
+      align-items: center;
+      padding: $spacing-03;
+      background: $ui-01;
+    }
   }
 
   .#{$block-class}__global-filter-button-set
@@ -248,7 +255,7 @@
   }
 
   // the influencer sidebar needs to be even with the buttons
-  .#{$block-class} .#{$tearsheet-class} .#{$tearsheet-class}__influencer {
+  .#{$block-class} .#{$tearsheet-class}__influencer {
     max-width: 29rem;
     flex: 0 0 50%;
   }
@@ -257,7 +264,7 @@
     color: $text-02;
   }
 
-  .#{$block-class} .#{$tearsheet-class} .#{$tearsheet-class}__content {
+  .#{$block-class} .#{$tearsheet-class}__content {
     display: flex;
     flex-direction: column;
   }

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

@@ -59,6 +59,10 @@
       color: $text-01;
     }
 
+    .#{$block-class}__body--td {
+      color: $text-02;
+    }
+
     [role="'columnheader'"]:last-child,
     [role="'gridcell'"]:last-child {
       border-right: 1px solid $text-03;
@@ -77,7 +81,13 @@
       }
     }
     .#{$block-class}__th--select-all {
-      min-width: calc(#{$spacing-10} - #{$spacing-02});
+      width: $spacing-10;
+    }
+    .#{$block-class}__td-th--cell-container,
+    .#{$block-class}__select-all-cell-container {
+      position: sticky;
+      z-index: 4;
+      left: 0;
     }
     .#{$block-class}__td-th.#{$block-class}__td {
       @include carbon--font-weight('semibold');
@@ -113,6 +123,7 @@
       padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
       margin: 0;
       background-color: $body-cell-background;
+      color: $text-01;
       resize: none;
       &.#{$carbon-prefix}--text-area {
         min-width: initial;
@@ -160,6 +171,7 @@
 
       &[data-active-row-index='header'],
       &[data-active-column-index='header'] {
+        z-index: 4;
         background-color: transparent;
       }
 
@@ -168,6 +180,19 @@
         outline: 0;
       }
     }
+    .#{$block-class}__active-cell--highlight.#{$block-class}__active-cell--with-selection {
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: $interactive-01;
+        content: '';
+        opacity: 0.25;
+      }
+    }
     .#{$block-class}__selection-area--element {
       position: absolute;
       z-index: 2;
@@ -183,13 +208,25 @@
         height: 100%;
         background-color: $interactive-01;
         content: '';
-        opacity: 0.25;
+        opacity: 0.2;
       }
     }
     .#{$block-class}__th--active-header,
     .#{$block-class}__td-th--active-header.#{$block-class}__td {
       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;
+
+      &:hover {
+        background-color: $inverse-02;
+      }
+    }
+    .#{$block-class}__list--container {
+      overscroll-behavior: none;
+    }
   }
 }
 

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

@@ -316,3 +316,11 @@
   width: 100%;
   flex-direction: column;
 }
+
+.#{$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 $interactive-01;
+  }
+}

package/scss/components/Datagrid/styles/useNestedRows.scss

@@ -9,7 +9,7 @@
 @import './variables';
 
 .#{$carbon-prefix}--data-table tr.#{$block-class}__carbon-nested-row {
-  border-left: 2px solid $interactive-01;
+  border-left: 1px solid transparent;
 
   .#{$block-class}__cell {
     border-bottom: 1px solid $ui-03;

package/scss/components/ExportModal/_export-modal.scss

@@ -29,10 +29,6 @@
     padding-right: $spacing-05;
   }
 
-  .#{$block-class} .#{$carbon-prefix}--modal-close {
-    display: none;
-  }
-
   .#{$block-class}__body {
     padding-right: calc(20% - #{$spacing-05});
     margin-bottom: $spacing-05;

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

@@ -278,7 +278,10 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       position: fixed;
       z-index: 2;
       // stylelint-disable-next-line carbon/layout-token-use
-      top: calc(var(--#{$block-class}--title-text-height) + #{$spacing-09});
+      top: calc(
+        var(--#{$block-class}--title-text-height) +
+          var(--#{$block-class}--label-text-height) + #{$spacing-09}
+      );
       background-color: $ui-01;
     }
 
@@ -298,7 +301,10 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     .#{$block-class}__title-container.#{$block-class}__title-container--no-title-animation {
       position: fixed;
       top: $spacing-09;
-      height: var(--#{$block-class}--title-text-height);
+      height: calc(
+        var(--#{$block-class}--title-text-height) +
+          var(--#{$block-class}--label-text-height)
+      );
     }
 
     .#{$block-class}__inner-content {
@@ -308,7 +314,8 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       margin-top: calc(
         var(--#{$block-class}--title-text-height) +
           var(--#{$block-class}--subtitle-container-height) +
-          var(--#{$block-class}--action-bar-container-height)
+          var(--#{$block-class}--action-bar-container-height) +
+          var(--#{$block-class}--label-text-height)
       );
       overflow-x: hidden;
     }
@@ -331,6 +338,18 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       padding-top: $spacing-05;
     }
 
+    .#{$block-class}__inner-content.#{$block-class}__static-inner-content-no-actions {
+      height: calc(
+        100vh -
+          calc(
+            var(--#{$block-class}--title-text-height) +
+              var(--#{$block-class}--subtitle-container-height) +
+              var(--#{$block-class}--action-bar-container-height) +
+              var(--#{$block-class}--label-text-height)
+          )
+      );
+    }
+
     .#{$block-class}__action-toolbar.#{$block-class}__action-toolbar-no-animation {
       position: fixed;
       // stylelint-disable-next-line carbon/layout-token-use

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

@@ -2,6 +2,11 @@
 
 @import '../../global/styles/project-settings';
 
+.sb-show-main.sb-main-centered #root {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
 .example-terminal {
   padding: $spacing-05;
   color: $gray-10;

package/scss/components/WebTerminal/_web-terminal.scss

@@ -5,25 +5,25 @@ $web-terminal-width: 36.5rem;
 $block-class: #{$pkg-prefix}--web-terminal;
 
 @keyframes web-terminal-entrance {
-  0% {
+  from {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-token-use
     transform: translateX(#{$web-terminal-width});
   }
 
-  100% {
+  to {
     opacity: 1;
     transform: translateX(0);
   }
 }
 
 @keyframes web-terminal-exit {
-  0% {
+  from {
     opacity: 1;
     transform: translateX(0);
   }
 
-  100% {
+  to {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-token-use
     transform: translateX(#{$web-terminal-width});
@@ -70,3 +70,13 @@ $block-class: #{$pkg-prefix}--web-terminal;
 .#{$block-class}__body {
   height: 100%;
 }
+
+// Terminal wrapper styles
+.#{$block-class}-content-wrapper {
+  width: 100vw;
+  height: 100%;
+}
+
+.#{$block-class}-content-wrapper--open {
+  width: calc(100vw - #{$web-terminal-width});
+}