From e55d62c68a57f809a61289eb21ec457284918c46 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 25 Feb 2022 14:24:15 -0500 Subject: [PATCH 01/10] deprecates ChoiceFieldset and ChoiceInputField --- .changeset/nervous-pets-sleep.md | 116 ++++++++++++++++++++++++ docs/content/ChoiceFieldset.mdx | 28 +++--- src/ChoiceFieldset/ChoiceFieldset.tsx | 6 +- src/ChoiceInputField.tsx | 3 + src/__tests__/ChoiceFieldset.test.tsx | 4 +- src/__tests__/ChoiceInputField.test.tsx | 3 +- src/deprecated/index.ts | 4 +- src/index.ts | 12 +-- 8 files changed, 147 insertions(+), 29 deletions(-) create mode 100644 .changeset/nervous-pets-sleep.md diff --git a/.changeset/nervous-pets-sleep.md b/.changeset/nervous-pets-sleep.md new file mode 100644 index 00000000000..e29b04bf45b --- /dev/null +++ b/.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. + + + + + + + + + +
Before After
+ +```jsx +import {ChoiceFieldset} from "@primer/react"; + +// Multi-select + + Prefered Primer component interface + + + Figma library + Primer CSS + Primer React components + Primer ViewComponents + + + +// Single select + + Prefered Primer component interface + + + Figma library + Primer CSS + Primer React components + Primer ViewComponents + + + +``` + + + +```jsx +import {FormGroup, Checkbox} from "@primer/react"; + +// Multi-select + + Prefered Primer component interface + + + Figma + + + + CSS + + + + Primer React components + + + + Primer ViewComponents + + + +// Single select + + Prefered Primer component interface + + + Figma + + + + CSS + + + + Primer React components + + + + Primer ViewComponents + + +``` + +
+ + + + + +
Migration steps to CheckboxGroup and RadioGroup
+ +Upgrade to the new `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 + +Continue using the deprecated `ChoiceFieldset` component : + +```js +import {ChoiceFieldset} from '@primer/react/deprecated' // change your import statements +``` + +
diff --git a/docs/content/ChoiceFieldset.mdx b/docs/content/ChoiceFieldset.mdx index fa2e9755183..b82b9ce7633 100644 --- a/docs/content/ChoiceFieldset.mdx +++ b/docs/content/ChoiceFieldset.mdx @@ -1,6 +1,6 @@ --- title: ChoiceFieldset -status: Alpha +status: Deprecated source: https://github.com/primer/react/blob/main/src/ChoiceFieldset/ChoiceFieldset.tsx storybook: '/react/storybook/?path=/story/forms-choicefieldset--radio-group' --- @@ -11,11 +11,15 @@ 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. +## Deprecation + +Use [CheckboxGroup](/CheckboxGroup) or [RadioGroup](/RadioGroup) instead. + ## Examples ### Basic -```jsx live +```jsx live deprecated Color mode @@ -29,7 +33,7 @@ A `ChoiceFieldset` is a controlled component that is used to render a related se ### Using an onSelect handler -```javascript live noinline +```javascript live noinline deprecated const WithOnSelectHandler = () => { const [selectedChoices, setSelectedChoices] = React.useState([]) const choices = [ @@ -90,7 +94,7 @@ render() ### Checkbox group -```jsx live +```jsx live deprecated Prefered Primer component interface @@ -105,7 +109,7 @@ render() ### Disabled -```jsx live +```jsx live deprecated Color mode @@ -119,7 +123,7 @@ render() ### Required -```jsx live +```jsx live deprecated Color mode @@ -133,7 +137,7 @@ render() ### With pre-selected choices -```jsx live +```jsx live deprecated Prefered Primer component interface @@ -148,7 +152,7 @@ render() ### With validation -```javascript live noinline +```javascript live noinline deprecated const choices = [ { value: 'figma', @@ -218,7 +222,7 @@ render() ### A visually hidden legend -```jsx live +```jsx live deprecated Color mode @@ -232,7 +236,7 @@ render() ### With a ChoiceFieldset.Description -```jsx live +```jsx live deprecated Notification preferences @@ -267,7 +271,7 @@ render() ### With one disabled item -```jsx live +```jsx live deprecated Color mode @@ -283,7 +287,7 @@ render() ### Items with a caption and a leading visual -```jsx live +```jsx live deprecated Notification preferences diff --git a/src/ChoiceFieldset/ChoiceFieldset.tsx b/src/ChoiceFieldset/ChoiceFieldset.tsx index 19597e9daca..35a4971aa11 100644 --- a/src/ChoiceFieldset/ChoiceFieldset.tsx +++ b/src/ChoiceFieldset/ChoiceFieldset.tsx @@ -1,4 +1,4 @@ -import React, {ComponentProps} from 'react' +import React from 'react' import {Box, useSSRSafeId} from '..' import createSlots from '../utils/create-slots' import {FormValidationStatus} from '../utils/types/FormValidationStatus' @@ -56,6 +56,9 @@ export interface ChoiceFieldsetContext extends ChoiceFieldsetProps { const {Slots, Slot} = createSlots(['Description', 'ChoiceList', 'Legend', 'Validation']) export {Slot} +/** + * @deprecated Use `CheckboxGroup` or `RadioGroup` instead. See https://primer.style/react/CheckboxGroup and https://primer.style/react/RadioGroup for more info + */ const ChoiceFieldset = >({ children, disabled, @@ -124,7 +127,6 @@ const ChoiceFieldset = >({ ) } -export type InputFieldComponentProps = ComponentProps export type {ChoiceFieldsetListProps} from './ChoiceFieldsetList' export type {ChoiceFieldsetLegendProps} from './ChoiceFieldsetLegend' export type {ChoiceFieldProps} from './ChoiceFieldsetListItem' diff --git a/src/ChoiceInputField.tsx b/src/ChoiceInputField.tsx index dc329766fba..054e40abae8 100644 --- a/src/ChoiceInputField.tsx +++ b/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 = ({children, disabled, id: idProp, validationStatus}) => { const id = useSSRSafeId(idProp) const captionChildren: React.ReactElement[] | undefined | null = React.Children.map(children, child => diff --git a/src/__tests__/ChoiceFieldset.test.tsx b/src/__tests__/ChoiceFieldset.test.tsx index 87c46ee84f0..235bb346569 100644 --- a/src/__tests__/ChoiceFieldset.test.tsx +++ b/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 = ({ diff --git a/src/__tests__/ChoiceInputField.test.tsx b/src/__tests__/ChoiceInputField.test.tsx index c6d1393e8da..032f48db43b 100644 --- a/src/__tests__/ChoiceInputField.test.tsx +++ b/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) diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index 7a74cf6deca..91859cd15d7 100644 --- a/src/deprecated/index.ts +++ b/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' @@ -37,5 +39,3 @@ export type { SelectMenuTabPanelProps, SelectMenuLoadingAnimationProps } from '../SelectMenu' -export {ActionList} from './ActionList' -export type {ActionListProps} from './ActionList' diff --git a/src/index.ts b/src/index.ts index 8f3edfff6ee..252cbd8f1e4 100644 --- a/src/index.ts +++ b/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,11 @@ 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' export {default as Details} from './Details' @@ -125,6 +116,7 @@ export type {PopoverProps, PopoverContentProps} from './Popover' // export type {PortalProps} from './Portal' export {default as ProgressBar} from './ProgressBar' export type {ProgressBarProps} from './ProgressBar' +export {default as RadioGroup} from './RadioGroup' export {default as Select} from './Select' export {SelectPanel} from './SelectPanel' export type {SelectPanelProps} from './SelectPanel' From d88aad911ac9143d7f61020a4499d7c3d73b8860 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 25 Feb 2022 18:28:42 -0500 Subject: [PATCH 02/10] update import paths in tests --- src/ChoiceFieldset/ChoiceFieldCaption.tsx | 2 +- src/ChoiceFieldset/ChoiceFieldLabel.tsx | 2 +- src/ChoiceFieldset/ChoiceFieldsetListItem.tsx | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/ChoiceFieldset/ChoiceFieldCaption.tsx b/src/ChoiceFieldset/ChoiceFieldCaption.tsx index ac46ffc67a8..40179709359 100644 --- a/src/ChoiceFieldset/ChoiceFieldCaption.tsx +++ b/src/ChoiceFieldset/ChoiceFieldCaption.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {ChoiceInputField} from '..' +import ChoiceInputField from '../ChoiceInputField' const ChoiceFieldCaption: React.FC = ({children}) => {children} diff --git a/src/ChoiceFieldset/ChoiceFieldLabel.tsx b/src/ChoiceFieldset/ChoiceFieldLabel.tsx index 3c23d15abff..5f40e1ab932 100644 --- a/src/ChoiceFieldset/ChoiceFieldLabel.tsx +++ b/src/ChoiceFieldset/ChoiceFieldLabel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {ChoiceInputField} from '..' +import ChoiceInputField from '../ChoiceInputField' const ChoiceFieldLabel: React.FC = ({children}) => {children} diff --git a/src/ChoiceFieldset/ChoiceFieldsetListItem.tsx b/src/ChoiceFieldset/ChoiceFieldsetListItem.tsx index bca97f0d744..b59b756f7f1 100644 --- a/src/ChoiceFieldset/ChoiceFieldsetListItem.tsx +++ b/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' From 210dfdc8212a9c7672b470c2a12ec32fa45f37c5 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 28 Feb 2022 12:10:41 -0500 Subject: [PATCH 03/10] addresses more PR feedback --- .changeset/nervous-pets-sleep.md | 52 +++++++---- .../{ => deprecated}/ChoiceFieldset.mdx | 0 .../{ => deprecated}/ChoiceInputField.mdx | 0 .../src/@primer/gatsby-theme-doctocat/nav.yml | 4 + .../AnchoredOverlay.test.tsx.snap | 10 --- .../{ => deprecated}/ChoiceFieldset.test.tsx | 8 +- .../ChoiceInputField.test.tsx | 26 +++--- .../ChoiceFieldset.test.tsx.snap | 90 +++++++++---------- src/index.ts | 8 ++ 9 files changed, 111 insertions(+), 87 deletions(-) rename docs/content/{ => deprecated}/ChoiceFieldset.mdx (100%) rename docs/content/{ => deprecated}/ChoiceInputField.mdx (100%) rename src/__tests__/{ => deprecated}/ChoiceFieldset.test.tsx (98%) rename src/__tests__/{ => deprecated}/ChoiceInputField.test.tsx (91%) rename src/__tests__/{ => deprecated}/__snapshots__/ChoiceFieldset.test.tsx.snap (100%) diff --git a/.changeset/nervous-pets-sleep.md b/.changeset/nervous-pets-sleep.md index e29b04bf45b..23598fac128 100644 --- a/.changeset/nervous-pets-sleep.md +++ b/.changeset/nervous-pets-sleep.md @@ -2,15 +2,13 @@ '@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. - +
Before After Before (v34) After (v35)
@@ -20,25 +18,45 @@ import {ChoiceFieldset} from "@primer/react"; // Multi-select - Prefered Primer component interface + + Preferred Primer component interface + - Figma library - Primer CSS - Primer React components - Primer ViewComponents + + Figma library + + + Primer CSS + + + Primer React components + + + Primer ViewComponents + // Single select - Prefered Primer component interface + + Preferred Primer component interface + - Figma library - Primer CSS - Primer React components - Primer ViewComponents + + Figma library + + + Primer CSS + + + Primer React components + + + Primer ViewComponents + @@ -52,7 +70,9 @@ import {FormGroup, Checkbox} from "@primer/react"; // Multi-select - Prefered Primer component interface + + Preferred Primer component interface + Figma @@ -73,7 +93,9 @@ import {FormGroup, Checkbox} from "@primer/react"; // Single select - Prefered Primer component interface + + Preferred Primer component interface + Figma diff --git a/docs/content/ChoiceFieldset.mdx b/docs/content/deprecated/ChoiceFieldset.mdx similarity index 100% rename from docs/content/ChoiceFieldset.mdx rename to docs/content/deprecated/ChoiceFieldset.mdx diff --git a/docs/content/ChoiceInputField.mdx b/docs/content/deprecated/ChoiceInputField.mdx similarity index 100% rename from docs/content/ChoiceInputField.mdx rename to docs/content/deprecated/ChoiceInputField.mdx diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 811996ed15c..0891dfdffaa 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -155,6 +155,10 @@ url: /deprecated/ActionMenu - title: BorderBox url: /deprecated/BorderBox + - title: ChoiceFieldset + url: /deprecated/ChoiceFieldset + - title: ChoiceInputField + url: /deprecated/ChoiceInputField - title: Dialog url: /deprecated/Dialog - title: Dropdown diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap index 61783124d9b..001482df479 100644 --- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap @@ -216,11 +216,6 @@ exports[`AnchoredOverlay should render consistently when open 1`] = ` style="top: 4px; left: 0px; --styled-overlay-visibility: visible;" width="auto" > -
diff --git a/src/__tests__/deprecated/ChoiceFieldset.test.tsx b/src/__tests__/deprecated/ChoiceFieldset.test.tsx index edb122f7a88..99a34b506eb 100644 --- a/src/__tests__/deprecated/ChoiceFieldset.test.tsx +++ b/src/__tests__/deprecated/ChoiceFieldset.test.tsx @@ -4,8 +4,8 @@ import {render as HTMLRender} from '@testing-library/react' import {SSRProvider} from '../../' import {MarkGithubIcon} from '@primer/octicons-react' import userEvent from '@testing-library/user-event' -import ChoiceFieldset, {Item, ChoiceFieldsetProps} from '../../ChoiceFieldset' -import {ChoiceFieldsetListProps} from '../../ChoiceFieldset/ChoiceFieldsetList' +import ChoiceFieldset, {Item, ChoiceFieldsetProps} from '../../deprecated/ChoiceFieldset' +import {ChoiceFieldsetListProps} from '../../deprecated/ChoiceFieldset/ChoiceFieldsetList' const SelectableChoicelistFieldset: React.FC = ({ onSelect, diff --git a/src/__tests__/deprecated/ChoiceInputField.test.tsx b/src/__tests__/deprecated/ChoiceInputField.test.tsx index e973ba500ff..5b823ac0d5a 100644 --- a/src/__tests__/deprecated/ChoiceInputField.test.tsx +++ b/src/__tests__/deprecated/ChoiceInputField.test.tsx @@ -3,7 +3,7 @@ import {render, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' import {Checkbox, Radio, SSRProvider} from '../../' -import ChoiceInputField from '../../ChoiceInputField' +import ChoiceInputField from '../../deprecated/ChoiceInputField' import {MarkGithubIcon} from '@primer/octicons-react' expect.extend(toHaveNoViolations) diff --git a/src/ChoiceFieldset/ChoiceFieldCaption.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx similarity index 100% rename from src/ChoiceFieldset/ChoiceFieldCaption.tsx rename to src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx diff --git a/src/ChoiceFieldset/ChoiceFieldLabel.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx similarity index 100% rename from src/ChoiceFieldset/ChoiceFieldLabel.tsx rename to src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx diff --git a/src/ChoiceFieldset/ChoiceFieldset.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx similarity index 93% rename from src/ChoiceFieldset/ChoiceFieldset.tsx rename to src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx index 35a4971aa11..4856efd6ae6 100644 --- a/src/ChoiceFieldset/ChoiceFieldset.tsx +++ b/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx @@ -1,9 +1,9 @@ import React from 'react' -import {Box, useSSRSafeId} from '..' -import createSlots from '../utils/create-slots' -import {FormValidationStatus} from '../utils/types/FormValidationStatus' -import ValidationAnimationContainer from '../_ValidationAnimationContainer' -import InputValidation from '../_InputValidation' +import {Box, useSSRSafeId} from '../..' +import createSlots from '../../utils/create-slots' +import {FormValidationStatus} from '../../utils/types/FormValidationStatus' +import ValidationAnimationContainer from '../../_ValidationAnimationContainer' +import InputValidation from '../../_InputValidation' import ChoiceFieldsetListItem from './ChoiceFieldsetListItem' import ChoiceFieldsetDescription from './ChoiceFieldsetDescription' import ChoiceFieldsetLegend from './ChoiceFieldsetLegend' diff --git a/src/ChoiceFieldset/ChoiceFieldsetDescription.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetDescription.tsx similarity index 93% rename from src/ChoiceFieldset/ChoiceFieldsetDescription.tsx rename to src/deprecated/ChoiceFieldset/ChoiceFieldsetDescription.tsx index 9e8ff620325..f9a756e5fbe 100644 --- a/src/ChoiceFieldset/ChoiceFieldsetDescription.tsx +++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetDescription.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Text} from '..' +import {Text} from '../..' import {ChoiceFieldsetContext, Slot} from './ChoiceFieldset' const ChoiceFieldsetDescription: React.FC = ({children}) => ( diff --git a/src/ChoiceFieldset/ChoiceFieldsetLegend.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx similarity index 92% rename from src/ChoiceFieldset/ChoiceFieldsetLegend.tsx rename to src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx index ce5ec7077aa..08d1eddebd6 100644 --- a/src/ChoiceFieldset/ChoiceFieldsetLegend.tsx +++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx @@ -1,6 +1,6 @@ import React from 'react' -import {Box} from '..' -import VisuallyHidden from '../_VisuallyHidden' +import {Box} from '../..' +import VisuallyHidden from '../../_VisuallyHidden' import {ChoiceFieldsetContext, Slot} from './ChoiceFieldset' export interface ChoiceFieldsetLegendProps { diff --git a/src/ChoiceFieldset/ChoiceFieldsetList.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx similarity index 96% rename from src/ChoiceFieldset/ChoiceFieldsetList.tsx rename to src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx index 5fb69f9595e..8d872796a41 100644 --- a/src/ChoiceFieldset/ChoiceFieldsetList.tsx +++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx @@ -1,7 +1,7 @@ import React from 'react' import styled from 'styled-components' -import {useSSRSafeId} from '..' -import {get} from '../constants' +import {useSSRSafeId} from '../..' +import {get} from '../../constants' import {Slot, ChoiceFieldsetContext} from './ChoiceFieldset' import ChoiceFieldsetListContext from './ChoiceFieldsetListContext' diff --git a/src/ChoiceFieldset/ChoiceFieldsetListContext.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetListContext.tsx similarity index 100% rename from src/ChoiceFieldset/ChoiceFieldsetListContext.tsx rename to src/deprecated/ChoiceFieldset/ChoiceFieldsetListContext.tsx diff --git a/src/ChoiceFieldset/ChoiceFieldsetListItem.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx similarity index 96% rename from src/ChoiceFieldset/ChoiceFieldsetListItem.tsx rename to src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx index b59b756f7f1..443e329ec4b 100644 --- a/src/ChoiceFieldset/ChoiceFieldsetListItem.tsx +++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx @@ -1,7 +1,7 @@ import React, {useContext} from 'react' -import {Checkbox, Radio, useSSRSafeId} from '..' +import {Checkbox, Radio, useSSRSafeId} from '../..' import ChoiceInputField from '../ChoiceInputField' -import {ComponentProps} from '../utils/types' +import {ComponentProps} from '../../utils/types' import ChoiceInputLeadingVisual from '../_ChoiceInputLeadingVisual' import ChoiceFieldCaption from './ChoiceFieldCaption' import ChoiceFieldLabel from './ChoiceFieldLabel' diff --git a/src/ChoiceFieldset/ChoiceFieldsetValidation.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx similarity index 100% rename from src/ChoiceFieldset/ChoiceFieldsetValidation.tsx rename to src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx diff --git a/src/ChoiceFieldset/index.ts b/src/deprecated/ChoiceFieldset/index.ts similarity index 100% rename from src/ChoiceFieldset/index.ts rename to src/deprecated/ChoiceFieldset/index.ts diff --git a/src/ChoiceInputField.tsx b/src/deprecated/ChoiceInputField.tsx similarity index 92% rename from src/ChoiceInputField.tsx rename to src/deprecated/ChoiceInputField.tsx index 054e40abae8..dfe3c7809b9 100644 --- a/src/ChoiceInputField.tsx +++ b/src/deprecated/ChoiceInputField.tsx @@ -1,11 +1,11 @@ import React from 'react' -import {Box, Checkbox, Radio, useSSRSafeId} from '.' -import {get} from './constants' -import {Slots} from './InputField/slots' +import {Box, Checkbox, Radio, useSSRSafeId} from '..' +import {get} from '../constants' +import {Slots} from '../InputField/slots' import ChoiceInputLeadingVisual from './_ChoiceInputLeadingVisual' -import InputField, {Props as InputFieldProps} from './InputField/InputField' -import {FormValidationStatus} from './utils/types/FormValidationStatus' -import InputFieldCaption from './InputField/_InputFieldCaption' +import InputField, {Props as InputFieldProps} from '../InputField/InputField' +import {FormValidationStatus} from '../utils/types/FormValidationStatus' +import InputFieldCaption from '../InputField/_InputFieldCaption' export interface Props extends Pick { /** diff --git a/src/_ChoiceInputLeadingVisual.tsx b/src/deprecated/_ChoiceInputLeadingVisual.tsx similarity index 80% rename from src/_ChoiceInputLeadingVisual.tsx rename to src/deprecated/_ChoiceInputLeadingVisual.tsx index beecb6e32ea..1181dd93c67 100644 --- a/src/_ChoiceInputLeadingVisual.tsx +++ b/src/deprecated/_ChoiceInputLeadingVisual.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Slot} from './InputField/slots' +import {Slot} from '../InputField/slots' const ChoiceInputLeadingVisual: React.FC = ({children}) => {children} diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index 7104e2adf8e..6d5faa073ec 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -8,8 +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 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' From da4fc215fae648cb08651274e6a69eba480cd8d7 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 28 Feb 2022 15:09:44 -0500 Subject: [PATCH 07/10] fixes broken docs pages --- docs/content/CounterLabel.mdx | 2 +- docs/content/TextInputWithTokens.mdx | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/content/CounterLabel.mdx b/docs/content/CounterLabel.mdx index 35dd4d2a14c..50c0041dd60 100644 --- a/docs/content/CounterLabel.mdx +++ b/docs/content/CounterLabel.mdx @@ -19,7 +19,7 @@ source: https://github.com/primer/react/blob/main/src/CounterLabel.tsx ## Props - - - + - - - - - - Date: Mon, 28 Feb 2022 15:11:50 -0500 Subject: [PATCH 08/10] fixes bad formatting in changelog markdown --- .changeset/nervous-pets-sleep.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/nervous-pets-sleep.md b/.changeset/nervous-pets-sleep.md index 88d42e90c04..cc8b57f6717 100644 --- a/.changeset/nervous-pets-sleep.md +++ b/.changeset/nervous-pets-sleep.md @@ -14,7 +14,7 @@ The `CheckboxGroup` and `RadioGroup` components will be used to deprecate the `C ```jsx -import {ChoiceFieldset} from "@primer/react"; +import {ChoiceFieldset} from "@primer/react" // Multi-select @@ -66,7 +66,7 @@ import {ChoiceFieldset} from "@primer/react"; ```jsx -import {FormGroup, Checkbox} from "@primer/react"; +import {FormGroup, Checkbox} from "@primer/react" // Multi-select From 6888e5c0647a624def8e105494e22bda7ddb3027 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 1 Mar 2022 09:20:41 -0500 Subject: [PATCH 09/10] minor tweaks --- .changeset/nervous-pets-sleep.md | 2 ++ src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.changeset/nervous-pets-sleep.md b/.changeset/nervous-pets-sleep.md index cc8b57f6717..d8063834fc5 100644 --- a/.changeset/nervous-pets-sleep.md +++ b/.changeset/nervous-pets-sleep.md @@ -2,6 +2,8 @@ '@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. diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx index 4856efd6ae6..cca5c52370f 100644 --- a/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx +++ b/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx @@ -56,9 +56,6 @@ export interface ChoiceFieldsetContext extends ChoiceFieldsetProps { const {Slots, Slot} = createSlots(['Description', 'ChoiceList', 'Legend', 'Validation']) export {Slot} -/** - * @deprecated Use `CheckboxGroup` or `RadioGroup` instead. See https://primer.style/react/CheckboxGroup and https://primer.style/react/RadioGroup for more info - */ const ChoiceFieldset = >({ children, disabled, @@ -130,6 +127,9 @@ const ChoiceFieldset = >({ export type {ChoiceFieldsetListProps} from './ChoiceFieldsetList' export type {ChoiceFieldsetLegendProps} from './ChoiceFieldsetLegend' export type {ChoiceFieldProps} from './ChoiceFieldsetListItem' +/** + * @deprecated Use `CheckboxGroup` or `RadioGroup` instead. See https://primer.style/react/CheckboxGroup and https://primer.style/react/RadioGroup for more info + */ export default Object.assign(ChoiceFieldset, { Description: ChoiceFieldsetDescription, Item: ChoiceFieldsetListItem, From f117df8e9c3dec54b5685d1a072677caf44ce455 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 1 Mar 2022 09:21:43 -0500 Subject: [PATCH 10/10] moves deprecated notation for ChoiceInputField --- src/deprecated/ChoiceInputField.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/deprecated/ChoiceInputField.tsx b/src/deprecated/ChoiceInputField.tsx index e2a8763ee27..5f8a27e39bf 100644 --- a/src/deprecated/ChoiceInputField.tsx +++ b/src/deprecated/ChoiceInputField.tsx @@ -25,9 +25,6 @@ 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 = ({children, disabled, id: idProp, validationStatus}) => { const id = useSSRSafeId(idProp) const captionChildren: React.ReactElement[] | undefined | null = React.Children.map(children, child => @@ -130,6 +127,9 @@ const ChoiceInputField: React.FC = ({children, disabled, id: idProp, vali const Label: React.FC = ({children}) => {children} +/** + * @deprecated Use `FormControl` instead. See https://primer.style/react/FormControl for more info + */ export default Object.assign(ChoiceInputField, { Label, Caption: InputField.Caption,