feat: sticky table head in page list (#2668)

Co-authored-by: Himself65 <himself65@outlook.com>

packages/component/src/ui/button/dropdown.tsx

@@ -24,7 +24,11 @@ export const DropdownButton = forwardRef<
       <span>{children}</span>
       <span className={styles.divider} />
       <span className={styles.dropdownWrapper} onClick={handleClickDropDown}>
-        <ArrowDownSmallIcon className={styles.icon} width={16} height={16} />
+        <ArrowDownSmallIcon
+          className={styles.dropdownIcon}
+          width={16}
+          height={16}
+        />
       </span>
     </button>
   );

packages/component/src/ui/button/styles.css.ts

@@ -44,10 +44,10 @@ export const dropdownWrapper = style({
   paddingRight: '10px',
 });
 
-export const icon = style({
+export const dropdownIcon = style({
   borderRadius: '4px',
   selectors: {
-    '&:hover': {
+    [`${dropdownWrapper}:hover &`]: {
       background: 'var(--affine-hover-color)',
     },
   },

packages/component/src/ui/button/styles.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
 
-import { absoluteCenter, displayInlineFlex, styled } from '../../styles';
+import { displayInlineFlex, styled } from '../../styles';
 import type { ButtonProps } from './interface';
 import { getButtonColors, getSize } from './utils';
 
@@ -46,30 +46,13 @@ export const StyledIconButton = styled('button', {
       WebkitAppRegion: 'no-drag',
       color: 'var(--affine-icon-color)',
       ...displayInlineFlex('center', 'center'),
-      position: 'relative',
       ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
       transition: 'background .15s',
-
-      // TODO: we need to add @emotion/babel-plugin
-      '::after': {
-        content: '""',
-        width,
-        height,
-        borderRadius,
-        transition: 'background .15s',
-        ...absoluteCenter({ horizontal: true, vertical: true }),
-      },
-
-      svg: {
-        position: 'relative',
-        zIndex: 1,
-      },
+      borderRadius,
 
       ':hover': {
         color: hoverColor ?? 'var(--affine-primary-color)',
-        '::after': {
-          background: hoverBackground || 'var(--affine-hover-color)',
-        },
+        background: hoverBackground || 'var(--affine-hover-color)',
         ...(hoverStyle ?? {}),
       },
     };

packages/component/src/ui/empty/style.ts

@@ -8,6 +8,7 @@ export const StyledEmptyContainer = styled('div')<{ style?: CSSProperties }>(
       height: '100%',
       ...displayFlex('center', 'center'),
       flexDirection: 'column',
+      color: 'var(--affine-text-secondary-color)',
       svg: {
         color: 'transparent',
         width: style?.width ?? '248px',

packages/component/src/ui/modal/modal-close-button.tsx

@@ -18,6 +18,7 @@ const StyledIconButton = styled(IconButton)<
     position: 'absolute',
     top: top ?? 24,
     right: right ?? 40,
+    zIndex: 1,
   };
 });
 

packages/component/src/ui/table/styles.ts

@@ -1,16 +1,36 @@
 import { styled, textEllipsis } from '../../styles';
 import type { TableCellProps } from './interface';
 
-export const StyledTable = styled('table')(() => {
-  return {
-    fontSize: 'var(--affine-font-base)',
-    color: 'var(--affine-text-primary-color)',
-    tableLayout: 'fixed',
-    width: '100%',
-    borderCollapse: 'separate',
-    borderSpacing: '0',
-  };
-});
+export const StyledTable = styled('table')<{ showBorder?: boolean }>(
+  ({ showBorder }) => {
+    return {
+      fontSize: 'var(--affine-font-base)',
+      color: 'var(--affine-text-primary-color)',
+      tableLayout: 'fixed',
+      width: '100%',
+      borderCollapse: 'collapse',
+      borderSpacing: '0',
+
+      ...(typeof showBorder === 'boolean'
+        ? {
+            thead: {
+              '::after': {
+                display: 'block',
+                position: 'absolute',
+                content: '""',
+                width: '100%',
+                height: '1px',
+                left: 0,
+                background: 'var(--affine-border-color)',
+                transition: 'opacity .15s',
+                opacity: showBorder ? 1 : 0,
+              },
+            },
+          }
+        : {}),
+    };
+  }
+);
 
 export const StyledTableBody = styled('tbody')(() => {
   return {
@@ -53,24 +73,29 @@ export const StyledTableHead = styled('thead')(() => {
   return {
     fontWeight: 500,
     color: 'var(--affine-text-secondary-color)',
-    tr: {
-      td: {
-        whiteSpace: 'nowrap',
-      },
-      ':hover': {
-        td: {
-          background: 'unset',
-        },
-      },
+  };
+});
+
+export const StyledTHeadRow = styled('tr')(() => {
+  return {
+    td: {
+      whiteSpace: 'nowrap',
+      // How to set tbody height with overflow scroll
+      // see https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll
+      position: 'sticky',
+      top: 0,
+      background: 'var(--affine-background-primary-color)',
     },
   };
 });
 
-export const StyledTableRow = styled('tr')(() => {
+export const StyledTBodyRow = styled('tr')(() => {
   return {
     td: {
       transition: 'background .15s',
     },
+    // Add border radius to table row
+    // see https://stackoverflow.com/questions/4094126/how-to-add-border-radius-on-table-row
     'td:first-of-type': {
       borderTopLeftRadius: '10px',
       borderBottomLeftRadius: '10px',

packages/component/src/ui/table/table-head.tsx

@@ -1,12 +1,5 @@
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-
 import { StyledTableHead } from './styles';
 
-export const TableHead = ({
-  children,
-  ...props
-}: PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>) => {
-  return <StyledTableHead {...props}>{children}</StyledTableHead>;
-};
+export const TableHead = StyledTableHead;
 
 export default TableHead;

packages/component/src/ui/table/table-row.tsx

@@ -1,4 +1,5 @@
-import { StyledTableRow } from './styles';
-export const TableRow = StyledTableRow;
+import { StyledTBodyRow, StyledTHeadRow } from './styles';
+export const TableHeadRow = StyledTHeadRow;
+export const TableBodyRow = StyledTBodyRow;
 
-export default TableRow;
+export default TableHeadRow;