[TS] FormField is missing `reverse` property in TS definitions

FormField component is missing reverse property in the type definitions although it works okay when provided

https://github.com/grommet/grommet/blob/00e0878202df5d7e0ae93bb2f2836c576f71c1eb/src/js/components/FormField/index.d.ts#L5-L36

Expected Behavior

No error

Actual Behavior

Type '{ type: string; name: string; disabled: true; value: string | undefined; component: FC<TextInputProps>; placeholder: string; reverse: true; icon: Element; }' is not assignable to type 'IntrinsicAttributes & FormFieldExtendedProps & { children?: ReactNode; }'.
  Property 'reverse' does not exist on type 'IntrinsicAttributes & FormFieldExtendedProps & { children?: ReactNode; }'.ts(2322)

URL, screen shot, or Codepen exhibiting the issue

https://codesandbox.io/s/grommet-v2-template-forked-6dvme

Steps to Reproduce

<Form>
  <FormField
    reverse
    type="text"
    value="value"
    icon={<Text>Suffix</Text>}
  />
</Form>

Your Environment

• Grommet version: 2.17.3
• Browser Name and version: any
• Operating System and version (desktop or mobile): any

[jcfilben]

Update: I looked into this more and found that a few months ago the FormField was change to a generic type in this pull request. This change was made so that FormField could accept props from other components when the component prop was defined on FormField without getting type errors (see issue). Although using the component prop isn’t recommended, and passing the component as a child is better, we need to support it for backwards compatibility. This is why type errors are not being flagged when incorrect props are used on FormField.

Unless there is any objection, I think we can close this issue. The reverse prop shouldn’t be added to the FormField typescript definitions since it is really a prop of FormField’s child, but it will still be accepted by TypeScript since FormField is generic.

[jcfilben]

Hi @rhian-cs thanks for taking a look at this. I realized the reverse prop isn’t actually documented for FormField and it is not included in the PropTypes.js so it makes sense it is not in the index.d.ts.

As far as the error not showing up I think this is not because the reverse prop is valid but instead I think type checking is no longer happening correctly for FormField. I tested locally with a type that should have failed and no error was showing up.