fix(batchToolTips): make tooltips on batch visible (#13328)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 13, 2023 · 4871a96 · 4871a96
1 parent 997d7e2
commit 4871a96
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { TrashCan, Save, Download } from '@carbon/icons-react';
+import { TrashCan, Save, Download, Add } from '@carbon/icons-react';
 
 import Button from '../../Button';
 import DataTable, {
@@ -89,6 +89,18 @@ export const Default = () => (
                 Delete
               </TableBatchAction>
               <TableBatchAction
+                hasIconOnly
+                iconDescription="Add"
+                tooltipPosition="bottom"
+                tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
+                renderIcon={Add}
+                onClick={batchActionClick(selectedRows)}>
+                Delete
+              </TableBatchAction>
+              <TableBatchAction
+                hasIconOnly
+                iconDescription="Save"
+                tooltipPosition="bottom"
                 tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
                 renderIcon={Save}
                 onClick={batchActionClick(selectedRows)}>

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
@@ -393,10 +393,9 @@
   .#{$prefix}--batch-actions:focus {
     @include focus-outline;
   }
-
+  // 200% to allow tooltips
   .#{$prefix}--batch-actions--active {
-    overflow: auto hidden;
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%);
     pointer-events: all;
     transform: translate3d(0, 0, 0);
   }