From 291cb21ea40294485249d112f578c83ebee1dad3 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Fri, 22 Nov 2024 17:08:30 +0800 Subject: [PATCH] feat(Segmented): support `name` prop to enable grouping (#51725) --- .../__snapshots__/demo-extend.test.ts.snap | 2 + .../__snapshots__/demo-extend.test.ts.snap | 9 + .../__tests__/__snapshots__/demo.test.ts.snap | 9 + .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__snapshots__/demo.test.tsx.snap | 3 + .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__snapshots__/demo.test.tsx.snap | 3 + .../__snapshots__/demo-extend.test.ts.snap | 6 + .../__tests__/__snapshots__/demo.test.ts.snap | 6 + .../__snapshots__/demo-extend.test.ts.snap | 176 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 174 +++++++++++++++++ .../__snapshots__/index.test.tsx.snap | 40 ++++ components/segmented/__tests__/index.test.tsx | 11 ++ components/segmented/demo/with-name.md | 7 + components/segmented/demo/with-name.tsx | 8 + components/segmented/index.en-US.md | 17 +- components/segmented/index.zh-CN.md | 2 + .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__tests__/__snapshots__/demo.test.ts.snap | 3 + .../__snapshots__/demo-extend.test.ts.snap | 3 + .../__snapshots__/demo.test.tsx.snap | 3 + package.json | 2 +- 22 files changed, 484 insertions(+), 9 deletions(-) create mode 100644 components/segmented/demo/with-name.md create mode 100644 components/segmented/demo/with-name.tsx diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 97636aaef0..9bb52a7925 100644 --- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -3990,6 +3990,7 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c class="ant-segmented-item" > diff --git a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap index 28269eef86..c2aff8a9b4 100644 --- a/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -19,6 +19,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -52,6 +54,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" > @@ -68,6 +71,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" > @@ -84,6 +88,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" > @@ -100,6 +105,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" > @@ -129,6 +135,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -162,6 +170,7 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = ` class="ant-segmented-item" > diff --git a/components/flex/__tests__/__snapshots__/demo.test.ts.snap b/components/flex/__tests__/__snapshots__/demo.test.ts.snap index 2834493b42..6f554e02f6 100644 --- a/components/flex/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/flex/__tests__/__snapshots__/demo.test.ts.snap @@ -19,6 +19,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -52,6 +54,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -68,6 +71,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -84,6 +88,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -100,6 +105,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -129,6 +135,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -162,6 +170,7 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = ` class="ant-segmented-item" > diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index 0e32f7d2f5..552325e25f 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -30843,6 +30843,7 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] = class="ant-segmented-item" > @@ -30859,6 +30860,7 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] = class="ant-segmented-item ant-segmented-item-selected" > diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 073d0bbb64..b2d464e83e 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -13088,6 +13088,7 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -13104,6 +13105,7 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap index b58dcb581e..18794b564f 100644 --- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -15,6 +15,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -48,6 +50,7 @@ Array [ class="ant-segmented-item" > diff --git a/components/popover/__tests__/__snapshots__/demo.test.tsx.snap b/components/popover/__tests__/__snapshots__/demo.test.tsx.snap index 0404d1b67f..770d94eba7 100644 --- a/components/popover/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/popover/__tests__/__snapshots__/demo.test.tsx.snap @@ -15,6 +15,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -48,6 +50,7 @@ Array [ class="ant-segmented-item" > diff --git a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap index db44c8a9ee..1b8cd8073b 100644 --- a/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -398,6 +398,7 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1 class="ant-segmented-item ant-segmented-item-selected" > @@ -488,6 +490,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -521,6 +525,7 @@ Array [ class="ant-segmented-item" > @@ -537,6 +542,7 @@ Array [ class="ant-segmented-item" > diff --git a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap index f3accc9587..19a889e18c 100644 --- a/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/qr-code/__tests__/__snapshots__/demo.test.ts.snap @@ -356,6 +356,7 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -444,6 +446,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -477,6 +481,7 @@ Array [ class="ant-segmented-item" > @@ -493,6 +498,7 @@ Array [ class="ant-segmented-item" > diff --git a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap index 49c12e8a1c..719dc91502 100644 --- a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -13,6 +13,7 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item ant-segmented-item-selected" > @@ -46,6 +48,7 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item" > @@ -62,6 +65,7 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item" > @@ -78,6 +82,7 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1` class="ant-segmented-item" > @@ -109,6 +114,7 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1` class="ant-segmented-item ant-segmented-item-selected" > @@ -142,6 +149,7 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1` class="ant-segmented-item" > @@ -173,6 +181,7 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item ant-segmented-item-selected" > @@ -206,6 +216,7 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item" > @@ -222,6 +233,7 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item" > @@ -238,6 +250,7 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor class="ant-segmented-item" > @@ -269,6 +282,7 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct class="ant-segmented-item ant-segmented-item-selected" > @@ -302,6 +317,7 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct class="ant-segmented-item" > @@ -334,6 +350,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -367,6 +385,7 @@ Array [ class="ant-segmented-item" > @@ -394,6 +413,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -427,6 +448,7 @@ Array [ class="ant-segmented-item" > @@ -462,6 +484,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1 class="ant-segmented-item ant-segmented-item-selected" > @@ -523,6 +547,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1 class="ant-segmented-item" > @@ -578,6 +603,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1 class="ant-segmented-item ant-segmented-item-selected" > @@ -627,6 +654,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1 class="ant-segmented-item" > @@ -651,6 +679,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1 class="ant-segmented-item" > @@ -694,6 +723,7 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled" > @@ -806,6 +841,7 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly class="ant-segmented-item ant-segmented-item-disabled" > @@ -858,6 +895,7 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly class="ant-segmented-item ant-segmented-item-selected" > @@ -891,6 +930,7 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly class="ant-segmented-item" > @@ -931,6 +971,7 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl class="ant-segmented-item ant-segmented-item-selected" > @@ -1024,6 +1066,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item ant-segmented-item-selected" > @@ -1057,6 +1101,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1073,6 +1118,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1089,6 +1135,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1115,6 +1162,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item ant-segmented-item-selected" > @@ -1148,6 +1197,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1164,6 +1214,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1180,6 +1231,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1206,6 +1258,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item ant-segmented-item-selected" > @@ -1239,6 +1293,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1255,6 +1310,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1271,6 +1327,7 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] class="ant-segmented-item" > @@ -1308,6 +1365,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item ant-segmented-item-selected" > @@ -1341,6 +1400,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" > @@ -1378,6 +1438,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item ant-segmented-item-selected" > @@ -1411,6 +1473,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" > @@ -1447,6 +1510,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item ant-segmented-item-selected" > @@ -1480,6 +1545,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co class="ant-segmented-item" > @@ -1633,6 +1699,7 @@ exports[`renders components/segmented/demo/vertical.tsx extend context correctly class="ant-segmented-item ant-segmented-item-selected" > @@ -1723,6 +1791,7 @@ exports[`renders components/segmented/demo/with-icon.tsx extend context correctl class="ant-segmented-item ant-segmented-item-selected" > @@ -1805,3 +1875,109 @@ exports[`renders components/segmented/demo/with-icon.tsx extend context correctl `; exports[`renders components/segmented/demo/with-icon.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/segmented/demo/with-name.tsx extend context correctly 1`] = ` +
Three sizes of Segmented
With Icon
With Icon only
+With name
Controlled Synced mode
Consistent height
Custom component token
@@ -49,17 +50,17 @@ Common props ref:[Common props](/docs/react/common-props)
| size | The size of the Segmented. | `large` \| `middle` \| `small` | `middle` | |
| vertical | Orientation | boolean | `false` | 5.21.0 |
| value | Currently selected value | string \| number | | |
+| name | The `name` property of all `input[type="radio"]` children | string | | 5.23.0 |
### SegmentedItemType
-
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| label | Display text for Segmented item | ReactNode | - | |
-| value | Value for Segmented item | string \| number | - | |
-| icon | Display icon for Segmented item | ReactNode | - | |
-| disabled | Disabled state of segmented item | boolean | false | |
-| className | The additional css class | string | - | |
+| Property | Description | Type | Default | Version |
+| --------- | -------------------------------- | ---------------- | ------- | ------- |
+| label | Display text for Segmented item | ReactNode | - | |
+| value | Value for Segmented item | string \| number | - | |
+| icon | Display icon for Segmented item | ReactNode | - | |
+| disabled | Disabled state of segmented item | boolean | false | |
+| className | The additional css class | string | - | |
## Design Token
diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md
index f0f84e65b2..f9e159c9ed 100644
--- a/components/segmented/index.zh-CN.md
+++ b/components/segmented/index.zh-CN.md
@@ -30,6 +30,7 @@ demo:
三种大小
设置图标
只设置图标
+配合 name 使用
受控同步模式
统一高度
自定义组件 Token
@@ -52,6 +53,7 @@ demo:
| size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` | |
| vertical | 排列方向 | boolean | `false` | 5.21.0 |
| value | 当前选中的值 | string \| number | | |
+| name | Segmented 下所有 `input[type="radio"]` 的 `name` 属性 | string | | 5.23.0 |
### SegmentedItemType
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2e3e417175..8e0f89e0cb 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2006,6 +2006,7 @@ Array [
class="ant-segmented-item"
>
@@ -2022,6 +2023,7 @@ Array [
class="ant-segmented-item ant-segmented-item-selected"
>
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
index aae5df9174..9cfb8ba413 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
@@ -1675,6 +1675,7 @@ Array [
class="ant-segmented-item"
>
@@ -1691,6 +1692,7 @@ Array [
class="ant-segmented-item ant-segmented-item-selected"
>
diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
index 51016ed388..023b0befdb 100644
--- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -15,6 +15,7 @@ Array [
class="ant-segmented-item ant-segmented-item-selected"
>
@@ -48,6 +50,7 @@ Array [
class="ant-segmented-item"
>
diff --git a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
index 4f9b7c8a3a..39547a7ef6 100644
--- a/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
@@ -15,6 +15,7 @@ Array [
class="ant-segmented-item ant-segmented-item-selected"
>
@@ -48,6 +50,7 @@ Array [
class="ant-segmented-item"
>
diff --git a/package.json b/package.json
index d7aac2aec8..093b43ef64 100644
--- a/package.json
+++ b/package.json
@@ -139,7 +139,7 @@
"rc-progress": "~4.0.0",
"rc-rate": "~2.13.0",
"rc-resize-observer": "^1.4.0",
- "rc-segmented": "~2.5.0",
+ "rc-segmented": "~2.6.0",
"rc-select": "~14.16.3",
"rc-slider": "~11.1.7",
"rc-steps": "~6.0.1",