@carbon/ibm-products 1.4.0 → 1.7.0

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

@@ -37,28 +37,58 @@
 
   .#{$block-class}__selections {
     border-top: 1px solid $ui-03;
+
+    &-wrapper {
+      display: block;
+    }
+
+    &-cell-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
   }
 
-  // multi select specific
+  // sidebar
 
-  .#{$block-class}__influencer-header {
+  .#{$block-class}__sidebar-header {
     display: flex;
     padding: $spacing-06 $spacing-05 $spacing-03 $spacing-05;
     border-bottom: 1px solid $ui-03;
 
-    .#{$block-class}__influencer-title {
+    .#{$block-class}__sidebar-title {
       @include carbon--type-style('productive-heading-02');
     }
   }
 
-  .#{$block-class}__influencer-title {
+  .#{$block-class}__sidebar-title {
     margin-right: $spacing-03;
   }
 
-  .#{$block-class}__influencer-body {
+  .#{$block-class}__sidebar-body {
     padding: $spacing-05;
   }
 
+  .#{$block-class} .#{$block-class}__sidebar-item-header {
+    @include carbon--type-style('label-01');
+  }
+
+  .#{$block-class} .#{$block-class}__sidebar-item-body {
+    @include carbon--type-style('body-long-01');
+
+    margin-bottom: $spacing-03;
+  }
+
+  .#{$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;
+  }
+
   // overrides
 
   // the influencer sidebar needs to be even with the buttons
@@ -77,6 +107,30 @@
     p {
     padding-right: 0;
   }
+
+  .#{$block-class} .#{$carbon-prefix}--structured-list-td {
+    padding-bottom: $spacing-05;
+  }
+
+  .#{$block-class}
+    .#{$carbon-prefix}--radio-button-wrapper
+    .#{$carbon-prefix}--radio-button__label {
+    justify-content: left;
+  }
+
+  .#{$block-class} .#{$carbon-prefix}--breadcrumb .#{$carbon-prefix}--link {
+    cursor: pointer;
+  }
+
+  .#{$carbon-prefix}--accordion__item {
+    &:hover .#{$block-class}__sidebar-accordion-title button {
+      opacity: 1;
+    }
+
+    .#{$block-class}__sidebar-accordion-title button {
+      opacity: 0;
+    }
+  }
 }
 
 @include exports('add-select') {

package/scss/components/BreadcrumbWithOverflow/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './breadcrumb-with-overflow.scss';
+@import './breadcrumb-with-overflow';

package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss

@@ -120,6 +120,7 @@
     .#{$block-class}__main {
       position: relative;
       display: inline-flex;
+      width: 100%;
       min-height: var(--size);
       vertical-align: top;
     }

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

@@ -5,11 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
-
 // TODO: add any additional styles used by CancelableTextEdit.stories.js
-
-// Uncomment next line (which must appear last) to test in storybook
-// that the SCSS styles for this component are sufficiently specific
-// to override Carbon whichever order the styles get loaded in.
-//@import 'carbon-components/css/carbon-components.min';

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

@@ -13,7 +13,7 @@
   $block-class: #{$pkg-prefix}--create-influencer;
   $create-tearsheet-block-class: #{$pkg-prefix}--tearsheet-create;
   $influencerAnimationStart: calc(-1 * #{$spacing-05});
-  @keyframes influencerMenuEntrance {
+  @keyframes influencer-menu-entrance {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -24,7 +24,7 @@
       transform: translateX(0);
     }
   }
-  @keyframes influencerMenuExit {
+  @keyframes influencer-menu-exit {
     0% {
       opacity: 1;
       transform: translateX(0);
@@ -60,7 +60,7 @@
   .#{$block-class}__side-nav-opening,
   .#{$block-class}__progress-indicator-opening {
     // stylelint-disable-next-line carbon/motion-token-use
-    animation: influencerMenuEntrance $duration--moderate-02 1;
+    animation: influencer-menu-entrance $duration--moderate-02 1;
     animation-fill-mode: forwards;
     @include carbon--motion(entrance, productive);
   }
@@ -68,7 +68,7 @@
   .#{$block-class}__side-nav-closing,
   .#{$block-class}__progress-indicator-closing {
     // stylelint-disable-next-line carbon/motion-token-use
-    animation: influencerMenuExit $duration--moderate-02 1;
+    animation: influencer-menu-exit $duration--moderate-02 1;
     animation-fill-mode: forwards;
     @include carbon--motion(exit, productive);
   }

package/scss/components/CreateTearsheet/_create-tearsheet.scss

@@ -23,7 +23,7 @@
 @import '../CreateInfluencer/index';
 
 @mixin create-tearsheet {
-  @keyframes stepContentEntrance {
+  @keyframes step-content-entrance {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -50,7 +50,7 @@
   }
 
   .#{$block-class} .#{$step-block-class}__step--visible-step {
-    animation: $duration--slow-01 stepContentEntrance;
+    animation: $duration--slow-01 step-content-entrance;
     animation-fill-mode: forwards;
     animation-timing-function: $carbon--standard-easing;
     opacity: 0;

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

@@ -5,14 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
 @import '../../global/styles/project-settings';
 
-// Uncomment next line (which must appear last) to test in storybook
-// that the SCSS styles for this component are sufficiently specific
-// to override Carbon whichever order the styles get loaded in.
-//@import 'carbon-components/css/carbon-components.min';
-
 $story-class: #{$pkg-prefix}--create-tearsheet-narrow--story;
 
 .#{$story-class}__flex-container {

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

@@ -0,0 +1,79 @@
+//
+// 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;
+    // border: 1px solid black;
+
+    button.#{$block-class}__td {
+      margin: 0;
+      background-color: transparent;
+    }
+    .#{$block-class}__tr {
+      :last-child {
+        .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 {
+      @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;
+    }
+  }
+}
+
+@include exports('data-spreadsheet') {
+  @include data-spreadsheet;
+}

package/scss/components/DataSpreadsheet/_index.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 './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/EditSidePanel/_storybook-styles.scss

@@ -5,9 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
-
-// TODO: add any additional styles used by EditSidePanel.stories.js
 @import '../../global/styles/project-settings';
 
 $block-class: #{$pkg-prefix}--edit-side-panel;
@@ -28,8 +25,3 @@ $story-prefix: edit-side-panel-stories__;
 .#{$block-class} .#{$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }
-
-// Uncomment next line (which must appear last) to test in storybook
-// that the SCSS styles for this component are sufficiently specific
-// to override Carbon whichever order the styles get loaded in.
-//@import 'carbon-components/css/carbon-components.min';

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

@@ -18,24 +18,302 @@
 // InlineEdit uses the following Carbon for IBM Products components:
 // TODO: @import(s) of IBM Products component styles used by InlineEdit
 
+// cut down version borrowed from 'carbon-components/scss/globals/scss/vendor/@carbon/styles/scss/utilities/focus-outline';
+@mixin input-outline($color: $focus) {
+  outline: $spacing-01 solid $color;
+  outline-offset: calc(-1 * $spacing-01);
+
+  @media screen and (prefers-contrast) {
+    outline-style: dotted;
+  }
+}
+
+@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);
+  height: 100%;
+  min-height: initial;
+  max-height: var(--#{$block-class}--size);
+
+  // stylelint-disable-next-line carbon/layout-token-use
+  padding: calc(
+    0.5 * (var(--#{$block-class}--size) - var(--#{$block-class}--icon-size)) - #{$spacing-01}
+  );
+  border: 2px solid transparent;
+}
+
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.
 @mixin inline-edit {
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--inline-edit;
 
-  .#{$block-class} {
-    display: inline-flex;
-    align-content: center;
-  }
+  @include block-wrap($block-class) {
+    --#{$block-class}--size: #{$spacing-08};
+    --#{$block-class}--icon-size: #{$spacing-05};
+    --#{$block-class}--background-color: #{$ui-01};
 
-  .#{$block-class} .#{$block-class}__value {
-    display: flex;
-    align-items: center;
-  }
+    &.#{$block-class}--light {
+      --#{$block-class}--background-color: transparent;
+    }
+
+    &:hover {
+      --#{$block-class}--background-color: #{$hover-field};
+      // background-color: $background-color;
+    }
+
+    position: relative;
+    display: inline-block;
+    // min-width: 250px; // similar to min input box with room for toolbar
+    max-width: 100%;
+    height: var(--#{$block-class}--size);
+    background-color: var(--#{$block-class}--background-color);
+    cursor: text; // appear to be part of the text box
+    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;
+
+    &.#{$block-class}--sm {
+      --#{$block-class}--size: #{$spacing-07};
+      --#{$block-class}--icon-size: #{$spacing-05};
+    }
+
+    &.#{$block-class}--lg {
+      --#{$block-class}--size: #{$spacing-09};
+      --#{$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}__input {
+      display: inline-block;
+      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);
+      min-height: var(--#{$block-class}--size);
+      // stylelint-disable-next-line carbon/layout-token-use
+      margin-right: calc(3 * var(--#{$block-class}--size));
+      // room for toolbar
+      margin-left: $spacing-05;
+      // stylelint-disable-next-line carbon/type-token-use
+      line-height: var(--#{$block-class}--size);
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .#{$block-class}__input::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      margin-left: $spacing-05;
+      color: $text-05;
+      content: attr(data-placeholder);
+      opacity: 0;
+    }
+
+    .#{$block-class}__ellipsis {
+      display: inline-block;
+      overflow: hidden;
+      width: 0;
+      height: var(--#{$block-class}--size);
+      // stylelint-disable-next-line carbon/type-token-use
+      line-height: var(--#{$block-class}--size);
+      opacity: 0;
+      pointer-events: none;
+
+      // only transition fade in
+      transition: opacity $duration--moderate-02 motion(standard, productive);
+    }
+
+    &.#{$block-class}--overflows:not(.#{$block-class}--editing)
+      .#{$block-class}__ellipsis {
+      width: initial;
+      opacity: 1;
+    }
+
+    .#{$block-class}__disabled-cover {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none; // act as if not there
+    }
+
+    &.#{$block-class}--disabled .#{$block-class}__disabled-cover {
+      // when disabled prevent pointer events going through to the input
+      cursor: not-allowed;
+      pointer-events: all;
+    }
+
+    .#{$block-class}__input--empty::after {
+      opacity: 1;
+      // only transition fade in
+      transition: opacity $duration--moderate-02 motion(standard, productive);
+    }
+
+    .#{$block-class}__after-input-elements {
+      // 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));
+      height: 100%;
+      justify-content: space-between;
+      cursor: text;
+    }
+
+    .#{$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
+    }
+
+    &.#{$block-class}--editing .#{$block-class}__toolbar::after {
+      // cover top and bottom when focus within block
+      // doing the same on the buttons is problematic when animating
+      // and causes visual artifacts when the button is hovered without focus
+      // as the buttons leave a 45% join between sides with transparent borders and top/bottom with $focus
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      border: 2px solid $focus;
+      border-left: 0;
+      content: '';
+      pointer-events: none;
+    }
+
+    &.#{$block-class}.#{$block-class} .#{$block-class}__save,
+    &.#{$block-class}.#{$block-class} .#{$block-class}__cancel {
+      @include input-button-defaults($block-class);
+
+      // input does not have focus
+      &:hover {
+        outline: initial;
+      }
+
+      &:focus:active,
+      &:focus {
+        // border focus input does NOT have focus
+        border-color: $focus;
+        box-shadow: initial;
+        outline: initial;
+      }
+
+      &:focus:active:hover {
+        box-shadow: inset 0 0 0 1px $field-01;
+      }
+
+      &::before {
+        background-color: transparent;
+      }
+
+      &[disabled] {
+        border-color: transparent;
+      }
+    }
+
+    &.#{$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);
+    }
+
+    &.#{$block-class}--editing
+      .#{$block-class}__toolbar--saveable
+      .#{$block-class}__save {
+      margin-right: 0;
+    }
+
+    &.#{$block-class}.#{$block-class} .#{$block-class}__edit {
+      @include input-button-defaults($block-class);
+
+      // pointer-events: none;
+
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: transparent;
+        background-color: transparent;
+        box-shadow: initial;
+        outline: initial;
+      }
+    }
+
+    .#{$block-class}__edit--hover-visible {
+      opacity: 0;
+      transition: opacity $duration--fast-01 motion(entrance, productive);
+    }
+
+    &:hover .#{$block-class}__edit--hover-visible {
+      opacity: 1;
+    }
+
+    .#{$block-class}__validation-icon {
+      @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;
+    }
+
+    .#{$block-class}__validation-text {
+      display: block;
+      overflow: visible;
+      margin-left: $spacing-05;
+    }
 
-  .#{$block-class} .#{$block-class}__button {
-    margin-left: $spacing-03;
+    &.#{$block-class}--invalid .#{$block-class}__validation-text {
+      color: $support-error;
+    }
   }
 }
 

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

@@ -5,11 +5,17 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
+@import '../../global/styles/project-settings';
 
-// TODO: add any additional styles used by InlineEdit.stories.js
+.inline-edit-stories__viewport {
+  // width: 300px; // larger than standard size needed by text input at standard font size (html input attribute size)
+  // stylelint-disable-next-line carbon/layout-token-use
+  margin: 100px;
+}
 
-// Uncomment next line (which must appear last) to test in storybook
-// that the SCSS styles for this component are sufficiently specific
-// to override Carbon whichever order the styles get loaded in.
-//@import 'carbon-components/css/carbon-components.min';
+$block-class: #{$pkg-prefix}--inline-edit;
+.component-full-width {
+  .#{$block-class} {
+    width: 100%;
+  }
+}

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

@@ -12,8 +12,3 @@
   width: 24rem;
   margin: $spacing-07 $spacing-05 $spacing-05 $spacing-05;
 }
-
-// Uncomment next line (which must appear last) to test in storybook
-// that the SCSS styles for this component are sufficiently specific
-// to override Carbon whichever order the styles get loaded in.
-// @import 'carbon-components/css/carbon-components.min';

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -20,7 +20,7 @@
 
 @mixin notifications-panel {
   $block-class: #{$pkg-prefix}--notifications-panel;
-  @keyframes fadeIn {
+  @keyframes fade-in {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -32,7 +32,7 @@
     }
   }
 
-  @keyframes fadeOut {
+  @keyframes fade-out {
     0% {
       opacity: 1;
       transform: translateY(0);

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

@@ -5,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
-
 @import '../../global/styles/project-settings';
 
 $block-class: #{$pkg-prefix}--options-tile;
@@ -26,8 +24,3 @@ $block-class: #{$pkg-prefix}--options-tile;
 .#{$block-class}__content .#{$carbon-prefix}--dropdown__wrapper:first-of-type {
   margin-bottom: $spacing-06;
 }
-
-// Uncomment next line (which must appear last) to test in storybook
-// that the SCSS styles for this component are sufficiently specific
-// to override Carbon whichever order the styles get loaded in.
-//@import 'carbon-components/css/carbon-components.min';