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-07-24 22:09:08 +08:00 · 2023-12-04 08:32:12 +00:00
parent 33c53217c3
commit 0abadbe7bb
34 changed files with 2080 additions and 3 deletions
@@ -0,0 +1,88 @@
+import clsx from 'clsx';
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { forwardRef, type ReactElement } from 'react';
+
+import { Loading } from '../loading';
+import type { ButtonType } from './button';
+import { iconButton } from './button.css';
+
+export type IconButtonSize = 'default' | 'large' | 'small' | 'extraSmall';
+export type IconButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'type'> &
+  PropsWithChildren<{
+    type?: ButtonType;
+    disabled?: boolean;
+    size?: IconButtonSize;
+    loading?: boolean;
+    withoutPadding?: boolean;
+    active?: boolean;
+    withoutHoverStyle?: boolean;
+    icon?: ReactElement;
+  }>;
+
+const defaultProps = {
+  type: 'plain',
+  disabled: false,
+  size: 'default',
+  loading: false,
+  withoutPadding: false,
+  active: false,
+  withoutHoverStyle: false,
+} as const;
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props, ref) => {
+    const {
+      type,
+      size,
+      withoutPadding,
+      children,
+      disabled,
+      loading,
+      active,
+      withoutHoverStyle,
+      icon: propsIcon,
+      className,
+      ...otherProps
+    } = {
+      ...defaultProps,
+      ...props,
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={clsx(
+          iconButton,
+          {
+            'without-padding': withoutPadding,
+
+            primary: type === 'primary',
+            plain: type === 'plain',
+            error: type === 'error',
+            warning: type === 'warning',
+            success: type === 'success',
+            processing: type === 'processing',
+
+            large: size === 'large',
+            small: size === 'small',
+            'extra-small': size === 'extraSmall',
+
+            disabled,
+            loading,
+            active,
+            'without-hover': withoutHoverStyle,
+          },
+          className
+        )}
+        disabled={disabled}
+        data-disabled={disabled}
+        {...otherProps}
+      >
+        {loading ? <Loading /> : children || propsIcon}
+      </button>
+    );
+  }
+);
+
+IconButton.displayName = 'IconButton';
+export default IconButton;