fix: fixed datatable hover with Toggletip (#15965)

* fix: fixed datatable hover * fix: change to popover the checker * fix: fixed style
carbon-design-system · Mar 26, 2024 · f34e52a · f34e52a
1 parent 4e0c7c5
commit f34e52a
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 2 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
@@ -29,8 +29,11 @@ import DataTable, {
   TableToolbarMenu,
 } from '..';
 
+import { Toggletip, ToggletipButton, ToggletipContent } from '../../Toggletip';
+
 import { batchActionClick, rows, headers } from './shared';
 import mdx from '../DataTable.mdx';
+import Link from '../../Link';
 
 export default {
   title: 'Components/DataTable/Batch Actions',
@@ -285,6 +288,62 @@ export const Playground = (args) => (
   </DataTable>
 );
 
+export const Test = () => (
+  <DataTable
+    headers={[
+      {
+        key: 'demo',
+        header: 'Demo',
+      },
+    ]}
+    rows={[{ demo: 'Trigger' }]}>
+    {({
+      rows,
+      headers,
+      getHeaderProps,
+      getRowProps,
+      getTableProps,
+      getTableContainerProps,
+    }) => (
+      <TableContainer {...getTableContainerProps()}>
+        <Table {...getTableProps()}>
+          <TableHead>
+            <TableRow>
+              {headers.map((header) => (
+                <TableHeader key={1} {...getHeaderProps({ header })}>
+                  {header.header}
+                </TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow key={row} {...getRowProps({ row })}>
+                {row.cells.map((cell) => (
+                  <TableCell key={row}>
+                    <Toggletip defaultOpen align="right">
+                      <ToggletipButton>{cell.value}</ToggletipButton>
+                      <ToggletipContent>
+                        <p>
+                          Lorem ipsum dolor{' '}
+                          <Link href="www.google.com" inline>
+                            sit amet
+                          </Link>
+                          .
+                        </p>
+                      </ToggletipContent>
+                    </Toggletip>
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    )}
+  </DataTable>
+);
+
 Playground.argTypes = {
   filterRows: {
     table: {

diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss
@@ -120,11 +120,17 @@
     color: $text-primary;
   }
 
-  .#{$prefix}--data-table tr:hover .#{$prefix}--link {
+  .#{$prefix}--data-table
+    tr
+    + :not(.#{$prefix}--popover-container):hover
+    .#{$prefix}--link {
     color: $link-secondary;
   }
 
-  .#{$prefix}--data-table tr:hover .#{$prefix}--link--disabled {
+  .#{$prefix}--data-table
+    tr
+    + :not(.#{$prefix}--popover-container):hover
+    .#{$prefix}--link--disabled {
     color: $text-disabled;
   }