feat: Add hover effect to clickable rows (#406)

pluralsh · Feb 7, 2023 · 22dac99 · 22dac99
1 parent 66496a8
commit 22dac99
Show file tree

Hide file tree

Showing 4 changed files with 436 additions and 573 deletions.
diff --git a/package.json b/package.json
@@ -50,13 +50,13 @@
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
     "grommet": "2.29.1",
-    "grommet-icons": "4.8.0",
+    "grommet-icons": "4.9.0",
     "highlight.js": "11.7.0",
     "honorable-recipe-mapper": "0.2.0",
     "moment": "2.29.4",
     "prop-types": "15.8.1",
     "react-animate-height": "3.1.0",
-    "react-markdown": "8.0.4",
+    "react-markdown": "8.0.5",
     "react-merge-refs": "2.0.1",
     "react-spring": "9.6.1",
     "react-virtual": "2.10.4",
@@ -84,23 +84,28 @@
     "@types/styled-components": "5.1.26",
     "@typescript-eslint/eslint-plugin": "5.47.0",
     "@typescript-eslint/parser": "5.47.0",
-    "babel-loader": "9.1.0",
-    "eslint": "8.30.0",
-    "eslint-plugin-storybook": "0.6.8",
-    "firebase-tools": "11.19.0",
+    "babel-loader": "9.1.2",
+    "eslint": "8.33.0",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import-newlines": "1.3.0",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "0.6.10",
+    "firebase-tools": "11.22.0",
     "fuse.js": "6.6.2",
     "honorable": "1.0.0-beta.17",
     "honorable-theme-default": "1.0.0-beta.5",
     "http-server": "14.1.1",
-    "jest-mock": "29.3.1",
+    "jest-mock": "29.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "6.5.0",
+    "react-router-dom": "6.8.1",
     "react-transition-group": "4.4.5",
     "rimraf": "3.0.2",
     "storybook": "7.0.0-alpha.54",
     "styled-components": "5.3.6",
-    "typescript": "4.9.4",
+    "typescript": "4.9.5",
     "vite": "3.2.4"
   },
   "peerDependencies": {

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -131,9 +131,21 @@ const Tbody = styled(TbodyUnstyled)(({ theme }) => ({
   backgroundColor: theme.colors['fill-one'],
 }))
 
-const Tr = styled.tr(() => ({
+const Tr = styled.tr<{clickable?: boolean, lighter?: boolean}>(({ theme, clickable = false, lighter = false }) => ({
   display: 'contents',
-  backgroundColor: 'inherit',
+  backgroundColor: lighter
+    ? theme.colors['fill-one']
+    : theme.colors['fill-one-hover'],
+
+  ...(clickable && {
+    cursor: 'pointer',
+
+    '&:hover': {
+      backgroundColor: lighter
+        ? theme.colors['fill-one-hover']
+        : theme.colors['fill-one-selected'],
+    },
+  }),
 }))
 
 const Th = styled.th<{
@@ -194,36 +206,26 @@ const Th = styled.th<{
 // TODO: Set vertical align to top for tall cells (~3 lines of text or more). See ENG-683.
 const Td = styled.td<{
   firstRow?: boolean
-  lighter: boolean
   loose?: boolean
   stickyColumn: boolean
   truncateColumn: boolean
-  clickable?: boolean
 }>(({
   theme,
   firstRow,
-  lighter,
   loose,
   stickyColumn,
   truncateColumn = false,
-  clickable = false,
 }) => ({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
   height: 'auto',
   minHeight: 52,
 
-  backgroundColor: lighter
-    ? theme.colors['fill-one']
-    : theme.colors['fill-one-hover'],
+  backgroundColor: 'inherit',
   borderTop: firstRow ? '' : theme.borders.default,
   color: theme.colors.text,
 
-  ...(clickable && {
-    cursor: 'pointer',
-  }),
-
   padding: loose ? '16px 12px' : '8px 12px',
   '&:first-child': stickyColumn
     ? {
@@ -244,13 +246,11 @@ const Td = styled.td<{
     : {}),
 }))
 
-const TdExpand = styled.td<{ lighter: boolean }>(({ theme, lighter }) => ({
+const TdExpand = styled.td(({ theme }) => ({
   '&:last-child': {
     gridColumn: '2 / -1',
   },
-  backgroundColor: lighter
-    ? theme.colors['fill-one']
-    : theme.colors['fill-one-hover'],
+  backgroundColor: 'inherit',
   color: theme.colors.text,
   height: 'auto',
   minHeight: 52,
@@ -315,11 +315,13 @@ function FillerRow({
   stickyColumn: boolean
 }) {
   return (
-    <Tr aria-hidden="true">
+    <Tr
+      aria-hidden="true"
+      lighter={index % 2 === 0}
+    >
       <Td
         aria-hidden="true"
         stickyColumn={stickyColumn}
-        lighter={index % 2 === 0}
         style={{
           height,
           minHeight: height,
@@ -521,29 +523,26 @@ function TableRef({
                   <Tr
                     key={row.id}
                     onClick={e => onRowClick?.(e, row)}
+                    lighter={i % 2 === 0}
+                    clickable={!!onRowClick}
                   >
                     {row.getVisibleCells().map(cell => (
                       <Td
                         key={cell.id}
                         firstRow={i === 0}
-                        lighter={i % 2 === 0}
                         loose={loose}
                         stickyColumn={stickyColumn}
                         truncateColumn={cell.column?.columnDef?.meta?.truncate}
-                        clickable={!!onRowClick}
                       >
                         {flexRender(cell.column.columnDef.cell,
                           cell.getContext())}
                       </Td>
                     ))}
                   </Tr>
                   {row.getIsExpanded() && (
-                    <Tr>
-                      <TdExpand lighter={i % 2 === 0} />
-                      <TdExpand
-                        colSpan={row.getVisibleCells().length - 1}
-                        lighter={i % 2 === 0}
-                      >
+                    <Tr lighter={i % 2 === 0}>
+                      <TdExpand />
+                      <TdExpand colSpan={row.getVisibleCells().length - 1}>
                         {renderExpanded({ row })}
                       </TdExpand>
                     </Tr>

diff --git a/src/stories/Table.stories.tsx b/src/stories/Table.stories.tsx
@@ -300,6 +300,16 @@ Loose.args = {
   loose: true,
 }
 
+export const Clickable = Template.bind({})
+
+Clickable.args = {
+  width: '900px',
+  height: '400px',
+  data: repeatedData,
+  columns: expandingColumns,
+  onRowClick: (e: MouseEvent, row: Row<any>) => console.log(row?.original),
+}
+
 export const StickyColumn = Template.bind({})
 
 StickyColumn.args = {