refactor(component): migrate design components (#5000)

```[tasklist] ### Tasks - [x] Migrate components from [design](https://github.com/toeverything/design) - [x] Replace all imports from `@toeverything/components` - [x] Clean up `@toeverything/components` dependencies - [x] Storybook ``` ### Influence Here are all the components that are influenced by `@toeverything/components` - `@affine/component` - App update `Button` `Tooltip` - App sidebar header `IconButton`, `Tooltip` - Back `Button` - Auth - Change email page save `Button` - Change password page all `Button`s (Save, Later, Open) - Confirm change email `Button` - Set password page `Button` - Sign in success page `Button` - Sign up page `Button` - Auth `Modal` - Workspace card `Avatar`, `Divider`, `Tooltip`, `IconButton` - Share - Disable shared public link `Modal` - Import page `IconButton`, `Tooltip` - Accept invite page `Avatar`, `Button` - Invite member `Modal` - 404 Page `Avatar`, `Button`, `IconButton`, `Tooltip` - Notification center `IconButton` - Page list - operation cell `IconButton`, `Menu`, `ConfirmModal`, `Tooltip` - tags more `Menu` - favorite `IconButton`, `Tooltip` - new page dropdown `Menu` - filter `Menu`, `Button`, `IconButton` - Page operation `Menu` - export `MenuItem` - move to trash `MenuItem`, `ConfirmModal` - Workspace header filter `Menu`, `Button` - Collection bar `Button`, `Tooltip` (*⚠️ seems not used*) - Collection operation `Menu`, `MenuItem` - Create collection `Modal`, `Button` - Edit collection `Modal`, `Button` - Page mode filter `Menu` - Page mode `Button`, `Menu` - Setting modal - storage usage progress `Button`, `Tooltip` - On boarding tour `Modal` - `@affine/core` - Bookmark `Menu` - Affine error boundary `Button` - After sign in send email `Button` - After sign up send email `Button` - Send email `Button` - Sign in `Button` - Subscription redirect `Loading`, `Button` - Setting `Modal` - User plan button `Tooltip` - Members `Avatar`, `Button`, `IconButton`, `Loading`, `Tooltip`, `Menu` - Profile `Button`, `Avatar` - Workspace - publish panel `Button`, `Tooltip` - export panel `Button` - storage panel `Button`, `Tooltip` - delete `ConfirmModal` - Language `Menu` - Account setting `Avatar`, `Button` - Date format setting `Menu` - Billing `Button`, `IconButton`, `Loading` - Payment plans `Button`, `ConfirmModal`, `Modal`, `Tooltip` - Create workspace `Modal`, `ConfirmModal`, `Button` - Payment disabled `ConfirmModal` - Share/Export `Menu`, `Button`, `Divider` - Sign out `ConfirmModal` - Temp disable affine cloud `Modal` - Page detail operation `Menu` - Blocksuite mode switch `Tooltip` - Login card `Avatar` - Help island `Tooltip` - `plugin` - copilot - hello world - image preview - outline
2026-02-14 13:25:12 +00:00 · 2023-12-04 08:32:12 +00:00
parent 33c53217c3
commit 0abadbe7bb
34 changed files with 2080 additions and 3 deletions
--- a/packages/frontend/component/src/ui/menu/menu-trigger.tsx
+++ b/packages/frontend/component/src/ui/menu/menu-trigger.tsx
@@ -0,0 +1,87 @@
+import { ArrowDownSmallIcon } from '@blocksuite/icons';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import clsx from 'clsx';
+import type { PropsWithChildren } from 'react';
+import {
+  type CSSProperties,
+  forwardRef,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react';
+
+import { MenuIcon } from './menu-icon';
+import * as styles from './styles.css';
+import { triggerWidthVar } from './styles.css';
+
+export interface MenuTriggerProps
+  extends PropsWithChildren,
+    HTMLAttributes<HTMLButtonElement> {
+  width?: CSSProperties['width'];
+  disabled?: boolean;
+  noBorder?: boolean;
+  status?: 'error' | 'success' | 'warning' | 'default';
+  size?: 'default' | 'large' | 'extraLarge';
+  preFix?: ReactNode;
+  endFix?: ReactNode;
+  block?: boolean;
+}
+
+export const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(
+  (
+    {
+      disabled,
+      noBorder = false,
+      className,
+      status = 'default',
+      size = 'default',
+      preFix,
+      endFix,
+      block = false,
+      children,
+      width,
+      style = {},
+      ...otherProps
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        style={{
+          ...assignInlineVars({
+            [triggerWidthVar]: width
+              ? typeof width === 'number'
+                ? `${width}px`
+                : width
+              : 'auto',
+          }),
+          ...style,
+        }}
+        className={clsx(styles.menuTrigger, className, {
+          // status
+          block,
+          disabled: disabled,
+          'no-border': noBorder,
+          // color
+          error: status === 'error',
+          success: status === 'success',
+          warning: status === 'warning',
+          default: status === 'default',
+          // size
+          large: size === 'large',
+          'extra-large': size === 'extraLarge',
+        })}
+        {...otherProps}
+      >
+        {preFix}
+        {children}
+        {endFix}
+        <MenuIcon position="end">
+          <ArrowDownSmallIcon />
+        </MenuIcon>
+      </button>
+    );
+  }
+);
+
+MenuTrigger.displayName = 'MenuTrigger';