@carbon/ibm-products 1.5.0 → 1.8.0

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

@@ -18,24 +18,307 @@
 // 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;
+      overflow: hidden;
+      width: 0;
+      margin-left: $spacing-05;
+      color: $text-05;
+      content: attr(data-placeholder);
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .#{$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 {
+      width: initial;
+      opacity: 1;
+      // only transition fade in
+      transition: opacity $duration--moderate-02 motion(standard, productive);
+      visibility: visible;
+    }
+
+    .#{$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';

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;
   }
 
@@ -434,6 +434,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     .#{$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 {

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/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;
@@ -121,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

@@ -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/_project-settings.scss

@@ -6,7 +6,11 @@
 //
 
 // set required feature flags for carbon
-@import '../../generated/feature-flags/feature-flags';
+$feature-flags: (
+  ui-shell: true,
+  grid-columns-16: true,
+  enable-css-custom-properties: true,
+);
 
 // import the carbon import-once mechanism
 @import '@carbon/import-once/scss/import-once';