@carbon/ibm-products 1.50.0 → 1.52.0

package/scss/components/InlineEditV2/_inline-edit-v2.scss

@@ -15,6 +15,8 @@
   $carbon-input: #{$carbon-prefix}--text-input;
 
   .#{$block-class} {
+    --#{$block-class}--size: #{$spacing-07};
+
     display: flex;
     align-items: center;
     background: transparent;
@@ -24,11 +26,24 @@
       cursor: not-allowed;
     }
 
+    &--sm {
+      --#{$block-class}--size: #{$spacing-07};
+    }
+
+    &--md {
+      --#{$block-class}--size: #{$spacing-08};
+    }
+
+    &--lg {
+      --#{$block-class}--size: #{$spacing-09};
+    }
+
     &:hover {
       background: $field-01;
     }
 
-    &:hover .#{$block-class}__btn-edit {
+    &:hover .#{$block-class}__btn-edit,
+    .#{$block-class}__btn-edit.#{$block-class}__btn-edit--always-visible {
       visibility: visible;
     }
 
@@ -36,6 +51,10 @@
       visibility: hidden;
     }
 
+    &--invalid {
+      outline: 2px solid $support-01;
+    }
+
     &--focused {
       background: $field-01;
       outline: 2px solid $focus;
@@ -45,12 +64,31 @@
       flex: 1;
     }
 
+    &--inherit-type .#{$block-class}__text-input {
+      /* match font of container */
+      font-size: inherit;
+      font-weight: inherit;
+      letter-spacing: inherit;
+      line-height: inherit;
+    }
+
+    &__ellipsis {
+      position: relative;
+      margin-left: calc(-1 * $spacing-05);
+      opacity: 0;
+    }
+
+    &--overflows:not(.#{$block-class}--focused) .#{$block-class}__ellipsis {
+      opacity: 1;
+    }
+
     &__text-input-label {
       display: none;
     }
 
     &__warning-icon {
-      margin: $spacing-03;
+      width: $spacing-05;
+      margin: auto $spacing-03 auto auto;
       color: $support-01;
     }
 
@@ -70,11 +108,11 @@
     outline: none;
   }
 
-  .#{$block-class}-readonly .#{$block-class}__text-input.#{$carbon-input},
-  .#{$block-class}-readonly
-    .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
-    cursor: not-allowed;
-  }
+  // .#{$block-class}--readonly .#{$block-class}__text-input.#{$carbon-input},
+  // .#{$block-class}--readonly
+  //   .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger {
+  //   cursor: not-allowed;
+  // }
 
   .#{$block-class}__text-input.#{$carbon-input}:focus,
   .#{$block-class}__text-input.#{$carbon-input}:active {
@@ -82,8 +120,8 @@
   }
 
   .#{$block-class}__toolbar {
-    --toolbar-width: #{$spacing-07};
-    --toolbar-width-focussed: #{$spacing-10};
+    --toolbar-width: var(--#{$block-class}--size);
+    --toolbar-width-focussed: calc(2 * var(--#{$block-class}--size));
 
     // animation div
     display: inline-flex;
@@ -92,8 +130,11 @@
   }
 
   .#{$block-class}--invalid .#{$block-class}__toolbar {
-    --toolbar-width: #{$spacing-07};
-    --toolbar-width-focussed: #{$spacing-12};
+    // width of invalid icon is always $spacing-07 ($spacing-05 + 2 * $spacing-03 margin)
+    --toolbar-width: calc(var(--#{$block-class}--size) + #{$spacing-07});
+    --toolbar-width-focussed: calc(
+      2 * var(--#{$block-class}--size) + #{$spacing-07}
+    );
   }
 
   @keyframes slide-in {

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

@@ -4,6 +4,13 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-.inline-edit-v2-example {
-  width: 15rem;
+
+@import '../../global/styles/display-box';
+
+$block-class: 'inline-edit-v2-example';
+
+.#{$block-class}__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;
 }

package/scss/components/NonLinearReading/_non-linear-reading.scss

@@ -8,31 +8,35 @@
 // Standard imports.
 @import '../../global/styles/project-settings';
 
-@mixin term-closed-defaults {
+@mixin keyword-closed-defaults {
+  height: rem(20px);
+  padding-top: 0;
   // stylelint-disable-next-line carbon/layout-token-use
-  padding: rem(1px) $spacing-03 rem(1px) $spacing-03;
-  border: none;
+  padding-right: rem(3px);
+  border-width: rem(1px);
+  border-style: solid;
   border-radius: $spacing-04;
-  background-color: $interactive-02;
   white-space: nowrap;
 
   &:hover {
-    background-color: $hover-secondary;
     cursor: pointer;
   }
-}
-@mixin term-open-defaults {
-  @include term-closed-defaults();
-
-  padding-right: 0;
 
+  // The "up" chevron
   svg {
     // stylelint-disable-next-line carbon/layout-token-use
-    padding-top: rem(1px);
-    margin: 0 $spacing-02 0 $spacing-01;
+    margin: rem(1px) 0 0 0;
     vertical-align: text-top;
   }
 }
+@mixin keyword-open-defaults {
+  @include keyword-closed-defaults();
+
+  // The "up" chevron, flipped
+  svg {
+    transform: rotate(180deg);
+  }
+}
 @mixin body-defaults {
   @include carbon--type-style('body-long-01');
 
@@ -48,10 +52,13 @@
 
 // Other Carbon settings.
 // TODO: @import 'carbon-components/scss/globals/grid/grid'; if needed
+
 // NonLinearReading uses the following Carbon components:
 // TODO: @import(s) of Carbon component styles used by NonLinearReading
+
 // NonLinearReading uses the following Carbon for IBM Products components:
 // TODO: @import(s) of IBM Products component styles used by NonLinearReading
+
 // Define all component styles in a mixin which is then exported using
 // the Carbon import-once mechanism.
 @mixin non-linear-reading {
@@ -72,86 +79,88 @@
     }
   }
 
-  .#{$block-class} {
-    &__term {
-      &-light {
-        &--closed {
-          @include term-closed-defaults();
+  .#{$block-class}__light {
+    .#{$block-class}__keyword {
+      &-closed {
+        @include keyword-closed-defaults();
 
-          background-color: $interactive-02;
-          color: $inverse-01;
+        border-color: $interactive-03;
+        background-color: transparent;
+        color: $interactive-03;
 
-          &:hover {
-            background-color: $hover-secondary;
-          }
+        &:hover {
+          background-color: $interactive-03;
+          color: $inverse-01;
         }
+      }
 
-        &--open {
-          @include term-open-defaults();
+      &-open {
+        @include keyword-open-defaults();
 
-          // Novice to pro does not always use Carbon defaults/tokens
-          // stylelint-disable-next-line carbon/theme-token-use
-          background-color: $purple-20;
-          color: $text-01;
+        border-color: $interactive-03;
+        background-color: $interactive-03;
+        color: $inverse-01;
 
-          &:hover {
-            // stylelint-disable-next-line carbon/theme-token-use
-            background-color: #dcc7ff;
-          }
+        &:hover {
+          background-color: transparent;
+          color: $interactive-03;
         }
       }
+    }
 
-      &-dark {
-        &--closed {
-          @include carbon--theme($carbon--theme--g100, true);
-          @include term-closed-defaults();
+    .#{$block-class}__body {
+      @include body-defaults();
 
-          background-color: $interactive-02;
-          color: $text-04;
+      border-left-color: $text-01;
+    }
+  }
+
+  .#{$block-class}__dark {
+    .#{$block-class}__keyword {
+      &-closed {
+        @include carbon--theme($carbon--theme--g100, true);
+        @include keyword-closed-defaults();
 
-          &:hover {
-            background-color: $hover-secondary;
-          }
+        border-color: $icon-03;
+        background-color: transparent;
+        color: $text-01;
+
+        &:hover {
+          background-color: $icon-03;
+          color: $inverse-01;
         }
+      }
 
-        &--open {
-          @include carbon--theme($carbon--theme--g100, true);
-          @include term-open-defaults();
+      &-open {
+        @include carbon--theme($carbon--theme--g100, true);
+        @include keyword-open-defaults();
 
-          // stylelint-disable-next-line carbon/theme-token-use
-          background-color: #491d8b;
-          color: $text-04;
+        border-color: $icon-03;
+        background-color: $icon-03;
+        color: $inverse-01;
 
-          &:hover {
-            // stylelint-disable-next-line carbon/theme-token-use
-            background-color: #7f3ae7;
-          }
+        &:hover {
+          background-color: transparent;
+          color: $text-01;
         }
       }
     }
 
-    &--body {
-      &-light {
-        @include body-defaults();
-
-        // stylelint-disable-next-line carbon/theme-token-use
-        border-left-color: #6929c4;
-        // stylelint-disable-next-line carbon/theme-token-use
-        color: #6929c4;
-      }
+    .#{$block-class}__body {
+      @include carbon--theme($carbon--theme--g100, true);
+      @include body-defaults();
 
-      &-dark {
-        @include carbon--theme($carbon--theme--g100, true);
-        @include body-defaults();
+      border-left-color: $text-01;
+      color: $text-01;
 
-        // stylelint-disable-next-line carbon/theme-token-use
-        border-left-color: #d4bbff;
-        // stylelint-disable-next-line carbon/theme-token-use
-        color: #d4bbff;
+      // override default link color to compensate for a gradient background.
+      a {
+        color: $link-01;
       }
     }
   }
 }
+
 @include exports('non-linear-reading') {
   @include non-linear-reading;
 }

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

@@ -11,3 +11,19 @@
 #root {
   @include carbon--type-style('body-long-01');
 }
+
+// The layout has been changed from middle/center to top/left, because
+// the component can expand, and it looks weird when expanding vertically
+// from the middle of the page instead of "dropping down" from above.
+// Margin provides spacing from the edge of the viewport.
+.non-linear-reading-stories__viewport {
+  margin: $spacing-10; // 64px
+}
+
+.gradient-bg {
+  @include carbon--theme($carbon--theme--g100, true);
+
+  padding: $spacing-05;
+  background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
+  color: $text-01;
+}