@carbon/ibm-products 1.10.0 → 1.11.0

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 {

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,29 @@
     &.#{$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);
+      }
     }
 
     &.#{$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/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;
   }