fix: ui issues (#3738)

Co-authored-by: Alex Yang <himself65@outlook.com>

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

@@ -8,27 +8,22 @@ import { type CSSProperties, forwardRef } from 'react';
 
 import * as styles from './styles.css';
 
-export const RadioButton = forwardRef<
-  HTMLButtonElement,
-  RadioGroupItemProps & { bold?: boolean }
->(({ children, bold, className, ...props }, ref) => {
-  return (
-    <RadioGroup.Item
-      ref={ref}
-      {...props}
-      className={clsx(styles.radioButton, className)}
-    >
-      <span className={clsx(styles.radioUncheckedButton, { bold })}>
-        {children}
-      </span>
-      <RadioGroup.Indicator
-        className={clsx(styles.radioButtonContent, { bold })}
+export const RadioButton = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <RadioGroup.Item
+        ref={ref}
+        {...props}
+        className={clsx(styles.radioButton, className)}
       >
-        {children}
-      </RadioGroup.Indicator>
-    </RadioGroup.Item>
-  );
-});
+        <span className={styles.radioUncheckedButton}>{children}</span>
+        <RadioGroup.Indicator className={styles.radioButtonContent}>
+          {children}
+        </RadioGroup.Indicator>
+      </RadioGroup.Item>
+    );
+  }
+);
 RadioButton.displayName = 'RadioButton';
 
 export const RadioButtonGroup = forwardRef<

packages/component/src/ui/button/styles.css.ts

@@ -55,6 +55,11 @@ export const dropdownIcon = style({
 
 export const radioButton = style({
   flexGrow: 1,
+  selectors: {
+    '&:not(:last-of-type)': {
+      marginRight: '4px',
+    },
+  },
 });
 export const radioButtonContent = style({
   fontSize: 'var(--affine-font-xs)',
@@ -66,6 +71,8 @@ export const radioButtonContent = style({
   filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1))',
   whiteSpace: 'nowrap',
   userSelect: 'none',
+  fontWeight: 600,
+
   selectors: {
     '&:hover': {
       background: 'var(--affine-hover-color)',
@@ -73,9 +80,6 @@ export const radioButtonContent = style({
     '&[data-state="checked"]': {
       background: 'var(--affine-white)',
     },
-    '&.bold': {
-      fontWeight: 600,
-    },
   },
 });