@carbon/ibm-products 1.9.0 → 1.10.0

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

@@ -15,6 +15,7 @@
 }
 
 $block-class: #{$pkg-prefix}--inline-edit;
+
 .component-full-width {
   .#{$block-class} {
     width: 100%;

package/scss/components/LoadingBar/_loading-bar.scss

@@ -23,41 +23,49 @@ $loading-bar__small-height: 4px;
       left: 0;
       width: 0%;
     }
+
     20% {
       right: auto;
       left: 0;
       width: 100%;
     }
+
     28% {
       right: 0;
       left: auto;
       width: 100%;
     }
+
     51% {
       right: 0;
       left: auto;
       width: 0%;
     }
+
     58% {
       right: 0;
       left: auto;
       width: 0%;
     }
+
     82% {
       right: 0;
       left: auto;
       width: 100%;
     }
+
     83% {
       right: auto;
       left: 0;
       width: 100%;
     }
+
     96% {
       right: auto;
       left: 0;
       width: 0%;
     }
+
     100% {
       right: auto;
       left: 0;
@@ -71,6 +79,7 @@ $loading-bar__small-height: 4px;
       left: 0;
       width: 0%;
     }
+
     100% {
       right: auto;
       left: 0;
@@ -84,11 +93,13 @@ $loading-bar__small-height: 4px;
       left: 0;
       width: 0%;
     }
+
     92% {
       right: auto;
       left: 0;
       width: 100%;
     }
+
     100% {
       right: auto;
       left: 0;
@@ -100,9 +111,11 @@ $loading-bar__small-height: 4px;
     0% {
       opacity: 1;
     }
+
     92% {
       opacity: 1;
     }
+
     100% {
       display: none;
       opacity: 0;

package/scss/components/NotificationsPanel/_notifications-panel.scss

@@ -26,6 +26,7 @@
       // stylelint-disable-next-line carbon/layout-token-use
       transform: translateY(-38.5rem); // the height of the notification panel
     }
+
     100% {
       opacity: 1;
       transform: translateY(0);
@@ -37,6 +38,7 @@
       opacity: 1;
       transform: translateY(0);
     }
+
     100% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -204,6 +206,7 @@
         padding: 0;
         color: $text-01;
         opacity: 0;
+
         &:hover,
         &:focus {
           opacity: 1;

package/scss/components/PageHeader/_page-header.scss

@@ -41,6 +41,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
   from {
     background-color: var(--from-color);
   }
+
   to {
     background-color: var(--to-color);
   }
@@ -50,6 +51,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     background-color: var(--from-color);
     box-shadow: 0 1px 0 var(--from-color);
   }
+
   to {
     background-color: var(--to-color);
     box-shadow: 0 1px 0 var(--to-color-shadow);

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

@@ -31,6 +31,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       // stylelint-disable-next-line carbon/layout-token-use
       transform: translateX(#{$size}); // the size width of the side panel
     }
+
     100% {
       opacity: 1;
       transform: translateX(0);
@@ -45,6 +46,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       // stylelint-disable-next-line carbon/layout-token-use
       transform: translateX(-#{$size}); // the size width of the side panel
     }
+
     100% {
       opacity: 1;
       transform: translateX(0);
@@ -56,8 +58,8 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
   $placement: 'right',
   $size: map-get($side-panel-sizes, md)
 ) {
-  min-width: $size;
-  max-width: $size;
+  width: $size;
+  max-width: 100%;
   @if $placement == right {
     @include sidePanelEntranceRight($size);
   } @else {
@@ -66,8 +68,8 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
 }
 
 @mixin setPanelSize($size: map-get($side-panel-sizes, md)) {
-  min-width: $size;
-  max-width: $size;
+  width: $size;
+  max-width: 100%;
 }
 
 @mixin setDividerStyles() {
@@ -95,6 +97,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       opacity: 1;
       transform: translateX(0);
     }
+
     100% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -107,6 +110,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       opacity: 1;
       transform: translateX(0);
     }
+
     100% {
       opacity: 0;
       // stylelint-disable-next-line carbon/layout-token-use
@@ -183,6 +187,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
       );
       padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
       background-color: $ui-01;
+
       &::before {
         @include setDividerStyles();
       }
@@ -457,6 +462,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     0% {
       opacity: 0;
     }
+
     100% {
       opacity: 1;
     }
@@ -466,6 +472,7 @@ $action-set-block-class: #{$pkg-prefix}--action-set;
     0% {
       opacity: 1;
     }
+
     100% {
       opacity: 0;
     }

package/scss/components/StatusIcon/_status-icon.scss

@@ -82,6 +82,7 @@ $block-class: #{$pkg-prefix}--status-icon;
   0% {
     transform: scaleY(-1) rotate(360deg);
   }
+
   100% {
     transform: scaleY(-1) rotate(0deg);
   }

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -66,6 +66,15 @@ $theme-keys: map-keys($themes);
     }
   }
 
+  .#{$carbon-prefix}--tooltip__trigger.#{$block-class}__tooltip {
+    &:hover,
+    &:focus {
+      svg {
+        fill: $ui-01;
+      }
+    }
+  }
+
   .#{$block-class} {
     display: flex;
     flex-direction: column;

package/scss/components/WebTerminal/_web-terminal.scss

@@ -10,6 +10,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
     // stylelint-disable-next-line carbon/layout-token-use
     transform: translateX(#{$web-terminal-width});
   }
+
   100% {
     opacity: 1;
     transform: translateX(0);
@@ -21,6 +22,7 @@ $block-class: #{$pkg-prefix}--web-terminal;
     opacity: 1;
     transform: translateX(0);
   }
+
   100% {
     opacity: 0;
     // stylelint-disable-next-line carbon/layout-token-use