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 ?? {}),
       },
     };