@carbon/ibm-products 1.8.0 → 1.9.0

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

@@ -47,6 +47,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 +77,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 +116,23 @@
     justify-content: space-between;
   }
 
+  // columns
+
+  .#{$block-class}__columns {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .#{$block-class}__columns .#{$block-class}__selections-cell {
+    // stylelint-disable-next-line
+    padding: 0 $spacing-05 !important;
+  }
+
+  .#{$block-class}__column {
+    padding: $spacing-05;
+    border-right: $ui-03;
+  }
+
   // overrides
 
   // the influencer sidebar needs to be even with the buttons
@@ -97,6 +141,10 @@
     flex: 0 0 50%;
   }
 
+  .#{$block-class} .#{$tearsheet-class}__header-description {
+    color: $text-02;
+  }
+
   .#{$block-class} .#{$block-class}__items-label {
     @include carbon--type-style('productive-heading-01');
   }
@@ -112,6 +160,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 +174,7 @@
     cursor: pointer;
   }
 
-  .#{$carbon-prefix}--accordion__item {
+  .#{$block-class} .#{$carbon-prefix}--accordion__item {
     &:hover .#{$block-class}__sidebar-accordion-title button {
       opacity: 1;
     }
@@ -131,6 +183,10 @@
       opacity: 0;
     }
   }
+
+  .#{$block-class} .#{$carbon-prefix}--checkbox-label-text {
+    padding-left: $spacing-05;
+  }
 }
 
 @include exports('add-select') {

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/DataSpreadsheet/_data-spreadsheet.scss

@@ -87,6 +87,7 @@
     }
     .#{$block-class}__active-cell--highlight {
       position: absolute;
+      z-index: 2;
       border: $spacing-01 solid $interactive-01;
       background-color: transparent;
       &:focus {
@@ -94,6 +95,23 @@
         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;
+      }
+    }
   }
 }
 

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

@@ -289,12 +289,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;
     }
 

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)

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/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);
+}