Deprecate ChoiceFieldset and ChoiceInputField (#1900)

* deprecates ChoiceFieldset and ChoiceInputField * update import paths in tests * addresses more PR feedback * fixes bad imports in docs * updates outdated story and test * moves components to deprecated directory * fixes broken docs pages * fixes bad formatting in changelog markdown * minor tweaks * moves deprecated notation for ChoiceInputField
primer · Mar 1, 2022 · d61b28a · d61b28a
1 parent 4babf20
commit d61b28a
Show file tree

Hide file tree

Showing 28 changed files with 315 additions and 35,389 deletions.
diff --git a/.changeset/nervous-pets-sleep.md b/.changeset/nervous-pets-sleep.md
@@ -0,0 +1,142 @@
+---
+'@primer/react': major
+---
+
+### ChoiceFieldset and ChoiceFieldset
+
+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 (v34)</th> <th> After (v35)</th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+import {ChoiceFieldset} from "@primer/react"
+
+// Multi-select
+<ChoiceFieldset>
+  <ChoiceFieldset.Legend>
+    Preferred 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>
+    Preferred 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>
+    Preferred 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>
+    Preferred 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
+```
+
+ChoiceFieldset codemod: https://github.com/primer/react-migrate/blob/main/src/use-deprecated-choicefieldset.js
+
+</td>
+</tr>
+</table>
diff --git a/docs/content/Checkbox.mdx b/docs/content/Checkbox.mdx
@@ -7,8 +7,6 @@ storybook: '/react/storybook?path=/story/forms-checkbox--default'
 componentId: checkbox
 ---
 
-import {ComponentChecklist} from '../src/component-checklist'
-
 ## Examples
 
 <Note variant="warning">

diff --git a/docs/content/CheckboxGroup.mdx b/docs/content/CheckboxGroup.mdx
@@ -8,7 +8,6 @@ storybook: '/react/storybook/?path=/story/forms-checkboxgroup-examples--basic'
 
 import {CheckboxGroup, Checkbox, Box} from '@primer/components'
 import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react'
-import {ComponentChecklist} from '../src/component-checklist'
 
 ## Examples
 

diff --git a/docs/content/CounterLabel.mdx b/docs/content/CounterLabel.mdx
@@ -6,9 +6,6 @@ status: Alpha
 source: https://github.com/primer/react/blob/main/src/CounterLabel.tsx
 ---
 
-import {ComponentChecklist} from '../src/component-checklist'
-import {PropsTable} from '../src/props-table'
-
 ## Example
 
 ```jsx live
@@ -22,7 +19,7 @@ import {PropsTable} from '../src/props-table'
 ## Props
 
 <PropsTable>
-  <PropsTable.Row
+  <PropsTableRow
     name="scheme"
     type="''primary' | 'secondary'"
     description="Pass in 'primary' for a darker background and inverse text, or 'secondary' for a lighter background and primary text. Omitting the scheme prop renders the default counter scheme"

diff --git a/docs/content/RadioGroup.mdx b/docs/content/RadioGroup.mdx
@@ -8,7 +8,6 @@ storybook: '/react/storybook/?path=/story/forms-radiogroup-examples--basic'
 
 import {RadioGroup, Radio, Box} from '@primer/components'
 import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react'
-import {ComponentChecklist} from '../src/component-checklist'
 
 ## Examples
 

diff --git a/docs/content/TextInputWithTokens.mdx b/docs/content/TextInputWithTokens.mdx
@@ -8,8 +8,6 @@ storybook: '/react/storybook?path=/story/forms-text-input-with-tokens--default'
 ---
 
 import {TextInputWithTokens} from '@primer/react'
-import {PropsTable} from '../src/props-table'
-import {ComponentChecklist} from '../src/component-checklist'
 
 A `TextInputWithTokens` component supports all of the features of a [TextInput](/TextInput) component, but it can render a list of [Tokens](/Token) next to the area a user types in.
 
@@ -242,37 +240,37 @@ render(LeadingVisualExample)
 ## Props
 
 <PropsTable>
-  <PropsTable.Row required name="tokens" type="TokenProps[]" description="The array of tokens to render" />
-  <PropsTable.Row
+  <PropsTableRow required name="tokens" type="TokenProps[]" description="The array of tokens to render" />
+  <PropsTableRow
     required
     name="onTokenRemove"
     type="(tokenId: string|number) => void"
     description="The function that gets called when a token is removed"
   />
-  <PropsTable.Row
+  <PropsTableRow
     name="tokenComponent"
     type="React.ComponentType<any>"
     defaultValue="Token"
     description="The component used to render each token"
   />
-  <PropsTable.Row
+  <PropsTableRow
     name="maxHeight"
     type="React.CSSProperties['maxHeight']"
     description="The maximum height of the component. If the content in the input exceeds this height, it will scroll vertically"
   />
-  <PropsTable.Row
+  <PropsTableRow
     name="preventTokenWrapping"
     type="boolean"
     defaultValue="false"
     description="Whether tokens should render inline horizontally. By default, tokens wrap to new lines"
   />
-  <PropsTable.Row
+  <PropsTableRow
     name="size"
     type="'small' | 'medium' | 'large' | 'extralarge'"
     defaultValue="extralarge"
     description="The size of the tokens and text input"
   />
-  <PropsTable.Row
+  <PropsTableRow
     name="hideTokenRemoveButtons"
     type="boolean"
     defaultValue="false"
@@ -283,7 +281,7 @@ render(LeadingVisualExample)
     type="'error' | 'success' | 'warning'"
     description="Style the input to match the status"
   />
-  <PropsTable.Row
+  <PropsTableRow
     name="visibleTokenCount"
     type="number"
     description="The number of tokens to display before truncating"

diff --git a/docs/content/ChoiceFieldset.mdx → docs/content/deprecated/ChoiceFieldset.mdx b/docs/content/ChoiceFieldset.mdx → docs/content/deprecated/ChoiceFieldset.mdx
@@ -7,7 +7,6 @@ storybook: '/react/storybook/?path=/story/forms-choicefieldset--radio-group'
 
 import {ChoiceFieldset, Box} from '@primer/components'
 import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react'
-import {ComponentChecklist} from '../src/component-checklist'
 
 A `ChoiceFieldset` is a controlled component that is used to render a related set of checkbox or radio inputs.
 
@@ -19,7 +18,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 +32,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 +93,7 @@ render(<WithOnSelectHandler />)
 
 ### Checkbox group
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset>
   <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
 
@@ -109,7 +108,7 @@ render(<WithOnSelectHandler />)
 
 ### Disabled
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset disabled>
   <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
   <ChoiceFieldset.List>
@@ -123,7 +122,7 @@ render(<WithOnSelectHandler />)
 
 ### Required
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset required>
   <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
   <ChoiceFieldset.List>
@@ -137,7 +136,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 +151,7 @@ render(<WithOnSelectHandler />)
 
 ### With validation
 
-```javascript live noinline
+```javascript live noinline deprecated
 const choices = [
   {
     value: 'figma',
@@ -222,7 +221,7 @@ render(<ChoiceFieldsetWithValidation />)
 
 ### A visually hidden legend
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset>
   <ChoiceFieldset.Legend visuallyHidden>Color mode</ChoiceFieldset.Legend>
   <ChoiceFieldset.List>
@@ -236,7 +235,7 @@ render(<ChoiceFieldsetWithValidation />)
 
 ### With a ChoiceFieldset.Description
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset>
   <ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>
   <ChoiceFieldset.Description>
@@ -271,7 +270,7 @@ render(<ChoiceFieldsetWithValidation />)
 
 ### With one disabled item
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset>
   <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
   <ChoiceFieldset.List>
@@ -287,7 +286,7 @@ render(<ChoiceFieldsetWithValidation />)
 
 ### Items with a caption and a leading visual
 
-```jsx live
+```jsx live deprecated
 <ChoiceFieldset>
   <ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>