@carbon/ibm-products 1.7.0 → 1.10.0

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

@@ -26,15 +26,18 @@
   .#{$block-class} {
     display: inline-block;
     border-spacing: 0;
-    // border: 1px solid black;
 
-    button.#{$block-class}__td {
-      margin: 0;
-      background-color: transparent;
+    &.#{$block-class}__container-has-focus {
+      outline: 2px solid $inverse-link;
     }
+
+    .#{$block-class}__header--container {
+      position: relative;
+    }
+
     .#{$block-class}__tr {
       :last-child {
-        .td {
+        .#{$block-class}__td {
           border-bottom: 0;
         }
       }
@@ -42,7 +45,7 @@
 
     .#{$block-class}__th,
     .#{$block-class}__td {
-      height: 2.25rem; // update to be controlled by cellSize prop later
+      // height: 2.25rem; // update to be controlled by cellSize prop later
       padding: 0 $spacing-03;
       border: 0;
       margin: 0;
@@ -53,15 +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 {
+      @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: transparent;
       cursor: cell;
       text-align: left;
     }
@@ -71,6 +84,39 @@
       color: $text-01;
       text-align: left;
     }
+    .#{$block-class}__active-cell--highlight {
+      position: absolute;
+      z-index: 3;
+      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/InlineEdit/_inline-edit.scss

@@ -81,7 +81,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 +121,11 @@
       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% - 2 * var(--#{$block-class}--size) - $spacing-05);
+      max-width: calc(100% - 2 * var(--#{$block-class}--size) - $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: calc(2 * var(--#{$block-class}--size));
       // room for toolbar
       margin-left: $spacing-05;
       // stylelint-disable-next-line carbon/type-token-use
@@ -134,15 +136,26 @@
       }
     }
 
+    &.#{$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}__input::after {
       position: absolute;
       top: 0;
       left: 0;
       display: block;
+      overflow: hidden;
+      width: 0;
       margin-left: $spacing-05;
       color: $text-05;
       content: attr(data-placeholder);
       opacity: 0;
+      visibility: hidden;
     }
 
     .#{$block-class}__ellipsis {
@@ -181,9 +194,11 @@
     }
 
     .#{$block-class}__input--empty::after {
+      width: initial;
       opacity: 1;
       // only transition fade in
       transition: opacity $duration--moderate-02 motion(standard, productive);
+      visibility: visible;
     }
 
     .#{$block-class}__after-input-elements {
@@ -193,12 +208,17 @@
       right: 0;
       display: flex;
       // width: room for validation, and two buttons
-      width: calc(3 * var(--#{$block-class}--size));
+      width: calc(2 * var(--#{$block-class}--size));
       height: 100%;
       justify-content: space-between;
       cursor: text;
     }
 
+    &.#{$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--animation {
       // makes room for the top clip text but hides the side overflow
       clip-path: --tooltip-top-bottom-safe-clip();
@@ -271,9 +291,7 @@
 
     &.#{$block-class}.#{$block-class} .#{$block-class}__edit {
       @include input-button-defaults($block-class);
-
       // pointer-events: none;
-
       &:hover,
       &:active,
       &:focus {
@@ -284,12 +302,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;
     }
 
@@ -297,10 +322,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;

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
@@ -204,6 +206,7 @@
         padding: 0;
         color: $text-01;
         opacity: 0;
+
         &:hover,
         &:focus {
           opacity: 1;

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

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();
       }
@@ -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/TagSet/_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/Tearsheet/_tearsheet.scss

@@ -152,8 +152,7 @@
     }
 
     &.#{$block-class}--wide .#{$block-class}__header--with-close-icon {
-      padding-right: $spacing-05;
-      margin-right: $spacing-09;
+      padding-right: $spacing-10;
     }
 
     .#{$block-class}__header-content {

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

@@ -43,6 +43,5 @@
 @import './UserProfileImage/index';
 @import './EditSidePanel/index';
 @import './OptionsTile/index';
-@import './CancelableTextEdit/index';
 @import './InlineEdit/index';
 @import './DataSpreadsheet/index';

package/scss/global/styles/_display-box.scss

@@ -0,0 +1,62 @@
+//
+// 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/project-settings';
+
+$block-class: 'ccs-sb--display-box';
+
+$indicator-width: $spacing-02;
+$indicator-height: $spacing-04;
+
+/**
+  Adds a box indicating the extent of the available space to the displayed component
+*/
+.#{$block-class} {
+  position: relative;
+  display: inline-block;
+  padding-top: $spacing-05; // space for the indicators
+  color: $text-05;
+}
+
+.#{$block-class}__indicator {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  border-bottom: 1px solid $text-05;
+  white-space: nowrap;
+  @include carbon--type-style('helper-text-01');
+}
+
+.#{$block-class}__message {
+  position: absolute;
+  bottom: $spacing-02;
+}
+
+.sb-main-centered .#{$block-class}__message {
+  left: 50%;
+  min-width: 100vh;
+  text-align: center;
+  transform: translateX(-50%);
+}
+
+.#{$block-class}__indicator--left,
+.#{$block-class}__indicator--right {
+  position: absolute;
+  bottom: calc(-1 * $indicator-height);
+  width: 0;
+  height: 0;
+  border-top: $indicator-height solid $text-05;
+  border-right: $indicator-width solid transparent;
+  border-left: $indicator-width solid transparent;
+}
+
+.#{$block-class}__indicator--left {
+  left: calc(-1 * $indicator-width);
+}
+
+.#{$block-class}__indicator--right {
+  right: calc(-1 * $indicator-width);
+}