@carbon/ibm-products 1.48.0 → 1.49.0

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

@@ -36,7 +36,7 @@
       visibility: hidden;
     }
 
-    &-focused {
+    &--focused {
       background: $field-01;
       outline: 2px solid $focus;
     }
@@ -50,8 +50,7 @@
     }
 
     &__warning-icon {
-      /* stylelint-disable-next-line carbon/layout-token-use */
-      margin-right: 0.4375rem;
+      margin: $spacing-03;
       color: $support-01;
     }
 
@@ -81,6 +80,45 @@
   .#{$block-class}__text-input.#{$carbon-input}:active {
     outline: none;
   }
+
+  .#{$block-class}__toolbar {
+    --toolbar-width: #{$spacing-07};
+    --toolbar-width-focussed: #{$spacing-10};
+
+    // animation div
+    display: inline-flex;
+    overflow: hidden;
+    width: var(--toolbar-width);
+  }
+
+  .#{$block-class}--invalid .#{$block-class}__toolbar {
+    --toolbar-width: #{$spacing-07};
+    --toolbar-width-focussed: #{$spacing-12};
+  }
+
+  @keyframes slide-in {
+    0% {
+      overflow: hidden;
+      width: var(--toolbar-width);
+    }
+
+    99% {
+      overflow: hidden;
+      width: var(--toolbar-width-focussed);
+    }
+
+    100% {
+      overflow: visible;
+      width: var(--toolbar-width-focussed);
+    }
+  }
+
+  .#{$block-class}--focused .#{$block-class}__toolbar {
+    overflow: initial;
+    width: var(--toolbar-width-focussed);
+
+    animation: slide-in $duration--moderate-01 motion(entrance, productive);
+  }
 }
 
 @include exports('inline-edit-v2') {

package/scss/components/SidePanel/_side-panel.scss

@@ -327,6 +327,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       padding: 0;
       color: $text-01;
     }
+
     .#{$carbon-prefix}--btn.#{$block-class}__close-button {
       position: absolute;
       z-index: 5;
@@ -335,8 +336,8 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: $ui-01;
     }
+
     .#{$carbon-prefix}--btn.#{$block-class}__close-button
       .#{$carbon-prefix}--btn__icon {
       margin: 0;