refactor: clean icon button

libs/components/ui/src/button/IconButton.tsx

@@ -3,9 +3,7 @@ import type {
     MouseEventHandler,
     PropsWithChildren,
 } from 'react';
-import { cx } from '../clsx';
 import { styled } from '../styled';
-import { buttonStatus } from './constants';
 
 /* Temporary solution, needs to be adjusted */
 const SIZE_SMALL = 'small' as const;
@@ -29,13 +27,18 @@ const SIZE_CONFIG = {
 
 type SizeType = keyof typeof SIZE_CONFIG;
 
-interface IconButtonProps {
+type IconButtonContainerProps = {
+    size?: SizeType;
+    hoverColor?: CSSProperties['backgroundColor'];
+    backgroundColor?: CSSProperties['backgroundColor'];
+    disabled?: boolean;
+};
+
+interface IconButtonProps extends IconButtonContainerProps {
     onClick?: MouseEventHandler;
     disabled?: boolean;
     style?: CSSProperties;
     className?: string;
-    size?: SizeType;
-    hoverColor?: string;
 }
 
 export const IconButton = ({
@@ -50,55 +53,40 @@ export const IconButton = ({
             {...props}
             onClick={disabled ? undefined : onClick}
             disabled={disabled}
-            className={cx({ [buttonStatus.disabled]: disabled }, className)}
         >
             {children}
         </Container>
     );
 };
 
-const Container = styled('button')<{
+const Container = styled('button')<IconButtonContainerProps>(
-    size?: SizeType;
+    ({ theme, size = SIZE_MIDDLE, hoverColor, backgroundColor, disabled }) => {
-    hoverColor?: string;
+        const { iconSize, areaSize } = SIZE_CONFIG[size];
-}>(({ theme, size = SIZE_MIDDLE, hoverColor }) => {
-    const { iconSize, areaSize } = SIZE_CONFIG[size];
 
-    return {
+        return {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: areaSize,
-        height: areaSize,
-        backgroundColor: 'transparent',
-        color: theme.affine.palette.icons,
-        padding: theme.affine.spacing.iconPadding,
-        borderRadius: '3px',
-
-        '& svg': {
-            width: iconSize,
-            height: iconSize,
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-        },
+            width: areaSize,
+            height: areaSize,
+            backgroundColor: backgroundColor ?? 'transparent',
+            color: theme.affine.palette.icons,
+            padding: theme.affine.spacing.iconPadding,
+            borderRadius: '3px',
 
-        '&:hover': {
+            '& svg': {
-            backgroundColor: hoverColor || theme.affine.palette.hover,
+                width: iconSize,
-        },
+                height: iconSize,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            },
 
-        [`&${buttonStatus.hover}`]: {
+            '&:hover': {
-            backgroundColor: theme.affine.palette.hover,
+                backgroundColor: hoverColor || theme.affine.palette.hover,
-        },
+            },
 
-        '&:focus': {
+            ...(disabled ? { cursor: 'not-allowed' } : {}),
-            color: theme.affine.palette.primary,
+        };
-        },
+    }
-        [`&.${buttonStatus.focus}`]: {
+);
-            color: theme.affine.palette.primary,
-        },
-
-        [`&${buttonStatus.disabled}`]: {
-            cursor: 'not-allowed',
-        },
-    };
-});

libs/components/ui/src/button/constants.ts

@@ -1,6 +0,0 @@
-export const buttonStatus = {
-    hover: '.hover',
-    focus: '.focus',
-    active: '.focus',
-    disabled: '.disabled',
-};