fix(DataTable): fix stacking issues with table toolbar + batch actions (#14275)

tw15egan · web-flow · commit a157f0ac30a6 · 2023-07-24T18:41:30.000Z
diff --git a/packages/styles/scss/components/data-table/action/_data-table-action.scss b/packages/styles/scss/components/data-table/action/_data-table-action.scss
@@ -27,6 +27,7 @@
   .#{$prefix}--table-toolbar {
     // Need for batch actions
     position: relative;
+    z-index: 1;
     display: flex;
     width: 100%;
     min-height: $spacing-09;
@@ -388,6 +389,7 @@
     justify-content: space-between;
     background-color: $background-brand;
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+    opacity: 0;
     pointer-events: none;
     transform: translate3d(0, 48px, 0);
     transition: transform $duration-fast-02 motion(standard, productive),
@@ -401,7 +403,9 @@
   }
   // 200% to allow tooltips
   .#{$prefix}--batch-actions--active {
-    clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%);
+    z-index: 1;
+    clip-path: polygon(0 0, 300% 0, 300% 300%, 0 300%);
+    opacity: 1;
     pointer-events: all;
     transform: translate3d(0, 0, 0);
   }
