feat(components): update table

packages/components/src/List/List.stories.tsx

@@ -26,11 +26,7 @@ export default {
   render: Render
 } as Meta<typeof List>;
 
-export const Default: StoryObj<ListProps> = {
-  args: {
-    selectedKeys: ['1']
-  }
-};
+export const Default: StoryObj<ListProps> = {};
 
 export const Horizontal: StoryObj<ListProps> = {
   args: {

packages/components/src/Table/Table.stories.tsx

@@ -42,8 +42,15 @@ export default {
 
 export const Default: StoryObj<TableProps> = {};
 
-export const SeleButtonbleRow: StoryObj<TableProps> = {
+export const RowAction: StoryObj<TableProps> = {
   args: {
     onRowAction: (key) => alert(`Row ${key} selected`)
   }
 };
+
+export const Selection: StoryObj<TableProps> = {
+  args: {
+    selectionMode: 'single',
+    selectedKeys: [1]
+  }
+};

packages/components/src/Table/Table.style.tsx

@@ -1,70 +1,54 @@
-import styled from 'styled-components';
-import { theme } from '@interlay/theme';
+import styled, { css } from 'styled-components';
 
 const StyledTable = styled.table`
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   isolation: isolate;
-  border: ${theme.table.border};
-  border-radius: 4px;
   overflow: hidden;
+
+  ${({ theme }) => theme.table.base};
 `;
 
 const StyledTableColumnHeader = styled.th`
-  color: ${theme.colors.textTertiary};
-  font-size: ${theme.text.s};
-  line-height: ${theme.lineHeight.s};
-  font-weight: ${theme.fontWeight.bold};
-  padding: ${theme.spacing.spacing4} 0;
   text-align: left;
   position: relative;
-  padding-left: ${theme.spacing.spacing4};
 
-  &:last-of-type {
-    text-align: right;
-    padding-right: ${theme.spacing.spacing4};
-  }
+  ${({ theme }) => theme.table.columnHeader};
 `;
 
 const StyledTableCell = styled.td`
-  color: ${theme.colors.textPrimary};
-  padding-top: ${theme.spacing.spacing4};
-  padding-bottom: ${theme.spacing.spacing4};
   vertical-align: middle;
-  padding-left: ${theme.spacing.spacing4};
 
-  &:last-of-type {
-    text-align: right;
-    padding-right: ${theme.spacing.spacing4};
-  }
+  ${({ theme }) => theme.table.cell};
 `;
 
 const StyledTableHeaderRow = styled.tr`
-  background-color: ${theme.table.header.bg};
+  ${({ theme }) => theme.table.headerRow};
 `;
 
 type StyledTableRowProps = {
   $isHovered: boolean;
+  $isSelected: boolean;
 };
 
 const StyledTableRow = styled.tr<StyledTableRowProps>`
   outline: none;
-  font-size: ${theme.text.s};
-  line-height: ${theme.lineHeight.s};
   cursor: ${({ $isHovered }) => $isHovered && 'pointer'};
 
-  &:nth-child(odd) {
-    background-color: ${({ $isHovered }) => ($isHovered ? theme.table.row.bgHover : theme.table.row.odd.bg)};
-  }
+  ${({ theme, $isHovered, $isSelected }) => {
+    const { even, odd, selected } = theme.table.row;
 
-  &:nth-child(even) {
-    background-color: ${({ $isHovered }) => ($isHovered ? theme.table.row.bgHover : theme.table.row.even.bg)};
-  }
+    return css`
+      &:nth-child(odd) {
+        ${$isSelected ? selected : $isHovered ? odd.hover : odd.base};
+      }
 
-  &:focus-visible {
-    background-color: ${theme.table.row.bgHover};
-  }
+      &:nth-child(even) {
+        ${$isSelected ? selected : $isHovered ? even.hover : even.base};
+      }
+    `;
+  }};
 `;
 
 export { StyledTable, StyledTableCell, StyledTableColumnHeader, StyledTableHeaderRow, StyledTableRow };

packages/components/src/Table/TableRow.tsx

@@ -34,6 +34,7 @@ type TableRowProps = Props & NativeAttrs;
 
 const TableRow = ({ item, children, state, ...props }: TableRowProps): JSX.Element => {
   const ref = useRef<HTMLTableRowElement>(null);
+  let isSelected = state.selectionManager.isSelected(item.key);
   const {
     rowProps: { onPointerDown, onPointerUp, onClick, ...otherRowProps }
   } = useTableRow(
@@ -76,6 +77,7 @@ const TableRow = ({ item, children, state, ...props }: TableRowProps): JSX.Eleme
         onClick: handleClick
       })}
       $isHovered={isHovered}
+      $isSelected={isSelected}
     >
       {children}
     </StyledTableRow>

packages/core/theme/src/components/table.ts

@@ -1,3 +1,21 @@
-type TableTheme = {};
+import { StyledObject } from 'styled-components';
+
+type TableTheme = {
+  base: StyledObject<object>;
+  columnHeader: StyledObject<object>;
+  cell: StyledObject<object>;
+  headerRow: StyledObject<object>;
+  row: {
+    odd: {
+      base: StyledObject<object>;
+      hover: StyledObject<object>;
+    };
+    even: {
+      base: StyledObject<object>;
+      hover: StyledObject<object>;
+    };
+    selected: StyledObject<object>;
+  };
+};
 
 export type { TableTheme };

packages/core/theme/src/core/index.ts

@@ -55,8 +55,6 @@ export type ProgressBarColors = 'default' | 'red';
 
 export type LabelPosition = 'top' | 'side';
 
-// export type DimensionValue =
-
 export * from './font-size';
 export * from './font-weight';
 export * from './line-height';

packages/core/theme/src/themes/bob/table.ts

@@ -1,5 +1,58 @@
+import { hexToRgba } from '../../utils';
+import { fontWeight, spacing, typography } from '../../core';
 import { TableTheme } from '../../components';
 
-const table: TableTheme = {};
+import { color } from './colors';
+
+const table: TableTheme = {
+  base: {},
+  columnHeader: {
+    paddingTop: spacing('lg'),
+    paddingLeft: spacing('lg'),
+    paddingBottom: spacing('lg'),
+    color: color('light'),
+    fontWeight: fontWeight('bold'),
+    ...typography('xs'),
+    '&:last-of-type': {
+      textAlign: 'right',
+      paddingRight: spacing('lg')
+    }
+  },
+  cell: {
+    paddingTop: spacing('md'),
+    paddingLeft: spacing('md'),
+    paddingBottom: spacing('md'),
+    color: color('light'),
+    ...typography('s'),
+    '&:last-of-type': {
+      textAlign: 'right',
+      paddingRight: spacing('md')
+    }
+  },
+  headerRow: {
+    backgroundColor: color('grey-800')
+  },
+  row: {
+    odd: {
+      base: {
+        backgroundColor: color('grey-500')
+      },
+      hover: {
+        backgroundColor: hexToRgba(color('grey-500'), 70)
+      }
+    },
+    even: {
+      base: {
+        backgroundColor: color('grey-700')
+      },
+      hover: {
+        backgroundColor: hexToRgba(color('grey-700'), 70)
+      }
+    },
+    selected: {
+      backgroundColor: hexToRgba(color('primary-500'), 50)
+    }
+  }
+};
 
 export { table };