From 9a46f8e0ff52bd76728b17e11dcedd0ce3953be1 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Fri, 10 Nov 2023 10:15:05 +0800
Subject: [PATCH] feat(radio): feat: add autoWidth api (#2662)

---
 .changeset/proud-tools-buy.md                 |  5 ++
 .changeset/thin-ladybugs-joke.md              |  5 ++
 packages/ui/radio/src/RadioGroup.tsx          |  7 +++
 packages/ui/radio/src/styles/radio.scss       |  9 ++++
 .../ui/radio/stories/auto-width.stories.tsx   | 53 +++++++++++++++++++
 packages/ui/radio/stories/index.stories.tsx   |  1 +
 6 files changed, 80 insertions(+)
 create mode 100644 .changeset/proud-tools-buy.md
 create mode 100644 .changeset/thin-ladybugs-joke.md
 create mode 100644 packages/ui/radio/stories/auto-width.stories.tsx

diff --git a/.changeset/proud-tools-buy.md b/.changeset/proud-tools-buy.md
new file mode 100644
index 000000000..9ec442948
--- /dev/null
+++ b/.changeset/proud-tools-buy.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/radio": minor
+---
+
+feat: add autoWidth api
diff --git a/.changeset/thin-ladybugs-joke.md b/.changeset/thin-ladybugs-joke.md
new file mode 100644
index 000000000..16b668feb
--- /dev/null
+++ b/.changeset/thin-ladybugs-joke.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Radio feat: add autoWidth api
diff --git a/packages/ui/radio/src/RadioGroup.tsx b/packages/ui/radio/src/RadioGroup.tsx
index 56d5b85d8..c0c53179d 100644
--- a/packages/ui/radio/src/RadioGroup.tsx
+++ b/packages/ui/radio/src/RadioGroup.tsx
@@ -22,6 +22,7 @@ export const RadioGroup = forwardRef<HTMLDivElement | null, RadioGroupProps>(
       data,
       type = RadioGroupTypeEnum.DEFAULT,
       placement = RadioGroupPlacementEnum.HORIZONTAL,
+      autoWidth = false,
       ...rest
     },
     ref
@@ -63,6 +64,7 @@ export const RadioGroup = forwardRef<HTMLDivElement | null, RadioGroupProps>(
       prefixCls,
       className,
       `${prefixCls}--placement-${placement}`,
+      autoWidth && type === RadioGroupTypeEnum.BUTTON && `${prefixCls}--auto-width`,
       `${prefixCls}--type-${type}`,
       hasData && `${prefixCls}--data-wrap`
     )
@@ -90,6 +92,11 @@ export interface RadioGroupProps extends HiBaseHTMLFieldProps<'div'>, UseRadioGr
    * 设置水平或垂直展示
    */
   placement?: RadioGroupPlacementEnum
+  /**
+   * 宽度是否自适应
+   * @default false
+   */
+  autoWidth?: boolean
 }
 
 if (__DEV__) {
diff --git a/packages/ui/radio/src/styles/radio.scss b/packages/ui/radio/src/styles/radio.scss
index ce69bd212..fb9a8db79 100644
--- a/packages/ui/radio/src/styles/radio.scss
+++ b/packages/ui/radio/src/styles/radio.scss
@@ -175,6 +175,15 @@ $label-class: '#{$prefix}__label' !default;
       align-items: center;
     }
 
+    &.#{$prefix}-group--auto-width {
+      display: flex;
+
+      .#{$prefix}--type-button {
+        flex: 1;
+        justify-content: center;
+      }
+    }
+
     .#{$prefix}--type-button {
       &::after {
         content: '';
diff --git a/packages/ui/radio/stories/auto-width.stories.tsx b/packages/ui/radio/stories/auto-width.stories.tsx
new file mode 100644
index 000000000..581fc2c65
--- /dev/null
+++ b/packages/ui/radio/stories/auto-width.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import Radio from '../src'
+
+/**
+ * @title 宽度自适应
+ * @desc 仅支持横向按钮组
+ */
+export const AutoWidth = () => {
+  const RadioGroup = Radio.Group
+
+  const [data] = React.useState([
+    {
+      id: 0,
+      title: '手机类',
+    },
+    {
+      id: 1,
+      title: '电脑类',
+    },
+    {
+      id: 2,
+      title: '生活类',
+    },
+    {
+      id: 3,
+      title: '其它',
+    },
+    {
+      id: 4,
+      title: '禁用未选',
+      disabled: true,
+    },
+  ])
+
+  return (
+    <>
+      <h1>AutoWidth</h1>
+      <div className="radio-auto-width__wrap">
+        <div>
+          <RadioGroup
+            defaultValue={0}
+            type={'button'}
+            data={data}
+            autoWidth={true}
+            onChange={(value) => {
+              console.log('onChange', value)
+            }}
+          />
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/radio/stories/index.stories.tsx b/packages/ui/radio/stories/index.stories.tsx
index 1e06f4a38..27035755d 100644
--- a/packages/ui/radio/stories/index.stories.tsx
+++ b/packages/ui/radio/stories/index.stories.tsx
@@ -8,6 +8,7 @@ export * from './group.stories'
 export * from './placement.stories'
 export * from './children.stories'
 export * from './button.stories'
+export * from './auto-width.stories'
 
 export default {
   title: 'Data Input/Radio',