feat(component): add more customizable prop for radio-group with new story (#7850)

![CleanShot 2024-08-13 at 16.40.22@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/06a128c3-f0bb-47f9-babf-6d4eca2597d7.png)

Author: CatsJuice

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

@@ -1,5 +1,6 @@
 import { AiIcon, FrameIcon, TocIcon, TodayIcon } from '@blocksuite/icons/rc';
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { useState } from 'react';
 
 import { ResizePanel } from '../resize-panel/resize-panel';
@@ -147,3 +148,31 @@ export const CustomizeActiveStyle = () => {
     />
   );
 };
+
+const shapes = [
+  'Square',
+  'Ellipse',
+  'Diamond',
+  'Triangle',
+  'Rounded ',
+  'Rectangle',
+];
+export const ShapeSelectorDemo = () => {
+  const [shape, setShape] = useState(shapes[0]);
+  return (
+    <RadioGroup
+      padding={0}
+      gap={4}
+      itemHeight={28}
+      borderRadius={8}
+      value={shape}
+      items={shapes}
+      onChange={setShape}
+      style={{ background: 'transparent' }}
+      indicatorStyle={{
+        boxShadow: 'none',
+        backgroundColor: cssVarV2('layer/background/tertiary'),
+      }}
+    />
+  );
+};

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

@@ -69,6 +69,7 @@ export const RadioGroup = memo(function RadioGroup({
   items,
   value,
   width,
+  className,
   style,
   padding = 2,
   gap = 4,
@@ -78,6 +79,8 @@ export const RadioGroup = memo(function RadioGroup({
   animationEasing = 'cubic-bezier(.18,.22,0,1)',
   activeItemClassName,
   activeItemStyle,
+  indicatorClassName,
+  indicatorStyle,
   iconMode,
   onChange,
 }: RadioProps) {
@@ -152,7 +155,7 @@ export const RadioGroup = memo(function RadioGroup({
     <RadixRadioGroup.Root
       value={value}
       onValueChange={onChange}
-      className={styles.radioButtonGroup}
+      className={clsx(styles.radioButtonGroup, className)}
       style={finalStyle}
       data-icon-mode={iconMode}
     >
@@ -179,8 +182,9 @@ export const RadioGroup = memo(function RadioGroup({
           >
             <RadixRadioGroup.Indicator
               forceMount
-              className={styles.indicator}
+              className={clsx(styles.indicator, indicatorClassName)}
               ref={item.indicatorRef}
+              style={indicatorStyle}
             />
             <span className={styles.radioButtonContent}>
               {customRender?.(item, index) ?? item.label ?? item.value}

packages/frontend/component/src/ui/radio/types.ts

@@ -47,6 +47,10 @@ export interface RadioProps extends RadioGroupItemProps {
   activeItemClassName?: string;
   /** Customize active item's style */
   activeItemStyle?: CSSProperties;
+  /** Customize indicator's className */
+  indicatorClassName?: string;
+  /** Customize indicator's style */
+  indicatorStyle?: CSSProperties;
   /**
    * This prop is used to use a different color scheme
    */