Added component prop to EuiForm

[anishagg17]

Summary

Fixes: #2272
EuiForm can now render <form> element too.

Screenshot

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile

• Checked in IE11 and Firefox
  - [ ] Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[cchaos]

@anishagg17 Can you update this PR based on @snide's guidance from the issue: #2272 (comment)

[anishagg17]

@cchaos I have made all necessary changes

[anishagg17]

@cchaos I used exclusive union function but now it fails the tests. Can you please have a look ?

[chandlerprall]

Try with this, @anishagg17

type definition

export type EuiFormProps = CommonProps &
  ExclusiveUnion<
    { component: 'form' } & FormHTMLAttributes<HTMLFormElement>,
    { component?: 'div' } & HTMLAttributes<HTMLDivElement>
  > & {
    isInvalid?: boolean;
    /**
     * Which HTML element to render
     */
    component?: 'form' | 'div';
    error?: ReactNode | ReactNode[];
  };

This specifies FormHTMLAttributes are usable when component = 'form', otherwise HTMLAttributes are usable when component = 'div' | undefined. Verifiable with:

export const Foo = () => {
  return (
    <>
      {/* works */}
      <EuiForm />
      <EuiForm component="div" />
      <EuiForm component="form" />
      <EuiForm component="form" acceptCharset="en" />

      {/* errors */}
      <EuiForm acceptCharset="en" />
      <EuiForm component="div" acceptCharset="en" />
    </>
  );
};

jsx

    <Element className={classes} {...rest as HTMLAttributes<HTMLElement>}>
      {optionalErrorAlert}
      {children}
    </Element>

The casting here is okay as we know everything in the component is setup correctly. Conceptually there is a way to fix this without casting, but TypeScript has (or at least had) a bug deciphering what type the ...rest object is narrowed down to so we can't avoid it anyway.

[anishagg17]

thanks for you help 👍

[cchaos]

Jenkins, test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3010/

[cchaos]

I think this looks good to me with just one more comment for props comment

[cchaos]

One last, Jenkins, test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3010/