fix(react): adjust bx--actions-list in data table to use display grid instead of position absolute (#9994)

abbeyhrt · web-flow · commit 963eb58b288e · 2021-11-04T01:30:34.000Z
* fix(react): add display grid to actions list so scroll works

* fix(react): remove commented out styles

* fix(react): add more items to stroy and add back removed style

* fix(react): adjust positioning so item summary is always visible

* fix(react): update snapshots

* fix(react): set min height on summary to match buttons

* fix(react): remove test story
diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -20,9 +20,8 @@
     // Need for batch actions
     position: relative;
     display: flex;
-    overflow: hidden;
     width: 100%;
-    height: $spacing-09;
+    min-height: $spacing-09;
     background-color: $layer;
   }
 
@@ -320,17 +319,14 @@
   //-------------------------------------------------
   .#{$prefix}--batch-actions {
     position: absolute;
-    top: 0;
+    right: 0;
+    bottom: 0;
     left: 0;
     display: flex;
-    width: 100%;
-    height: 100%;
     align-items: center;
-    padding-right: $spacing-06;
-    padding-left: $spacing-06;
+    justify-content: space-between;
     background-color: $background-brand;
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-    overflow-x: auto;
     pointer-events: none;
     transform: translate3d(0, 48px, 0);
     transition: transform $duration--fast-02 motion(standard, productive),
@@ -344,22 +340,22 @@
   }
 
   .#{$prefix}--batch-actions--active {
+    overflow: auto hidden;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
     pointer-events: all;
     transform: translate3d(0, 0, 0);
   }
 
   //btns container
   .#{$prefix}--action-list {
-    position: absolute;
-    right: 0;
     display: flex;
+    align-items: center;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn {
-    min-width: 0;
     padding: $button-padding-ghost;
     color: $text-on-color;
+    white-space: nowrap;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn:disabled {
@@ -424,22 +420,24 @@
     transition: opacity $transition--base $carbon--standard-easing;
   }
 
-  // cancel btn
-  .#{$prefix}--batch-summary__cancel {
-    position: relative;
-    padding-right: $spacing-05;
-  }
-
   // items selected text
   .#{$prefix}--batch-summary {
-    position: absolute;
+    position: sticky;
+    z-index: 100000;
     left: 0;
     display: flex;
+    min-height: 3rem;
     align-items: center;
-    margin-left: $spacing-05;
+    padding: 0 $spacing-05;
+    background-color: $background-brand;
+
     color: $text-on-color;
   }
 
+  .#{$prefix}--batch-summary__scroll {
+    box-shadow: 0.5px 0 0.2px $hover-primary-text;
+  }
+
   .#{$prefix}--batch-summary__para {
     @include type-style('body-short-01');
   }
diff --git a/packages/react/src/components/DataTable/TableBatchActions.js b/packages/react/src/components/DataTable/TableBatchActions.js
@@ -36,6 +36,7 @@ const TableBatchActions = ({
   translateWithId: t,
   ...rest
 }) => {
+  const [isScrolling, setIsScrolling] = React.useState();
   const batchActionsClasses = cx(
     {
       [`${prefix}--batch-actions`]: true,
@@ -44,12 +45,19 @@ const TableBatchActions = ({
     className
   );
 
+  const batchSummaryClasses = cx(`${prefix}--batch-summary`, {
+    [`${prefix}--batch-summary__scroll`]: isScrolling,
+  });
+
   return (
     <div
-      {...rest}
+      onScroll={() => {
+        setIsScrolling(!isScrolling);
+      }}
       aria-hidden={!shouldShowBatchActions}
-      className={batchActionsClasses}>
-      <div className={`${prefix}--batch-summary`}>
+      className={batchActionsClasses}
+      {...rest}>
+      <div className={batchSummaryClasses}>
         <p className={`${prefix}--batch-summary__para`}>
           <span>
             {totalSelected > 1 || totalSelected === 0
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2036,6 +2036,7 @@ exports[`DataTable should render 1`] = `
             <div
               aria-hidden={true}
               className="bx--batch-actions"
+              onScroll={[Function]}
             >
               <div
                 className="bx--batch-summary"
@@ -3094,6 +3095,7 @@ exports[`DataTable sticky header should render 1`] = `
             <div
               aria-hidden={true}
               className="bx--batch-actions"
+              onScroll={[Function]}
             >
               <div
                 className="bx--batch-summary"
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
@@ -11,6 +11,7 @@ exports[`DataTable.TableBatchActions should render 1`] = `
   <div
     aria-hidden={true}
     className="bx--batch-actions custom-class"
+    onScroll={[Function]}
   >
     <div
       className="bx--batch-summary"
@@ -73,6 +74,7 @@ exports[`DataTable.TableBatchActions should render 2`] = `
   <div
     aria-hidden={false}
     className="bx--batch-actions bx--batch-actions--active custom-class"
+    onScroll={[Function]}
   >
     <div
       className="bx--batch-summary"
