From 5f06d20ccefa06247df1af9360bb25f96860b5c1 Mon Sep 17 00:00:00 2001
From: Joseph Schultz <jschultz333@gmail.com>
Date: Fri, 5 Jul 2024 15:29:49 -0500
Subject: [PATCH 1/3] style(datatable): isolate row hover styles from Toggletip
 links

Changes:
- Improve CSS selector which modifies inline links when their
  parent row is hovered over. Isolate the color change from
  affecting links within an adjacent cell's toggletip.
---
 .../scss/components/data-table/_data-table.scss      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss
index a111e567ede6..5638c436c3ab 100644
--- a/packages/styles/scss/components/data-table/_data-table.scss
+++ b/packages/styles/scss/components/data-table/_data-table.scss
@@ -121,16 +121,16 @@
   }
 
   .#{$prefix}--data-table
-    tr
-    + :not(.#{$prefix}--popover-container):hover
-    .#{$prefix}--link {
+    tr:hover
+    .#{$prefix}--link:not(.#{$prefix}--popover-container .#{$prefix}--link) {
     color: $link-secondary;
   }
 
   .#{$prefix}--data-table
-    tr
-    + :not(.#{$prefix}--popover-container):hover
-    .#{$prefix}--link--disabled {
+    tr:hover
+    .#{$prefix}--link--disabled:not(
+      .#{$prefix}--popover-container .#{$prefix}--link
+    ) {
     color: $text-disabled;
   }
 

From eaba08d8d5742106ffe0a23aa67f79c5506f2586 Mon Sep 17 00:00:00 2001
From: Joseph Schultz <jschultz333@gmail.com>
Date: Thu, 25 Jul 2024 14:34:06 -0500
Subject: [PATCH 2/3] test: temporary story to test tooltips within data tables

---
 .../stories/DataTable-basic.stories.js        | 104 ++++++++++++++++++
 1 file changed, 104 insertions(+)

diff --git a/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js b/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js
index 0a1c81fbe9de..b34d97aa000e 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js
@@ -7,6 +7,9 @@
 
 import React from 'react';
 import { DataTable } from '..';
+import { Information } from '@carbon/icons-react';
+import { Link } from '../../Link';
+import { Toggletip, ToggletipButton, ToggletipContent } from '../../Toggletip';
 
 const {
   Table,
@@ -127,6 +130,107 @@ export const Default = () => {
   );
 };
 
+export const TestWithTooltips = () => (
+  <DataTable
+    rows={[
+      {
+        id: '1',
+        name: (
+          <>
+            <Link href="#">Resource one</Link>
+            <Toggletip
+              align="right"
+              defaultOpen={true}
+              style={{ marginLeft: '0.5rem' }}>
+              <ToggletipButton label="Tooltip">
+                <Information />
+              </ToggletipButton>
+              <ToggletipContent>
+                <span>
+                  Tooltip{' '}
+                  <Link href="#" inline={true} style={{ marginLeft: '0.5rem' }}>
+                    Link
+                  </Link>
+                </span>
+              </ToggletipContent>
+            </Toggletip>
+          </>
+        ),
+        status: (
+          <Link disabled={true} href="#">
+            Disabled
+          </Link>
+        ),
+      },
+      {
+        id: '2',
+        name: <Link href="#">Resource two</Link>,
+        status: (
+          <>
+            {'Starting'}
+            <Toggletip
+              align="right"
+              defaultOpen={true}
+              style={{ marginLeft: '0.5rem' }}>
+              <ToggletipButton label="Tooltip">
+                <Information />
+              </ToggletipButton>
+              <ToggletipContent>
+                <span>
+                  Tooltip{' '}
+                  <Link href="#" inline={true} style={{ marginLeft: '0.5rem' }}>
+                    Link
+                  </Link>
+                </span>
+              </ToggletipContent>
+            </Toggletip>
+          </>
+        ),
+      },
+    ]}
+    headers={[
+      { key: 'name', header: 'Name' },
+      { key: 'status', header: 'Status' },
+    ]}>
+    {({
+      rows,
+      headers,
+      getHeaderProps,
+      getRowProps,
+      getTableProps,
+      getTableContainerProps,
+    }) => (
+      <TableContainer
+        description="With tooltips"
+        title="DataTable"
+        {...getTableContainerProps()}>
+        <Table {...getTableProps()} aria-label="sample table">
+          <TableHead>
+            <TableRow>
+              {headers.map((header, i) => (
+                <TableHeader key={i} {...getHeaderProps({ header })}>
+                  {header.header}
+                </TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <React.Fragment key={row.id}>
+                <TableRow {...getRowProps({ row })}>
+                  {row.cells.map((cell) => (
+                    <TableCell key={cell.id}>{cell.value}</TableCell>
+                  ))}
+                </TableRow>
+              </React.Fragment>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    )}
+  </DataTable>
+);
+
 export const XLWithTwoLines = () => {
   const rows = [
     {

From 3dec148a877f3743b627b6e071459c76204bd847 Mon Sep 17 00:00:00 2001
From: Joseph Schultz <jschultz333@gmail.com>
Date: Wed, 14 Aug 2024 09:27:38 -0500
Subject: [PATCH 3/3] test: remove temporary table tooltip story

---
 .../stories/DataTable-basic.stories.js        | 104 ------------------
 1 file changed, 104 deletions(-)

diff --git a/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js b/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js
index b34d97aa000e..0a1c81fbe9de 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-basic.stories.js
@@ -7,9 +7,6 @@
 
 import React from 'react';
 import { DataTable } from '..';
-import { Information } from '@carbon/icons-react';
-import { Link } from '../../Link';
-import { Toggletip, ToggletipButton, ToggletipContent } from '../../Toggletip';
 
 const {
   Table,
@@ -130,107 +127,6 @@ export const Default = () => {
   );
 };
 
-export const TestWithTooltips = () => (
-  <DataTable
-    rows={[
-      {
-        id: '1',
-        name: (
-          <>
-            <Link href="#">Resource one</Link>
-            <Toggletip
-              align="right"
-              defaultOpen={true}
-              style={{ marginLeft: '0.5rem' }}>
-              <ToggletipButton label="Tooltip">
-                <Information />
-              </ToggletipButton>
-              <ToggletipContent>
-                <span>
-                  Tooltip{' '}
-                  <Link href="#" inline={true} style={{ marginLeft: '0.5rem' }}>
-                    Link
-                  </Link>
-                </span>
-              </ToggletipContent>
-            </Toggletip>
-          </>
-        ),
-        status: (
-          <Link disabled={true} href="#">
-            Disabled
-          </Link>
-        ),
-      },
-      {
-        id: '2',
-        name: <Link href="#">Resource two</Link>,
-        status: (
-          <>
-            {'Starting'}
-            <Toggletip
-              align="right"
-              defaultOpen={true}
-              style={{ marginLeft: '0.5rem' }}>
-              <ToggletipButton label="Tooltip">
-                <Information />
-              </ToggletipButton>
-              <ToggletipContent>
-                <span>
-                  Tooltip{' '}
-                  <Link href="#" inline={true} style={{ marginLeft: '0.5rem' }}>
-                    Link
-                  </Link>
-                </span>
-              </ToggletipContent>
-            </Toggletip>
-          </>
-        ),
-      },
-    ]}
-    headers={[
-      { key: 'name', header: 'Name' },
-      { key: 'status', header: 'Status' },
-    ]}>
-    {({
-      rows,
-      headers,
-      getHeaderProps,
-      getRowProps,
-      getTableProps,
-      getTableContainerProps,
-    }) => (
-      <TableContainer
-        description="With tooltips"
-        title="DataTable"
-        {...getTableContainerProps()}>
-        <Table {...getTableProps()} aria-label="sample table">
-          <TableHead>
-            <TableRow>
-              {headers.map((header, i) => (
-                <TableHeader key={i} {...getHeaderProps({ header })}>
-                  {header.header}
-                </TableHeader>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <React.Fragment key={row.id}>
-                <TableRow {...getRowProps({ row })}>
-                  {row.cells.map((cell) => (
-                    <TableCell key={cell.id}>{cell.value}</TableCell>
-                  ))}
-                </TableRow>
-              </React.Fragment>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    )}
-  </DataTable>
-);
-
 export const XLWithTwoLines = () => {
   const rows = [
     {