Updated EuiForm examples

[hetanthakkar]

Summary

Fixed #4711: Updated examples to used EuiForms to use component="form" as a prop

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**~
• Added documentation
• Checked Code Sandbox works for the any docs 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?

[hetanthakkar]

@myasonik @cchaos @thompsongl Could you please review!?

[hetanthakkar]

Btw, I am about to finish making the code snippet extension for Eui components! Do you think it's a good idea!? If yes I can make a PR for the same tomorrow

[cchaos]

Btw, I am about to finish making the code snippet extension for Eui components!

Oh! What is that?

[hetanthakkar]

@cchaos An extension that is similar to react code snippets where if you just type in say for example !euiAccordian, it will autofill a minimal code (the code present in snippet section of the component). Using this will help the developers as they wont have to visit the docs frequently when they want to use a component! I think it will surely help to speed up the developers while using the eui components

[cchaos]

Oh interesting! Without bogging down this specific PR, I've transferred your comment to a "Show and tell" type of discussion. #4735 Where we'd love to see some more of it in action if you can.

[cchaos]

Before I run CI on this PR, can you clean up the changed files. It looks like there are some bad test updates and the changelog is from a different PR. This one won't need a changelog because it should only address docs.

[hetanthakkar]

@cchaos Sure! I am on it

[hetanthakkar]

@cchaos Please view!

[hetanthakkar]

@cchaos I have also uploaded a small basic screencast for that extension. Do check it out!

[cchaos]

The changes LGTM! Would you also mind updating the snippets too? It was mentioned yesterday someone needed it in the modal form snippet.

[hetanthakkar]

@cchaos I've updated every docs that used EuiForm. I don't get you

[hetanthakkar]

@cchaos are there any other examples of EuiForm left out that I forgot to modify

[cchaos]

In the _example.js files, there are code snippets. I assume the same ones you're using to add to your VS Code extension. That could use this same prop added too. Like at this line:

eui/src-docs/src/views/modal/modal_example.js

Line 67 in 29de4db

<EuiForm id={formId}><!-- Modal body --></EuiForm>

[hetanthakkar]

@cchaos Can you please review

[cchaos]

Jenkins, test this

[kibanamachine]

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

[hetanthakkar]

@cchaos You can merge this. btw where should I submit that vs code extension repo!?