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,17 +53,14 @@ export const IconButton = ({
             {...props}
             onClick={disabled ? undefined : onClick}
             disabled={disabled}
-            className={cx({ [buttonStatus.disabled]: disabled }, className)}
         >
             {children}
         </Container>
     );
 };
 
-const Container = styled('button')<{
-    size?: SizeType;
-    hoverColor?: string;
-}>(({ theme, size = SIZE_MIDDLE, hoverColor }) => {
+const Container = styled('button')<IconButtonContainerProps>(
+    ({ theme, size = SIZE_MIDDLE, hoverColor, backgroundColor, disabled }) => {
         const { iconSize, areaSize } = SIZE_CONFIG[size];
 
         return {
@@ -69,7 +69,7 @@ const Container = styled('button')<{
             alignItems: 'center',
             width: areaSize,
             height: areaSize,
-        backgroundColor: 'transparent',
+            backgroundColor: backgroundColor ?? 'transparent',
             color: theme.affine.palette.icons,
             padding: theme.affine.spacing.iconPadding,
             borderRadius: '3px',
@@ -86,19 +86,7 @@ const Container = styled('button')<{
                 backgroundColor: hoverColor || theme.affine.palette.hover,
             },
 
-        [`&${buttonStatus.hover}`]: {
-            backgroundColor: theme.affine.palette.hover,
-        },
-
-        '&:focus': {
-            color: theme.affine.palette.primary,
-        },
-        [`&.${buttonStatus.focus}`]: {
-            color: theme.affine.palette.primary,
-        },
-
-        [`&${buttonStatus.disabled}`]: {
-            cursor: 'not-allowed',
-        },
+            ...(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',
-};