feat: support new feature in button component

packages/app/src/ui/button/Button.tsx

@@ -15,16 +15,26 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       hoverStyle,
       shape = 'default',
       icon,
+      iconPosition = 'start',
       type = 'default',
       children,
       bold = false,
       loading = false,
+      noBorder = false,
       ...props
     },
     ref
   ) => {
     const { iconSize } = getSize(size);
 
+    const iconElement =
+      icon &&
+      cloneElement(Children.only(icon), {
+        width: iconSize,
+        height: iconSize,
+        className: `affine-button-icon ${icon.props.className ?? ''}`,
+      });
+
     return (
       <StyledButton
         ref={ref}
@@ -38,19 +48,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         // @ts-ignore
         type={type}
         bold={bold}
+        noBorder={noBorder}
         {...props}
       >
         {loading ? (
           <Loading type={type}></Loading>
         ) : (
           <>
-            {icon &&
+            {iconPosition === 'start' && iconElement}
-              cloneElement(Children.only(icon), {
-                width: iconSize,
-                height: iconSize,
-                className: `affine-button-icon ${icon.props.className ?? ''}`,
-              })}
             {children && <span>{children}</span>}
+            {iconPosition === 'end' && iconElement}
           </>
         )}
       </StyledButton>

packages/app/src/ui/button/interface.ts

@@ -17,8 +17,10 @@ export type ButtonProps = PropsWithChildren &
     hoverColor?: CSSProperties['color'];
     hoverStyle?: CSSProperties;
     icon?: ReactElement;
+    iconPosition?: 'start' | 'end';
     shape?: 'default' | 'round' | 'circle';
     type?: 'primary' | 'warning' | 'danger' | 'default';
     bold?: boolean;
     loading?: boolean;
+    noBorder?: boolean;
   };

packages/app/src/ui/button/styles.ts

@@ -149,6 +149,7 @@ export const StyledButton = styled('button', {
       'hoverStyle',
       'type',
       'bold',
+      'noBorder',
     ].includes(prop);
   },
 })<
@@ -162,6 +163,7 @@ export const StyledButton = styled('button', {
     | 'shape'
     | 'type'
     | 'bold'
+    | 'noBorder'
   >
 >(
   ({
@@ -174,6 +176,7 @@ export const StyledButton = styled('button', {
     bold = false,
     shape = 'default',
     type = 'default',
+    noBorder = false,
   }) => {
     const { fontSize, borderRadius, padding, height } = getSize(size);
 
@@ -181,7 +184,7 @@ export const StyledButton = styled('button', {
       height,
       paddingLeft: padding,
       paddingRight: padding,
-      border: '1px solid',
+      border: noBorder ? 'none' : '1px solid',
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
       // TODO: disabled color is not decided