@carbon/ibm-products 1.61.1 → 1.62.0

package/scss/components/Coachmark/styles/_coachmark-dragbar.scss

@@ -5,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/* stylelint-disable declaration-no-important */
-
 // Standard imports.
 @import '../../../global/styles/project-settings';
 @import '../../../global/styles/mixins';
@@ -16,53 +14,11 @@
 @mixin coachmark-dragbar {
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--coachmark-dragbar;
+  $handle-class: #{$pkg-prefix}--coachmark-dragbar__handle;
 
   .#{$block-class} {
     display: flex;
 
-    &__handle {
-      flex-grow: 1;
-      padding: $spacing-03 0 0 $spacing-03;
-      border: 0;
-      background-color: transparent;
-      text-align: left;
-
-      &:hover {
-        cursor: move;
-      }
-    }
-
-    &--close-btn {
-      width: $spacing-07;
-      height: $spacing-07;
-      margin-left: auto !important;
-
-      svg > path {
-        margin: 0;
-        fill: $inverse-01 !important;
-      }
-
-      &:hover {
-        background-color: $inverse-hover-ui !important;
-      }
-    }
-
-    &__light {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $active-secondary;
-        }
-      }
-    }
-
-    &__dark {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $button-tertiary-active;
-        }
-      }
-    }
-
     svg {
       color: $inverse-01;
     }

package/scss/components/Coachmark/styles/_coachmark-header.scss

@@ -5,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/* stylelint-disable declaration-no-important */
-
 // Standard imports.
 @import '../../../global/styles/project-settings';
 @import '../../../global/styles/mixins';
@@ -19,37 +17,6 @@
 
   .#{$block-class} {
     display: flex;
-
-    &--close-btn {
-      width: $spacing-07;
-      height: $spacing-07;
-      margin-left: auto !important;
-
-      svg > path {
-        margin: 0;
-        fill: $inverse-01 !important;
-      }
-
-      &:hover {
-        background-color: $inverse-hover-ui !important;
-      }
-    }
-
-    &__light {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $active-secondary;
-        }
-      }
-    }
-
-    &__dark {
-      #{$block-class}--close-btn {
-        &:active {
-          background-color: $button-tertiary-active;
-        }
-      }
-    }
   }
 }
 

package/scss/components/Coachmark/styles/_coachmark-overlay.scss

@@ -19,6 +19,8 @@
   // The block part of our conventional BEM class names (blockClass__E--M).
   $block-class: #{$pkg-prefix}--coachmark-overlay;
   $carousel-class: #{$pkg-prefix}--carousel;
+  $close-btn-class: #{$block-class}--close-btn;
+  $draghandle-btn-class: #{$block-class}__handle;
 
   .#{$block-class} {
     position: absolute;
@@ -33,6 +35,8 @@
     $caret-center: $caret-height; // use "center" for left-right calculations, and "height" for top-bottom calculations
     $distance-offset: $spacing-06; // see also ./utils/constants.js > distanceOffset
 
+    visibility: hidden;
+
     &--fixed {
       position: fixed;
       right: $spacing-05;
@@ -45,8 +49,15 @@
       }
     }
 
+    &--is-dragmode {
+      border-radius: 0;
+      box-shadow: 0 0 0 $spacing-02 $inverse-02;
+      outline: $spacing-01 solid $inverse-01;
+    }
+
     &--is-visible {
       transform: translateY(0);
+      visibility: visible;
     }
 
     // CARET STYLING
@@ -202,8 +213,6 @@
 
     // BODY
     &__body {
-      padding: $spacing-01 $spacing-05 $spacing-05;
-
       .#{$carbon-prefix}--btn--ghost {
         color: $inverse-link;
 
@@ -234,13 +243,60 @@
       }
     }
 
+    // HEADER BUTTONS
+    &__handle {
+      position: relative;
+      flex-grow: 1;
+      padding: $spacing-02 0 0 $spacing-03;
+      border: 0;
+      background-color: transparent;
+      text-align: left;
+
+      &::before {
+        position: absolute;
+        top: $spacing-01;
+        left: $spacing-01;
+        width: calc($spacing-06 + $spacing-01);
+        height: calc($spacing-06 + $spacing-01);
+        content: '';
+      }
+
+      &:hover {
+        cursor: move;
+      }
+
+      &:focus {
+        border: none;
+        outline: none;
+
+        &::before {
+          border: 1px solid $inverse-01;
+          outline: 1px solid $blue-60;
+        }
+      }
+    }
+
+    &--close-btn {
+      width: $spacing-07;
+      height: $spacing-07;
+      margin-left: auto !important;
+
+      svg > path {
+        margin: 0;
+        fill: $inverse-01 !important;
+      }
+
+      &:hover {
+        background-color: $inverse-hover-ui !important;
+      }
+    }
+
     // FOOTER
     &__footer {
       display: flex;
       align-items: center;
       justify-content: flex-end;
     }
-    /* ------------------ */
 
     // THEME
     &__light {
@@ -262,6 +318,10 @@
         }
 
         .#{$carbon-prefix}--btn--ghost {
+          border-color: transparent !important;
+          border-radius: 0;
+          outline: 1px solid transparent;
+
           &:hover {
             background-color: $inverse-hover-ui;
           }
@@ -269,6 +329,33 @@
           &:active {
             background-color: $active-secondary;
           }
+
+          &:focus {
+            box-shadow: inset 0 0 0 1px $inverse-02,
+              inset 0 0 0 $spacing-01 $white-0;
+          }
+        }
+      }
+      .#{$draghandle-btn-class} {
+        &:focus {
+          &::before {
+            border: 1px solid $white-0;
+            outline: 1px solid transparent;
+          }
+        }
+      }
+      .#{$close-btn-class} {
+        border-color: transparent !important;
+        border-radius: 0;
+        outline: 1px solid transparent;
+
+        &:active {
+          background-color: $active-secondary;
+        }
+
+        &:focus {
+          box-shadow: inset 0 0 0 1px $inverse-02,
+            inset 0 0 0 $spacing-01 $white-0;
         }
       }
     }
@@ -301,6 +388,8 @@
         }
 
         .#{$carbon-prefix}--btn--ghost {
+          border-color: transparent;
+
           &:hover {
             background-color: $inverse-hover-ui;
           }
@@ -310,11 +399,30 @@
           }
 
           &:focus {
-            box-shadow: inset 0 0 0 $spacing-01 $interactive-01,
-              inset 0 0 0 rem(3px) $interactive-03;
+            box-shadow: inset 0 0 0 1px $blue-60,
+              inset 0 0 0 $spacing-01 $white-0;
+          }
+        }
+      }
+      .#{$draghandle-btn-class} {
+        &:focus {
+          &::before {
+            border: 1px solid $white-0;
+            outline: 1px solid $blue-60;
           }
         }
       }
+      .#{$close-btn-class} {
+        border-color: transparent;
+
+        &:focus {
+          box-shadow: inset 0 0 0 1px $blue-60, inset 0 0 0 $spacing-01 $white-0;
+        }
+
+        &:active {
+          background-color: $button-tertiary-active;
+        }
+      }
     }
     .#{$carousel-class}__item {
       flex: 0 0 100% !important;

package/scss/components/Coachmark/styles/_coachmark-tagline.scss

@@ -35,6 +35,7 @@
     // stylelint-disable-next-line carbon/motion-duration-use
     transition: opacity 240ms carbon--motion(exit, productive) 300ms;
     transition-delay: 240ms;
+
     @media (prefers-reduced-motion) {
       transition: none;
     }
@@ -86,6 +87,11 @@
       text-align: left;
       @include carbon--type-style('body-short-01');
 
+      &:focus {
+        box-shadow: inset 0 0 0 3px $purple-70, inset 0 0 0 $spacing-02 $white-0;
+        outline: 1px solid transparent;
+      }
+
       &:hover {
         cursor: pointer !important;
       }
@@ -98,8 +104,20 @@
     &--close-btn {
       width: $spacing-07;
       height: $spacing-07;
+      border-color: transparent !important;
+      border-radius: 0;
       margin-left: auto !important;
       color: $white-0;
+      outline: 1px solid transparent;
+
+      &:active {
+        background-color: $active-secondary;
+      }
+
+      &:focus {
+        box-shadow: inset 0 0 0 1px $inverse-02,
+          inset 0 0 0 $spacing-01 $white-0 !important;
+      }
 
       svg > path {
         margin: 0;

package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss

@@ -32,6 +32,9 @@
 
     &-default {
       .#{$block-class}__target {
+        &::before {
+          display: none;
+        }
         // the blue dot
         &::after {
           position: absolute;
@@ -43,9 +46,24 @@
           background-color: $blue-50;
           content: '';
         }
+
+        &:focus {
+          outline: transparent;
+
+          &::before {
+            position: absolute;
+            top: 7px;
+            left: 7px;
+            display: block;
+            width: 18px;
+            height: 18px;
+            border-radius: 100%;
+            content: '';
+            outline: $spacing-01 $focus solid;
+          }
+        }
       }
     }
-
     .#{$block-class}__target {
       // the hit area
       position: absolute;

package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss

@@ -17,6 +17,8 @@
   $carousel-item-class: #{$pkg-prefix}--carousel__item;
 
   .#{$block-class} {
+    padding: $spacing-01 $spacing-05 0;
+
     &__content {
       padding-bottom: $spacing-05;
     }

package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss

@@ -25,6 +25,7 @@
       display: flex;
       align-items: center;
       justify-content: flex-end;
+      padding: 0 $spacing-05 $spacing-05;
     }
 
     &--controls-progress {

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -28,6 +28,7 @@
     bottom: -100%;
     //opacity: 0;
     transform: translateY(100%);
+    visibility: hidden;
 
     &--is-mounted {
       bottom: 0;
@@ -41,6 +42,7 @@
     &--is-visible {
       opacity: 1;
       transform: translateY(0);
+      visibility: visible;
     }
 
     // Stack the level-one item behind the level-two item.
@@ -51,6 +53,7 @@
       transform: perspective(carbon--mini-units(18))
         translate3d(0, calc($spacing-09 * -1), calc($spacing-05 * -1));
       transform-origin: top center;
+      visibility: visible;
 
       &__light {
         background-color: $gray-90;

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -80,7 +80,6 @@
     }
 
     &.#{$block-class}__variable-row-height {
-      &.#{$carbon-prefix}--data-table--compact,
       &.#{$carbon-prefix}--data-table--xs {
         .#{$block-class}__cell {
           padding-top: $spacing-01;
@@ -88,7 +87,6 @@
         }
       }
 
-      &.#{$carbon-prefix}--data-table--short,
       &.#{$carbon-prefix}--data-table--sm,
       &.#{$carbon-prefix}--data-table--md {
         .#{$block-class}__cell {
@@ -99,7 +97,6 @@
         }
       }
 
-      &.#{$carbon-prefix}--data-table--tall,
       &.#{$carbon-prefix}--data-table--lg,
       &.#{$carbon-prefix}--data-table--xl {
         .#{$block-class}__cell {
@@ -111,7 +108,6 @@
   }
 
   &.#{$block-class}__vertical-align-top {
-    &.#{$carbon-prefix}--data-table--tall,
     &.#{$carbon-prefix}--data-table--lg,
     &.#{$carbon-prefix}--data-table--xl {
       .#{$block-class}__cell {
@@ -129,7 +125,6 @@
     }
 
     &.#{$block-class}__variable-row-height {
-      &.#{$carbon-prefix}--data-table--tall,
       &.#{$carbon-prefix}--data-table--lg,
       &.#{$carbon-prefix}--data-table--xl {
         .#{$block-class}__cell {
@@ -325,6 +320,11 @@
   background-color: $hover-selected-ui;
 }
 
+.#{$block-class}__grid-container
+  table.#{$block-class}__table-simple.#{$carbon-prefix}--data-table.#{$block-class}__table-is-resizing {
+  overflow-y: hidden;
+}
+
 .#{$block-class}__resizableColumn {
   &.#{$block-class}__isResizing {
     .#{$block-class}__resizer {
@@ -346,6 +346,32 @@
   }
 }
 
+.#{$block-class}__header-actions-column:hover {
+  background-color: $layer-accent;
+}
+
+.#{$block-class}
+  .#{$block-class}__carbon-row
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu {
+  opacity: 0;
+}
+
+.#{$block-class}
+  .#{$block-class}__carbon-row:hover
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu,
+.#{$block-class}
+  .#{$block-class}__carbon-row
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu:focus,
+.#{$block-class}
+  .#{$block-class}__carbon-row
+  .#{$block-class}__actions-column-cell-non-sticky
+  .#{$carbon-prefix}--overflow-menu[aria-expanded='true'] {
+  opacity: 1;
+}
+
 .#{$block-class}__head-hidden-select-all {
   padding-right: $spacing-09;
 

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -36,7 +36,7 @@
 
 .#{$block-class}
   tr.#{$block-class}__carbon-nested-row
-  + :not(tr.#{$block-class}__carbon-nested-row)::before {
+  + :not(tr.#{$block-class}__carbon-nested-row)::after {
   position: absolute;
   /* stylelint-disable-next-line carbon/layout-token-use */
   top: -1px;

package/scss/components/_index-released-only.scss

@@ -17,6 +17,7 @@
 @import './CreateSidePanel/index';
 @import './CreateTearsheetNarrow/index';
 @import './CreateTearsheet/index';
+@import './Datagrid/index';
 @import './EmptyStates/index';
 @import './ExportModal/index';
 @import './ExpressiveCard/index';