refactor(component): refactor the implementation of Button and IconButton (#7716)

## Button
- Remove props withoutHoverStyle
   refactor hover impl with independent layer, so that hover-color won't affect the background even if is overridden outside
- Update `type` (renamed to `variant`):
  - remove `processing` and `warning`
  - rename `default` with `secondary`
- Remove `shape` props
- Remove `icon` and `iconPosition`, replaced with `prefix: ReactNode` and `suffix: ReactNode`
- Integrate tooltip for more convenient usage
- New Storybook document
- Focus style

## IconButton
- A Wrapper base on `<Button />`
- Override Button size and variant
  - size: `'12' | '14' | '16' | '20' | '24' | number`
     These presets size are referenced from the design system.
  - variant:  `'plain' | 'solid' | 'danger' | 'custom'`
- Inset icon via Button 's prefix

## Fix
- fix some button related issues
- close AF-1159, AF-1160, AF-1161, AF-1162, AF-1163, AF-1158, AF-1157

## Storybook

![CleanShot 2024-08-03 at 14.57.20@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/f5a76110-35d0-4082-a940-efc12bed87b0.png)

packages/frontend/component/src/ui/modal/modal.stories.tsx

@@ -61,7 +61,7 @@ const ConfirmModalTemplate: StoryFn<ConfirmModalProps> = () => {
         confirmText="Confirm"
         confirmButtonOptions={{
           loading: loading,
-          type: 'primary',
+          variant: 'primary',
         }}
       >
         <Input placeholder="input someting" status={inputStatus} />
@@ -82,7 +82,7 @@ const OverlayModalTemplate: StoryFn<OverlayModalProps> = () => {
         title="Modal Title"
         description="Modal description"
         confirmButtonOptions={{
-          type: 'primary',
+          variant: 'primary',
         }}
         topImage={
           <div

packages/frontend/component/src/ui/modal/modal.tsx

@@ -130,10 +130,12 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
         style: overlayStyle,
         ...otherOverlayOptions
       } = {},
-      closeButtonOptions = {},
+      closeButtonOptions,
       children,
       ...otherProps
     } = props;
+    const { className: closeButtonClassName, ...otherCloseButtonProps } =
+      closeButtonOptions || {};
 
     const [container, setContainer] = useState<ModalTransitionContainer | null>(
       null
@@ -204,11 +206,11 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
               {withoutCloseButton ? null : (
                 <Dialog.Close asChild>
                   <IconButton
-                    className={styles.closeButton}
+                    size="20"
+                    className={clsx(styles.closeButton, closeButtonClassName)}
                     aria-label="Close"
-                    type="plain"
                     data-testid="modal-close-button"
-                    {...closeButtonOptions}
+                    {...otherCloseButtonProps}
                   >
                     <CloseIcon />
                   </IconButton>