fix: a series of setting issues (#3032)

(cherry picked from commit 87ba71e77e)

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

@@ -3,33 +3,45 @@ import type {
   RadioGroupProps,
 } from '@radix-ui/react-radio-group';
 import * as RadioGroup from '@radix-ui/react-radio-group';
-import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { type CSSProperties, forwardRef } from 'react';
 
 import * as styles from './styles.css';
 
-export const RadioButton = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <RadioGroup.Item ref={ref} {...props}>
-        <span className={styles.radioUncheckedButton}>{children}</span>
-        <RadioGroup.Indicator className={styles.radioButton}>
-          {children}
-        </RadioGroup.Indicator>
-      </RadioGroup.Item>
-    );
-  }
-);
+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 })}
+      >
+        {children}
+      </RadioGroup.Indicator>
+    </RadioGroup.Item>
+  );
+});
 RadioButton.displayName = 'RadioButton';
 
-export const RadioButtonGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-  ({ ...props }, ref) => {
-    return (
-      <RadioGroup.Root
-        ref={ref}
-        className={styles.radioButtonGroup}
-        {...props}
-      ></RadioGroup.Root>
-    );
-  }
-);
+export const RadioButtonGroup = forwardRef<
+  HTMLDivElement,
+  RadioGroupProps & { width?: CSSProperties['width'] }
+>(({ className, style, width, ...props }, ref) => {
+  return (
+    <RadioGroup.Root
+      ref={ref}
+      className={clsx(styles.radioButtonGroup, className)}
+      style={{ width, ...style }}
+      {...props}
+    ></RadioGroup.Root>
+  );
+});
 RadioButtonGroup.displayName = 'RadioButtonGroup';

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

@@ -54,11 +54,13 @@ export const dropdownIcon = style({
 });
 
 export const radioButton = style({
+  flexGrow: 1,
+});
+export const radioButtonContent = style({
   fontSize: 'var(--affine-font-xs)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  padding: '0 30px',
   height: '24px',
   borderRadius: '8px',
   filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1))',
@@ -71,11 +73,14 @@ export const radioButton = style({
     '&[data-state="checked"]': {
       background: 'var(--affine-white)',
     },
+    '&.bold': {
+      fontWeight: 600,
+    },
   },
 });
 
 export const radioUncheckedButton = style([
-  radioButton,
+  radioButtonContent,
   {
     selectors: {
       '[data-state="checked"] > &': {
@@ -87,7 +92,8 @@ export const radioUncheckedButton = style([
 
 export const radioButtonGroup = style({
   display: 'inline-flex',
-  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  alignItems: 'center',
   background: 'var(--affine-hover-color)',
   borderRadius: '10px',
   padding: '2px',

packages/component/src/ui/button/utils.ts

@@ -7,21 +7,21 @@ import { SIZE_DEFAULT, SIZE_MIDDLE, SIZE_SMALL } from './interface';
 export const SIZE_CONFIG = {
   [SIZE_SMALL]: {
     iconSize: 16,
-    fontSize: 16,
+    fontSize: 'var(--affine-font-xs)',
     borderRadius: 4,
-    height: 26,
+    height: 28,
     padding: 6,
   },
   [SIZE_MIDDLE]: {
     iconSize: 20,
-    fontSize: 16,
+    fontSize: 'var(--affine-font-sm)',
     borderRadius: 4,
     height: 32,
     padding: 12,
   },
   [SIZE_DEFAULT]: {
     iconSize: 24,
-    fontSize: 16,
+    fontSize: 'var(--affine-font-base)',
     height: 38,
     padding: 24,
     borderRadius: 4,

packages/component/src/ui/menu/styles.ts

@@ -105,12 +105,11 @@ export const StyledMenuItem = styled('button')<{
 export const StyledButton = styled(Button)(() => {
   return {
     width: '100%',
-    height: '32px',
+    // height: '32px',
     borderRadius: '8px',
     backgroundColor: 'transparent',
     ...displayFlex('space-between', 'center'),
     border: `1px solid var(--affine-border-color)`,
     padding: '0 10px',
-    fontSize: 'var(--affine-font-base)',
   };
 });