upcoming: [M3-9006] - Update Table Component with Design Tokens (#11461)

* upcoming: [9006] - Update Table Component with Design Tokens * Change unit tests for `CollapsibleRow` component * Complete table overhaul * Second pass through tables * Update linode groups * Cleanup * Add hover background transitions to tables - `Part1` * Add zebra striping and selected states * Add selected state for plan table * Fix dark mode styles * Add hover background transitions to tables - `Part2` * Add hover background transitions to tables - `Part3` * Revert "Add hover background transitions to tables - `Part3`" This reverts commit bffeef5. * Revert "Add hover background transitions to tables - `Part2`" This reverts commit 0ecfc55. * Revert "Add hover background transitions to tables - `Part1`" This reverts commit 8f87cb6. * Make hover the default for TableRow * Add table striping as a setting preference * Add border to table attachment headers --------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com> Co-authored-by: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com>
linode · Dec 31, 2024 · b7a8e87 · b7a8e87
1 parent 7eb227a
commit b7a8e87
Show file tree

Hide file tree

Showing 74 changed files with 694 additions and 1,135 deletions.
diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -21,7 +21,7 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "3.9.1",
     "@linode/api-v4": "*",
-    "@linode/design-language-system": "^2.6.1",
+    "@linode/design-language-system": "^2.9.0",
     "@linode/search": "*",
     "@linode/ui": "*",
     "@linode/validation": "*",

diff --git a/packages/manager/src/assets/icons/sort-up.svg b/packages/manager/src/assets/icons/sort-up.svg
diff --git a/packages/manager/src/assets/icons/unsorted.svg b/packages/manager/src/assets/icons/unsorted.svg
diff --git a/packages/manager/src/components/CollapsibleTable/CollapsibleRow.test.tsx b/packages/manager/src/components/CollapsibleTable/CollapsibleRow.test.tsx
@@ -14,7 +14,7 @@ const innerTableData = tableRowItems[0].innerTable;
 
 describe('CollapsibleRow', () => {
   it('should render CollapsibleRow with label, outer table cells and ArrowRightIcon', () => {
-    const { getByTestId, getByText } = render(
+    const { getByRole, getByText } = render(
       wrapWithTableBody(<CollapsibleRow {...defaultArgs} />)
     );
 
@@ -24,11 +24,12 @@ describe('CollapsibleRow', () => {
       expect(getByText(cell.label)).toBeVisible();
     });
 
-    expect(getByTestId('KeyboardArrowRightIcon')).toBeInTheDocument();
+    const button = getByRole('button');
+    expect(button).toHaveAttribute('aria-label', `expand ${rowLabel} row`);
   });
 
   it('should render an Expanded Row with ArowDownIcon when ArrowRightIcon button is clicked', async () => {
-    const { getByTestId, queryByText } = render(
+    const { getByRole, queryByText } = render(
       wrapWithTableBody(<CollapsibleRow {...defaultArgs} />)
     );
 
@@ -42,16 +43,13 @@ describe('CollapsibleRow', () => {
       );
     });
 
-    const arrowRightButton = getByTestId('KeyboardArrowRightIcon').closest(
-      'button'
-    );
+    const button = getByRole('button');
+    expect(button).toHaveAttribute('aria-label', `expand ${rowLabel} row`);
 
-    if (arrowRightButton) {
-      await userEvent.click(arrowRightButton);
+    if (button) {
+      await userEvent.click(button);
     }
 
-    expect(getByTestId('KeyboardArrowDownIcon')).toBeInTheDocument();
-
     // Expect innerTableData to be visible when row is in an Expanded state.
     innerTableData.headCells.forEach((cell) =>
       expect(queryByText(cell.label)).toBeInTheDocument()

diff --git a/packages/manager/src/components/CollapsibleTable/CollapsibleRow.tsx b/packages/manager/src/components/CollapsibleTable/CollapsibleRow.tsx
@@ -1,11 +1,10 @@
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
-import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
+import KeyboardArrowDownIcon from 'src/assets/icons/arrow_down.svg';
+import KeyboardArrowRightIcon from 'src/assets/icons/arrow_right.svg';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 
@@ -22,47 +21,29 @@ export const CollapsibleRow = (props: Props) => {
 
   return (
     <>
-      <StyledOuterTableRow>
-        <TableCell component="th" scope="row">
-          <IconButton
-            aria-label={`expand ${label} row`}
-            onClick={() => setOpen(!open)}
-            size="small"
-            sx={{ padding: 1 }}
-          >
-            {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-          </IconButton>
-          {label}
+      <TableRow>
+        <TableCell scope="row">
+          <Box alignItems="center" display="flex">
+            <IconButton
+              aria-label={`expand ${label} row`}
+              onClick={() => setOpen(!open)}
+              size="small"
+              sx={{ marginRight: 0.5, padding: 0 }}
+            >
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+            {label}
+          </Box>
         </TableCell>
         {OuterTableCells}
-      </StyledOuterTableRow>
-      <StyledTableRow>
-        <TableCell colSpan={6} style={{ border: 'none', padding: 0 }}>
+      </TableRow>
+      <TableRow className="MuiTableRow-nested">
+        <TableCell className="MuiTableCell-nested" colSpan={6}>
           <Collapse in={open} timeout="auto" unmountOnExit>
             <Box>{InnerTable}</Box>
           </Collapse>
         </TableCell>
-      </StyledTableRow>
+      </TableRow>
     </>
   );
 };
-
-const StyledOuterTableRow = styled(TableRow, {
-  label: 'StyledOuterTableRow',
-})(({ theme }) => ({
-  '& > *': { borderBottom: 'unset' },
-  '& th': {
-    '&:first-of-type': {
-      paddingLeft: 0,
-    },
-  },
-  '& th, td': {
-    borderBottom: `1px solid ${theme.borderColors.borderTable} !important`,
-  },
-}));
-
-const StyledTableRow = styled(TableRow, {
-  label: 'StyledTableRow',
-})(() => ({
-  height: 'auto',
-}));
diff --git a/packages/manager/src/components/CollapsibleTable/CollapsibleTable.tsx b/packages/manager/src/components/CollapsibleTable/CollapsibleTable.tsx
@@ -17,13 +17,14 @@ interface Props {
   TableItems: TableItem[];
   TableRowEmpty: JSX.Element;
   TableRowHead: JSX.Element;
+  striped?: boolean;
 }
 
 export const CollapsibleTable = (props: Props) => {
-  const { TableItems, TableRowEmpty, TableRowHead } = props;
+  const { TableItems, TableRowEmpty, TableRowHead, striped = true } = props;
 
   return (
-    <Table aria-label="collapsible table">
+    <Table aria-label="collapsible table" nested striped={striped}>
       <TableHead data-qa-table-row="collapsible-table-headers-row">
         {TableRowHead}
       </TableHead>

diff --git a/packages/manager/src/components/GroupByTagToggle.tsx b/packages/manager/src/components/GroupByTagToggle.tsx
@@ -1,8 +1,8 @@
+import { IconButton } from '@linode/ui';
 import { Tooltip } from '@linode/ui';
 import * as React from 'react';
 
 import GroupByTag from 'src/assets/icons/group-by-tag.svg';
-import { StyledToggleButton } from 'src/features/Linodes/LinodesLanding/DisplayLinodes.styles';
 
 interface GroupByTagToggleProps {
   isGroupedByTag: boolean;
@@ -26,19 +26,21 @@ export const GroupByTagToggle = React.memo((props: GroupByTagToggleProps) => {
         placement="top-end"
         title={`${isGroupedByTag ? 'Ungroup' : 'Group'} by tag`}
       >
-        <StyledToggleButton
+        <IconButton
+          sx={{
+            padding: 0,
+          }}
           aria-describedby={groupByDescriptionId}
           aria-label={`Toggle group by tag`}
+          className={isGroupedByTag ? 'MuiIconButton-isActive' : ''}
           disableRipple
           // See https://github.com/linode/manager/pull/6653 for more details
           disabled={isLargeAccount}
-          isActive={isGroupedByTag}
           // Group by Tag is not available if you have a large account.
           onClick={toggleGroupByTag}
-          size="large"
         >
           <GroupByTag />
-        </StyledToggleButton>
+        </IconButton>
       </Tooltip>
     </>
   );

diff --git a/packages/manager/src/components/LineGraph/LineGraph.styles.ts b/packages/manager/src/components/LineGraph/LineGraph.styles.ts
@@ -1,11 +1,6 @@
 import { Button, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import { Table } from 'src/components/Table';
-import { TableBody } from 'src/components/TableBody';
-import { TableCell } from 'src/components/TableCell';
-import { TableHead } from 'src/components/TableHead';
-
 export const StyledWrapper = styled('div')(() => ({
   display: 'flex',
   flex: 1,
@@ -31,84 +26,6 @@ export const StyledCanvasContainer = styled('div', {
   width: '100%',
 });
 
-export const StyledTable = styled(Table, {
-  label: 'StyledTable',
-})(({ theme }) => ({
-  // Both td and th
-  '& .MuiTableCell-root': {
-    backgroundColor: theme.bg.offWhite,
-    border: 'none',
-    height: 'auto',
-    padding: theme.spacing(0.5),
-    tableLayout: 'fixed',
-  },
-  '& .MuiTableRow-root': {
-    border: 0,
-  },
-
-  maxWidth: '600px',
-
-  [theme.breakpoints.down('lg')]: {
-    width: '100%',
-  },
-
-  [theme.breakpoints.down('md')]: {
-    '& .MuiTable-root': {
-      display: 'flex',
-    },
-    '& .MuiTableRow-root': {
-      display: 'flex',
-      flexBasis: '100%',
-      flexDirection: 'column',
-    },
-    maxWidth: '100%',
-  },
-
-  width: '85%',
-}));
-
-export const StyledTableBody = styled(TableBody, {
-  label: 'StyledTableBody',
-})(({ theme }) => ({
-  [theme.breakpoints.down('md')]: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-  },
-}));
-
-export const StyledTableCell = styled(TableCell, {
-  label: 'StyledTableCell',
-})(({ theme }) => ({
-  '&:first-of-type': {
-    [theme.breakpoints.down('md')]: {
-      marginLeft: '-45px',
-    },
-  },
-  [theme.breakpoints.down('md')]: {
-    justifyContent: 'normal',
-    minHeight: 'auto',
-  },
-}));
-
-export const StyledTableHead = styled(TableHead, {
-  label: 'StyledTableHead',
-})(({ theme }) => ({
-  [theme.breakpoints.down('md')]: {
-    '& .MuiTableRow-root': {
-      '&:last-of-type': {
-        marginBottom: 0,
-      },
-      display: 'flex',
-      flexDirection: 'column',
-      marginBottom: theme.spacing(5.25),
-      marginRight: theme.spacing(2),
-      marginTop: theme.spacing(5.25),
-    },
-    display: 'block',
-  },
-}));
-
 export const StyledButton = styled(Button, {
   label: 'StyledButton',
 })(({ theme }) => ({