@carbon/ibm-products 1.9.0 → 1.11.1

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

@@ -35,10 +35,6 @@
       position: relative;
     }
 
-    button.#{$block-class}__td {
-      margin: 0;
-      background-color: transparent;
-    }
     .#{$block-class}__tr {
       :last-child {
         .#{$block-class}__td {
@@ -60,22 +56,25 @@
       border-right: 1px solid $text-03;
     }
     .#{$block-class}__th,
-    button.#{$block-class}__td-th {
+    .#{$block-class}__td-th.#{$block-class}__td {
       @include set-header-borders();
 
       background-color: $ui-01;
       cursor: pointer;
     }
-    .#{$block-class}__td-th {
+    .#{$block-class}__td-th.#{$block-class}__td {
       @include carbon--font-weight('semibold');
 
       display: flex;
       align-items: center;
       justify-content: flex-end;
     }
+
     .#{$block-class}__td {
       @include set-body-borders();
 
+      margin: 0;
+      background-color: $ui-background;
       cursor: cell;
       text-align: left;
     }
@@ -85,11 +84,25 @@
       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: 2;
+      z-index: 3;
+      display: none;
       border: $spacing-01 solid $interactive-01;
       background-color: transparent;
+
       &:focus {
         border: $spacing-01 solid $interactive-01;
         outline: 0;
@@ -100,6 +113,7 @@
       z-index: 2;
       border: 1px solid $interactive-01;
       pointer-events: none;
+
       &::before {
         position: absolute;
         top: 0;
@@ -112,6 +126,10 @@
         opacity: 0.25;
       }
     }
+    .#{$block-class}__th--active-header,
+    .#{$block-class}__td-th--active-header.#{$block-class}__td {
+      background-color: $ui-03;
+    }
   }
 }
 

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;
@@ -81,7 +65,9 @@
 
     position: relative;
     display: inline-block;
-    // min-width: 250px; // similar to min input box with room for toolbar
+    // A standard input box is based on size (often around 150px)
+    // In our case there are potentially 2 * size buttons which we double
+    min-width: calc(4 * var(--#{$block-class}--size));
     max-width: 100%;
     height: var(--#{$block-class}--size);
     background-color: var(--#{$block-class}--background-color);
@@ -119,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
-      min-width: calc(100% - 3 * var(--#{$block-class}--size) - $spacing-05);
-      max-width: calc(100% - 3 * 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(3 * 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
@@ -134,6 +121,11 @@
       }
     }
 
+    &.#{$block-class}--invalid .#{$block-class}__input {
+      // add space for validation
+      --#{$block-class}--toolbar-width: calc(3 * var(--#{$block-class}--size));
+    }
+
     .#{$block-class}__input::after {
       position: absolute;
       top: 0;
@@ -192,23 +184,27 @@
     }
 
     .#{$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(3 * var(--#{$block-class}--size));
+      width: var(--#{$block-class}--toolbar-width);
       height: 100%;
       justify-content: space-between;
       cursor: text;
     }
 
+    &.#{$block-class}--invalid .#{$block-class}__after-input-elements {
+      // width: room for validation, and two buttons
+      --#{$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 {
@@ -262,23 +258,38 @@
     &.#{$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 {
       @include input-button-defaults($block-class);
-
       // pointer-events: none;
-
       &:hover,
       &:active,
       &:focus {
@@ -309,10 +320,6 @@
       @include input-button-defaults($block-class);
     }
 
-    &.#{$block-class}--warn .#{$block-class}__validation-icon {
-      color: $support-warning;
-    }
-
     &.#{$block-class}--invalid .#{$block-class}__validation-icon {
       color: $support-error;
     }

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

@@ -15,6 +15,7 @@
 }
 
 $block-class: #{$pkg-prefix}--inline-edit;
+
 .component-full-width {
   .#{$block-class} {
     width: 100%;

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

@@ -26,6 +26,7 @@
       // stylelint-disable-next-line carbon/layout-token-use
       transform: translateY(-38.5rem); // the height of the notification panel
     }
+
     100% {
       opacity: 1;
       transform: translateY(0);
@@ -37,6 +38,7 @@
       opacity: 1;
       transform: translateY(0);
     }
+
     100% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -181,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);
             }
           }
@@ -204,6 +210,7 @@
         padding: 0;
         color: $text-01;
         opacity: 0;
+
         &:hover,
         &:focus {
           opacity: 1;

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

@@ -41,6 +41,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   from {
     background-color: var(--from-color);
   }
+
   to {
     background-color: var(--to-color);
   }
@@ -50,6 +51,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     background-color: var(--from-color);
     box-shadow: 0 1px 0 var(--from-color);
   }
+
   to {
     background-color: var(--to-color);
     box-shadow: 0 1px 0 var(--to-color-shadow);
@@ -207,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;
@@ -251,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

@@ -31,6 +31,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       // stylelint-disable-next-line carbon/layout-token-use
       transform: translateX(#{$size}); // the size width of the side panel
     }
+
     100% {
       opacity: 1;
       transform: translateX(0);
@@ -45,6 +46,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       // stylelint-disable-next-line carbon/layout-token-use
       transform: translateX(-#{$size}); // the size width of the side panel
     }
+
     100% {
       opacity: 1;
       transform: translateX(0);
@@ -56,8 +58,8 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
   $placement: 'right',
   $size: map-get($side-panel-sizes, md)
 ) {
-  min-width: $size;
-  max-width: $size;
+  width: $size;
+  max-width: 100%;
   @if $placement == right {
     @include sidePanelEntranceRight($size);
   } @else {
@@ -66,8 +68,8 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
 }
 
 @mixin setPanelSize($size: map-get($side-panel-sizes, md)) {
-  min-width: $size;
-  max-width: $size;
+  width: $size;
+  max-width: 100%;
 }
 
 @mixin setDividerStyles() {
@@ -95,6 +97,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       opacity: 1;
       transform: translateX(0);
     }
+
     100% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -107,6 +110,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       opacity: 1;
       transform: translateX(0);
     }
+
     100% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -183,6 +187,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       );
       padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
       background-color: $ui-01;
+
       &::before {
         @include setDividerStyles();
       }
@@ -442,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;
   }
 
@@ -457,6 +462,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     0% {
       opacity: 0;
     }
+
     100% {
       opacity: 1;
     }
@@ -466,6 +472,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     0% {
       opacity: 1;
     }
+
     100% {
       opacity: 0;
     }

package/scss/components/StatusIcon/_status-icon.scss

@@ -82,6 +82,7 @@ $block-class: #{$pkg-prefix}--status-icon;
   0% {
     transform: scaleY(-1) rotate(360deg);
   }
+
   100% {
     transform: scaleY(-1) rotate(0deg);
   }

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/UserProfileImage/_user-profile-image.scss

@@ -66,6 +66,15 @@ $theme-keys: map-keys($themes);
     }
   }
 
+  .#{$carbon-prefix}--tooltip__trigger.#{$block-class}__tooltip {
+    &:hover,
+    &:focus {
+      svg {
+        fill: $ui-01;
+      }
+    }
+  }
+
   .#{$block-class} {
     display: flex;
     flex-direction: column;

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

@@ -10,6 +10,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
     // stylelint-disable-next-line carbon/layout-token-use
     transform: translateX(#{$web-terminal-width});
   }
+
   100% {
     opacity: 1;
     transform: translateX(0);
@@ -21,6 +22,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
     opacity: 1;
     transform: translateX(0);
   }
+
   100% {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-token-use

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';