Deprecate ChoiceFieldset and ChoiceInputField

.changeset/nervous-pets-sleep.md

@@ -0,0 +1,116 @@
+---
+'@primer/react': major
+---
+
+![image](https://user-images.githubusercontent.com/2313998/155632630-60822d7b-6053-480d-925d-cea4d3b04919.png)
+
+The `CheckboxGroup` and `RadioGroup` components will be used to deprecate the `ChoiceFieldset` component. The deprecation of `ChoiceFieldset` also allows us to deprecate `ChoiceInputField`.
+
+`CheckboxGroup` and `RadioGroup` have the ability to render contextual content with your fieldset: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology.
+
+<table>
+<tr>
+<th> Before </th> <th> After </th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+import {ChoiceFieldset} from "@primer/react";
+
+// Multi-select
+<ChoiceFieldset>
+  <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
+
+  <ChoiceFieldset.List selectionVariant="multiple">
+    <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
+    <ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
+    <ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
+    <ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
+  </ChoiceFieldset.List>
+</ChoiceFieldset>
+
+// Single select
+<ChoiceFieldset>
+  <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
+
+  <ChoiceFieldset.List>
+    <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
+    <ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
+    <ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
+    <ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
+  </ChoiceFieldset.List>
+</ChoiceFieldset>
+
+```
+
+</td>
+<td valign="top">
+
+```jsx
+import {FormGroup, Checkbox} from "@primer/react";
+
+// Multi-select
+<CheckboxGroup>
+  <CheckboxGroup.Label>Prefered Primer component interface</CheckboxGroup.Label>
+  <FormControl>
+    <Checkbox value="figma" />
+    <FormControl.Label>Figma</FormControl.Label>
+  </FormControl>
+  <FormControl>
+    <Checkbox value="css" />
+    <FormControl.Label>CSS</FormControl.Label>
+  </FormControl>
+  <FormControl>
+    <Checkbox value="react" />
+    <FormControl.Label>Primer React components</FormControl.Label>
+  </FormControl>
+  <FormControl>
+    <Checkbox value="viewcomponents" />
+    <FormControl.Label>Primer ViewComponents</FormControl.Label>
+  </FormControl>
+</CheckboxGroup>
+
+// Single select
+<RadioGroup name="preferred-primer">
+  <RadioGroup.Label>Prefered Primer component interface</RadioGroup.Label>
+  <FormControl>
+    <Radio value="figma" />
+    <FormControl.Label>Figma</FormControl.Label>
+  </FormControl>
+  <FormControl>
+    <Radio value="css" />
+    <FormControl.Label>CSS</FormControl.Label>
+  </FormControl>
+  <FormControl>
+    <Radio value="react" />
+    <FormControl.Label>Primer React components</FormControl.Label>
+  </FormControl>
+  <FormControl>
+    <Radio value="viewcomponents" />
+    <FormControl.Label>Primer ViewComponents</FormControl.Label>
+  </FormControl>
+</RadioGroup>
+```
+
+</td>
+</tr>
+</table>
+<table style="display: table">
+<tr><th>Migration steps to CheckboxGroup and RadioGroup</th></tr>
+<tr>
+<td>
+
+<strong>Upgrade to the new</strong> `CheckboxGroup` and `RadioGroup` components by referring to the examples in our documentation: [CheckboxGroup](https://primer.style/react/CheckboxGroup), [RadioGroup](https://primer.style/react/RadioGroup).
+
+or
+
+<strong>Continue using the deprecated</strong> `ChoiceFieldset` component :
+
+```js
+import {ChoiceFieldset} from '@primer/react/deprecated' // change your import statements
+```
+
+</td>
+</tr>
+</table>

docs/content/ChoiceFieldset.mdx

@@ -19,7 +19,7 @@ Use [CheckboxGroup](/CheckboxGroup) or [RadioGroup](/RadioGroup) instead.
 
 ### Basic
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset>
   <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
   <ChoiceFieldset.List>
@@ -33,7 +33,7 @@ Use [CheckboxGroup](/CheckboxGroup) or [RadioGroup](/RadioGroup) instead.
 
 ### Using an onSelect handler
 
-```javascript live noinline
+```javascript live noinline deprecated
 const WithOnSelectHandler = () => {
   const [selectedChoices, setSelectedChoices] = React.useState([])
   const choices = [
@@ -94,7 +94,7 @@ render(<WithOnSelectHandler />)
 
 ### Checkbox group
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset>
   <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
 
@@ -109,7 +109,7 @@ render(<WithOnSelectHandler />)
 
 ### Disabled
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset disabled>
   <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
   <ChoiceFieldset.List>
@@ -123,7 +123,7 @@ render(<WithOnSelectHandler />)
 
 ### Required
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset required>
   <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
   <ChoiceFieldset.List>
@@ -137,7 +137,7 @@ render(<WithOnSelectHandler />)
 
 ### With pre-selected choices
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset selected={['figma', 'react']}>
   <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
 
@@ -152,7 +152,7 @@ render(<WithOnSelectHandler />)
 
 ### With validation
 
-```javascript live noinline
+```javascript live noinline deprecated
 const choices = [
   {
     value: 'figma',
@@ -222,7 +222,7 @@ render(<ChoiceFieldsetWithValidation />)
 
 ### A visually hidden legend
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset>
   <ChoiceFieldset.Legend visuallyHidden>Color mode</ChoiceFieldset.Legend>
   <ChoiceFieldset.List>
@@ -236,7 +236,7 @@ render(<ChoiceFieldsetWithValidation />)
 
 ### With a ChoiceFieldset.Description
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset>
   <ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>
   <ChoiceFieldset.Description>
@@ -271,7 +271,7 @@ render(<ChoiceFieldsetWithValidation />)
 
 ### With one disabled item
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset>
   <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
   <ChoiceFieldset.List>
@@ -287,7 +287,7 @@ render(<ChoiceFieldsetWithValidation />)
 
 ### Items with a caption and a leading visual
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset>
   <ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>
 

src/ChoiceFieldset/ChoiceFieldCaption.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {ChoiceInputField} from '..'
+import ChoiceInputField from '../ChoiceInputField'
 
 const ChoiceFieldCaption: React.FC = ({children}) => <ChoiceInputField.Caption>{children}</ChoiceInputField.Caption>
 

src/ChoiceFieldset/ChoiceFieldLabel.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {ChoiceInputField} from '..'
+import ChoiceInputField from '../ChoiceInputField'
 
 const ChoiceFieldLabel: React.FC = ({children}) => <ChoiceInputField.Label>{children}</ChoiceInputField.Label>
 

src/ChoiceFieldset/ChoiceFieldset.tsx

@@ -57,7 +57,7 @@ const {Slots, Slot} = createSlots(['Description', 'ChoiceList', 'Legend', 'Valid
 export {Slot}
 
 /**
- * @deprecated Use `CheckboxGroup` or `RadioGroup` instead.
+ * @deprecated Use `CheckboxGroup` or `RadioGroup` instead. See https://primer.style/react/CheckboxGroup and https://primer.style/react/RadioGroup for more info
  */
 const ChoiceFieldset = <T extends Record<string, FormValidationStatus>>({
   children,

src/ChoiceFieldset/ChoiceFieldsetListItem.tsx

@@ -1,5 +1,6 @@
 import React, {useContext} from 'react'
-import {Checkbox, ChoiceInputField, Radio, useSSRSafeId} from '..'
+import {Checkbox, Radio, useSSRSafeId} from '..'
+import ChoiceInputField from '../ChoiceInputField'
 import {ComponentProps} from '../utils/types'
 import ChoiceInputLeadingVisual from '../_ChoiceInputLeadingVisual'
 import ChoiceFieldCaption from './ChoiceFieldCaption'

src/ChoiceInputField.tsx

@@ -25,6 +25,9 @@ const getInputToRender = (inputType: 'radio' | 'checkbox', children?: React.Reac
   )
 }
 
+/**
+ * @deprecated Use `FormControl` instead. See https://primer.style/react/FormControl for more info
+ */
 const ChoiceInputField: React.FC<Props> = ({children, disabled, id: idProp, validationStatus}) => {
   const id = useSSRSafeId(idProp)
   const captionChildren: React.ReactElement[] | undefined | null = React.Children.map(children, child =>

src/__tests__/ChoiceFieldset.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import {render} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
-import {ChoiceFieldset, Item, SSRProvider} from '..'
+import {SSRProvider} from '..'
 import {MarkGithubIcon} from '@primer/octicons-react'
 import userEvent from '@testing-library/user-event'
-import {ChoiceFieldsetProps} from '../ChoiceFieldset'
+import ChoiceFieldset, {Item, ChoiceFieldsetProps} from '../ChoiceFieldset'
 import {ChoiceFieldsetListProps} from '../ChoiceFieldset/ChoiceFieldsetList'
 
 const SelectableChoicelistFieldset: React.FC<ChoiceFieldsetProps & ChoiceFieldsetListProps> = ({

src/__tests__/ChoiceInputField.test.tsx

@@ -2,7 +2,8 @@ import React from 'react'
 import {render, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import 'babel-polyfill'
-import {Checkbox, ChoiceInputField, Radio, SSRProvider} from '..'
+import {Checkbox, Radio, SSRProvider} from '..'
+import ChoiceInputField from '../ChoiceInputField'
 import {MarkGithubIcon} from '@primer/octicons-react'
 expect.extend(toHaveNoViolations)
 

src/deprecated/index.ts

@@ -8,6 +8,8 @@
 
 export {default as BorderBox} from '../BorderBox'
 export type {BorderBoxProps} from '../BorderBox'
+export {default as ChoiceFieldset, Item} from '../ChoiceFieldset'
+export {default as ChoiceInputField} from '../ChoiceInputField'
 export {default as Flex} from '../Flex'
 export type {FlexProps} from '../Flex'
 export {default as Grid} from '../Grid'

src/index.ts

@@ -8,14 +8,6 @@ export type {ThemeProviderProps} from './ThemeProvider'
 // Layout
 export {default as Box} from './Box'
 export type {BoxProps} from './Box'
-export {PageLayout} from './PageLayout'
-export type {
-  PageLayoutProps,
-  PageLayoutHeaderProps,
-  PageLayoutContentProps,
-  PageLayoutPaneProps,
-  PageLayoutFooterProps
-} from './PageLayout'
 
 // Hooks
 export {default as useDetails} from './hooks/useDetails'
@@ -74,12 +66,10 @@ export type {
 } from './Button'
 export {default as Caret} from './Caret'
 export type {CaretProps} from './Caret'
-export {default as ChoiceInputField} from './ChoiceInputField'
 export {default as CircleBadge} from './CircleBadge'
 export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge'
 export {default as CircleOcticon} from './CircleOcticon'
 export type {CircleOcticonProps} from './CircleOcticon'
-export {default as ChoiceFieldset, Item} from './ChoiceFieldset'
 export {default as CheckboxGroup} from './CheckboxGroup'
 export {default as CounterLabel} from './CounterLabel'
 export type {CounterLabelProps} from './CounterLabel'
@@ -127,7 +117,6 @@ export type {PopoverProps, PopoverContentProps} from './Popover'
 export {default as ProgressBar} from './ProgressBar'
 export type {ProgressBarProps} from './ProgressBar'
 export {default as RadioGroup} from './RadioGroup'
-export {default as SelectMenu} from './SelectMenu'
 export {default as Select} from './Select'
 export {SelectPanel} from './SelectPanel'
 export type {SelectPanelProps} from './SelectPanel'