@carbon/ibm-products 1.3.0 → 1.6.1

package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss

@@ -18,120 +18,192 @@
 // CancelableTextEdit uses the following Carbon for IBM Products components:
 // TODO: @import(s) of IBM Products component styles used by CancelableTextEdit
 
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin cancelable-text-edit {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--cancelable-text-edit;
-
-  .#{$block-class}.#{$block-class} {
-    --size: #{$spacing-08};
-
-    position: relative;
-    width: 100%;
-    min-height: var(--size);
-  }
-
-  .#{$block-class}.#{$block-class}--xl {
-    --size: $spacing-09;
-  }
-
-  .#{$block-class}.#{$block-class} .#{$block-class}__input {
-    height: var(--size);
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc(2 * var(--size));
-  }
-
-  .#{$block-class}__buttons {
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-  .#{$block-class}.#{$block-class} .#{$block-class}__revert,
-  .#{$block-class}.#{$block-class} .#{$block-class}__save {
-    width: var(--size);
-    height: var(--size);
-    min-height: var(--size);
+@mixin button-states($block-class) {
+  .#{$block-class}__revert,
+  .#{$block-class}__save {
+    border: 1px solid transparent;
 
+    // input does not have focus
     &:hover {
-      // border hover input does NOT have focus
       border-color: $hover-field;
-      border-bottom: 1px solid transparent;
+      border-bottom-color: transparent;
       background-clip: content-box;
       box-shadow: initial;
+      outline: initial;
     }
 
     &:focus:active,
     &:focus {
       // border focus input does NOT have focus
-      border-width: 2px;
       border-color: $focus;
-      box-shadow: initial;
+      box-shadow: inset 0 0 0 1px $focus;
+      outline: initial;
     }
 
     &:focus:active:hover {
-      // stylelint-disable-next-line carbon/layout-token-use
-      padding: 1px;
+      box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $field-01;
     }
 
     &::before {
       background-color: transparent;
     }
+
+    &[disabled] {
+      border-color: transparent;
+    }
   }
 
-  // border hover input has focus
-  // and/or is invalid
-  .#{$block-class}.#{$block-class}--invalid
-    .#{$carbon-prefix}--text-input-wrapper
-    ~ .#{$block-class}__buttons,
-  .#{$block-class}.#{$block-class}
-    .#{$carbon-prefix}--text-input-wrapper:focus-within
+  // invalid affects hover state
+  &.#{$block-class}--invalid {
+    // invalid does not have focus
+    .#{$block-class}__save:hover,
+    .#{$block-class}__revert:hover {
+      border: 1px solid transparent;
+      box-shadow: inset 0 1px 0 $support-01, inset 0 -1px 0 $support-01;
+    }
+
+    .#{$block-class}__save:hover {
+      // invalid does  not have focus
+      box-shadow: inset 0 1px 0 $support-01, inset 0 -1px 0 $support-01,
+        inset -1px 0 0 $support-01;
+    }
+  }
+
+  // after other button states handle focus within input
+  .#{$carbon-prefix}--text-input-wrapper:focus-within
     ~ .#{$block-class}__buttons {
     .#{$block-class}__revert,
     .#{$block-class}__save {
-      border: 2px solid transparent;
+      border: 1px solid transparent;
+      box-shadow: inset 0 1px 0 $focus, inset 0 -1px 0 $focus;
       // transition-property: initial; // turn off seems to cause a bit of a visual glitch
     }
 
     // button hover state
     .#{$block-class}__revert:hover,
     .#{$block-class}__save:hover {
-      border-top: 2px solid transparent;
-      border-bottom: 2px solid transparent;
       background-clip: content-box;
     }
+
     .#{$block-class}__save {
       // border hover input has focus or is in error
-      border-right: 2px solid transparent;
+      box-shadow: inset 0 1px 0 $focus, inset 0 -1px 0 $focus,
+        inset -1px 0 0 $focus;
     }
   }
+}
 
-  // > only wish to affect version added for inline
-  .#{$block-class}--invalid > .#{$carbon-prefix}--form-requirement,
-  .#{$block-class}--warn > .#{$carbon-prefix}--form-requirement {
-    display: block;
-    max-height: initial;
-    // stylelint-disable-next-line carbon/layout-token-use
-    margin-left: calc(20% + 1.25rem); // needs to match inline input layout
-  }
+// Define all component styles in a mixin which is then exported using
+// the Carbon import-once mechanism.
+@mixin cancelable-text-edit {
+  // The block part of our conventional BEM class names (blockClass__E--M).
+  $block-class: #{$pkg-prefix}--cancelable-text-edit;
 
-  // > only wish to affect version added for inline
-  .#{$block-class}--invalid > .#{$carbon-prefix}--form-requirement {
-    color: $text-error;
+  .#{$block-class} {
+    --size: #{$spacing-08};
+    --icon-size: #{$spacing-05};
   }
 
-  .#{$block-class} .#{$carbon-prefix}--text-input {
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc(2 * var(--size)); // to take account of save and revert
+  .#{$block-class}--sm {
+    --size: #{$spacing-07};
+    --icon-size: #{$spacing-05};
   }
 
-  .#{$block-class} .#{$carbon-prefix}--text-input--invalid {
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc(3 * var(--size)); // to take account of save and revert
+  .#{$block-class}--lg {
+    --size: #{$spacing-09};
+    --icon-size: #{$spacing-05};
   }
 
-  .#{$block-class} .#{$carbon-prefix}--text-input__invalid-icon {
-    margin-right: $spacing-11;
+  // high specificity to override some icon button styles to work like the Carbon search clear button
+  // but at sizes of text input
+  .#{$block-class}.#{$block-class}.#{$block-class} {
+    .#{$block-class}__main {
+      position: relative;
+      display: inline-flex;
+      width: 100%;
+      min-height: var(--size);
+      vertical-align: top;
+    }
+
+    .#{$block-class}__input {
+      height: var(--size);
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(2 * var(--size));
+    }
+
+    .#{$block-class}__buttons {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .#{$block-class}__buttons-inner {
+      display: flex;
+    }
+
+    @include button-states($block-class);
+
+    .#{$block-class}__revert,
+    .#{$block-class}__save {
+      display: flex;
+      width: var(--size);
+      height: var(--size);
+      min-height: var(--size);
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+
+      svg {
+        width: var(--icon-size);
+        height: var(--icon-size);
+        // margin: calc(var(--size) / 4);
+      }
+    }
+
+    // > only wish to affect version added for inline
+    &.#{$block-class}--invalid .#{$carbon-prefix}--form-requirement,
+    &.#{$block-class}--warn .#{$carbon-prefix}--form-requirement {
+      display: block;
+      max-height: initial;
+    }
+
+    &.#{$block-class}--invalid.#{$block-class}--inline
+      .#{$carbon-prefix}--form-requirement,
+    &.#{$block-class}--warn.#{$block-class}--inline
+      .#{$carbon-prefix}--form-requirement {
+      // stylelint-disable-next-line carbon/layout-token-use
+      margin-left: calc(20% + 1.25rem); // needs to match inline input layout
+    }
+
+    // > only wish to affect version added for inline
+    &.#{$block-class}--invalid .#{$carbon-prefix}--form-requirement {
+      display: block;
+      overflow: visible;
+      // max-height: 12.5rem;
+      // font-weight: 400;
+      color: $text-error;
+    }
+
+    .#{$carbon-prefix}--text-input {
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(
+        2 * var(--size)
+      ); // to take account of save and revert
+    }
+
+    .#{$carbon-prefix}--text-input--invalid {
+      // stylelint-disable-next-line carbon/layout-token-use
+      padding-right: calc(
+        3 * var(--size)
+      ); // to take account of save and revert
+    }
+
+    .#{$carbon-prefix}--text-input__invalid-icon {
+      margin-right: $spacing-11;
+    }
   }
 }
 

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

@@ -5,11 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
-
 // TODO: add any additional styles used by CancelableTextEdit.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';

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/CreateTearsheetNarrow/_storybook-styles.scss

@@ -5,14 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
 @import '../../global/styles/project-settings';
 
-// 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';
-
 $story-class: #{$pkg-prefix}--create-tearsheet-narrow--story;
 
 .#{$story-class}__flex-container {

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

@@ -5,9 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import './index';
-
-// TODO: add any additional styles used by EditSidePanel.stories.js
 @import '../../global/styles/project-settings';
 
 $block-class: #{$pkg-prefix}--edit-side-panel;
@@ -28,8 +25,3 @@ $story-prefix: edit-side-panel-stories__;
 .#{$block-class} .#{$carbon-prefix}--number__control-btn::after {
   background-color: $field-02;
 }
-
-// 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/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';