From b0f890c2a743143941e5d22d79f9effa48e3ea07 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 23 Feb 2022 11:54:49 -0500 Subject: [PATCH 01/11] moves InputField to deprecated package --- docs/content/InputField.mdx | 3 +- .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 ++ src/deprecated/index.ts | 31 +++++++++++++++++++ src/index.ts | 1 - 4 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 src/deprecated/index.ts diff --git a/docs/content/InputField.mdx b/docs/content/InputField.mdx index d72b7cd30c9..1048dc6a319 100644 --- a/docs/content/InputField.mdx +++ b/docs/content/InputField.mdx @@ -7,7 +7,8 @@ source: https://github.com/primer/react/blob/main/src/InputField/InputField.tsx storybook: '/react/storybook?path=/story/forms-inputfield--text-input-field' --- -import {InputField, TextInputWithTokens, Autocomplete, Select} from '@primer/react' +import {TextInputWithTokens, Autocomplete, Select} from '@primer/react' +import {InputField} from '@primer/react' ## Deprecation diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 9584bf38cf0..0a45c8ce491 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -161,5 +161,7 @@ url: /deprecated/Dropdown - title: FormGroup url: /FormGroup + - title: InputField + url: /deprecated/InputField - title: SelectMenu url: /deprecated/SelectMenu diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts new file mode 100644 index 00000000000..922501e7822 --- /dev/null +++ b/src/deprecated/index.ts @@ -0,0 +1,31 @@ +/** This is the place where we keep components that are deprecated. + * We don't recommend using it in production. + * If you already use them, please move to the suggested alternative components + * + * But, they are published on npm and you can import them. + * example: import {FormGroup} from '@primer/react/deprecated + */ + +export {default as BorderBox} from '../BorderBox' +export type {BorderBoxProps} from '../BorderBox' +export {default as Flex} from '../Flex' +export type {FlexProps} from '../Flex' +export {default as Grid} from '../Grid' +export type {GridProps} from '../Grid' +export {default as Position, Absolute, Fixed, Relative, Sticky} from '../Position' +export type {PositionProps, AbsoluteProps, FixedProps, RelativeProps, StickyProps} from '../Position' +export {default as Dialog} from '../Dialog' +export type {DialogProps, DialogHeaderProps} from '../Dialog' +export {ConfirmationDialog} from '../Dialog/ConfirmationDialog' +export {default as Dropdown} from '../Dropdown' +export type { + DropdownProps, + DropdownCaretProps, + DropdownButtonProps, + DropdownItemProps, + DropdownMenuProps +} from '../Dropdown' +export {default as FormGroup} from '../FormGroup' +export type {FormGroupProps, FormGroupLabelProps} from '../FormGroup' +export {default as InputField} from '../InputField' +export {default as SelectMenu} from '../SelectMenu' diff --git a/src/index.ts b/src/index.ts index 6a5c26f0c47..1abf8a6e9f2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -103,7 +103,6 @@ export {default as Header} from './Header' export type {HeaderProps, HeaderItemProps, HeaderLinkProps} from './Header' export {default as Heading} from './Heading' export type {HeadingProps} from './Heading' -export {default as InputField} from './InputField' export {default as LabelGroup} from './LabelGroup' export type {LabelGroupProps} from './LabelGroup' export {default as Label} from './Label' From 2923c0628f0bcc566257e80adfd9983474cfaf55 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 24 Feb 2022 15:49:21 -0500 Subject: [PATCH 02/11] adds jsdoc comments for deprecation --- docs/content/InputField.mdx | 15 +++++++-------- src/FormGroup.tsx | 2 ++ src/InputField/InputField.tsx | 1 + 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/content/InputField.mdx b/docs/content/InputField.mdx index 1048dc6a319..3107d410c67 100644 --- a/docs/content/InputField.mdx +++ b/docs/content/InputField.mdx @@ -8,7 +8,6 @@ storybook: '/react/storybook?path=/story/forms-inputfield--text-input-field' --- import {TextInputWithTokens, Autocomplete, Select} from '@primer/react' -import {InputField} from '@primer/react' ## Deprecation @@ -18,7 +17,7 @@ Use [FormControl](/FormControl) instead. ### Basic -```jsx live +```jsx live deprecated Name @@ -27,7 +26,7 @@ Use [FormControl](/FormControl) instead. ### Required -```jsx live +```jsx live deprecated Name @@ -36,7 +35,7 @@ Use [FormControl](/FormControl) instead. ### Disabled -```jsx live +```jsx live deprecated Name @@ -45,7 +44,7 @@ Use [FormControl](/FormControl) instead. ### Using different input components -```javascript live noinline +```javascript live noinline deprecated const TextInputWithTokensExample = () => { const [tokens, setTokens] = React.useState([ {text: 'zero', id: 0}, @@ -116,7 +115,7 @@ Every input must have a corresponding label to be accessible to assistive techno -```jsx live +```jsx live deprecated Name @@ -125,7 +124,7 @@ Every input must have a corresponding label to be accessible to assistive techno ### With a caption -```jsx live +```jsx live deprecated Name @@ -135,7 +134,7 @@ Every input must have a corresponding label to be accessible to assistive techno ### With validation -```javascript live noinline +```javascript live noinline deprecated const ValidationExample = () => { const [value, setValue] = React.useState('mona lisa') const [validationResult, setValidationResult] = React.useState() diff --git a/src/FormGroup.tsx b/src/FormGroup.tsx index 4ecd657a62a..dcae24cb058 100644 --- a/src/FormGroup.tsx +++ b/src/FormGroup.tsx @@ -3,12 +3,14 @@ import {get} from './constants' import sx, {SxProp} from './sx' import {ComponentProps} from './utils/types' +/** @deprecated Use FormControl instead. See https://primer.style/react/FormControl for more details. */ const FormGroup = styled.div` margin: ${get('space.3')} 0; font-weight: ${get('fontWeights.normal')}; ${sx}; ` +/** @deprecated Use FormControl instead. See https://primer.style/react/FormControl for more details. */ const FormGroupLabel = styled.label` display: block; margin: 0 0 ${get('space.2')}; diff --git a/src/InputField/InputField.tsx b/src/InputField/InputField.tsx index 32c780bfe2a..a11c18bdff9 100644 --- a/src/InputField/InputField.tsx +++ b/src/InputField/InputField.tsx @@ -40,6 +40,7 @@ export interface InputFieldContext validationMessageId: string } +/** @deprecated Use FormControl instead. See https://primer.style/react/FormControl for more details. */ const InputField = >({ children, disabled, From f546a4fbfc665a5afb8e658a034d39a5d38813f0 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 24 Feb 2022 15:52:07 -0500 Subject: [PATCH 03/11] adds changeset --- .changeset/olive-bears-act.md | 107 ++++++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 .changeset/olive-bears-act.md diff --git a/.changeset/olive-bears-act.md b/.changeset/olive-bears-act.md new file mode 100644 index 00000000000..6c920910eb3 --- /dev/null +++ b/.changeset/olive-bears-act.md @@ -0,0 +1,107 @@ +--- +'@primer/react': major +--- + +![image](https://user-images.githubusercontent.com/13340707/154948443-60d70cc7-4f26-444f-8366-7963336be53c.png) + +The `FormControl` component will be used to deprecate the `FormGroup`, `InputField`, and `ChoiceInputField` components. It has the ability to render contextual content with your inputs: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology. + + + + + + + + + + + + + +
Before After
+ +```jsx +import {FormControl, Checkbox, TextInput} from "@primer/react" + + + + Example text + + + +OR + + + Example text + + + +OR + + + Example text + + + +``` + + + +```jsx +import {FormGroup, TextInput} from "@primer/react" + + + Example text + + + +OR + + + Example text + + + +``` + +
+ +```jsx +import {InputField} from '@primer/react' + +; + Example text + + +``` + + + +```jsx +import {FormControl} from '@primer/react' + +; + Example Text + + +``` + +
+ + + + + +
Migration steps to FormControl
+ +Upgrade to the new `FormControl` component by referring to the [examples in our documentation](https://primer.style/react/FormControl). + +or + +Continue using the deprecated `FormGroup`, `ChoiceInputField` or `InputField` : + +```js +import {FormGroup, ChoiceInputField, InputField} from '@primer/react/deprecated' // change your import statements +``` + +
From 579cb9be6466b747b8af50a72c63d39a340cc393 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 24 Feb 2022 16:04:23 -0500 Subject: [PATCH 04/11] fixes bad autoformatting in changeset --- .changeset/olive-bears-act.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/olive-bears-act.md b/.changeset/olive-bears-act.md index 6c920910eb3..8da63e3b7bb 100644 --- a/.changeset/olive-bears-act.md +++ b/.changeset/olive-bears-act.md @@ -66,7 +66,7 @@ OR ```jsx import {InputField} from '@primer/react' -; + Example text @@ -78,7 +78,7 @@ import {InputField} from '@primer/react' ```jsx import {FormControl} from '@primer/react' -; + Example Text From 8908ab069083b698eaa1114e3475fd74bf210a72 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 24 Feb 2022 16:31:12 -0500 Subject: [PATCH 05/11] fixes import path in test file --- src/__tests__/InputField.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/__tests__/InputField.test.tsx b/src/__tests__/InputField.test.tsx index 8cb06947a47..655ee603a8d 100644 --- a/src/__tests__/InputField.test.tsx +++ b/src/__tests__/InputField.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 {Autocomplete, InputField, SSRProvider, TextInput, TextInputWithTokens} from '..' +import {Autocomplete, SSRProvider, TextInput, TextInputWithTokens} from '..' +import InputField from '../InputField' expect.extend(toHaveNoViolations) const TEXTINPUTFIELD_LABEL_TEXT = 'Name' From 3ac28e40c51cae1cb53bf3ba98596abd28b01808 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 25 Feb 2022 10:29:05 -0500 Subject: [PATCH 06/11] addresses PR feedback --- .changeset/olive-bears-act.md | 2 +- docs/content/{ => deprecated}/FormGroup.md | 0 docs/content/{ => deprecated}/InputField.mdx | 0 src/deprecated/index.ts | 2 ++ src/index.ts | 2 -- 5 files changed, 3 insertions(+), 3 deletions(-) rename docs/content/{ => deprecated}/FormGroup.md (100%) rename docs/content/{ => deprecated}/InputField.mdx (100%) diff --git a/.changeset/olive-bears-act.md b/.changeset/olive-bears-act.md index 8da63e3b7bb..750a29ccc6b 100644 --- a/.changeset/olive-bears-act.md +++ b/.changeset/olive-bears-act.md @@ -2,7 +2,7 @@ '@primer/react': major --- -![image](https://user-images.githubusercontent.com/13340707/154948443-60d70cc7-4f26-444f-8366-7963336be53c.png) +![FormControl component using a label, text input, validation and hint](https://user-images.githubusercontent.com/13340707/154948443-60d70cc7-4f26-444f-8366-7963336be53c.png) The `FormControl` component will be used to deprecate the `FormGroup`, `InputField`, and `ChoiceInputField` components. It has the ability to render contextual content with your inputs: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology. diff --git a/docs/content/FormGroup.md b/docs/content/deprecated/FormGroup.md similarity index 100% rename from docs/content/FormGroup.md rename to docs/content/deprecated/FormGroup.md diff --git a/docs/content/InputField.mdx b/docs/content/deprecated/InputField.mdx similarity index 100% rename from docs/content/InputField.mdx rename to docs/content/deprecated/InputField.mdx diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index e3c36095ca8..693ba38e35b 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -22,6 +22,8 @@ export type { DropdownItemProps, DropdownMenuProps } from '../Dropdown' +export {default as FormGroup} from '../FormGroup' +export type {FormGroupProps, FormGroupLabelProps} from '../FormGroup' export {default as InputField} from '../InputField' export {default as SelectMenu} from '../SelectMenu' export type { diff --git a/src/index.ts b/src/index.ts index bf6c96a2d6c..6bab9d4b534 100644 --- a/src/index.ts +++ b/src/index.ts @@ -90,8 +90,6 @@ export type {FilterListProps, FilterListItemProps} from './FilterList' export {default as Flash} from './Flash' export type {FlashProps} from './Flash' export {default as FormControl} from './FormControl' -export {default as FormGroup} from './FormGroup' -export type {FormGroupProps, FormGroupLabelProps} from './FormGroup' export {default as Header} from './Header' export type {HeaderProps, HeaderItemProps, HeaderLinkProps} from './Header' export {default as Heading} from './Heading' From ac1ea926e4bff82882737e3d407b1abe8b290647 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 25 Feb 2022 10:48:46 -0500 Subject: [PATCH 07/11] fixes FormGroup import in test --- src/__tests__/FormGroup.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__tests__/FormGroup.test.tsx b/src/__tests__/FormGroup.test.tsx index d9f5b5b223e..605b922e74e 100644 --- a/src/__tests__/FormGroup.test.tsx +++ b/src/__tests__/FormGroup.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {FormGroup} from '..' +import FormGroup from '../FormGroup' import {behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' From d4d7c4a5a6fd1021e965b1409cdac68291f121ea Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 28 Feb 2022 13:39:11 -0500 Subject: [PATCH 08/11] addresses PR feedback --- .changeset/olive-bears-act.md | 18 +++++++++++------- docs/content/deprecated/FormGroup.md | 2 +- docs/src/@primer/gatsby-theme-doctocat/nav.yml | 2 +- src/ChoiceInputField.tsx | 6 +++--- src/_ChoiceInputLeadingVisual.tsx | 2 +- src/__tests__/FormGroup.test.tsx | 4 ++-- src/__tests__/FormGroup.types.test.tsx | 2 +- src/__tests__/InputField.test.tsx | 2 +- src/{ => deprecated}/FormGroup.tsx | 8 ++++---- src/{ => deprecated}/InputField/InputField.tsx | 10 +++++----- .../InputField/_InputFieldCaption.tsx | 2 +- .../InputField/_InputFieldLabel.tsx | 2 +- .../InputField/_InputFieldValidation.tsx | 0 src/{ => deprecated}/InputField/index.ts | 0 src/{ => deprecated}/InputField/slots.ts | 2 +- src/deprecated/index.ts | 6 +++--- 16 files changed, 36 insertions(+), 32 deletions(-) rename src/{ => deprecated}/FormGroup.tsx (87%) rename src/{ => deprecated}/InputField/InputField.tsx (95%) rename src/{ => deprecated}/InputField/_InputFieldCaption.tsx (89%) rename src/{ => deprecated}/InputField/_InputFieldLabel.tsx (92%) rename src/{ => deprecated}/InputField/_InputFieldValidation.tsx (100%) rename src/{ => deprecated}/InputField/index.ts (100%) rename src/{ => deprecated}/InputField/slots.ts (63%) diff --git a/.changeset/olive-bears-act.md b/.changeset/olive-bears-act.md index 750a29ccc6b..b0f879dcaa4 100644 --- a/.changeset/olive-bears-act.md +++ b/.changeset/olive-bears-act.md @@ -22,14 +22,14 @@ import {FormControl, Checkbox, TextInput} from "@primer/react" -OR +// OR Example text -OR +// OR Example text @@ -49,7 +49,7 @@ import {FormGroup, TextInput} from "@primer/react" -OR +// OR Example text @@ -65,8 +65,7 @@ OR ```jsx import {InputField} from '@primer/react' - - +; Example text @@ -77,8 +76,7 @@ import {InputField} from '@primer/react' ```jsx import {FormControl} from '@primer/react' - - +; Example Text @@ -102,6 +100,12 @@ or import {FormGroup, ChoiceInputField, InputField} from '@primer/react/deprecated' // change your import statements ``` +Codemods: + +- InputField codemod: https://github.com/primer/react-migrate/blob/main/src/use-deprecated-inputfield.js +- ChoiceInputField https://github.com/primer/react-migrate/blob/main/src/use-deprecated-choiceinputfield.js +- FormGroup codemod: https://github.com/primer/react-migrate/blob/main/src/use-deprecated-formgroup.js + diff --git a/docs/content/deprecated/FormGroup.md b/docs/content/deprecated/FormGroup.md index 7ed49c395af..143c750db0e 100644 --- a/docs/content/deprecated/FormGroup.md +++ b/docs/content/deprecated/FormGroup.md @@ -12,7 +12,7 @@ Use [FormControl](/FormControl) instead. ## Default example -```jsx live +```jsx live deprecated <> Example text diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 0d341dca751..1ece7688ddd 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -164,7 +164,7 @@ - title: Flex url: /deprecated/Flex - title: FormGroup - url: /FormGroup + url: /deprecated/FormGroup - title: Grid url: /deprecated/Grid - title: InputField diff --git a/src/ChoiceInputField.tsx b/src/ChoiceInputField.tsx index dc329766fba..d3369e55550 100644 --- a/src/ChoiceInputField.tsx +++ b/src/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 {Slots} from './deprecated/InputField/slots' import ChoiceInputLeadingVisual from './_ChoiceInputLeadingVisual' -import InputField, {Props as InputFieldProps} from './InputField/InputField' +import InputField, {Props as InputFieldProps} from './deprecated/InputField/InputField' import {FormValidationStatus} from './utils/types/FormValidationStatus' -import InputFieldCaption from './InputField/_InputFieldCaption' +import InputFieldCaption from './deprecated/InputField/_InputFieldCaption' export interface Props extends Pick { /** diff --git a/src/_ChoiceInputLeadingVisual.tsx b/src/_ChoiceInputLeadingVisual.tsx index beecb6e32ea..912b70cf787 100644 --- a/src/_ChoiceInputLeadingVisual.tsx +++ b/src/_ChoiceInputLeadingVisual.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Slot} from './InputField/slots' +import {Slot} from './deprecated/InputField/slots' const ChoiceInputLeadingVisual: React.FC = ({children}) => {children} diff --git a/src/__tests__/FormGroup.test.tsx b/src/__tests__/FormGroup.test.tsx index 605b922e74e..e109ec50466 100644 --- a/src/__tests__/FormGroup.test.tsx +++ b/src/__tests__/FormGroup.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import FormGroup from '../FormGroup' +import FormGroup from '../deprecated/FormGroup' import {behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' @@ -9,7 +9,7 @@ expect.extend(toHaveNoViolations) describe('FormGroup', () => { behavesAsComponent({Component: FormGroup}) - checkExports('FormGroup', { + checkExports('deprecated/FormGroup', { default: FormGroup }) diff --git a/src/__tests__/FormGroup.types.test.tsx b/src/__tests__/FormGroup.types.test.tsx index 5ed40fddaed..c35f16d3bd1 100644 --- a/src/__tests__/FormGroup.types.test.tsx +++ b/src/__tests__/FormGroup.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import FormGroup from '../FormGroup' +import FormGroup from '../deprecated/FormGroup' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/InputField.test.tsx b/src/__tests__/InputField.test.tsx index 655ee603a8d..c95a046af01 100644 --- a/src/__tests__/InputField.test.tsx +++ b/src/__tests__/InputField.test.tsx @@ -3,7 +3,7 @@ import {render, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' import {Autocomplete, SSRProvider, TextInput, TextInputWithTokens} from '..' -import InputField from '../InputField' +import InputField from '../deprecated/InputField' expect.extend(toHaveNoViolations) const TEXTINPUTFIELD_LABEL_TEXT = 'Name' diff --git a/src/FormGroup.tsx b/src/deprecated/FormGroup.tsx similarity index 87% rename from src/FormGroup.tsx rename to src/deprecated/FormGroup.tsx index dcae24cb058..83dfbfaacec 100644 --- a/src/FormGroup.tsx +++ b/src/deprecated/FormGroup.tsx @@ -1,9 +1,8 @@ import styled from 'styled-components' -import {get} from './constants' -import sx, {SxProp} from './sx' -import {ComponentProps} from './utils/types' +import {get} from '../constants' +import sx, {SxProp} from '../sx' +import {ComponentProps} from '../utils/types' -/** @deprecated Use FormControl instead. See https://primer.style/react/FormControl for more details. */ const FormGroup = styled.div` margin: ${get('space.3')} 0; font-weight: ${get('fontWeights.normal')}; @@ -23,4 +22,5 @@ FormGroupLabel.displayName = 'FormGroup.Label' export type FormGroupProps = ComponentProps export type FormGroupLabelProps = ComponentProps +/** @deprecated Use FormControl instead. See https://primer.style/react/FormControl for more details. */ export default Object.assign(FormGroup, {Label: FormGroupLabel}) diff --git a/src/InputField/InputField.tsx b/src/deprecated/InputField/InputField.tsx similarity index 95% rename from src/InputField/InputField.tsx rename to src/deprecated/InputField/InputField.tsx index a11c18bdff9..2aeb961d22b 100644 --- a/src/InputField/InputField.tsx +++ b/src/deprecated/InputField/InputField.tsx @@ -1,13 +1,13 @@ import React from 'react' -import {Autocomplete, Box, Select, TextInput, TextInputWithTokens, useSSRSafeId} from '..' -import InputValidation from '../_InputValidation' -import {ComponentProps} from '../utils/types' -import {FormValidationStatus} from '../utils/types/FormValidationStatus' +import {Autocomplete, Box, Select, TextInput, TextInputWithTokens, useSSRSafeId} from '../../' +import InputValidation from '../../_InputValidation' +import {ComponentProps} from '../../utils/types' +import {FormValidationStatus} from '../../utils/types/FormValidationStatus' import InputFieldCaption from './_InputFieldCaption' import InputFieldLabel from './_InputFieldLabel' import InputFieldValidation from './_InputFieldValidation' import {Slots} from './slots' -import ValidationAnimationContainer from '../_ValidationAnimationContainer' +import ValidationAnimationContainer from '../../_ValidationAnimationContainer' export interface Props> { children?: React.ReactNode /** diff --git a/src/InputField/_InputFieldCaption.tsx b/src/deprecated/InputField/_InputFieldCaption.tsx similarity index 89% rename from src/InputField/_InputFieldCaption.tsx rename to src/deprecated/InputField/_InputFieldCaption.tsx index 1a67ccc6e59..9e39a68de12 100644 --- a/src/InputField/_InputFieldCaption.tsx +++ b/src/deprecated/InputField/_InputFieldCaption.tsx @@ -1,5 +1,5 @@ import React from 'react' -import InputCaption from '../_InputCaption' +import InputCaption from '../../_InputCaption' import {InputFieldContext} from './InputField' import {Slot} from './slots' diff --git a/src/InputField/_InputFieldLabel.tsx b/src/deprecated/InputField/_InputFieldLabel.tsx similarity index 92% rename from src/InputField/_InputFieldLabel.tsx rename to src/deprecated/InputField/_InputFieldLabel.tsx index 10b27710226..843234da761 100644 --- a/src/InputField/_InputFieldLabel.tsx +++ b/src/deprecated/InputField/_InputFieldLabel.tsx @@ -1,5 +1,5 @@ import React from 'react' -import InputLabel from '../_InputLabel' +import InputLabel from '../../_InputLabel' import {InputFieldContext} from './InputField' import {Slot} from './slots' diff --git a/src/InputField/_InputFieldValidation.tsx b/src/deprecated/InputField/_InputFieldValidation.tsx similarity index 100% rename from src/InputField/_InputFieldValidation.tsx rename to src/deprecated/InputField/_InputFieldValidation.tsx diff --git a/src/InputField/index.ts b/src/deprecated/InputField/index.ts similarity index 100% rename from src/InputField/index.ts rename to src/deprecated/InputField/index.ts diff --git a/src/InputField/slots.ts b/src/deprecated/InputField/slots.ts similarity index 63% rename from src/InputField/slots.ts rename to src/deprecated/InputField/slots.ts index 1df9b0ed419..4418ab896c6 100644 --- a/src/InputField/slots.ts +++ b/src/deprecated/InputField/slots.ts @@ -1,3 +1,3 @@ -import createSlots from '../utils/create-slots' +import createSlots from '../../utils/create-slots' export const {Slots, Slot} = createSlots(['Caption', 'Input', 'Label', 'LeadingVisual']) diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index f2348a7000e..3075abb1cd9 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -22,9 +22,9 @@ export type { DropdownItemProps, DropdownMenuProps } from '../Dropdown' -export {default as FormGroup} from '../FormGroup' -export type {FormGroupProps, FormGroupLabelProps} from '../FormGroup' -export {default as InputField} from '../InputField' +export {default as FormGroup} from './FormGroup' +export type {FormGroupProps, FormGroupLabelProps} from './FormGroup' +export {default as InputField} from './InputField' export {default as SelectMenu} from '../SelectMenu' export type { SelectMenuProps, From f7feaf386b7013bba7e4be8c92ee16c827792973 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 28 Feb 2022 13:43:30 -0500 Subject: [PATCH 09/11] moves tests to depreacted directory --- src/__tests__/{ => deprecated}/FormGroup.test.tsx | 4 ++-- src/__tests__/{ => deprecated}/InputField.test.tsx | 4 ++-- .../{ => deprecated}/__snapshots__/FormGroup.test.tsx.snap | 0 3 files changed, 4 insertions(+), 4 deletions(-) rename src/__tests__/{ => deprecated}/FormGroup.test.tsx (90%) rename src/__tests__/{ => deprecated}/InputField.test.tsx (99%) rename src/__tests__/{ => deprecated}/__snapshots__/FormGroup.test.tsx.snap (100%) diff --git a/src/__tests__/FormGroup.test.tsx b/src/__tests__/deprecated/FormGroup.test.tsx similarity index 90% rename from src/__tests__/FormGroup.test.tsx rename to src/__tests__/deprecated/FormGroup.test.tsx index e109ec50466..af68927a7b2 100644 --- a/src/__tests__/FormGroup.test.tsx +++ b/src/__tests__/deprecated/FormGroup.test.tsx @@ -1,6 +1,6 @@ import React from 'react' -import FormGroup from '../deprecated/FormGroup' -import {behavesAsComponent, checkExports} from '../utils/testing' +import FormGroup from '../../deprecated/FormGroup' +import {behavesAsComponent, checkExports} from '../../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' diff --git a/src/__tests__/InputField.test.tsx b/src/__tests__/deprecated/InputField.test.tsx similarity index 99% rename from src/__tests__/InputField.test.tsx rename to src/__tests__/deprecated/InputField.test.tsx index c95a046af01..48ccec4443f 100644 --- a/src/__tests__/InputField.test.tsx +++ b/src/__tests__/deprecated/InputField.test.tsx @@ -2,8 +2,8 @@ import React from 'react' import {render, cleanup} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' import 'babel-polyfill' -import {Autocomplete, SSRProvider, TextInput, TextInputWithTokens} from '..' -import InputField from '../deprecated/InputField' +import {Autocomplete, SSRProvider, TextInput, TextInputWithTokens} from '../../' +import InputField from '../../deprecated/InputField' expect.extend(toHaveNoViolations) const TEXTINPUTFIELD_LABEL_TEXT = 'Name' diff --git a/src/__tests__/__snapshots__/FormGroup.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/FormGroup.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/FormGroup.test.tsx.snap rename to src/__tests__/deprecated/__snapshots__/FormGroup.test.tsx.snap From f73f5f5d6510d1bd3e4d2c58344d15f29f3ddf62 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 28 Feb 2022 14:08:49 -0500 Subject: [PATCH 10/11] removes docs header image --- .changeset/olive-bears-act.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/.changeset/olive-bears-act.md b/.changeset/olive-bears-act.md index b0f879dcaa4..feb42689c64 100644 --- a/.changeset/olive-bears-act.md +++ b/.changeset/olive-bears-act.md @@ -2,8 +2,6 @@ '@primer/react': major --- -![FormControl component using a label, text input, validation and hint](https://user-images.githubusercontent.com/13340707/154948443-60d70cc7-4f26-444f-8366-7963336be53c.png) - The `FormControl` component will be used to deprecate the `FormGroup`, `InputField`, and `ChoiceInputField` components. It has the ability to render contextual content with your inputs: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology. From d5862250b951658ec6604947ee22257dfead8b33 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 28 Feb 2022 15:14:23 -0500 Subject: [PATCH 11/11] fixes bad formatting in changelog markdown --- .changeset/olive-bears-act.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/olive-bears-act.md b/.changeset/olive-bears-act.md index feb42689c64..9a56a789ba9 100644 --- a/.changeset/olive-bears-act.md +++ b/.changeset/olive-bears-act.md @@ -63,7 +63,7 @@ import {FormGroup, TextInput} from "@primer/react" ```jsx import {InputField} from '@primer/react' -; + Example text @@ -74,7 +74,7 @@ import {InputField} from '@primer/react' ```jsx import {FormControl} from '@primer/react' -; + Example Text