feat: new setting modal (#2834)

Co-authored-by: Alex Yang <himself65@outlook.com>

packages/component/src/ui/menu/index.ts

@@ -1,4 +1,5 @@
 export * from './menu';
 // export { StyledMenuItem as MenuItem } from './styles';
 export * from './menu-item';
+export * from './menu-trigger';
 export * from './pure-menu';

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

@@ -0,0 +1,22 @@
+import { ArrowDownSmallIcon } from '@blocksuite/icons';
+import { forwardRef } from 'react';
+
+import type { ButtonProps } from '../button';
+import { StyledButton } from './styles';
+
+export const MenuTrigger = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <StyledButton
+        ref={ref}
+        icon={<ArrowDownSmallIcon />}
+        iconPosition="end"
+        noBorder={true}
+        {...props}
+      >
+        {children}
+      </StyledButton>
+    );
+  }
+);
+MenuTrigger.displayName = 'MenuTrigger';

packages/component/src/ui/menu/styles.ts

@@ -1,6 +1,7 @@
 import type { CSSProperties } from 'react';
 
 import { displayFlex, styled, textEllipsis } from '../../styles';
+import { Button } from '../button';
 import StyledPopperContainer from '../shared/container';
 
 export const StyledMenuWrapper = styled(StyledPopperContainer, {
@@ -100,3 +101,16 @@ export const StyledMenuItem = styled('button')<{
     };
   }
 );
+
+export const StyledButton = styled(Button)(() => {
+  return {
+    width: '100%',
+    height: '32px',
+    borderRadius: '8px',
+    backgroundColor: 'transparent',
+    ...displayFlex('space-between', 'center'),
+    border: `1px solid var(--affine-border-color)`,
+    padding: '0 10px',
+    fontSize: 'var(--affine-font-base)',
+  };
+});