From bbc13e67a14db1bba06b86c9e9d608e544c2c733 Mon Sep 17 00:00:00 2001
From: chris-cedrone-cengage
 <77400920+chris-cedrone-cengage@users.noreply.github.com>
Date: Tue, 28 Jan 2025 13:58:50 -0500
Subject: [PATCH] fix(Table): Reconfigured the table CSS to better allow for
 content within a table to overlay the container, such as dropdowns. (#1621)

---
 .changeset/fix-tableOverflow.md               |  5 ++
 .../src/components/Table/Table.stories.tsx    | 70 +++++++++++++++----
 .../src/components/Table/Table.test.js        | 62 ++++++++++++----
 .../src/components/Table/Table.tsx            | 20 ++++--
 .../src/components/Table/TableHeaderCell.tsx  | 13 +++-
 .../src/components/Table/TableRow.tsx         | 18 ++++-
 6 files changed, 150 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/fix-tableOverflow.md

diff --git a/.changeset/fix-tableOverflow.md b/.changeset/fix-tableOverflow.md
new file mode 100644
index 0000000000..adae830eb4
--- /dev/null
+++ b/.changeset/fix-tableOverflow.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Table): Reconfigured the table CSS to better allow for content within a table to overlay the container, such as dropdowns.
diff --git a/packages/react-magma-dom/src/components/Table/Table.stories.tsx b/packages/react-magma-dom/src/components/Table/Table.stories.tsx
index 38d49f4a55..2813f3fb2e 100644
--- a/packages/react-magma-dom/src/components/Table/Table.stories.tsx
+++ b/packages/react-magma-dom/src/components/Table/Table.stories.tsx
@@ -50,7 +50,14 @@ const rows = [
 ];
 
 const Template: Story<TableProps> = args => (
-  <Card isInverse={args.isInverse}>
+  <Card
+    style={
+      args.hasSquareCorners
+        ? { borderRadius: '0' }
+        : { borderRadius: `${magma.borderRadius}` }
+    }
+    isInverse={args.isInverse}
+  >
     <Table {...args}>
       <TableHead>
         <TableRow>
@@ -300,7 +307,14 @@ export const ControlledPagination = args => {
   );
 
   return (
-    <Card isInverse={args.isInverse}>
+    <Card
+      isInverse={args.isInverse}
+      style={
+        args.hasSquareCorners
+          ? { borderRadius: '0' }
+          : { borderRadius: `${magma.borderRadius}` }
+      }
+    >
       <Table {...args}>
         <TableHead>
           <TableRow>
@@ -458,7 +472,14 @@ export const PaginationInverse = args => {
   );
 
   return (
-    <Card isInverse>
+    <Card
+      isInverse
+      style={
+        args.hasSquareCorners
+          ? { borderRadius: '0' }
+          : { borderRadius: `${magma.borderRadius}` }
+      }
+    >
       <Table {...args} isInverse>
         <TableHead>
           <TableRow>
@@ -545,7 +566,14 @@ RowColors.args = {
 
 export const RowColorsInverse = args => {
   return (
-    <Card isInverse>
+    <Card
+      isInverse
+      style={
+        args.hasSquareCorners
+          ? { borderRadius: '0' }
+          : { borderRadius: `${magma.borderRadius}` }
+      }
+    >
       <Table {...args}>
         <TableHead>
           <TableRow>
@@ -646,7 +674,14 @@ export const Sortable = args => {
   };
 
   return (
-    <Card isInverse={args.isInverse}>
+    <Card
+      isInverse={args.isInverse}
+      style={
+        args.hasSquareCorners
+          ? { borderRadius: '0' }
+          : { borderRadius: `${magma.borderRadius}` }
+      }
+    >
       <Table {...args}>
         <TableHead>
           <TableRow>
@@ -717,7 +752,14 @@ Sortable.args = {
 
 export const WithDropdown = args => {
   return (
-    <Card isInverse={args.isInverse}>
+    <Card
+      isInverse={args.isInverse}
+      style={
+        args.hasSquareCorners
+          ? { borderRadius: '0' }
+          : { borderRadius: `${magma.borderRadius}` }
+      }
+    >
       <Table maxWidth={500} {...args}>
         <TableHead>
           <TableRow>
@@ -797,13 +839,17 @@ export const AdjustableRowNumber = args => {
       tableRows.push(
         <TableRow key={`row${i}`}>
           <TableCell key={`cell${i}-left`}>{i}</TableCell>
-          <TableCell key={`cell${i}-middle`}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TableCell>
-          <TableCell key={`cell${i}-right`}>Nullam bibendum diam vel felis consequat lacinia.</TableCell>
+          <TableCell key={`cell${i}-middle`}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </TableCell>
+          <TableCell key={`cell${i}-right`}>
+            Nullam bibendum diam vel felis consequat lacinia.
+          </TableCell>
         </TableRow>
       );
     }
     return tableRows;
-  };
+  }
 
   return (
     <Table {...args}>
@@ -814,9 +860,7 @@ export const AdjustableRowNumber = args => {
           <TableHeaderCell>Column</TableHeaderCell>
         </TableRow>
       </TableHead>
-      <TableBody>
-        {getTableRows()}
-      </TableBody>
+      <TableBody>{getTableRows()}</TableBody>
     </Table>
   );
 };
@@ -868,4 +912,4 @@ export const NoRowsPerPageControl = args => {
       />
     </Card>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/react-magma-dom/src/components/Table/Table.test.js b/packages/react-magma-dom/src/components/Table/Table.test.js
index ceee571792..5e1c51dbf0 100644
--- a/packages/react-magma-dom/src/components/Table/Table.test.js
+++ b/packages/react-magma-dom/src/components/Table/Table.test.js
@@ -10,7 +10,7 @@ import {
 
 import { magma } from '../../theme/magma';
 
-import { act, render, fireEvent } from '@testing-library/react';
+import { act, render, fireEvent, getByTestId } from '@testing-library/react';
 import { transparentize } from 'polished';
 
 describe('Table', () => {
@@ -23,15 +23,15 @@ describe('Table', () => {
 
   it('should render table with a border radius', () => {
     const { getByTestId } = render(
-      <Table isInverse testId="test-id">
+      <Table>
         <TableHead>
           <TableRow>
-            <TableHeaderCell>heading 1</TableHeaderCell>
-            <TableHeaderCell>heading 2</TableHeaderCell>
+            <TableHeaderCell testId="heading-1">heading 1</TableHeaderCell>
+            <TableHeaderCell testId="heading-2">heading 2</TableHeaderCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          <TableRow>
+          <TableRow testId="table-row-2">
             <TableCell>cell 1</TableCell>
             <TableCell>cell 2</TableCell>
           </TableRow>
@@ -39,23 +39,41 @@ describe('Table', () => {
       </Table>
     );
 
-    expect(getByTestId('table-wrapper-test-id')).toHaveStyleRule(
+    expect(getByTestId('heading-1')).toHaveStyleRule(
       'border-radius',
-      magma.spaceScale.spacing03
+      `${magma.borderRadius} 0 0 0`,
+      { target: 'first-child' }
+    );
+    expect(getByTestId('heading-2')).toHaveStyleRule(
+      'border-radius',
+      `0 ${magma.borderRadius} 0 0`,
+
+      { target: 'last-child' }
+    );
+    expect(getByTestId('table-row-2')).toHaveStyleRule(
+      'border-radius',
+      `0 0 0 ${magma.borderRadius}`,
+
+      { target: 'first-child' }
+    );
+    expect(getByTestId('table-row-2')).toHaveStyleRule(
+      'border-radius',
+      `0 0 ${magma.borderRadius} 0`,
+      { target: 'last-child' }
     );
   });
 
   it('should render table without a border radius', () => {
     const { getByTestId } = render(
-      <Table hasSquareCorners isInverse testId="test-id">
+      <Table hasSquareCorners>
         <TableHead>
           <TableRow>
-            <TableHeaderCell>heading 1</TableHeaderCell>
-            <TableHeaderCell>heading 2</TableHeaderCell>
+            <TableHeaderCell testId="heading-1">heading 1</TableHeaderCell>
+            <TableHeaderCell testId="heading-2">heading 2</TableHeaderCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          <TableRow>
+          <TableRow testId="table-row-2">
             <TableCell>cell 1</TableCell>
             <TableCell>cell 2</TableCell>
           </TableRow>
@@ -63,10 +81,24 @@ describe('Table', () => {
       </Table>
     );
 
-    expect(getByTestId('table-wrapper-test-id')).toHaveStyleRule(
+    expect(getByTestId('heading-1')).toHaveStyleRule('border-radius', '0', {
+      target: 'first-child',
+    });
+    expect(getByTestId('heading-2')).toHaveStyleRule(
+      'border-radius',
+      '0',
+
+      { target: 'last-child' }
+    );
+    expect(getByTestId('table-row-2')).toHaveStyleRule(
       'border-radius',
-      '0'
+      '0',
+
+      { target: 'first-child' }
     );
+    expect(getByTestId('table-row-2')).toHaveStyleRule('border-radius', '0', {
+      target: 'last-child',
+    });
   });
 
   it('should render table with vertical borders', () => {
@@ -161,11 +193,11 @@ describe('Table', () => {
 
     expect(getByText('cell 1')).toHaveStyleRule(
       'padding',
-      `${magma.spaceScale.spacing02} ${magma.spaceScale.spacing03}`
+      `${magma.spaceScale.spacing02} ${magma.borderRadius}`
     );
     expect(getByText('heading 1')).toHaveStyleRule(
       'padding',
-      `${magma.spaceScale.spacing02} ${magma.spaceScale.spacing03}`
+      `${magma.spaceScale.spacing02} ${magma.borderRadius}`
     );
   });
 
diff --git a/packages/react-magma-dom/src/components/Table/Table.tsx b/packages/react-magma-dom/src/components/Table/Table.tsx
index a5ffa58ec0..544c945559 100644
--- a/packages/react-magma-dom/src/components/Table/Table.tsx
+++ b/packages/react-magma-dom/src/components/Table/Table.tsx
@@ -82,6 +82,7 @@ export enum TableRowColor {
 interface TableContextInterface {
   density?: TableDensity;
   hasHoverStyles?: boolean;
+  hasSquareCorners?: boolean;
   hasVerticalBorders?: boolean;
   hasZebraStripes?: boolean;
   isInverse?: boolean;
@@ -94,6 +95,7 @@ interface TableContextInterface {
 export const TableContext = React.createContext<TableContextInterface>({
   density: TableDensity.normal,
   hasHoverStyles: false,
+  hasSquareCorners: false,
   hasZebraStripes: false,
   hasVerticalBorders: false,
   isInverse: false,
@@ -104,13 +106,13 @@ export const TableContext = React.createContext<TableContextInterface>({
 });
 
 export const TableContainer = styled.div<{
-  minWidth: number;
-  hasSquareCorners?: boolean;
   isInverse?: boolean;
+  minWidth: number;
+  tableOverFlow?: string;
 }>`
-  border-radius: ${props =>
-    props.hasSquareCorners ? 0 : props.theme.borderRadius};
-  overflow: ${props => (props.minWidth ? 'auto' : 'visible')};
+  @media screen and (max-width: ${props => props.minWidth}px) {
+    overflow: auto;
+  }
   &:focus {
     outline: none;
   }
@@ -124,11 +126,14 @@ export const TableContainer = styled.div<{
 `;
 
 export const StyledTable = styled.table<{
+  hasSquareCorners?: boolean;
   isInverse?: boolean;
   minWidth: number;
 }>`
   border-collapse: collapse;
   border-spacing: 0;
+  border-radius: ${props =>
+    props.hasSquareCorners ? '0' : props.theme.borderRadius};
   color: ${props =>
     props.isInverse
       ? props.theme.colors.neutral100
@@ -170,17 +175,17 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
         value={{
           density,
           hasHoverStyles,
+          hasSquareCorners,
           hasZebraStripes,
           hasVerticalBorders,
           isInverse: isInverse,
           isSelectable,
           isSortableBySelected,
-          rowCount
+          rowCount,
         }}
       >
         <TableContainer
           data-testid={tableWrapper}
-          hasSquareCorners={hasSquareCorners}
           isInverse={isInverse}
           minWidth={minWidth}
           theme={theme}
@@ -189,6 +194,7 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
           <StyledTable
             {...other}
             data-testid={testId}
+            hasSquareCorners={hasSquareCorners}
             isInverse={isInverse}
             minWidth={minWidth || theme.breakpoints.small}
             ref={ref}
diff --git a/packages/react-magma-dom/src/components/Table/TableHeaderCell.tsx b/packages/react-magma-dom/src/components/Table/TableHeaderCell.tsx
index 9041eefe1a..a7f9c88a76 100644
--- a/packages/react-magma-dom/src/components/Table/TableHeaderCell.tsx
+++ b/packages/react-magma-dom/src/components/Table/TableHeaderCell.tsx
@@ -62,6 +62,7 @@ export enum TableHeaderCellScope {
 
 const StyledTableHeaderCell = styled.th<{
   density?: TableDensity;
+  hasSquareCorners?: boolean;
   hasVerticalBorders?: boolean;
   isInverse?: boolean;
   isRowHeader?: boolean;
@@ -84,13 +85,22 @@ const StyledTableHeaderCell = styled.th<{
 
   ${baseTableCellStyle}
 
+   &:first-child {
+    border-radius: ${props =>
+      props.hasSquareCorners ? '0' : `${props.theme.borderRadius} 0 0 0`};
+  }
+  &:last-child {
+    border-radius: ${props =>
+      props.hasSquareCorners ? '0' : `0 ${props.theme.borderRadius} 0 0`};
+  }
+
   ${props =>
     props.isSortable &&
     css`
       padding: 0;
     `}
 
-    ${props =>
+  ${props =>
     props.width &&
     css`
       width: ${props.width};
@@ -195,6 +205,7 @@ export const TableHeaderCell = React.forwardRef<
       {...other}
       data-testid={testId}
       density={tableContext.density}
+      hasSquareCorners={tableContext.hasSquareCorners}
       hasVerticalBorders={tableContext.hasVerticalBorders}
       isInverse={tableContext.isInverse}
       ref={ref}
diff --git a/packages/react-magma-dom/src/components/Table/TableRow.tsx b/packages/react-magma-dom/src/components/Table/TableRow.tsx
index 8d1ce3a3c2..f8685c7113 100644
--- a/packages/react-magma-dom/src/components/Table/TableRow.tsx
+++ b/packages/react-magma-dom/src/components/Table/TableRow.tsx
@@ -97,6 +97,7 @@ function buildTableRowColor(props) {
 
 const StyledTableRow = styled.tr<{
   color?: string;
+  hasSquareCorners?: boolean;
   hasHoverStyles?: boolean;
   hasZebraStripes?: boolean;
   isInverse?: boolean;
@@ -113,6 +114,14 @@ const StyledTableRow = styled.tr<{
 
   &:last-child {
     border-bottom: 0;
+    td:first-child {
+      border-radius: ${props =>
+        props.hasSquareCorners ? '0' : `0 0 0 ${props.theme.borderRadius}`};
+    }
+    td:last-child {
+      border-radius: ${props =>
+        props.hasSquareCorners ? '0' : `0 0 ${props.theme.borderRadius} 0`};
+    }
   }
 
   ${props =>
@@ -281,6 +290,7 @@ export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
       <StyledTableRow
         {...other}
         data-testid={testId}
+        hasSquareCorners={tableContext.hasSquareCorners}
         hasHoverStyles={tableContext.hasHoverStyles && !isHeaderRow}
         hasZebraStripes={tableContext.hasZebraStripes}
         isInverse={tableContext.isInverse}
@@ -338,8 +348,12 @@ export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
               labelStyle={{ padding: 0 }}
               labelText={
                 isSelected
-                  ? `${i18n.table.selectable.deselectRowAriaLabel} ${rowName || ''}`
-                  : `${i18n.table.selectable.selectRowAriaLabel} ${rowName || ''}`
+                  ? `${i18n.table.selectable.deselectRowAriaLabel} ${
+                      rowName || ''
+                    }`
+                  : `${i18n.table.selectable.selectRowAriaLabel} ${
+                      rowName || ''
+                    }`
               }
               isTextVisuallyHidden
               isInverse={getIsCheckboxInverse()}