@carbon/ibm-products 1.6.0 → 1.6.1

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

@@ -28,7 +28,7 @@
   }
 }
 
-@function tooltip-top-bottom-safe-clip() {
+@function --tooltip-top-bottom-safe-clip() {
   @return polygon(
     0 0,
     -100vw 0,
@@ -46,6 +46,7 @@
 }
 
 @mixin input-button-defaults($block-class) {
+  display: inline-flex;
   width: var(--#{$block-class}--size);
   height: 100%;
   min-height: initial;
@@ -53,7 +54,7 @@
 
   // stylelint-disable-next-line carbon/layout-token-use
   padding: calc(
-    0.5 * (var(--#{$block-class}--size) - var(--#{$block-class}--icon-size))
+    0.5 * (var(--#{$block-class}--size) - var(--#{$block-class}--icon-size)) - #{$spacing-01}
   );
   border: 2px solid transparent;
 }
@@ -79,8 +80,8 @@
     }
 
     position: relative;
-    display: inline-flex;
-    // min-width: 250px; // similar to min input box with room for edit-controls
+    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);
@@ -112,44 +113,98 @@
     }
 
     .#{$block-class}__input {
-      display: flex;
+      display: inline-block;
       overflow: hidden;
-      max-width: calc(100% - 2 * var(--#{$block-class}--size) - $spacing-05);
-      height: 100%;
-      flex: 1 1 100%;
-      align-items: center;
+      // 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(2 * var(--#{$block-class}--size)); // room for controls
+      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}__placeholder {
+    .#{$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;
-      left: $spacing-03;
+      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}__controls {
+    .#{$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;
-      width: calc(2 * var(--#{$block-class}--size));
+      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}__controls--animation {
+    .#{$block-class}__toolbar--animation {
       // makes room for the top clip text but hides the side overflow
-      clip-path: tooltip-top-bottom-safe-clip();
+      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 {
+    &.#{$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
@@ -197,26 +252,24 @@
       }
     }
 
-    .#{$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
+    &.#{$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}__controls--saveable .#{$block-class}__cancel {
-      margin-left: 0;
+    &.#{$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);
 
-      position: absolute;
-      top: 0;
-      right: 0;
       // pointer-events: none;
 
       &:hover,
@@ -237,6 +290,28 @@
     &: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;
+    }
   }
 }
 

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

@@ -5,14 +5,7 @@
 // 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';
+@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)

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/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/_page-header.scss

@@ -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/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/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);
         }
       }
     }