@carbon/ibm-products 1.2.5 → 1.6.0

package/scss/components/CreateFullPage/_create-full-page.scss

@@ -30,6 +30,7 @@
 @mixin create-full-page {
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--create-full-page;
+  $step-block-class: #{$pkg-prefix}--create-full-page__step;
 
   .#{$block-class} .#{$block-class} {
     color: $text-01;
@@ -41,20 +42,14 @@
     margin-left: 0;
   }
 
-  .#{$block-class} .#{$block-class}__step--hidden-step,
-  .#{$block-class} .#{$block-class}__step--hidden-section {
+  .#{$block-class} .#{$step-block-class}__step--hidden-step {
     display: none;
   }
 
-  .#{$block-class} .#{$block-class}__step--visible-section {
+  .#{$block-class} .#{$step-block-class}__step--visible-step {
     display: block;
   }
 
-  .#{$block-class} .#{$block-class}__step--visible-step {
-    opacity: 1;
-  }
-
-  .#{$block-class} .#{$block-class}__section-subtitle,
   .#{$block-class} .#{$block-class}__step-subtitle {
     @include carbon--type-style('productive-heading-01');
 
@@ -62,7 +57,6 @@
     margin-bottom: $spacing-03;
   }
 
-  .#{$block-class} .#{$block-class}__section-description,
   .#{$block-class} .#{$block-class}__step-description {
     @include carbon--type-style('body-long-01');
 
@@ -150,8 +144,7 @@
     }
   }
 
-  .#{$block-class} .#{$block-class}__step-title,
-  .#{$block-class} .#{$block-class}__section-title {
+  .#{$block-class} .#{$block-class}__step-title {
     @include carbon--type-style('productive-heading-04');
 
     max-width: 50%;

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
@@ -36,6 +36,7 @@
   }
 
   $block-class: #{$pkg-prefix}--tearsheet-create;
+  $step-block-class: #{$pkg-prefix}--tearsheet-create__step;
   $section-block-class: #{$pkg-prefix}--tearsheet-create__section;
   $tearsheet-divider-class: #{$pkg-prefix}--tearsheet-create__section--divider;
   $tearsheet-fieldset-class: #{$pkg-prefix}--tearsheet-create__step--fieldset;
@@ -44,24 +45,19 @@
     --#{$block-class}--total-width: 0;
   }
 
-  .#{$block-class} .#{$block-class}__step--hidden-step,
-  .#{$block-class} .#{$block-class}__step--hidden-section {
+  .#{$block-class} .#{$step-block-class}__step--hidden-step {
     display: none;
   }
 
-  .#{$block-class} .#{$block-class}__step--visible-section {
-    display: block;
-  }
-
-  .#{$block-class} .#{$block-class}__step--visible-step {
-    animation: $duration--slow-01 stepContentEntrance;
+  .#{$block-class} .#{$step-block-class}__step--visible-step {
+    animation: $duration--slow-01 step-content-entrance;
     animation-fill-mode: forwards;
     animation-timing-function: $carbon--standard-easing;
     opacity: 0;
   }
 
   @media (prefers-reduced-motion) {
-    .#{$block-class} .#{$block-class}__step--visible-step {
+    .#{$block-class} .#{$step-block-class}__step--visible-step {
       animation: none;
       opacity: 1;
     }

package/scss/components/InlineEdit/_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 './inline-edit';

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

@@ -0,0 +1,245 @@
+//
+// 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';
+
+// Other Carbon settings.
+// TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
+// InlineEdit uses the following Carbon components:
+// TODO: @import(s) of Carbon component styles used by InlineEdit
+
+// 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) {
+  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))
+  );
+  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;
+
+  @include block-wrap($block-class) {
+    --#{$block-class}--size: #{$spacing-08};
+    --#{$block-class}--icon-size: #{$spacing-05};
+    --#{$block-class}--background-color: #{$ui-01};
+
+    &.#{$block-class}--light {
+      --#{$block-class}--background-color: transparent;
+    }
+
+    &:hover {
+      --#{$block-class}--background-color: #{$hover-field};
+      // background-color: $background-color;
+    }
+
+    position: relative;
+    display: inline-flex;
+    // min-width: 250px; // similar to min input box with room for edit-controls
+    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);
+
+    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}--editing {
+      @include input-outline($focus);
+
+      background-color: $ui-01;
+    }
+
+    .#{$block-class}--invalid {
+      @include input-outline($support-01);
+    }
+
+    .#{$block-class}__input {
+      display: flex;
+      overflow: hidden;
+      max-width: calc(100% - 2 * var(--#{$block-class}--size) - $spacing-05);
+      height: 100%;
+      flex: 1 1 100%;
+      align-items: center;
+      // stylelint-disable-next-line carbon/layout-token-use
+      margin-right: calc(2 * var(--#{$block-class}--size)); // room for controls
+      margin-left: $spacing-05;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .#{$block-class}__placeholder {
+      position: absolute;
+      left: $spacing-03;
+    }
+
+    .#{$block-class}__controls {
+      // not simply flexed in as this causes flexbox to mis-measure the size of the input
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: calc(2 * var(--#{$block-class}--size));
+      height: 100%;
+      cursor: text;
+    }
+
+    .#{$block-class}__controls--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}__controls::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}__controls .#{$block-class}__edit {
+      margin-left: var(--#{$block-class}--size);
+    }
+
+    .#{$block-class}__controls--animation .#{$block-class}__cancel {
+      margin-left: var(--#{$block-class}--size);
+      transition: margin-left $duration--moderate-02
+        motion(standard, productive);
+    }
+
+    .#{$block-class}__controls--saveable .#{$block-class}__cancel {
+      margin-left: 0;
+    }
+
+    &.#{$block-class}.#{$block-class} .#{$block-class}__edit {
+      @include input-button-defaults($block-class);
+
+      position: absolute;
+      top: 0;
+      right: 0;
+      // 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;
+    }
+  }
+}
+
+@include exports('inline-edit') {
+  @include inline-edit;
+}

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

@@ -0,0 +1,28 @@
+//
+// 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 './index';
+
+// TODO: add any additional styles used by InlineEdit.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';
+
+.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;
+}
+
+$block-class: #{$pkg-prefix}--inline-edit;
+.component-full-width {
+  .#{$block-class} {
+    width: 100%;
+  }
+}

package/scss/components/MultiAddSelect/_index.scss

@@ -0,0 +1 @@
+@import './multi-add-select';

package/scss/components/MultiAddSelect/_multi-add-select.scss

@@ -0,0 +1 @@
+@import '../AddSelect/add-select';

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

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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/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/PageHeader/_index.scss

@@ -7,4 +7,4 @@
 
 // An index file is most useful when you have multiple components
 
-@import './page-header.scss';
+@import './page-header';

package/scss/components/PageHeader/_page-header.scss

@@ -80,7 +80,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   $duration: 1000ms;
 
   $animation: background-appear;
-  @if ($with-shadow) {
+  @if $with-shadow {
     $animation: background-and-shadow-appear;
   }
 
@@ -144,7 +144,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
     .#{$block-class}__breadcrumb-row:not(.#{$block-class}__breadcrumb-row--has-action-bar) {
       // lifts up page title when there is no action bar
-      margin-bottom: calc(-1 * #{$spacing-03});
+      min-height: $spacing-07;
     }
 
     .#{$block-class}__breadcrumb-row--container {
@@ -189,7 +189,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       transition: all $duration--moderate-01 ease-out;
     }
 
-    .#{$block-class}__breadcrumb-row--next-to-tabs::after,
+    .#{$block-class}__breadcrumb-row--next-to-tabs:not(.#{$block-class}__has-page-actions-without-action-bar)::after,
     .#{$block-class}__breadcrumb-row--has-action-bar::after {
       /* creates a full width box shadow without causing scroll */
       box-shadow: 25vw 1px 0 0 $ui-03, -25vw 1px 0 0 $ui-03;
@@ -408,7 +408,6 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
 
     .#{$block-class}__title-column {
-      overflow: hidden; /* required for ellipsis in title */
       min-height: 40px;
       flex: 0 0 100%;
 
@@ -421,11 +420,22 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     .#{$block-class}__title {
       @include carbon--type-style('productive-heading-04');
 
-      overflow: hidden;
+      overflow-x: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
+    .#{$block-class}__title .#{$pkg-prefix}--inline-edit__value {
+      // The heading text sits 2px pixels lower in the inline edit which is aligned center
+      // stylelint-disable-next-line carbon/layout-token-use
+      transform: translateY(-2px);
+    }
+
+    .#{$block-class}__title--editable {
+      display: flex;
+      overflow: visible;
+    }
+
     .#{$block-class}__title-skeleton {
       height: $spacing-07;
     }

package/scss/components/ProductiveCard/_productive-card.scss

@@ -36,10 +36,6 @@
       align-items: center;
       justify-content: space-between;
       border-top: 1px solid $ui-03;
-
-      .#{$carbon-prefix}--btn svg {
-        margin-left: $spacing-03;
-      }
     }
 
     .#{$block-class}__footer-no-button {

package/scss/components/SidePanel/_side-panel.scss

@@ -25,7 +25,7 @@ $block-class: #{$pkg-prefix}--side-panel;
 $action-set-block-class: #{$pkg-prefix}--action-set;
 
 @mixin sidePanelEntranceRight($size: map-get($side-panel-sizes, md)) {
-  @keyframes sidePanelEntranceRight {
+  @keyframes side-panel-entrance-right {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -39,7 +39,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
 }
 
 @mixin sidePanelEntranceLeft($size: map-get($side-panel-sizes, md)) {
-  @keyframes sidePanelEntranceLeft {
+  @keyframes side-panel-entrance-left {
     0% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -90,7 +90,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
 }
 
 @mixin side-panel {
-  @keyframes sidePanelExitLeft {
+  @keyframes side-panel-exit-left {
     0% {
       opacity: 1;
       transform: translateX(0);
@@ -102,7 +102,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     }
   }
 
-  @keyframes sidePanelExitRight {
+  @keyframes side-panel-exit-right {
     0% {
       opacity: 1;
       transform: translateX(0);
@@ -186,6 +186,15 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       &::before {
         @include setDividerStyles();
       }
+      &.#{$block-class}__title-container--reduced-motion {
+        z-index: 5;
+        border-bottom: 1px solid $decorative-01;
+        margin-bottom: $spacing-05;
+      }
+      &.#{$block-class}__title-container--reduced-motion.#{$block-class}__title-container--no-title-animation {
+        border-bottom: 0;
+        margin-bottom: 0;
+      }
       &.#{$block-class}__on-detail-step .#{$block-class}__collapsed-title-text {
         top: $spacing-09;
       }
@@ -444,7 +453,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     background-color: $field-02;
   }
 
-  @keyframes sidePanelOverlayEntrance {
+  @keyframes side-panel-overlay-entrance {
     0% {
       opacity: 0;
     }
@@ -453,7 +462,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     }
   }
 
-  @keyframes sidePanelOverlayExit {
+  @keyframes side-panel-overlay-exit {
     0% {
       opacity: 1;
     }

package/scss/components/SingleAddSelect/_index.scss

@@ -0,0 +1 @@
+@import './single-add-select';

package/scss/components/SingleAddSelect/_single-add-select.scss

@@ -0,0 +1 @@
+@import '../AddSelect/add-select';

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

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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/StatusIcon/_index.scss

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

package/scss/components/StatusIcon/_status-icon.scss

@@ -111,6 +111,8 @@ $block-class: #{$pkg-prefix}--status-icon;
 @each $theme in $themes {
   @each $icon in $icons {
     @each $theme-key in $themes {
+      .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger
+        .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon},
       .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon} {
         @if $icon == in-progress {
           @media (prefers-reduced-motion: reduce) {

package/scss/components/TagSet/_index.scss

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

package/scss/components/UserProfileImage/_index.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './user-profile-image.scss';
+@import './user-profile-image';

package/scss/components/WebTerminal/_web-terminal.scss

@@ -4,7 +4,7 @@
 $web-terminal-width: 36.5rem;
 $block-class: #{$pkg-prefix}--web-terminal;
 
-@keyframes webTerminalEntrance {
+@keyframes web-terminal-entrance {
   0% {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-token-use
@@ -16,7 +16,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
   }
 }
 
-@keyframes webTerminalExit {
+@keyframes web-terminal-exit {
   0% {
     opacity: 1;
     transform: translateX(0);

package/scss/components/_index.scss

@@ -27,12 +27,14 @@
 @import './ImportModal/index';
 @import './LoadingBar/index';
 @import './ModifiedTabs/index';
+@import './MultiAddSelect/index';
 @import './NotificationsPanel/index';
 @import './PageHeader/index';
 @import './ProductiveCard/index';
 @import './RemoveModal/index';
 @import './Saving/index';
 @import './SidePanel/index';
+@import './SingleAddSelect/index';
 @import './StatusIcon/index';
 @import './TagSet/index';
 @import './Tearsheet/index';
@@ -41,3 +43,5 @@
 @import './UserProfileImage/index';
 @import './EditSidePanel/index';
 @import './OptionsTile/index';
+@import './CancelableTextEdit/index';
+@import './InlineEdit/index';