fix: button style error (#3396)

apps/storybook/src/stories/app-sidebar.stories.tsx

@@ -6,10 +6,7 @@ import {
 } from '@affine/component/app-sidebar';
 import { AddPageButton } from '@affine/component/app-sidebar';
 import { CategoryDivider } from '@affine/component/app-sidebar';
-import {
-  navHeaderStyle,
-  sidebarButtonStyle,
-} from '@affine/component/app-sidebar';
+import { navHeaderStyle } from '@affine/component/app-sidebar';
 import { MenuLinkItem } from '@affine/component/app-sidebar';
 import { QuickSearchInput } from '@affine/component/app-sidebar';
 import {
@@ -54,7 +51,7 @@ const Main = () => {
       <div className={navHeaderStyle}>
         {!open && (
           <IconButton
-            className={sidebarButtonStyle}
+            size="large"
             onClick={() => {
               setOpen(true);
             }}

packages/component/src/components/app-sidebar/index.css.ts

@@ -83,12 +83,6 @@ export const navBodyStyle = style({
   flexDirection: 'column',
 });
 
-export const sidebarButtonStyle = style({
-  height: '32px',
-  color: 'var(--affine-icon-color)',
-  zIndex: 1,
-});
-
 export const sidebarFloatMaskStyle = style({
   transition: 'opacity .15s',
   opacity: 0,

packages/component/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx

@@ -3,7 +3,6 @@ import { SidebarIcon } from '@blocksuite/icons';
 import { useAtom } from 'jotai';
 
 import { IconButton, Tooltip } from '../../../';
-import { sidebarButtonStyle } from '../index.css';
 import { appSidebarOpenAtom } from '../index.jotai';
 
 export const SidebarSwitch = () => {
@@ -20,11 +19,14 @@ export const SidebarSwitch = () => {
       zIndex={1000}
     >
       <IconButton
+        size="large"
         data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
-        className={sidebarButtonStyle}
+        style={{
+          zIndex: 1,
+        }}
         onClick={() => setOpen(open => !open)}
       >
-        <SidebarIcon width={24} height={24} />
+        <SidebarIcon />
       </IconButton>
     </Tooltip>
   );

packages/component/src/components/image-preview-modal/index.css.ts

@@ -133,19 +133,7 @@ export const groupStyle = style({
 });
 
 export const buttonStyle = style({
-  minWidth: '24px',
-  height: '24px',
   margin: '10px 6px',
-  padding: '0 0',
-  ':hover': {
-    backgroundColor: 'var(--affine-background-error-color)',
-    backgroundSize: '24px 24px',
-  },
-});
-
-export const buttonIconStyle = style({
-  width: '20px',
-  height: '20px',
 });
 
 export const scaleIndicatorButtonStyle = style({

packages/component/src/components/image-preview-modal/index.tsx

@@ -1,6 +1,5 @@
 import '@blocksuite/blocks';
 
-import { Button, Tooltip } from '@affine/component';
 import type { ImageBlockModel } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import {
@@ -24,9 +23,10 @@ import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';
 import useSWR from 'swr';
 
+import { Button, IconButton } from '../../ui/button';
+import { Tooltip } from '../../ui/tooltip';
 import { useZoomControls } from './hooks/use-zoom';
 import {
-  buttonIconStyle,
   buttonStyle,
   captionStyle,
   groupStyle,
@@ -339,9 +339,9 @@ const ImagePreviewModalImpl = (
         <div className={imagePreviewActionBarStyle}>
           <div>
             <Tooltip content={'Previous'} disablePortal={false}>
-              <Button
+              <IconButton
                 data-testid="previous-image-button"
-                icon={<ArrowLeftSmallIcon className={buttonIconStyle} />}
+                icon={<ArrowLeftSmallIcon />}
                 type="plain"
                 className={buttonStyle}
                 onClick={() => {
@@ -351,9 +351,9 @@ const ImagePreviewModalImpl = (
               />
             </Tooltip>
             <Tooltip content={'Next'} disablePortal={false}>
-              <Button
+              <IconButton
                 data-testid="next-image-button"
-                icon={<ArrowRightSmallIcon className={buttonIconStyle} />}
+                icon={<ArrowRightSmallIcon />}
                 className={buttonStyle}
                 type="plain"
                 onClick={() => {
@@ -369,18 +369,18 @@ const ImagePreviewModalImpl = (
             disablePortal={true}
             showArrow={false}
           >
-            <Button
+            <IconButton
               data-testid="fit-to-screen-button"
-              icon={<ViewBarIcon className={buttonIconStyle} />}
+              icon={<ViewBarIcon />}
               type="plain"
               className={buttonStyle}
               onClick={() => resetZoom()}
             />
           </Tooltip>
           <Tooltip content={'Zoom out'} disablePortal={false}>
-            <Button
+            <IconButton
               data-testid="zoom-out-button"
-              icon={<MinusIcon className={buttonIconStyle} />}
+              icon={<MinusIcon />}
               className={buttonStyle}
               type="plain"
               onClick={zoomOut}
@@ -398,9 +398,9 @@ const ImagePreviewModalImpl = (
             </Button>
           </Tooltip>
           <Tooltip content={'Zoom in'} disablePortal={false}>
-            <Button
+            <IconButton
               data-testid="zoom-in-button"
-              icon={<PlusIcon className={buttonIconStyle} />}
+              icon={<PlusIcon />}
               className={buttonStyle}
               type="plain"
               onClick={() => zoomIn()}
@@ -408,9 +408,9 @@ const ImagePreviewModalImpl = (
           </Tooltip>
           <div className={groupStyle}></div>
           <Tooltip content={'Download'} disablePortal={false}>
-            <Button
+            <IconButton
               data-testid="download-button"
-              icon={<DownloadIcon className={buttonIconStyle} />}
+              icon={<DownloadIcon />}
               type="plain"
               className={buttonStyle}
               onClick={() => {
@@ -422,9 +422,9 @@ const ImagePreviewModalImpl = (
             />
           </Tooltip>
           <Tooltip content={'Copy to clipboard'} disablePortal={false}>
-            <Button
+            <IconButton
               data-testid="copy-to-clipboard-button"
-              icon={<CopyIcon className={buttonIconStyle} />}
+              icon={<CopyIcon />}
               type="plain"
               className={buttonStyle}
               onClick={() => {
@@ -463,9 +463,9 @@ const ImagePreviewModalImpl = (
           </Tooltip>
           <div className={groupStyle}></div>
           <Tooltip content={'Delete'} disablePortal={false}>
-            <Button
+            <IconButton
               data-testid="delete-button"
-              icon={<DeleteIcon className={buttonIconStyle} />}
+              icon={<DeleteIcon />}
               type="plain"
               className={buttonStyle}
               onClick={() => blockId && deleteHandler(blockId)}

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>
   );