mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 12:39:49 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat: Segmented adds vertical prop (#50708)

Browse Source 
Co-authored-by: 梁朝飞 <liangchaofei@guokechuzhi.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: thinkasany <480968828@qq.com>
This commit is contained in:
curry 2024-09-18 23:22:51 +08:00 committed by GitHub
parent 5b467654aa
commit 436aa9ad2d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 841 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -3943,7 +3943,9 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
class="ant-color-picker-operation"
>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-sm"
role="listbox"
>
<div
class="ant-segmented-group"
@ -3957,7 +3959,9 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Single"
>
Single
@ -3971,7 +3975,9 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Gradient"
>
Gradient

22
components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -8,7 +8,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
Select justify :
</p>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -22,7 +24,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="flex-start"
>
flex-start
@ -36,7 +40,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="center"
>
center
@ -50,7 +56,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="flex-end"
>
flex-end
@ -64,7 +72,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-between"
>
space-between
@ -78,7 +88,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-around"
>
space-around
@ -92,7 +104,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-evenly"
>
space-evenly
@ -104,7 +118,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
Select align :
</p>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -118,7 +134,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="flex-start"
>
flex-start
@ -132,7 +150,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="center"
>
center
@ -146,7 +166,9 @@ exports[`renders components/flex/demo/align.tsx extend context correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="flex-end"
>
flex-end

22
components/flex/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -8,7 +8,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
Select justify :
</p>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -22,7 +24,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="flex-start"
>
flex-start
@ -36,7 +40,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="center"
>
center
@ -50,7 +56,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="flex-end"
>
flex-end
@ -64,7 +72,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-between"
>
space-between
@ -78,7 +88,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-around"
>
space-around
@ -92,7 +104,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="space-evenly"
>
space-evenly
@ -104,7 +118,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
Select align :
</p>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -118,7 +134,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="flex-start"
>
flex-start
@ -132,7 +150,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="center"
>
center
@ -146,7 +166,9 @@ exports[`renders components/flex/demo/align.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="flex-end"
>
flex-end

8
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -30756,8 +30756,10 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
class="ant-form-item-control-input-content"
>
<div
aria-label="segmented control"
class="ant-segmented"
id="variant"
role="listbox"
>
<div
class="ant-segmented-group"
@ -30770,7 +30772,9 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="outlined"
>
outlined
@ -30785,7 +30789,9 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="filled"
>
filled
@ -30799,7 +30805,9 @@ exports[`renders components/form/demo/variant.tsx extend context correctly 1`] =
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="borderless"
>
borderless

8
components/form/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -12975,8 +12975,10 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
class="ant-form-item-control-input-content"
>
<div
aria-label="segmented control"
class="ant-segmented"
id="variant"
role="listbox"
>
<div
class="ant-segmented-group"
@ -12989,7 +12991,9 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="outlined"
>
outlined
@ -13004,7 +13008,9 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="filled"
>
filled
@ -13018,7 +13024,9 @@ exports[`renders components/form/demo/variant.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="borderless"
>
borderless

8
components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -3,7 +3,9 @@
exports[`renders components/popover/demo/arrow.tsx extend context correctly 1`] = `
Array [
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
style="margin-bottom: 24px;"
>
<div
@ -18,7 +20,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Show"
>
Show
@ -32,7 +36,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Hide"
>
Hide
@ -46,7 +52,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Center"
>
Center

8
components/popover/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -3,7 +3,9 @@
exports[`renders components/popover/demo/arrow.tsx correctly 1`] = `
Array [
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
style="margin-bottom:24px"
>
<div
@ -18,7 +20,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Show"
>
Show
@ -32,7 +36,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Hide"
>
Hide
@ -46,7 +52,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Center"
>
Center

16
components/qr-code/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -387,7 +387,9 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
class="ant-space-item"
>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -401,7 +403,9 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="canvas"
>
canvas
@ -415,7 +419,9 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="svg"
>
svg
@ -471,7 +477,9 @@ Array [
/>
</div>,
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -485,7 +493,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="L"
>
L
@ -499,7 +509,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="M"
>
M
@ -513,7 +525,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Q"
>
Q
@ -527,7 +541,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="H"
>
H

16
components/qr-code/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -345,7 +345,9 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
class="ant-space-item"
>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -359,7 +361,9 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="canvas"
>
canvas
@ -373,7 +377,9 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="svg"
>
svg
@ -427,7 +433,9 @@ Array [
/>
</div>,
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -441,7 +449,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="L"
>
L
@ -455,7 +465,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="M"
>
M
@ -469,7 +481,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Q"
>
Q
@ -483,7 +497,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="H"
>
H

268
components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -2,7 +2,9 @@
exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -16,7 +18,9 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -30,7 +34,9 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -44,7 +50,9 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -58,7 +66,9 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -72,7 +82,9 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 1`
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -86,7 +98,9 @@ exports[`renders components/segmented/demo/basic.tsx extend context correctly 2`
exports[`renders components/segmented/demo/block.tsx extend context correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-block"
role="listbox"
>
<div
class="ant-segmented-group"
@ -100,7 +114,9 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1`
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="123"
>
123
@ -114,7 +130,9 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1`
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="456"
>
456
@ -128,7 +146,9 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1`
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="longtext-longtext-longtext-longtext"
>
longtext-longtext-longtext-longtext
@ -142,7 +162,9 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 2`
exports[`renders components/segmented/demo/componentToken.tsx extend context correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -156,7 +178,9 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -170,7 +194,9 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -184,7 +210,9 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -198,7 +226,9 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -212,7 +242,9 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -226,7 +258,9 @@ exports[`renders components/segmented/demo/componentToken.tsx extend context cor
exports[`renders components/segmented/demo/controlled.tsx extend context correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -240,7 +274,9 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Map"
>
Map
@ -254,7 +290,9 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Transit"
>
Transit
@ -268,7 +306,9 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Satellite"
>
Satellite
@ -283,7 +323,9 @@ exports[`renders components/segmented/demo/controlled.tsx extend context correct
exports[`renders components/segmented/demo/controlled-two.tsx extend context correctly 1`] = `
Array [
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -297,7 +339,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="AND"
>
AND
@ -311,7 +355,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="OR"
>
OR
@ -325,7 +371,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="NOT"
>
NOT
@ -335,7 +383,9 @@ Array [
</div>,
  ,
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -349,7 +399,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="AND"
>
AND
@ -363,7 +415,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="OR"
>
OR
@ -377,7 +431,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="NOT"
>
NOT
@ -395,7 +451,9 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -409,7 +467,9 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding: 4px;"
@ -435,7 +495,9 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding: 4px;"
@ -465,7 +527,9 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding: 4px;"
@ -503,7 +567,9 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
</div>
</div>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -517,7 +583,9 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding: 4px;"
@ -539,7 +607,9 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding: 4px;"
@ -561,7 +631,9 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding: 4px;"
@ -583,7 +655,9 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding: 4px;"
@ -609,7 +683,9 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-disabled"
role="listbox"
>
<div
class="ant-segmented-group"
@ -624,7 +700,9 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Map"
>
Map
@ -639,7 +717,9 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Transit"
>
Transit
@ -654,7 +734,9 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Satellite"
>
Satellite
@ -663,7 +745,9 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
</div>
</div>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -677,7 +761,9 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -692,7 +778,9 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -706,7 +794,9 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -721,7 +811,9 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -735,7 +827,9 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -753,7 +847,9 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -767,7 +863,9 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -781,7 +879,9 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -795,7 +895,9 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -818,7 +920,9 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
exports[`renders components/segmented/demo/icon-only.tsx extend context correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -832,7 +936,9 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
@ -867,7 +973,9 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
@ -905,7 +1013,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-lg"
role="listbox"
>
<div
class="ant-segmented-group"
@ -919,7 +1029,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -933,7 +1045,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -947,7 +1061,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -961,7 +1077,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -975,7 +1093,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -984,7 +1104,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
</div>
</div>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -998,7 +1120,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -1012,7 +1136,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -1026,7 +1152,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -1040,7 +1168,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -1054,7 +1184,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -1063,7 +1195,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
</div>
</div>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-sm"
role="listbox"
>
<div
class="ant-segmented-group"
@ -1077,7 +1211,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -1091,7 +1227,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -1105,7 +1243,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -1119,7 +1259,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -1133,7 +1275,9 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -1152,7 +1296,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
>
<div>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-lg"
role="listbox"
style="margin-inline-end: 6px;"
>
<div
@ -1167,7 +1313,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -1181,7 +1329,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -1195,7 +1345,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -1214,7 +1366,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
</div>
<div>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
style="margin-inline-end: 6px;"
>
<div
@ -1229,7 +1383,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -1243,7 +1399,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -1257,7 +1415,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -1275,7 +1435,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
</div>
<div>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-sm"
role="listbox"
style="margin-inline-end: 6px;"
>
<div
@ -1290,7 +1452,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -1304,7 +1468,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -1318,7 +1484,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -1448,9 +1616,11 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
exports[`renders components/segmented/demo/size-consistent.tsx extend context correctly 2`] = `[]`;
exports[`renders components/segmented/demo/with-icon.tsx extend context correctly 1`] = `
exports[`renders components/segmented/demo/vertical.tsx extend context correctly 1`] = `
<div
class="ant-segmented"
aria-label="segmented control"
class="ant-segmented ant-segmented-vertical ant-segmented-vertical"
role="listbox"
>
<div
class="ant-segmented-group"
@ -1464,7 +1634,99 @@ exports[`renders components/segmented/demo/with-icon.tsx extend context correctl
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
>
<span
aria-label="bars"
class="anticon anticon-bars"
role="img"
>
<svg
aria-hidden="true"
data-icon="bars"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</span>
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
>
<span
aria-label="appstore"
class="anticon anticon-appstore"
role="img"
>
<svg
aria-hidden="true"
data-icon="appstore"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
/>
</svg>
</span>
</span>
</div>
</label>
</div>
</div>
`;
exports[`renders components/segmented/demo/vertical.tsx extend context correctly 2`] = `[]`;
exports[`renders components/segmented/demo/with-icon.tsx extend context correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
>
<label
class="ant-segmented-item ant-segmented-item-selected"
>
<input
checked=""
class="ant-segmented-item-input"
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
@ -1502,7 +1764,9 @@ exports[`renders components/segmented/demo/with-icon.tsx extend context correctl
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"

266
components/segmented/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -2,7 +2,9 @@
exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -16,7 +18,9 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -30,7 +34,9 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -44,7 +50,9 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -58,7 +66,9 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -72,7 +82,9 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -84,7 +96,9 @@ exports[`renders components/segmented/demo/basic.tsx correctly 1`] = `
exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-block"
role="listbox"
>
<div
class="ant-segmented-group"
@ -98,7 +112,9 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="123"
>
123
@ -112,7 +128,9 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="456"
>
456
@ -126,7 +144,9 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="longtext-longtext-longtext-longtext"
>
longtext-longtext-longtext-longtext
@ -138,7 +158,9 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -152,7 +174,9 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -166,7 +190,9 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -180,7 +206,9 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -194,7 +222,9 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -208,7 +238,9 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -220,7 +252,9 @@ exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -234,7 +268,9 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Map"
>
Map
@ -248,7 +284,9 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Transit"
>
Transit
@ -262,7 +300,9 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Satellite"
>
Satellite
@ -275,7 +315,9 @@ exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
exports[`renders components/segmented/demo/controlled-two.tsx correctly 1`] = `
Array [
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -289,7 +331,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="AND"
>
AND
@ -303,7 +347,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="OR"
>
OR
@ -317,7 +363,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="NOT"
>
NOT
@ -327,7 +375,9 @@ Array [
</div>,
  ,
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -341,7 +391,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="AND"
>
AND
@ -355,7 +407,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="OR"
>
OR
@ -369,7 +423,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="NOT"
>
NOT
@ -385,7 +441,9 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -399,7 +457,9 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding:4px"
@ -425,7 +485,9 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding:4px"
@ -455,7 +517,9 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding:4px"
@ -493,7 +557,9 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
</div>
</div>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -507,7 +573,9 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding:4px"
@ -529,7 +597,9 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding:4px"
@ -551,7 +621,9 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding:4px"
@ -573,7 +645,9 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
style="padding:4px"
@ -597,7 +671,9 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-disabled"
role="listbox"
>
<div
class="ant-segmented-group"
@ -612,7 +688,9 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Map"
>
Map
@ -627,7 +705,9 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Transit"
>
Transit
@ -642,7 +722,9 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Satellite"
>
Satellite
@ -651,7 +733,9 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
</div>
</div>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -665,7 +749,9 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -680,7 +766,9 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -694,7 +782,9 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -709,7 +799,9 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -723,7 +815,9 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -739,7 +833,9 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -753,7 +849,9 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -767,7 +865,9 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -781,7 +881,9 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -802,7 +904,9 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -816,7 +920,9 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
@ -851,7 +957,9 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
@ -887,7 +995,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-lg"
role="listbox"
>
<div
class="ant-segmented-group"
@ -901,7 +1011,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -915,7 +1027,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -929,7 +1043,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -943,7 +1059,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -957,7 +1075,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -966,7 +1086,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
</div>
</div>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -980,7 +1102,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -994,7 +1118,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -1008,7 +1134,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -1022,7 +1150,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -1036,7 +1166,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -1045,7 +1177,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
</div>
</div>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-sm"
role="listbox"
>
<div
class="ant-segmented-group"
@ -1059,7 +1193,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -1073,7 +1209,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -1087,7 +1225,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -1101,7 +1241,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Quarterly"
>
Quarterly
@ -1115,7 +1257,9 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Yearly"
>
Yearly
@ -1132,7 +1276,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
>
<div>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-lg"
role="listbox"
style="margin-inline-end:6px"
>
<div
@ -1147,7 +1293,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -1161,7 +1309,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -1175,7 +1325,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -1194,7 +1346,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
</div>
<div>
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
style="margin-inline-end:6px"
>
<div
@ -1209,7 +1363,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -1223,7 +1379,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -1237,7 +1395,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -1255,7 +1415,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
</div>
<div>
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-sm"
role="listbox"
style="margin-inline-end:6px"
>
<div
@ -1270,7 +1432,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -1284,7 +1448,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -1298,7 +1464,9 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -1370,9 +1538,11 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
</div>
`;
exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = `
exports[`renders components/segmented/demo/vertical.tsx correctly 1`] = `
<div
class="ant-segmented"
aria-label="segmented control"
class="ant-segmented ant-segmented-vertical ant-segmented-vertical"
role="listbox"
>
<div
class="ant-segmented-group"
@ -1386,7 +1556,97 @@ exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
>
<span
aria-label="bars"
class="anticon anticon-bars"
role="img"
>
<svg
aria-hidden="true"
data-icon="bars"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0z"
/>
</svg>
</span>
</span>
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
>
<span
aria-label="appstore"
class="anticon anticon-appstore"
role="img"
>
<svg
aria-hidden="true"
data-icon="appstore"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
/>
</svg>
</span>
</span>
</div>
</label>
</div>
</div>
`;
exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
>
<label
class="ant-segmented-item ant-segmented-item-selected"
>
<input
checked=""
class="ant-segmented-item-input"
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
@ -1424,7 +1684,9 @@ exports[`renders components/segmented/demo/with-icon.tsx correctly 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"

110
components/segmented/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -2,7 +2,9 @@
exports[`Segmented render empty segmented 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -12,7 +14,9 @@ exports[`Segmented render empty segmented 1`] = `
exports[`Segmented render label with ReactNode 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -26,7 +30,9 @@ exports[`Segmented render label with ReactNode 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -40,7 +46,9 @@ exports[`Segmented render label with ReactNode 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
id="weekly"
@ -57,7 +65,9 @@ exports[`Segmented render label with ReactNode 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<div
class="little"
@ -72,7 +82,9 @@ exports[`Segmented render label with ReactNode 1`] = `
exports[`Segmented render segmented ok 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -86,7 +98,9 @@ exports[`Segmented render segmented ok 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -100,7 +114,9 @@ exports[`Segmented render segmented ok 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -114,7 +130,9 @@ exports[`Segmented render segmented ok 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -126,7 +144,9 @@ exports[`Segmented render segmented ok 1`] = `
exports[`Segmented render segmented with \`block\` 1`] = `
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-block"
role="listbox"
>
<div
class="ant-segmented-group"
@ -140,7 +160,9 @@ exports[`Segmented render segmented with \`block\` 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -154,7 +176,9 @@ exports[`Segmented render segmented with \`block\` 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -168,7 +192,9 @@ exports[`Segmented render segmented with \`block\` 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -180,7 +206,9 @@ exports[`Segmented render segmented with \`block\` 1`] = `
exports[`Segmented render segmented with \`size#large\` 1`] = `
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-lg"
role="listbox"
>
<div
class="ant-segmented-group"
@ -194,7 +222,9 @@ exports[`Segmented render segmented with \`size#large\` 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -208,7 +238,9 @@ exports[`Segmented render segmented with \`size#large\` 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -222,7 +254,9 @@ exports[`Segmented render segmented with \`size#large\` 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -234,7 +268,9 @@ exports[`Segmented render segmented with \`size#large\` 1`] = `
exports[`Segmented render segmented with \`size#small\` 1`] = `
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-sm"
role="listbox"
>
<div
class="ant-segmented-group"
@ -248,7 +284,9 @@ exports[`Segmented render segmented with \`size#small\` 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -262,7 +300,9 @@ exports[`Segmented render segmented with \`size#small\` 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -276,7 +316,9 @@ exports[`Segmented render segmented with \`size#small\` 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -288,7 +330,9 @@ exports[`Segmented render segmented with \`size#small\` 1`] = `
exports[`Segmented render segmented with mixed options 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -302,7 +346,9 @@ exports[`Segmented render segmented with mixed options 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -316,7 +362,9 @@ exports[`Segmented render segmented with mixed options 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -330,7 +378,9 @@ exports[`Segmented render segmented with mixed options 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -342,7 +392,9 @@ exports[`Segmented render segmented with mixed options 1`] = `
exports[`Segmented render segmented with numeric options 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -356,7 +408,9 @@ exports[`Segmented render segmented with numeric options 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="1"
>
1
@ -370,7 +424,9 @@ exports[`Segmented render segmented with numeric options 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="2"
>
2
@ -384,7 +440,9 @@ exports[`Segmented render segmented with numeric options 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="3"
>
3
@ -398,7 +456,9 @@ exports[`Segmented render segmented with numeric options 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="4"
>
4
@ -412,7 +472,9 @@ exports[`Segmented render segmented with numeric options 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="5"
>
5
@ -424,7 +486,9 @@ exports[`Segmented render segmented with numeric options 1`] = `
exports[`Segmented render segmented with options null/undefined 1`] = `
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-disabled"
role="listbox"
>
<div
class="ant-segmented-group"
@ -439,7 +503,9 @@ exports[`Segmented render segmented with options null/undefined 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
/>
</label>
<label
@ -451,7 +517,9 @@ exports[`Segmented render segmented with options null/undefined 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
/>
</label>
<label
@ -463,7 +531,9 @@ exports[`Segmented render segmented with options null/undefined 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title=""
/>
</label>
@ -473,7 +543,9 @@ exports[`Segmented render segmented with options null/undefined 1`] = `
exports[`Segmented render segmented with options: disabled 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -487,7 +559,9 @@ exports[`Segmented render segmented with options: disabled 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -502,7 +576,9 @@ exports[`Segmented render segmented with options: disabled 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -516,7 +592,9 @@ exports[`Segmented render segmented with options: disabled 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -528,7 +606,9 @@ exports[`Segmented render segmented with options: disabled 1`] = `
exports[`Segmented render segmented with string options 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -542,7 +622,9 @@ exports[`Segmented render segmented with string options 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -556,7 +638,9 @@ exports[`Segmented render segmented with string options 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -570,7 +654,9 @@ exports[`Segmented render segmented with string options 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -582,7 +668,9 @@ exports[`Segmented render segmented with string options 1`] = `
exports[`Segmented render segmented with thumb 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -596,7 +684,9 @@ exports[`Segmented render segmented with thumb 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Map"
>
Map
@ -610,7 +700,9 @@ exports[`Segmented render segmented with thumb 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Transit"
>
Transit
@ -624,7 +716,9 @@ exports[`Segmented render segmented with thumb 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Satellite"
>
Satellite
@ -636,7 +730,9 @@ exports[`Segmented render segmented with thumb 1`] = `
exports[`Segmented render segmented: disabled 1`] = `
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-disabled"
role="listbox"
>
<div
class="ant-segmented-group"
@ -651,7 +747,9 @@ exports[`Segmented render segmented: disabled 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Daily"
>
Daily
@ -666,7 +764,9 @@ exports[`Segmented render segmented: disabled 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Weekly"
>
Weekly
@ -681,7 +781,9 @@ exports[`Segmented render segmented: disabled 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Monthly"
>
Monthly
@ -693,7 +795,9 @@ exports[`Segmented render segmented: disabled 1`] = `
exports[`Segmented render with icons 1`] = `
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
>
<div
class="ant-segmented-group"
@ -707,7 +811,9 @@ exports[`Segmented render with icons 1`] = `
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
@ -742,7 +848,9 @@ exports[`Segmented render with icons 1`] = `
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
>
<span
class="ant-segmented-item-icon"
@ -778,7 +886,9 @@ exports[`Segmented render with icons 1`] = `
exports[`Segmented rtl render component should be rendered correctly in RTL direction 1`] = `
<div
aria-label="segmented control"
class="ant-segmented ant-segmented-rtl"
role="listbox"
>
<div
class="ant-segmented-group"

7
components/segmented/demo/vertical.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
垂直方向。
## en-US
Make it vertical.

15
components/segmented/demo/vertical.tsx Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
import { Segmented } from 'antd';
const Demo: React.FC = () => (
<Segmented
vertical
options={[
{ value: 'List', icon: <BarsOutlined /> },
{ value: 'Kanban', icon: <AppstoreOutlined /> },
]}
/>
);
export default Demo;

3
components/segmented/index.en-US.md
View File

@ -20,6 +20,7 @@ This component is available since `antd@4.20.0`.
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">Basic</code>
<code src="./demo/vertical.tsx" version="5.21.0">Vertical Direction</code>
<code src="./demo/block.tsx">Block Segmented</code>
<code src="./demo/disabled.tsx">Disabled</code>
<code src="./demo/controlled.tsx">Controlled mode</code>
@ -46,10 +47,12 @@ Common props ref：[Common props](/docs/react/common-props)
| onChange | The callback function that is triggered when the state changes | function(value: string \| number) | | |
| options | Set children optional | string\[] \| number\[] \| SegmentedItemType\[] | [] | |
| size | The size of the Segmented. | `large` \| `middle` \| `small` | `middle` | |
| vertical | Orientation | boolean | `false` | 5.21.0 |
| value | Currently selected value | string \| number | | |
### SegmentedItemType
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| label | Display text for Segmented item | ReactNode | - | |

4
components/segmented/index.tsx
View File

@ -47,6 +47,7 @@ export interface SegmentedProps<ValueType = RcSegmentedValue>
block?: boolean;
/** Option to control the display size */
size?: SizeType;
vertical?: boolean;
}
const InternalSegmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref) => {
@ -58,6 +59,7 @@ const InternalSegmented = React.forwardRef<HTMLDivElement, SegmentedProps>((prop
options = [],
size: customSize = 'middle',
style,
vertical,
...restProps
} = props;
@ -98,6 +100,7 @@ const InternalSegmented = React.forwardRef<HTMLDivElement, SegmentedProps>((prop
[`${prefixCls}-block`]: block,
[`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-lg`]: mergedSize === 'large',
[`${prefixCls}-vertical`]: vertical,
},
hashId,
cssVarCls,
@ -114,6 +117,7 @@ const InternalSegmented = React.forwardRef<HTMLDivElement, SegmentedProps>((prop
ref={ref}
prefixCls={prefixCls}
direction={direction}
vertical={vertical}
/>,
);
});

18
components/segmented/index.zh-CN.md
View File

@ -21,6 +21,7 @@ demo:
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/vertical.tsx" version="5.21.0">垂直方向</code>
<code src="./demo/block.tsx">Block 分段选择器</code>
<code src="./demo/disabled.tsx">不可用</code>
<code src="./demo/controlled.tsx">受控模式</code>
@ -47,19 +48,22 @@ demo:
| defaultValue | 默认选中的值 | string \| number | | |
| disabled | 是否禁用 | boolean | false | |
| onChange | 选项变化时的回调函数 | function(value: string \| number) | | |
| options | 数据化配置选项内容 | string\[] \| number\[] \| SegmentedItemType\[] | [] | |
| options | 数据化配置选项内容 | string\[] \| number\[] \| SegmentedItemType\[] | [] | |
| size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` | |
| vertical | 排列方向 | boolean | `false` | 5.21.0 |
| value | 当前选中的值 | string \| number | | |
### SegmentedItemType
| 属性 | 描述 | 类型 | 默认值 | 版本 |
| 属性 | 描述 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| label | 分段项的显示文本 | ReactNode | - | |
| value | 分段项的值 | string \| number | - | |
| icon | 分段项的显示图标 | ReactNode | - | |
| disabled | 分段项的禁用状态 | boolean | false | |
| className | 自定义类名 | string | - | |
| label | 分段项的显示文本 | ReactNode | - | |
| value | 分段项的值 | string \| number | - | |
| icon | 分段项的显示图标 | ReactNode | - | |
| disabled | 分段项的禁用状态 | boolean | false | |
| icon | 分段项的显示图标 | ReactNode | - | |
| disabled | 分段项的禁用状态 | boolean | false | |
| className | 自定义类名 | string | - | |
## 主题变量（Design Token）

14
components/segmented/style/index.ts
View File

@ -109,6 +109,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
display: 'flex',
alignItems: 'stretch',
justifyItems: 'flex-start',
flexDirection: 'row',
width: '100%',
},
@ -117,6 +118,18 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
direction: 'rtl',
},
[`&${componentCls}-vertical`]: {
[`${componentCls}-group`]: {
flexDirection: 'column',
},
[`${componentCls}-thumb`]: {
width: '100%',
height: 0,
padding: `0 ${unit(token.paddingXXS)}`,
},
},
// block styles
[`&${componentCls}-block`]: {
display: 'flex',
@ -205,6 +218,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
height: '100%',
padding: `${unit(token.paddingXXS)} 0`,
borderRadius: token.borderRadiusSM,
transition: `transform ${token.motionDurationSlow} ${token.motionEaseInOut}, height ${token.motionDurationSlow} ${token.motionEaseInOut}`,
[`& ~ ${componentCls}-item:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)::after`]:
{

8
components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1994,7 +1994,9 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx extend context corr
exports[`renders components/tabs/demo/custom-indicator.tsx extend context correctly 1`] = `
Array [
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
style="margin-bottom: 8px;"
>
<div
@ -2008,7 +2010,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="start"
>
start
@ -2023,7 +2027,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="center"
>
center
@ -2037,7 +2043,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="end"
>
end

8
components/tabs/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1663,7 +1663,9 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx correctly 1`] = `
exports[`renders components/tabs/demo/custom-indicator.tsx correctly 1`] = `
Array [
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
style="margin-bottom:8px"
>
<div
@ -1677,7 +1679,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="start"
>
start
@ -1692,7 +1696,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="center"
>
center
@ -1706,7 +1712,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="end"
>
end

8
components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -3,7 +3,9 @@
exports[`renders components/tooltip/demo/arrow.tsx extend context correctly 1`] = `
Array [
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
style="margin-bottom: 24px;"
>
<div
@ -18,7 +20,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Show"
>
Show
@ -32,7 +36,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Hide"
>
Hide
@ -46,7 +52,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Center"
>
Center

8
components/tooltip/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -3,7 +3,9 @@
exports[`renders components/tooltip/demo/arrow.tsx correctly 1`] = `
Array [
<div
aria-label="segmented control"
class="ant-segmented"
role="listbox"
style="margin-bottom:24px"
>
<div
@ -18,7 +20,9 @@ Array [
type="radio"
/>
<div
aria-selected="true"
class="ant-segmented-item-label"
role="option"
title="Show"
>
Show
@ -32,7 +36,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Hide"
>
Hide
@ -46,7 +52,9 @@ Array [
type="radio"
/>
<div
aria-selected="false"
class="ant-segmented-item-label"
role="option"
title="Center"
>
Center

2
package.json
View File

@ -143,7 +143,7 @@
"rc-progress": "~4.0.0",
"rc-rate": "~2.13.0",
"rc-resize-observer": "^1.4.0",
"rc-segmented": "~2.3.0",
"rc-segmented": "~2.5.0",
"rc-select": "~14.15.2",
"rc-slider": "~11.1.5",
"rc-steps": "~6.0.1",