fix: button style error (#3396)

packages/component/src/ui/button/button.tsx

@@ -77,6 +77,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       iconPosition,
       block,
       loading,
+      className,
       ...otherProps
     } = {
       ...defaultProps,
@@ -93,21 +94,25 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button
         ref={ref}
-        className={clsx(button, {
-          primary: type === 'primary',
-          plain: type === 'plain',
-          error: type === 'error',
-          warning: type === 'warning',
-          success: type === 'success',
-          processing: type === 'processing',
-          large: size === 'large',
-          extraLarge: size === 'extraLarge',
-          disabled,
-          circle: shape === 'circle',
-          round: shape === 'round',
-          block,
-          loading,
-        })}
+        className={clsx(
+          button,
+          {
+            primary: type === 'primary',
+            plain: type === 'plain',
+            error: type === 'error',
+            warning: type === 'warning',
+            success: type === 'success',
+            processing: type === 'processing',
+            large: size === 'large',
+            extraLarge: size === 'extraLarge',
+            disabled,
+            circle: shape === 'circle',
+            round: shape === 'round',
+            block,
+            loading,
+          },
+          className
+        )}
         disabled={disabled}
         data-disabled={disabled}
         {...otherProps}

packages/component/src/ui/button/icon-button.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, type ReactElement } from 'react';
 
 import { Loading } from '../loading';
 import type { ButtonType } from './button';
@@ -15,6 +15,7 @@ export type IconButtonProps = PropsWithChildren &
     loading?: boolean;
     withoutPadding?: boolean;
     active?: boolean;
+    icon?: ReactElement;
   };
 const defaultProps = {
   type: 'plain',
@@ -35,6 +36,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       disabled,
       loading,
       active,
+      icon: propsIcon,
+      className,
       ...otherProps
     } = {
       ...defaultProps,
@@ -44,29 +47,33 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     return (
       <button
         ref={ref}
-        className={clsx(iconButton, {
-          'without-padding': withoutPadding,
+        className={clsx(
+          iconButton,
+          {
+            'without-padding': withoutPadding,
 
-          primary: type === 'primary',
-          plain: type === 'plain',
-          error: type === 'error',
-          warning: type === 'warning',
-          success: type === 'success',
-          processing: type === 'processing',
+            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',
+            large: size === 'large',
+            small: size === 'small',
+            'extra-small': size === 'extraSmall',
 
-          disabled,
-          loading,
-          active,
-        })}
+            disabled,
+            loading,
+            active,
+          },
+          className
+        )}
         disabled={disabled}
         data-disabled={disabled}
         {...otherProps}
       >
-        {loading ? <Loading /> : children}
+        {loading ? <Loading /> : children || propsIcon}
       </button>
     );
   }

packages/component/src/ui/modal/modal-close-button.tsx

@@ -1,7 +1,6 @@
 import { CloseIcon } from '@blocksuite/icons';
 import type { HTMLAttributes } from 'react';
 
-import { styled } from '../../styles';
 import type { IconButtonProps } from '../button/icon-button';
 import { IconButton } from '../button/icon-button';
 export type ModalCloseButtonProps = {
@@ -11,27 +10,27 @@ export type ModalCloseButtonProps = {
 } & Omit<IconButtonProps, 'children'> &
   HTMLAttributes<HTMLButtonElement>;
 
-const StyledIconButton = styled(IconButton)<
-  Pick<ModalCloseButtonProps, 'top' | 'right'>
->(({ top, right }) => {
-  return {
-    position: 'absolute',
-    top: top ?? 24,
-    right: right ?? 40,
-    zIndex: 1,
-  };
-});
-
 export const ModalCloseButton = ({
   absolute = true,
+  right,
+  top,
   ...props
 }: ModalCloseButtonProps) => {
-  return absolute ? (
-    <StyledIconButton data-testid="modal-close-button" {...props}>
-      <CloseIcon />
-    </StyledIconButton>
-  ) : (
-    <IconButton data-testid="modal-close-button" {...props}>
+  return (
+    <IconButton
+      style={
+        absolute
+          ? {
+              position: 'absolute',
+              top: top ?? 24,
+              right: right ?? 40,
+              zIndex: 1,
+            }
+          : {}
+      }
+      data-testid="modal-close-button"
+      {...props}
+    >
       <CloseIcon />
     </IconButton>
   );