From cfc367efe78ad6d098f99cc823f0b14ddd1c1183 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Fri, 16 Aug 2024 07:19:16 +0000
Subject: [PATCH] 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)
---
 .../component/src/ui/radio/radio.stories.tsx  | 29 +++++++++++++++++++
 .../frontend/component/src/ui/radio/radio.tsx |  8 +++--
 .../frontend/component/src/ui/radio/types.ts  |  4 +++
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/component/src/ui/radio/radio.stories.tsx b/packages/frontend/component/src/ui/radio/radio.stories.tsx
index 9f589fca1b..9392d93085 100644
--- a/packages/frontend/component/src/ui/radio/radio.stories.tsx
+++ b/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'),
+      }}
+    />
+  );
+};
diff --git a/packages/frontend/component/src/ui/radio/radio.tsx b/packages/frontend/component/src/ui/radio/radio.tsx
index f445b53817..db73cbbbad 100644
--- a/packages/frontend/component/src/ui/radio/radio.tsx
+++ b/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}
diff --git a/packages/frontend/component/src/ui/radio/types.ts b/packages/frontend/component/src/ui/radio/types.ts
index 1d30f63220..ca538be9ce 100644
--- a/packages/frontend/component/src/ui/radio/types.ts
+++ b/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
    */