From 4a38b24172be5f58149fbddbfb3abff1172394f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rui=20Sim=C3=A3o?= Date: Mon, 18 Mar 2024 10:43:10 +0000 Subject: [PATCH] feat(components): update table --- .../components/src/Table/Table.stories.tsx | 9 ++- packages/components/src/Table/Table.style.tsx | 52 ++++++------------ packages/components/src/Table/TableRow.tsx | 2 + packages/core/theme/src/components/table.ts | 20 ++++++- packages/core/theme/src/themes/bob/table.ts | 55 ++++++++++++++++++- 5 files changed, 101 insertions(+), 37 deletions(-) diff --git a/packages/components/src/Table/Table.stories.tsx b/packages/components/src/Table/Table.stories.tsx index 827b1ea47..cc1bf2609 100644 --- a/packages/components/src/Table/Table.stories.tsx +++ b/packages/components/src/Table/Table.stories.tsx @@ -42,8 +42,15 @@ export default { export const Default: StoryObj = {}; -export const SeleButtonbleRow: StoryObj = { +export const RowAction: StoryObj = { args: { onRowAction: (key) => alert(`Row ${key} selected`) } }; + +export const Selection: StoryObj = { + args: { + selectionMode: 'single', + selectedKeys: [1] + } +}; diff --git a/packages/components/src/Table/Table.style.tsx b/packages/components/src/Table/Table.style.tsx index b2ddf4832..aeddba3c9 100644 --- a/packages/components/src/Table/Table.style.tsx +++ b/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` 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 }; diff --git a/packages/components/src/Table/TableRow.tsx b/packages/components/src/Table/TableRow.tsx index 256caf891..15f1f3c0a 100644 --- a/packages/components/src/Table/TableRow.tsx +++ b/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(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} diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts index a0e696c63..52d23f573 100644 --- a/packages/core/theme/src/components/table.ts +++ b/packages/core/theme/src/components/table.ts @@ -1,3 +1,21 @@ -type TableTheme = {}; +import { StyledObject } from 'styled-components'; + +type TableTheme = { + base: StyledObject; + columnHeader: StyledObject; + cell: StyledObject; + headerRow: StyledObject; + row: { + odd: { + base: StyledObject; + hover: StyledObject; + }; + even: { + base: StyledObject; + hover: StyledObject; + }; + selected: StyledObject; + }; +}; export type { TableTheme }; diff --git a/packages/core/theme/src/themes/bob/table.ts b/packages/core/theme/src/themes/bob/table.ts index 858cd8ab6..cc95a96ef 100644 --- a/packages/core/theme/src/themes/bob/table.ts +++ b/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 };