feat(component): mobile menu support (#7892)

packages/frontend/component/src/ui/menu/menu-trigger.tsx

@@ -1,87 +1,24 @@
 import { ArrowDownSmallIcon } from '@blocksuite/icons/rc';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import type {
-  CSSProperties,
-  HTMLAttributes,
-  PropsWithChildren,
-  ReactNode,
-} from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, type Ref } from 'react';
 
-import { MenuIcon } from './menu-icon';
-import * as styles from './styles.css';
-import { triggerWidthVar } from './styles.css';
+import { Button, type ButtonProps } from '../button';
 
-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 interface MenuTriggerProps extends ButtonProps {}
 
-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';
+export const MenuTrigger = forwardRef(function MenuTrigger(
+  { children, className, contentStyle, ...otherProps }: MenuTriggerProps,
+  ref: Ref<HTMLButtonElement>
+) {
+  return (
+    <Button
+      ref={ref}
+      suffix={<ArrowDownSmallIcon />}
+      className={clsx(className)}
+      contentStyle={{ width: 0, flex: 1, textAlign: 'start', ...contentStyle }}
+      {...otherProps}
+    >
+      {children}
+    </Button>
+  );
+});