@carbon/ibm-products 1.8.0 → 1.11.0

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

@@ -24,19 +24,11 @@
     padding: $spacing-05;
   }
 
-  .#{$block-class}__items-label {
-    margin-right: $spacing-03;
-
-    &-container {
-      display: flex;
-      align-items: center;
-      margin-top: $spacing-05;
-      margin-bottom: $spacing-03;
-    }
-  }
-
   .#{$block-class}__selections {
-    border-top: 1px solid $ui-03;
+    &.#{$carbon-prefix}--structured-list {
+      border-top: 1px solid $ui-03;
+      margin-bottom: 0;
+    }
 
     &-wrapper {
       display: block;
@@ -47,6 +39,18 @@
       align-items: center;
       justify-content: space-between;
     }
+
+    &-cell-title {
+      display: block;
+      color: $text-01;
+    }
+
+    &-cell-subtitle {
+      @include carbon--type-style('label-01');
+
+      display: block;
+      color: $text-02;
+    }
   }
 
   // sidebar
@@ -65,18 +69,33 @@
     margin-right: $spacing-03;
   }
 
+  .#{$block-class}__sidebar-selected-item {
+    &-title {
+      color: $text-01;
+    }
+
+    &-subtitle {
+      @include carbon--type-style('label-01');
+
+      color: $text-02;
+    }
+  }
+
   .#{$block-class}__sidebar-body {
     padding: $spacing-05;
   }
 
   .#{$block-class} .#{$block-class}__sidebar-item-header {
     @include carbon--type-style('label-01');
+
+    margin-bottom: $spacing-03;
+    color: $text-02;
   }
 
   .#{$block-class} .#{$block-class}__sidebar-item-body {
     @include carbon--type-style('body-long-01');
 
-    margin-bottom: $spacing-03;
+    margin-bottom: $spacing-05;
   }
 
   .#{$block-class} .#{$block-class}__sidebar-item-remove-button:hover {
@@ -89,6 +108,55 @@
     justify-content: space-between;
   }
 
+  // columns
+
+  .#{$block-class}__columns {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+  }
+
+  .#{$block-class}__columns .#{$block-class}__selections-cell {
+    // stylelint-disable-next-line
+    padding: 0 !important;
+  }
+
+  .#{$block-class}__column {
+    overflow: auto;
+    max-width: 15rem;
+    flex: 1 0 15rem;
+    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 {
+    display: flex;
+    align-items: center;
+    margin-top: $spacing-05;
+    margin-bottom: $spacing-03;
+
+    &-label {
+      margin-right: $spacing-03;
+    }
+  }
+
   // overrides
 
   // the influencer sidebar needs to be even with the buttons
@@ -97,6 +165,15 @@
     flex: 0 0 50%;
   }
 
+  .#{$block-class} .#{$tearsheet-class}__header-description {
+    color: $text-02;
+  }
+
+  .#{$block-class} .#{$tearsheet-class} .#{$tearsheet-class}__content {
+    display: flex;
+    flex-direction: column;
+  }
+
   .#{$block-class} .#{$block-class}__items-label {
     @include carbon--type-style('productive-heading-01');
   }
@@ -112,6 +189,10 @@
     padding-bottom: $spacing-05;
   }
 
+  .#{$block-class} .#{$carbon-prefix}--radio-button__appearance {
+    margin: 0 $spacing-05 0 0;
+  }
+
   .#{$block-class}
     .#{$carbon-prefix}--radio-button-wrapper
     .#{$carbon-prefix}--radio-button__label {
@@ -122,7 +203,7 @@
     cursor: pointer;
   }
 
-  .#{$carbon-prefix}--accordion__item {
+  .#{$block-class} .#{$carbon-prefix}--accordion__item {
     &:hover .#{$block-class}__sidebar-accordion-title button {
       opacity: 1;
     }
@@ -131,6 +212,10 @@
       opacity: 0;
     }
   }
+
+  .#{$block-class} .#{$carbon-prefix}--checkbox-label-text {
+    padding-left: $spacing-05;
+  }
 }
 
 @include exports('add-select') {

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/BreadcrumbWithOverflow/_storybook-styles.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2022, 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.
+//
+
+@import '../../global/styles/display-box';

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

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2022, 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.
+//
+
+@import '../../global/styles/display-box';

package/scss/components/CreateInfluencer/_create-influencer.scss

@@ -19,6 +19,7 @@
       // stylelint-disable-next-line carbon/layout-token-use
       transform: translateX($influencerAnimationStart);
     }
+
     100% {
       opacity: 1;
       transform: translateX(0);
@@ -29,6 +30,7 @@
       opacity: 1;
       transform: translateX(0);
     }
+
     100% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use

package/scss/components/CreateModal/_create-modal.scss

@@ -70,6 +70,7 @@
 
   .#{$pkg-prefix}--create-modal__form > * {
     margin-bottom: $spacing-05;
+
     &:last-child {
       margin-bottom: 0;
     }

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/CreateTearsheet/_create-tearsheet.scss

@@ -29,6 +29,7 @@
       // stylelint-disable-next-line carbon/layout-token-use
       transform: translateY(-0.75rem);
     }
+
     100% {
       opacity: 1;
       transform: translateY(0);

package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss

@@ -47,6 +47,7 @@
 
   .#{$block-class} .#{$block-class}__form > * {
     margin-bottom: $spacing-05;
+
     &:last-child {
       margin-bottom: 0;
     }

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,15 +84,52 @@
       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;
+
       &:focus {
         border: $spacing-01 solid $interactive-01;
         outline: 0;
       }
     }
+    .#{$block-class}__selection-area--element {
+      position: absolute;
+      z-index: 2;
+      border: 1px solid $interactive-01;
+      pointer-events: none;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: $interactive-01;
+        content: '';
+        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,34 @@
     &.#{$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 {
       @include input-button-defaults($block-class);
-
       // pointer-events: none;
-
       &:hover,
       &:active,
       &:focus {
@@ -289,12 +296,19 @@
       }
     }
 
-    .#{$block-class}__edit--hover-visible {
-      opacity: 0;
-      transition: opacity $duration--fast-01 motion(entrance, productive);
+    @media (hover: hover) {
+      // if hover is the primary input mechanism hide edit button
+      .#{$block-class}__edit {
+        opacity: 0;
+        transition: opacity $duration--fast-01 motion(entrance, productive);
+      }
+
+      &:hover .#{$block-class}__edit {
+        opacity: 1;
+      }
     }
 
-    &:hover .#{$block-class}__edit--hover-visible {
+    .#{$block-class}__edit--always-visible {
       opacity: 1;
     }
 
@@ -302,10 +316,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

@@ -6,6 +6,7 @@
 //
 
 @import '../../global/styles/project-settings';
+@import '../../global/styles/display-box';
 
 .inline-edit-stories__viewport {
   // width: 300px; // larger than standard size needed by text input at standard font size (html input attribute size)
@@ -14,6 +15,7 @@
 }
 
 $block-class: #{$pkg-prefix}--inline-edit;
+
 .component-full-width {
   .#{$block-class} {
     width: 100%;

package/scss/components/LoadingBar/_loading-bar.scss

@@ -23,41 +23,49 @@ $loading-bar__small-height: 4px;
       left: 0;
       width: 0%;
     }
+
     20% {
       right: auto;
       left: 0;
       width: 100%;
     }
+
     28% {
       right: 0;
       left: auto;
       width: 100%;
     }
+
     51% {
       right: 0;
       left: auto;
       width: 0%;
     }
+
     58% {
       right: 0;
       left: auto;
       width: 0%;
     }
+
     82% {
       right: 0;
       left: auto;
       width: 100%;
     }
+
     83% {
       right: auto;
       left: 0;
       width: 100%;
     }
+
     96% {
       right: auto;
       left: 0;
       width: 0%;
     }
+
     100% {
       right: auto;
       left: 0;
@@ -71,6 +79,7 @@ $loading-bar__small-height: 4px;
       left: 0;
       width: 0%;
     }
+
     100% {
       right: auto;
       left: 0;
@@ -84,11 +93,13 @@ $loading-bar__small-height: 4px;
       left: 0;
       width: 0%;
     }
+
     92% {
       right: auto;
       left: 0;
       width: 100%;
     }
+
     100% {
       right: auto;
       left: 0;
@@ -100,9 +111,11 @@ $loading-bar__small-height: 4px;
     0% {
       opacity: 1;
     }
+
     92% {
       opacity: 1;
     }
+
     100% {
       display: none;
       opacity: 0;