@carbon/ibm-products 1.3.0 → 1.6.1

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

@@ -0,0 +1,320 @@
+//
+// 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) {
+  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;
+
+  @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-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);
+
+    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: 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}--invalid .#{$block-class}__validation-text {
+      color: $support-error;
+    }
+  }
+}
+
+@include exports('inline-edit') {
+  @include inline-edit;
+}

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

@@ -0,0 +1,21 @@
+//
+// 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';
+
+.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/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/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/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';

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,25 @@ $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;
+      // move to match non-editable version position
+      margin-top: calc(-1 * #{$spacing-01});
+      margin-left: calc(-1 * #{$spacing-05});
+    }
+
     .#{$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

@@ -72,7 +72,7 @@ $themes: ('light', 'dark');
 
 $block-class: #{$pkg-prefix}--status-icon;
 
-@function clr($name, $theme: light) {
+@function --clr($name, $theme: light) {
   // stylelint-disable-next-line carbon/theme-token-use
   $color: map-get(map-get($colors, $name), $theme);
   @return $color;
@@ -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) {
@@ -119,14 +121,14 @@ $block-class: #{$pkg-prefix}--status-icon;
           // stylelint-disable-next-line carbon/motion-token-use
           animation: rotating 8000ms infinite linear;
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: clr($icon, $theme);
+          fill: --clr($icon, $theme);
         } @else if $icon == running {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: clr($icon, $theme);
+          fill: --clr($icon, $theme);
           transform: scaleY(-1);
         } @else {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: clr($icon, $theme);
+          fill: --clr($icon, $theme);
           @media (prefers-reduced-motion) {
             .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
               animation: none;

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/UserProfileImage/_user-profile-image.scss

@@ -44,7 +44,7 @@ $themes: (
 
 $theme-keys: map-keys($themes);
 
-@function get-background-color($color, $key, $contrast-key) {
+@function --get-background-color($color, $key, $contrast-key) {
   @return map-get(
     $carbon-colors,
     #{$color}#{map-get(map-get($themes, $key), #{$contrast-key}-contrast)}
@@ -60,7 +60,7 @@ $theme-keys: map-keys($themes);
       @each $contrast-key in $theme-keys {
         .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
           // stylelint-disable-next-line carbon/theme-token-use
-          background-color: get-background-color($color, $key, $contrast-key);
+          background-color: --get-background-color($color, $key, $contrast-key);
         }
       }
     }

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

@@ -9,7 +9,6 @@
 
 @import './_Canary/canary';
 
-@import './AddSelect/index';
 @import './APIKeyModal/index';
 @import './AboutModal/index';
 @import './ActionSet/index';
@@ -28,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';
@@ -43,3 +44,4 @@
 @import './EditSidePanel/index';
 @import './OptionsTile/index';
 @import './CancelableTextEdit/index';
+@import './InlineEdit/index';