fix(Table): Reconfigured the table CSS to better allow for content wi…

…thin a table to overlay the container, such as dropdowns. (#1621)
cengage · Jan 28, 2025 · bbc13e6 · bbc13e6 · github-actions · Jan 28, 2025
1 parent 21fc0cb
commit bbc13e6
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 38 deletions.
diff --git a/.changeset/fix-tableOverflow.md 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
@@ -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>
   );
-};
+};
diff --git 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,50 +23,82 @@ 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>
         </TableBody>
       </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>
         </TableBody>
       </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
@@ -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
@@ -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}