Skip to content

Commit fcf51d8

Browse files
AlbertCarrerasAlbertCarreras
authored
RadioButton: deprecate component (#4043)
1 parent 12aa452 commit fcf51d8

29 files changed

+398
-1384
lines changed

‎.github/pr-title-checker-config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"ESLint plugin: ",
1212
"Tokens: "
1313
],
14-
"regexp": "^(?=.*(?:Accordion|ActivationCard|Avatar|AvatarGroup|Badge|BannerCallout|BannerOverlay|BannerSlim|BannerUpsell|Box|Button|ButtonGroup|ButtonToggle|ChartGraph|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|IconCompact|Image|Indicator|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverMessage|Pulsar|RadioButton|RadioGroup|ScrollBoundaryContainer|SearchField|SearchGuide|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextCompact|TextUI|TextArea|TextField|TileData|Toast|Tooltip|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+",
14+
"regexp": "^(?=.*(?:Accordion|ActivationCard|Avatar|AvatarGroup|Badge|BannerCallout|BannerOverlay|BannerSlim|BannerUpsell|Box|Button|ButtonGroup|ButtonToggle|ChartGraph|Checkbox|Collage|ColorSchemeProvider|Column|ComboBox|Container|Datapoint|DateRange|DateField|DatePicker|DefaultLabelProvider|DeviceTypeProvider|Divider|Dropdown|GlobalEventsHandlerProvider|Fieldset|Flex|Heading|HelpButton|Icon|IconButton|IconButtonFloating|IconCompact|Image|Indicator|Label|Layer|Letterbox|Link|List|Mask|Masonry|Modal|ModalAlert|NumberField|OverlayPanel|PageHeader|Pog|Popover|PopoverMessage|Pulsar|RadioGroup|ScrollBoundaryContainer|SearchField|SearchGuide|SegmentedControl|SelectList|Sheet|SheetMobile|SideNavigation|Spinner|Status|Sticky|Switch|Table|TableOfContents|Tabs|Tag|TagData|TapArea|Text|TextCompact|TextUI|TextArea|TextField|TileData|Toast|Tooltip|useFocusVisible|useReducedMotion|Video|WashAnimated|ZIndex-Classes):\\s.*)+",
1515
"regexpFlags": "",
1616
"ignoreLabels": []
1717
},

‎docs/docs-components/data/components.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -560,7 +560,7 @@ const componentData: ReadonlyArray<ComponentData> = [
560560
},
561561
alias: ['Toggle', 'Action Button', 'Toggle Switch'],
562562
description:
563-
'The ButtonToggle is a larger alternative to selection components such as Checkbox, RadioButton, and Switch.',
563+
'The ButtonToggle is a larger alternative to selection components such as Checkbox, RadioGroup, and Switch.',
564564
category: ['Actions'],
565565
status: {
566566
documentation: 'ready',
@@ -575,7 +575,7 @@ const componentData: ReadonlyArray<ComponentData> = [
575575
},
576576
alias: ['Toggle', 'Action Button', 'Toggle Switch'],
577577
description:
578-
'The ButtonToggle is a larger alternative to selection components such as Checkbox, RadioButton, and Switch.',
578+
'The ButtonToggle is a larger alternative to selection components such as Checkbox, RadioGroup, and Switch.',
579579
category: ['Actions'],
580580
status: {
581581
documentation: 'ready',
@@ -590,7 +590,7 @@ const componentData: ReadonlyArray<ComponentData> = [
590590
},
591591
alias: ['Toggle', 'Action Button', 'Toggle Switch'],
592592
description:
593-
'The ButtonToggle is a larger alternative to selection components such as Checkbox, RadioButton, and Switch.',
593+
'The ButtonToggle is a larger alternative to selection components such as Checkbox, RadioGroup, and Switch.',
594594
category: ['Actions'],
595595
status: {
596596
documentation: 'ready',

‎docs/examples/bannerslim/placeNearMostRelatedElement.tsx‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ import {
44
Box,
55
Checkbox,
66
Divider,
7-
Fieldset,
87
Flex,
9-
RadioButton,
8+
RadioGroup,
109
SelectList,
1110
Text,
1211
TextField,
@@ -37,27 +36,25 @@ export default function Example() {
3736
<SelectList.Option label="Lead" value="Lead" />
3837
</SelectList>
3938
<Divider />
40-
<Fieldset legend="Bidding">
41-
<Flex direction="column" gap={{ column: 2, row: 0 }}>
42-
<RadioButton
43-
checked
44-
id="automatic"
45-
label="Automatic (recommended)"
46-
name="Automatic"
47-
onChange={() => {}}
48-
subtext="Pinterest aims to get the most clicks for your budget"
49-
value="automatic"
50-
/>
51-
<RadioButton
52-
id="custom"
53-
label="Custom"
54-
name="custom"
55-
onChange={() => {}}
56-
subtext="You control how much to bid at auction"
57-
value="custom"
58-
/>
59-
</Flex>
60-
</Fieldset>
39+
<RadioGroup id="bidding" legend="Bidding">
40+
<RadioGroup.RadioButton
41+
checked
42+
helperText="Pinterest aims to get the most clicks for your budget"
43+
id="automatic"
44+
label="Automatic (recommended)"
45+
name="Automatic"
46+
onChange={() => {}}
47+
value="automatic"
48+
/>
49+
<RadioGroup.RadioButton
50+
helperText="You control how much to bid at auction"
51+
id="custom"
52+
label="Custom"
53+
name="custom"
54+
onChange={() => {}}
55+
value="custom"
56+
/>
57+
</RadioGroup>
6158
<Divider />
6259
<Checkbox
6360
id="checkbox"

‎docs/examples/fieldset/accessibility.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState } from 'react';
2-
import { Fieldset, Flex, RadioButton, TextField } from 'gestalt';
2+
import { Flex, RadioGroup, TextField } from 'gestalt';
33

44
export default function Example() {
55
const [favorite, setFavorite] = useState('');
@@ -25,25 +25,25 @@ export default function Example() {
2525
type="email"
2626
value={email}
2727
/>
28-
<Fieldset legend="Favorite pet">
28+
<RadioGroup id="pet" legend="Favorite pet">
2929
<Flex direction="column" gap={2}>
30-
<RadioButton
30+
<RadioGroup.RadioButton
3131
checked={favorite === 'dogs'}
3232
id="favoriteDogA11y"
3333
label="Dogs"
3434
name="favorite"
3535
onChange={() => setFavorite('dogs')}
3636
value="dogs"
3737
/>
38-
<RadioButton
38+
<RadioGroup.RadioButton
3939
checked={favorite === 'cats'}
4040
id="favoriteCatA11y"
4141
label="Cats"
4242
name="favorite"
4343
onChange={() => setFavorite('cats')}
4444
value="cats"
4545
/>
46-
<RadioButton
46+
<RadioGroup.RadioButton
4747
checked={favorite === 'plants'}
4848
id="favoritePlantsA11y"
4949
label="Plants"
@@ -52,7 +52,7 @@ export default function Example() {
5252
value="plants"
5353
/>
5454
</Flex>
55-
</Fieldset>
55+
</RadioGroup>
5656
</Flex>
5757
</form>
5858
</Flex>

‎docs/examples/overlaypanel/confirmationExample.tsx‎

Lines changed: 39 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@ import {
44
Button,
55
Checkbox,
66
CompositeZIndex,
7-
Fieldset,
87
FixedZIndex,
98
Flex,
109
Layer,
1110
OverlayPanel,
12-
RadioButton,
11+
RadioGroup,
1312
Text,
1413
TextField,
1514
} from 'gestalt';
@@ -76,30 +75,25 @@ export default function Example() {
7675
onChange={() => {}}
7776
placeholder="Describe your audience"
7877
/>
79-
<Fieldset legend="When adding this audience list to an ad group:">
80-
<Flex
81-
direction="column"
82-
gap={{
83-
row: 0,
84-
column: 3,
85-
}}
86-
>
87-
<RadioButton
88-
id="include"
89-
label="Include list"
90-
name="audience"
91-
onChange={() => {}}
92-
value="include"
93-
/>
94-
<RadioButton
95-
id="exclude"
96-
label="Exclude list"
97-
name="audience"
98-
onChange={() => {}}
99-
value="include"
100-
/>
101-
</Flex>
102-
</Fieldset>
78+
<RadioGroup id="bidding" legend="Bidding">
79+
<RadioGroup.RadioButton
80+
checked
81+
helperText="Pinterest aims to get the most clicks for your budget"
82+
id="automatic"
83+
label="Automatic (recommended)"
84+
name="Automatic"
85+
onChange={() => {}}
86+
value="automatic"
87+
/>
88+
<RadioGroup.RadioButton
89+
helperText="You control how much to bid at auction"
90+
id="custom"
91+
label="Custom"
92+
name="custom"
93+
onChange={() => {}}
94+
value="custom"
95+
/>
96+
</RadioGroup>
10397
</Flex>
10498
<Flex
10599
direction="column"
@@ -118,44 +112,25 @@ export default function Example() {
118112
To use a conversion source other than a Pinterest Tag, add a filter and configure
119113
the source of this event.
120114
</Text>
121-
<Fieldset legend="Select conversion source:" legendDisplay="hidden">
122-
<Flex
123-
direction="column"
124-
gap={{
125-
row: 0,
126-
column: 3,
127-
}}
128-
>
129-
<RadioButton
130-
id="tag"
131-
label="Pinterest Tag"
132-
name="source"
133-
onChange={() => {}}
134-
value="pin"
135-
/>
136-
<RadioButton
137-
id="mmp"
138-
label="Mobile Measurement Partners (MMP)"
139-
name="source"
140-
onChange={() => {}}
141-
value="mmp"
142-
/>
143-
<RadioButton
144-
id="upload"
145-
label="Conversion Upload"
146-
name="source"
147-
onChange={() => {}}
148-
value="conversion"
149-
/>
150-
<RadioButton
151-
id="api"
152-
label="API"
153-
name="source"
154-
onChange={() => {}}
155-
value="api"
156-
/>
157-
</Flex>
158-
</Fieldset>
115+
<RadioGroup id="bidding2" legend="Bidding">
116+
<RadioGroup.RadioButton
117+
checked
118+
helperText="Pinterest aims to get the most clicks for your budget"
119+
id="automatic"
120+
label="Automatic (recommended)"
121+
name="Automatic"
122+
onChange={() => {}}
123+
value="automatic"
124+
/>
125+
<RadioGroup.RadioButton
126+
helperText="You control how much to bid at auction"
127+
id="custom"
128+
label="Custom"
129+
name="custom"
130+
onChange={() => {}}
131+
value="custom"
132+
/>
133+
</RadioGroup>
159134
</Flex>
160135
<Flex
161136
direction="column"

‎docs/examples/overlaypanel/defaultExample.tsx‎

Lines changed: 39 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@ import {
44
Button,
55
Checkbox,
66
CompositeZIndex,
7-
Fieldset,
87
FixedZIndex,
98
Flex,
109
Layer,
1110
OverlayPanel,
12-
RadioButton,
11+
RadioGroup,
1312
Text,
1413
TextField,
1514
} from 'gestalt';
@@ -76,30 +75,25 @@ export default function Example() {
7675
onChange={() => {}}
7776
placeholder="Describe your audience"
7877
/>
79-
<Fieldset legend="When adding this audience list to an ad group:">
80-
<Flex
81-
direction="column"
82-
gap={{
83-
row: 0,
84-
column: 3,
85-
}}
86-
>
87-
<RadioButton
88-
id="include"
89-
label="Include list"
90-
name="audience"
91-
onChange={() => {}}
92-
value="include"
93-
/>
94-
<RadioButton
95-
id="exclude"
96-
label="Exclude list"
97-
name="audience"
98-
onChange={() => {}}
99-
value="include"
100-
/>
101-
</Flex>
102-
</Fieldset>
78+
<RadioGroup id="bidding" legend="Bidding">
79+
<RadioGroup.RadioButton
80+
checked
81+
helperText="Pinterest aims to get the most clicks for your budget"
82+
id="automatic"
83+
label="Automatic (recommended)"
84+
name="Automatic"
85+
onChange={() => {}}
86+
value="automatic"
87+
/>
88+
<RadioGroup.RadioButton
89+
helperText="You control how much to bid at auction"
90+
id="custom"
91+
label="Custom"
92+
name="custom"
93+
onChange={() => {}}
94+
value="custom"
95+
/>
96+
</RadioGroup>
10397
</Flex>
10498
<Flex
10599
direction="column"
@@ -118,44 +112,25 @@ export default function Example() {
118112
To use a conversion source other than a Pinterest Tag, add a filter and configure
119113
the source of this event.
120114
</Text>
121-
<Fieldset legend="Select conversion source:" legendDisplay="hidden">
122-
<Flex
123-
direction="column"
124-
gap={{
125-
row: 0,
126-
column: 3,
127-
}}
128-
>
129-
<RadioButton
130-
id="tag"
131-
label="Pinterest Tag"
132-
name="source"
133-
onChange={() => {}}
134-
value="pin"
135-
/>
136-
<RadioButton
137-
id="mmp"
138-
label="Mobile Measurement Partners (MMP)"
139-
name="source"
140-
onChange={() => {}}
141-
value="mmp"
142-
/>
143-
<RadioButton
144-
id="upload"
145-
label="Conversion Upload"
146-
name="source"
147-
onChange={() => {}}
148-
value="conversion"
149-
/>
150-
<RadioButton
151-
id="api"
152-
label="API"
153-
name="source"
154-
onChange={() => {}}
155-
value="api"
156-
/>
157-
</Flex>
158-
</Fieldset>
115+
<RadioGroup id="bidding2" legend="Bidding">
116+
<RadioGroup.RadioButton
117+
checked
118+
helperText="Pinterest aims to get the most clicks for your budget"
119+
id="automatic"
120+
label="Automatic (recommended)"
121+
name="Automatic"
122+
onChange={() => {}}
123+
value="automatic"
124+
/>
125+
<RadioGroup.RadioButton
126+
helperText="You control how much to bid at auction"
127+
id="custom"
128+
label="Custom"
129+
name="custom"
130+
onChange={() => {}}
131+
value="custom"
132+
/>
133+
</RadioGroup>
159134
</Flex>
160135
<Flex
161136
direction="column"

0 commit comments

Comments
 (0)