@carbon/ibm-products 1.10.0 → 1.11.2

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

@@ -44,6 +44,7 @@ var defaults = {
     NoTagsEmptyState: true,
     NotFoundEmptyState: true,
     NotificationsEmptyState: true,
+    OptionsTile: true,
     PageHeader: true,
     ProductiveCard: true,
     RemoveModal: true,
@@ -58,14 +59,12 @@ var defaults = {
     // other public components not yet reviewed and released:
     MultiAddSelect: false,
     SingleAddSelect: false,
-    LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
     WebTerminal: false,
     EditSidePanel: false,
-    OptionsTile: false,
     CancelableTextEdit: false,
     InlineEdit: false,
     DataSpreadsheet: false

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.10.0",
+  "version": "1.11.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,8 +51,8 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.10",
+    "@babel/core": "^7.17.7",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.11",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -60,33 +60,33 @@
     "fs-extra": "^10.0.1",
     "glob": "^7.2.0",
     "jest": "^27.5.1",
-    "jest-config-ibm-cloud-cognitive": "^0.23.11",
-    "npm-check-updates": "^12.5.2",
+    "jest-config-ibm-cloud-cognitive": "^0.23.12",
+    "npm-check-updates": "^12.5.4",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "sass": "^1.49.9",
     "yargs": "^17.3.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.2",
-    "@carbon/telemetry": "^0.0.0-alpha.6",
+    "@babel/runtime": "^7.17.7",
+    "@carbon/telemetry": "^0.1.0",
     "react-resize-detector": "^7.0.0",
     "react-table": "^7.7.0",
     "react-window": "^1.8.6"
   },
   "peerDependencies": {
     "@carbon/colors": "^10.37.0",
-    "@carbon/icons-react": "^10.47.0",
+    "@carbon/icons-react": "^10.48.0",
     "@carbon/import-once": "^10.7.0",
     "@carbon/layout": "^10.37.0",
     "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.52.0",
-    "@carbon/type": "^10.42.0",
-    "carbon-components": "^10.54.0",
-    "carbon-components-react": "^7.54.2",
+    "@carbon/themes": "^10.53.1",
+    "@carbon/type": "^10.43.1",
+    "carbon-components": "^10.55.1",
+    "carbon-components-react": "^7.55.1",
     "carbon-icons": "^7.0.7",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "9c24da12c6e7a113e4d6f20bfb5d61a212460c89"
+  "gitHead": "1327941f8527f6ea940253307039bc99ba0a43f2"
 }

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

@@ -128,6 +128,22 @@
     padding: $spacing-05;
     border-top: 1px solid $ui-03;
     border-right: 1px solid $ui-03;
+
+    &-search-bar {
+      display: flex;
+
+      label {
+        display: none;
+      }
+    }
+
+    &-sort-filter {
+      display: flex;
+    }
+
+    .bx--overflow-menu {
+      border-bottom: 1px solid $ui-04;
+    }
   }
 
   .#{$block-class}__tag-container {
@@ -143,6 +159,10 @@
 
   // overrides
 
+  .#{$block-class}__tag-container .#{$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;

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

@@ -61,6 +61,10 @@
         display: inline-flex;
         vertical-align: middle;
       }
+
+      .#{$block-class}__displayed-breadcrumb:last-child {
+        max-width: calc(100% - $spacing-07); // allow room for breadcrumb back
+      }
     }
 
     .#{$carbon-prefix}--breadcrumb-item:last-child {
@@ -78,10 +82,10 @@
       width: 100%;
       text-overflow: ellipsis;
     }
+  }
 
-    .#{$carbon-prefix}--link {
-      max-height: 18px; // to match breadcrumb - overflow button is 20 by default
-    }
+  .#{$block-class}__overflow-menu-options.#{$block-class}__overflow-menu-options {
+    z-index: z('header');
   }
 }
 

package/scss/components/CreateSidePanel/_create-side-panel.scss

@@ -68,7 +68,7 @@
   }
 
   .#{$block-class}.#{$side-panel-block-class}
-    .bx--btn.#{$side-panel-block-class}__close-button {
+    .#{$carbon-prefix}--btn.#{$side-panel-block-class}__close-button {
     display: none;
   }
 

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

@@ -17,7 +17,7 @@ $story-prefix: create-side-panel-stories__;
   grid-template-columns: 1fr 1fr;
 }
 
-.#{$story-prefix}example-form-group .bx--label {
+.#{$story-prefix}example-form-group .#{$carbon-prefix}--label {
   margin-bottom: 0;
 }
 

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

@@ -74,7 +74,7 @@
       @include set-body-borders();
 
       margin: 0;
-      background-color: transparent;
+      background-color: $ui-background;
       cursor: cell;
       text-align: left;
     }
@@ -84,9 +84,22 @@
       color: $text-01;
       text-align: left;
     }
+    .#{$block-class}__cell-editor {
+      position: absolute;
+      z-index: 4;
+      display: none;
+      padding: 0 $spacing-03;
+      background-color: $ui-background;
+      resize: none;
+      &.#{$carbon-prefix}--text-area {
+        min-width: initial;
+        min-height: initial;
+      }
+    }
     .#{$block-class}__active-cell--highlight {
       position: absolute;
       z-index: 3;
+      display: none;
       border: $spacing-01 solid $interactive-01;
       background-color: transparent;
 

package/scss/components/EditSidePanel/_edit-side-panel.scss

@@ -58,6 +58,15 @@
       width: 100%;
       margin-bottom: 0;
     }
+
+    .#{$block-class}__actions-container {
+      position: absolute;
+      z-index: 4;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      margin-bottom: 0;
+    }
   }
 }
 

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

@@ -17,7 +17,7 @@ $story-prefix: edit-side-panel-stories__;
   grid-template-columns: 1fr 1fr;
 }
 
-.#{$story-prefix}example-form-group .bx--label {
+.#{$story-prefix}example-form-group .#{$carbon-prefix}--label {
   margin-bottom: 0;
 }
 

package/scss/components/InlineEdit/_inline-edit.scss

@@ -28,23 +28,6 @@
   }
 }
 
-@function --tooltip-top-bottom-safe-clip() {
-  @return polygon(
-    0 0,
-    -100vw 0,
-    -100vw -100vh,
-    100vw -100vh,
-    100vw 0,
-    100% 0,
-    100% 100%,
-    100vw 100%,
-    100vw 100vh,
-    -100vw 100vh,
-    -100vw 100%,
-    0 100%
-  );
-}
-
 @mixin input-button-defaults($block-class) {
   display: inline-flex;
   width: var(--#{$block-class}--size);
@@ -69,6 +52,7 @@
     --#{$block-class}--size: #{$spacing-08};
     --#{$block-class}--icon-size: #{$spacing-05};
     --#{$block-class}--background-color: #{$ui-01};
+    --#{$block-class}--toolbar-width: calc(2 * var(--#{$block-class}--size));
 
     &.#{$block-class}--light {
       --#{$block-class}--background-color: transparent;
@@ -121,11 +105,12 @@
       overflow: hidden;
       // positions text and placeholder including when showing placeholder
       // NOTE: Using flex does strange things to a caret in content editable
-      width: calc(100% - 2 * var(--#{$block-class}--size) - $spacing-05);
-      max-width: calc(100% - 2 * var(--#{$block-class}--size) - $spacing-05);
+      width: calc(100% - var(--#{$block-class}--toolbar-width) - $spacing-05);
+      max-width: calc(
+        100% - var(--#{$block-class}--toolbar-width) - $spacing-05
+      );
       min-height: var(--#{$block-class}--size);
-      // stylelint-disable-next-line carbon/layout-token-use
-      margin-right: calc(2 * var(--#{$block-class}--size));
+      margin-right: var(--#{$block-class}--toolbar-width);
       // room for toolbar
       margin-left: $spacing-05;
       // stylelint-disable-next-line carbon/type-token-use
@@ -138,10 +123,7 @@
 
     &.#{$block-class}--invalid .#{$block-class}__input {
       // add space for validation
-      width: calc(100% - 3 * var(--#{$block-class}--size) - $spacing-05);
-      max-width: calc(100% - 3 * var(--#{$block-class}--size) - $spacing-05);
-      // stylelint-disable-next-line carbon/layout-token-use
-      margin-right: calc(3 * var(--#{$block-class}--size));
+      --#{$block-class}--toolbar-width: calc(3 * var(--#{$block-class}--size));
     }
 
     .#{$block-class}__input::after {
@@ -202,13 +184,15 @@
     }
 
     .#{$block-class}__after-input-elements {
+      --#{$block-class}--toolbar-width: calc(2 * var(--#{$block-class}--size));
+
       // not simply flexed in as this causes flexbox to mis-measure the size of the input
       position: absolute;
       top: 0;
       right: 0;
       display: flex;
       // width: room for validation, and two buttons
-      width: calc(2 * var(--#{$block-class}--size));
+      width: var(--#{$block-class}--toolbar-width);
       height: 100%;
       justify-content: space-between;
       cursor: text;
@@ -216,14 +200,11 @@
 
     &.#{$block-class}--invalid .#{$block-class}__after-input-elements {
       // width: room for validation, and two buttons
-      width: calc(3 * var(--#{$block-class}--size));
+      --#{$block-class}--toolbar-width: calc(3 * var(--#{$block-class}--size));
     }
 
     .#{$block-class}__toolbar--animation {
-      // makes room for the top clip text but hides the side overflow
-      clip-path: --tooltip-top-bottom-safe-clip();
-      // NOTE: The above allows the tooltip to show through when overflowX: hidden would not when at right edge.
-      // It is used with margin animation of contained buttons
+      // width: ;
     }
 
     &.#{$block-class}--editing .#{$block-class}__toolbar::after {
@@ -277,16 +258,33 @@
     &.#{$block-class}--editing
       .#{$block-class}__toolbar--animation
       .#{$block-class}__save {
-      // stylelint-disable-next-line carbon/layout-token-use
-      margin-right: calc(-1 * var(--#{$block-class}--size));
-      transition: margin-right $duration--moderate-02
-        motion(standard, productive);
+      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) {
+          // stylelint-disable-next-line carbon/motion-token-use
+          transition: none;
+        }
+      }
     }
 
     &.#{$block-class}--editing
-      .#{$block-class}__toolbar--saveable
+      .#{$block-class}__toolbar--animation:not(.#{$block-class}__toolbar--saveable)
       .#{$block-class}__save {
-      margin-right: 0;
+      padding-right: 0;
+      padding-left: 0;
+      border-right: 0;
+      border-left: 0;
+      // stylelint-disable-next-line carbon/layout-token-use
+      margin-right: calc(-1 * var(--#{$block-class}--size));
+
+      svg {
+        overflow: hidden;
+        width: 0;
+      }
     }
 
     &.#{$block-class}.#{$block-class} .#{$block-class}__edit {

package/scss/components/ModifiedTabs/_modified-tabs.scss

@@ -45,6 +45,11 @@
   border-radius: 0;
   cursor: pointer;
   transition: background-color $duration--fast-02 motion(standard, productive);
+  // stylelint-disable-next-line max-nesting-depth
+  @media (prefers-reduced-motion: reduce) {
+    // stylelint-disable-next-line carbon/motion-token-use
+    transition: none;
+  }
 }
 
 .modified-tabs__tab-new-icon {

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -183,16 +183,20 @@
           min-width: 5.5rem;
           padding: 0;
 
-          .bx--btn__icon {
+          .#{$carbon-prefix}--btn__icon {
             transition: transform $duration--moderate-02 ease;
+            @media (prefers-reduced-motion: reduce) {
+              // stylelint-disable-next-line carbon/motion-token-use
+              transition: none;
+            }
           }
           &.#{$block-class}__notification-read-more-button {
-            .bx--btn__icon {
+            .#{$carbon-prefix}--btn__icon {
               transform: rotate(0deg);
             }
           }
           &.#{$block-class}__notification-read-less-button {
-            .bx--btn__icon {
+            .#{$carbon-prefix}--btn__icon {
               transform: rotate(180deg);
             }
           }

package/scss/components/OptionsTile/_index.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 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/OptionsTile/_options-tile.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 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.
@@ -12,6 +12,10 @@
 // Other Carbon settings.
 @import 'carbon-components/scss/globals/scss/helper-mixins';
 
+// PageHeader uses the following Carbon components:
+// Toggle
+@import 'carbon-components/scss/components/toggle/toggle';
+
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.
 @mixin options-tile {
@@ -44,7 +48,7 @@
     box-sizing: border-box;
     align-items: center;
     padding-right: $spacing-05;
-    grid-template-columns: 3rem 1fr 1rem;
+    grid-template-columns: 3rem 1fr 2rem; // chevron container, heading, toggle width
   }
 
   .#{$block-class}__header {
@@ -53,6 +57,10 @@
     transition: background-color $duration--fast-01 motion(entrance, productive);
   }
 
+  .#{$block-class}__header::-webkit-details-marker {
+    display: none;
+  }
+
   .#{$block-class}__header:hover {
     background-color: $hover-ui;
   }
@@ -61,11 +69,11 @@
     @include focus-outline('outline');
   }
 
-  .#{$block-class}__title {
+  .#{$block-class}__heading {
     grid-column: 2;
   }
 
-  .#{$block-class}__heading {
+  .#{$block-class}__title {
     @include carbon--type-style('productive-heading-01');
 
     color: $text-01;
@@ -88,7 +96,7 @@
   .#{$block-class}__summary--warn,
   .#{$block-class}__summary--locked {
     column-gap: $spacing-02;
-    grid-template-columns: 1rem 1fr;
+    grid-template-columns: 1rem 1fr; // icon, text
   }
 
   .#{$block-class}__summary--invalid {
@@ -110,11 +118,15 @@
   .#{$block-class}__summary-text {
     overflow: hidden;
     height: max-content;
+    // spacing-05 + toggle width
+    // stylelint-disable-next-line carbon/layout-token-use
+    padding-right: calc(#{$spacing-05} + 2rem);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .#{$block-class}__chevron {
+    display: block;
     justify-self: center;
     transition: transform $duration--fast-02 motion(standard, productive);
   }
@@ -195,18 +207,6 @@
     margin-top: $spacing-01;
   }
 
-  .#{$block-class}--lg .#{$block-class}__summary-text {
-    // spacing-05 + toggle width
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc(#{$spacing-05} + 1rem);
-  }
-
-  .#{$block-class}--xl .#{$block-class}__summary-text {
-    // spacing-05 + toggle width
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc(#{$spacing-05} + 2rem);
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .#{$block-class}__summary,
     .#{$block-class}__chevron {

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// Copyright IBM Corp. 2021, 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.
@@ -10,9 +10,9 @@
 $block-class: #{$pkg-prefix}--options-tile;
 
 .#{$block-class} {
-  width: 70vw;
-  min-width: 32rem;
-  max-width: 64rem;
+  width: 80vw;
+  min-width: 16rem;
+  max-width: 48rem;
 }
 
 .#{$block-class}__content p {

package/scss/components/PageHeader/_page-header.scss

@@ -209,8 +209,8 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     .#{$block-class}__breadcrumb-row--has-breadcrumbs
       .#{$block-class}__action-bar-column {
       // back button displayed only
-      max-width: $left-section-alt-width;
-      flex: 0 1 $left-section-alt-width;
+      max-width: $right-section-alt-width;
+      flex: 0 1 $right-section-alt-width;
 
       @include carbon--breakpoint(md) {
         max-width: $right-section-std-width;
@@ -253,6 +253,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
 
     .#{$block-class}__breadcrumb-column {
+      overflow: hidden; /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
       max-width: 100%;
       flex: 0 0 100%;
 

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

@@ -447,14 +447,14 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
   }
 
   // form fields should receive correct background color
-  .#{$block-class}__container .bx--text-input,
-  .#{$block-class}__container .bx--text-area,
-  .#{$block-class}__container .bx--search-input,
-  .#{$block-class}__container .bx--select-input,
-  .#{$block-class}__container .bx--dropdown,
-  .#{$block-class}__container .bx--dropdown-list,
-  .#{$block-class}__container .bx--number input[type='number'],
-  .#{$block-class}__container .bx--date-picker__input {
+  .#{$block-class}__container .#{$carbon-prefix}--text-input,
+  .#{$block-class}__container .#{$carbon-prefix}--text-area,
+  .#{$block-class}__container .#{$carbon-prefix}--search-input,
+  .#{$block-class}__container .#{$carbon-prefix}--select-input,
+  .#{$block-class}__container .#{$carbon-prefix}--dropdown,
+  .#{$block-class}__container .#{$carbon-prefix}--dropdown-list,
+  .#{$block-class}__container .#{$carbon-prefix}--number input[type='number'],
+  .#{$block-class}__container .#{$carbon-prefix}--date-picker__input {
     background-color: $field-02;
   }
 

package/scss/components/Tearsheet/_tearsheet.scss

@@ -47,6 +47,10 @@
       transition: visibility 0s linear,
         background-color $motion-duration motion(entrance, expressive),
         opacity $motion-duration motion(entrance, expressive);
+      @media (prefers-reduced-motion: reduce) {
+        // stylelint-disable-next-line carbon/motion-token-use
+        transition: none;
+      }
     }
 
     &.#{$block-class}--stacked-1-of-2 {

package/scss/components/_index.scss

@@ -25,7 +25,6 @@
 @import './ExpressiveCard/index';
 @import './HTTPErrors/index';
 @import './ImportModal/index';
-@import './LoadingBar/index';
 @import './ModifiedTabs/index';
 @import './MultiAddSelect/index';
 @import './NotificationsPanel/index';