@carbon/ibm-products 1.6.1 → 1.9.0

package/scss/components/{CancelableTextEdit → ActionBar}/_storybook-styles.scss

@@ -1,8 +1,8 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// 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.
 //
 
-// TODO: add any additional styles used by CancelableTextEdit.stories.js
+@import '../../global/styles/display-box';

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

@@ -6,15 +6,13 @@
 //
 
 @import '../../global/styles/project-settings';
+@import '../../global/styles/display-box';
 
 $block-class: #{$pkg-prefix}--action-set;
 
 .#{$block-class}__story-container {
   width: 96vw;
   min-height: 3rem;
-  border: 1px solid $decorative-01;
-  margin: $spacing-04 auto 0;
-  box-shadow: 0 0 10px 5px $ui-04;
 }
 
 .#{$block-class}__story-container--xlg {

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,60 @@
     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 {
+    background: $disabled-02;
+  }
+
+  .#{$block-class} .#{$block-class}__sidebar-accordion-title {
+    display: flex;
+    align-items: center;
+    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
@@ -87,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');
   }
@@ -102,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 {
@@ -111,6 +173,20 @@
   .#{$block-class} .#{$carbon-prefix}--breadcrumb .#{$carbon-prefix}--link {
     cursor: pointer;
   }
+
+  .#{$block-class} .#{$carbon-prefix}--accordion__item {
+    &:hover .#{$block-class}__sidebar-accordion-title button {
+      opacity: 1;
+    }
+
+    .#{$block-class}__sidebar-accordion-title button {
+      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

@@ -0,0 +1,120 @@
+//
+// 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.
+//
+
+// Standard imports.
+@import '../../global/styles/project-settings';
+@import '../../global/styles/mixins';
+
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin set-header-borders {
+  border-right: 1px solid $text-03;
+  border-bottom: 1px solid $text-03;
+}
+@mixin set-body-borders {
+  border-right: 1px solid $ui-03;
+  border-bottom: 1px solid $ui-03;
+}
+@mixin data-spreadsheet {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--data-spreadsheet;
+
+  .#{$block-class} {
+    display: inline-block;
+    border-spacing: 0;
+
+    &.#{$block-class}__container-has-focus {
+      outline: 2px solid $inverse-link;
+    }
+
+    .#{$block-class}__header--container {
+      position: relative;
+    }
+
+    button.#{$block-class}__td {
+      margin: 0;
+      background-color: transparent;
+    }
+    .#{$block-class}__tr {
+      :last-child {
+        .#{$block-class}__td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .#{$block-class}__th,
+    .#{$block-class}__td {
+      // height: 2.25rem; // update to be controlled by cellSize prop later
+      padding: 0 $spacing-03;
+      border: 0;
+      margin: 0;
+      color: $text-01;
+    }
+    .#{$block-class}__th:last-child,
+    .#{$block-class}__td:last-child {
+      border-right: 1px solid $text-03;
+    }
+    .#{$block-class}__th,
+    button.#{$block-class}__td-th {
+      @include set-header-borders();
+
+      background-color: $ui-01;
+      cursor: pointer;
+    }
+    .#{$block-class}__td-th {
+      @include carbon--font-weight('semibold');
+
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .#{$block-class}__td {
+      @include set-body-borders();
+
+      cursor: cell;
+      text-align: left;
+    }
+    .#{$block-class}__th {
+      @include carbon--type-style('productive-heading-01');
+
+      color: $text-01;
+      text-align: left;
+    }
+    .#{$block-class}__active-cell--highlight {
+      position: absolute;
+      z-index: 2;
+      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;
+      }
+    }
+  }
+}
+
+@include exports('data-spreadsheet') {
+  @include data-spreadsheet;
+}

package/scss/components/{CancelableTextEdit → DataSpreadsheet}/_index.scss

@@ -1,8 +1,8 @@
 //
-// Copyright IBM Corp. 2021, 2021
+// 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 './cancelable-text-edit';
+@import './data-spreadsheet';

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

@@ -0,0 +1,6 @@
+//
+// 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.
+//

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

@@ -89,6 +89,7 @@
     transition: background-color $duration--fast-01 motion(entrance, productive),
       box-shadow $duration--fast-01 motion(entrance, productive),
       border-color $duration--fast-01 motion(entrance, productive);
+    vertical-align: middle; // mis-aligned items cause height to grow beyond setting.
 
     white-space: nowrap;
 
@@ -102,16 +103,17 @@
       --#{$block-class}--icon-size: #{$spacing-05};
     }
 
+    &.#{$block-class}--invalid {
+      // editing takes precedence over invalid
+      @include input-outline($support-01);
+    }
+
     &.#{$block-class}--editing {
       @include input-outline($focus);
 
       background-color: $ui-01;
     }
 
-    .#{$block-class}--invalid {
-      @include input-outline($support-01);
-    }
-
     .#{$block-class}__input {
       display: inline-block;
       overflow: hidden;
@@ -137,10 +139,13 @@
       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 {
@@ -179,9 +184,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 {
@@ -282,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/components/_index.scss

@@ -43,5 +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);
+}