feat: add dropdown button (#2407)

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

@@ -0,0 +1,35 @@
+import { ArrowDownSmallIcon } from '@blocksuite/icons';
+import {
+  type ButtonHTMLAttributes,
+  forwardRef,
+  type MouseEventHandler,
+} from 'react';
+
+import * as styles from './styles.css';
+
+type DropdownButtonProps = {
+  onClickDropDown?: MouseEventHandler<SVGSVGElement>;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const DropdownButton = forwardRef<
+  HTMLButtonElement,
+  DropdownButtonProps
+>(({ onClickDropDown, children, ...props }, ref) => {
+  const handleClickDropDown: MouseEventHandler<SVGSVGElement> = e => {
+    e.stopPropagation();
+    onClickDropDown?.(e);
+  };
+  return (
+    <button ref={ref} className={styles.dropdownBtn} {...props}>
+      <span>{children}</span>
+      <span className={styles.divider} />
+      <ArrowDownSmallIcon
+        className={styles.icon}
+        width={16}
+        height={16}
+        onClick={handleClickDropDown}
+      />
+    </button>
+  );
+});
+DropdownButton.displayName = 'SimpleDropdownButton';

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

@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css';
+
+export const dropdownBtn = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0 10px',
+  gap: '4px',
+  color: 'var(--affine-text-primary-color)',
+  fontWeight: 600,
+  background: 'var(--affine-button-gray-color)',
+  boxShadow: 'var(--affine-float-button-shadow)',
+  borderRadius: '8px',
+  fontSize: 'var(--affine-font-sm)',
+  // width: '100%',
+  height: '32px',
+  userSelect: 'none',
+  whiteSpace: 'nowrap',
+  cursor: 'pointer',
+  selectors: {
+    '&:hover': {
+      background: 'var(--affine-hover-color)',
+    },
+  },
+});
+
+export const divider = style({
+  width: '0.5px',
+  height: '16px',
+  background: 'var(--affine-border-color)',
+});
+
+export const icon = style({
+  borderRadius: '4px',
+  selectors: {
+    '&:hover': {
+      background: 'var(--affine-hover-color)',
+    },
+  },
+});