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`] = ` +
+
+ + + + + +
+
+`; + +exports[`renders components/segmented/demo/with-name.tsx extend context correctly 2`] = `[]`; diff --git a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap index 9e24cc69c7..1e14b635d8 100644 --- a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap @@ -13,6 +13,7 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -46,6 +48,7 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -62,6 +65,7 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -78,6 +82,7 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -107,6 +112,7 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -140,6 +147,7 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -169,6 +177,7 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -202,6 +212,7 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -218,6 +229,7 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -234,6 +246,7 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -263,6 +276,7 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -296,6 +311,7 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -326,6 +342,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -359,6 +377,7 @@ Array [ class="ant-segmented-item" > @@ -386,6 +405,7 @@ Array [ class="ant-segmented-item ant-segmented-item-selected" > @@ -419,6 +440,7 @@ Array [ class="ant-segmented-item" > @@ -452,6 +474,7 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -513,6 +537,7 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -568,6 +593,7 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -617,6 +644,7 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -641,6 +669,7 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -682,6 +711,7 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled" > @@ -794,6 +829,7 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-disabled" > @@ -844,6 +881,7 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -877,6 +916,7 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -915,6 +955,7 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1006,6 +1048,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1039,6 +1083,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1055,6 +1100,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1071,6 +1117,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1097,6 +1144,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1130,6 +1179,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1146,6 +1196,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1162,6 +1213,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1188,6 +1240,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1221,6 +1275,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1237,6 +1292,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1253,6 +1309,7 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1288,6 +1345,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1321,6 +1380,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1358,6 +1418,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1391,6 +1453,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1427,6 +1490,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1460,6 +1525,7 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = ` class="ant-segmented-item" > @@ -1555,6 +1621,7 @@ exports[`renders components/segmented/demo/vertical.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1643,6 +1711,7 @@ exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -1723,3 +1793,107 @@ exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = ` `; + +exports[`renders components/segmented/demo/with-name.tsx correctly 1`] = ` +
+
+ + + + + +
+
+`; diff --git a/components/segmented/__tests__/__snapshots__/index.test.tsx.snap b/components/segmented/__tests__/__snapshots__/index.test.tsx.snap index 4e55403f85..572aa1c9ba 100644 --- a/components/segmented/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/segmented/__tests__/__snapshots__/index.test.tsx.snap @@ -25,6 +25,7 @@ exports[`Segmented render label with ReactNode 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -61,6 +63,7 @@ exports[`Segmented render label with ReactNode 1`] = ` class="ant-segmented-item" > @@ -93,6 +96,7 @@ exports[`Segmented render segmented ok 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -126,6 +131,7 @@ exports[`Segmented render segmented ok 1`] = ` class="ant-segmented-item" > @@ -155,6 +161,7 @@ exports[`Segmented render segmented with \`block\` 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -188,6 +196,7 @@ exports[`Segmented render segmented with \`block\` 1`] = ` class="ant-segmented-item" > @@ -217,6 +226,7 @@ exports[`Segmented render segmented with \`size#large\` 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -250,6 +261,7 @@ exports[`Segmented render segmented with \`size#large\` 1`] = ` class="ant-segmented-item" > @@ -279,6 +291,7 @@ exports[`Segmented render segmented with \`size#small\` 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -312,6 +326,7 @@ exports[`Segmented render segmented with \`size#small\` 1`] = ` class="ant-segmented-item" > @@ -341,6 +356,7 @@ exports[`Segmented render segmented with mixed options 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -374,6 +391,7 @@ exports[`Segmented render segmented with mixed options 1`] = ` class="ant-segmented-item" > @@ -403,6 +421,7 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -436,6 +456,7 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item" > @@ -452,6 +473,7 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item" > @@ -468,6 +490,7 @@ exports[`Segmented render segmented with numeric options 1`] = ` class="ant-segmented-item" > @@ -497,6 +520,7 @@ exports[`Segmented render segmented with options null/undefined 1`] = ` class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled" > @@ -617,6 +646,7 @@ exports[`Segmented render segmented with string options 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -650,6 +681,7 @@ exports[`Segmented render segmented with string options 1`] = ` class="ant-segmented-item" > @@ -679,6 +711,7 @@ exports[`Segmented render segmented with thumb 1`] = ` class="ant-segmented-item ant-segmented-item-selected" > @@ -712,6 +746,7 @@ exports[`Segmented render segmented with thumb 1`] = ` class="ant-segmented-item" > @@ -741,6 +776,7 @@ exports[`Segmented render segmented: disabled 1`] = ` class="ant-segmented-item ant-segmented-item-selected ant-segmented-item-disabled" > diff --git a/components/segmented/__tests__/index.test.tsx b/components/segmented/__tests__/index.test.tsx index c80948ce62..5de419790f 100644 --- a/components/segmented/__tests__/index.test.tsx +++ b/components/segmented/__tests__/index.test.tsx @@ -346,4 +346,15 @@ describe('Segmented', () => { .textContent?.includes('KanbanYes'), ).toBeTruthy(); }); + + it('all children should have a name property', () => { + const GROUP_NAME = 'GROUP_NAME'; + const { container } = render( + , + ); + + container.querySelectorAll('input[type="radio"]').forEach((el) => { + expect(el.name).toEqual(GROUP_NAME); + }); + }); }); diff --git a/components/segmented/demo/with-name.md b/components/segmented/demo/with-name.md new file mode 100644 index 0000000000..b0654a9512 --- /dev/null +++ b/components/segmented/demo/with-name.md @@ -0,0 +1,7 @@ +## zh-CN + +可以为 Segmented 配置 `name` 参数,为组合内的 input 元素赋予相同的 `name` 属性,使浏览器把 Segmented 下的 input 真正看作是一组(例如可以通过方向键始终**在同一组内**更改选项)。 + +## en-US + +Passing the `name` property to all `input[type="radio"]` that are in the same Segmented. It is usually used to let the browser see your Segmented as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Segmented. diff --git a/components/segmented/demo/with-name.tsx b/components/segmented/demo/with-name.tsx new file mode 100644 index 0000000000..14e88df9d7 --- /dev/null +++ b/components/segmented/demo/with-name.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { Segmented } from 'antd'; + +const Demo: React.FC = () => ( + options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} name="group" /> +); + +export default Demo; diff --git a/components/segmented/index.en-US.md b/components/segmented/index.en-US.md index 4384777bf2..dfe9ca5d3e 100644 --- a/components/segmented/index.en-US.md +++ b/components/segmented/index.en-US.md @@ -29,6 +29,7 @@ This component is available since `antd@4.20.0`. 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",