feat!: affine cloud support (#3813)

Co-authored-by: Hongtao Lye <codert.sn@gmail.com>
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: X1a0t <405028157@qq.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
Co-authored-by: danielchim <kahungchim@gmail.com>

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

@@ -11,20 +11,30 @@ import {
 export type IconMenuProps = PropsWithChildren<{
   icon?: ReactElement;
   endIcon?: ReactElement;
-  iconSize?: [number, number];
+  iconSize?: number;
   disabled?: boolean;
   active?: boolean;
   disableHover?: boolean;
+  gap?: string;
+  fontSize?: string;
 }> &
   HTMLAttributes<HTMLButtonElement>;
 
 export const MenuItem = forwardRef<HTMLButtonElement, IconMenuProps>(
-  ({ endIcon, icon, children, ...props }, ref) => {
+  ({ endIcon, icon, children, gap, fontSize, iconSize, ...props }, ref) => {
     return (
       <StyledMenuItem ref={ref} {...props}>
-        {icon && <StyledStartIconWrapper>{icon}</StyledStartIconWrapper>}
-        <StyledContent>{children}</StyledContent>
-        {endIcon && <StyledEndIconWrapper>{endIcon}</StyledEndIconWrapper>}
+        {icon && (
+          <StyledStartIconWrapper iconSize={iconSize} gap={gap}>
+            {icon}
+          </StyledStartIconWrapper>
+        )}
+        <StyledContent fontSize={fontSize}>{children}</StyledContent>
+        {endIcon && (
+          <StyledEndIconWrapper iconSize={iconSize} gap={gap}>
+            {endIcon}
+          </StyledEndIconWrapper>
+        )}
       </StyledMenuItem>
     );
   }

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

@@ -23,28 +23,36 @@ export const StyledMenuWrapper = styled(StyledPopperContainer, {
   };
 });
 
-export const StyledStartIconWrapper = styled('div')(() => {
+export const StyledStartIconWrapper = styled('div')<{
+  gap?: CSSProperties['gap'];
+  iconSize?: CSSProperties['fontSize'];
+}>(({ gap, iconSize }) => {
   return {
     display: 'flex',
-    marginRight: '12px',
-    fontSize: '20px',
+    marginRight: gap ? gap : '12px',
+    fontSize: iconSize ? iconSize : '20px',
     color: 'var(--affine-icon-color)',
   };
 });
-export const StyledEndIconWrapper = styled('div')(() => {
+export const StyledEndIconWrapper = styled('div')<{
+  gap?: CSSProperties['gap'];
+  iconSize?: CSSProperties['fontSize'];
+}>(({ gap, iconSize }) => {
   return {
     display: 'flex',
-    marginLeft: '12px',
-    fontSize: '20px',
+    marginLeft: gap ? gap : '12px',
+    fontSize: iconSize ? iconSize : '20px',
     color: 'var(--affine-icon-color)',
   };
 });
 
-export const StyledContent = styled('div')(() => {
+export const StyledContent = styled('div')<{
+  fontSize?: CSSProperties['fontSize'];
+}>(({ fontSize }) => {
   return {
     textAlign: 'left',
     flexGrow: 1,
-    fontSize: 'var(--affine-font-base)',
+    fontSize: fontSize ? fontSize : 'var(--affine-font-base)',
     ...textEllipsis(1),
   };
 });