Skip to content

Deprecate ChoiceFieldset and ChoiceInputField #1900

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Mar 1, 2022
Merged

Deprecate ChoiceFieldset and ChoiceInputField #1900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e55d62c
deprecates ChoiceFieldset and ChoiceInputField
mperrotti Feb 25, 2022
8276358
Merge branch 'next/v35.0.0' of github.com:primer/react into mp/deprec…
mperrotti Feb 25, 2022
d88aad9
update import paths in tests
mperrotti Feb 25, 2022
210dfdc
addresses more PR feedback
mperrotti Feb 28, 2022
74e77e0
Merge branch 'main' of github.com:primer/react into mp/deprecate-choi…
mperrotti Feb 28, 2022
3a48ea2
Merge branch 'next/v35.0.0' of github.com:primer/react into mp/deprec…
mperrotti Feb 28, 2022
da2d956
fixes bad imports in docs
mperrotti Feb 28, 2022
1c545f4
updates outdated story and test
mperrotti Feb 28, 2022
5d3a36d
moves components to deprecated directory
mperrotti Feb 28, 2022
da4fc21
fixes broken docs pages
mperrotti Feb 28, 2022
f2dc311
fixes bad formatting in changelog markdown
mperrotti Feb 28, 2022
f521c8b
Merge branch 'next-major' of github.com:primer/react into mp/deprecat…
mperrotti Mar 1, 2022
9776b9b
Merge branch 'next-major' of github.com:primer/react into mp/deprecat…
mperrotti Mar 1, 2022
6888e5c
minor tweaks
mperrotti Mar 1, 2022
f117df8
moves deprecated notation for ChoiceInputField
mperrotti Mar 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 142 additions & 0 deletions .changeset/nervous-pets-sleep.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it's a quick one, can we add the heading in? Happy to do it in the final changelog too, so no biggie

### ChoiceFieldset and ChoiceFieldset


`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>
2 changes: 0 additions & 2 deletions docs/content/Checkbox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ storybook: '/react/storybook?path=/story/forms-checkbox--default'
componentId: checkbox
---

import {ComponentChecklist} from '../src/component-checklist'

## Examples

<Note variant="warning">
Expand Down
1 change: 0 additions & 1 deletion docs/content/CheckboxGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
5 changes: 1 addition & 4 deletions docs/content/CounterLabel.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
Expand Down
1 change: 0 additions & 1 deletion docs/content/RadioGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
18 changes: 8 additions & 10 deletions docs/content/TextInputWithTokens.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down
23 changes: 11 additions & 12 deletions docs/content/ChoiceFieldset.mdx → docs/content/deprecated/ChoiceFieldset.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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>
Expand All @@ -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 = [
Expand Down Expand Up @@ -94,7 +93,7 @@ render(<WithOnSelectHandler />)

### Checkbox group

```jsx live
```jsx live deprecated
<ChoiceFieldset>
<ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>

Expand All @@ -109,7 +108,7 @@ render(<WithOnSelectHandler />)

### Disabled

```jsx live
```jsx live deprecated
<ChoiceFieldset disabled>
<ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
<ChoiceFieldset.List>
Expand All @@ -123,7 +122,7 @@ render(<WithOnSelectHandler />)

### Required

```jsx live
```jsx live deprecated
<ChoiceFieldset required>
<ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
<ChoiceFieldset.List>
Expand All @@ -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>

Expand All @@ -152,7 +151,7 @@ render(<WithOnSelectHandler />)

### With validation

```javascript live noinline
```javascript live noinline deprecated
const choices = [
{
value: 'figma',
Expand Down Expand Up @@ -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>
Expand All @@ -236,7 +235,7 @@ render(<ChoiceFieldsetWithValidation />)

### With a ChoiceFieldset.Description

```jsx live
```jsx live deprecated
<ChoiceFieldset>
<ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>
<ChoiceFieldset.Description>
Expand Down Expand Up @@ -271,7 +270,7 @@ render(<ChoiceFieldsetWithValidation />)

### With one disabled item

```jsx live
```jsx live deprecated
<ChoiceFieldset>
<ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
<ChoiceFieldset.List>
Expand All @@ -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>

Expand Down
Loading