Align text-area component template to text-field component for feature consistency

[DavidVollmers]

Pull Request

📖 Description

The text-field and text-area component are very similar but unfortunately not feature congruent. This PR adds the following missing features to the text-area component:

• Add a start and end slot before and after the textarea element
• Wrap the textarea element and the start and end slots in a div.root element
• Add a whitespace filter to the default (label) slot

👩‍💻 Reviewer Notes

As the contributing guidelines and the PR template seem outdated (fast-components no longer exist) I am not sure what else is necessary to include in this PR.

[DavidVollmers]

@microsoft-github-policy-service agree company="Matrix42"

[DavidVollmers]

bump

[scomea]

We'd need to advertise it as "breaking" as adding the extra div in the shadow dom could break styling in existing implementations so folks should be aware. Do people feel like the slots "belong" in this case? @bheston Should there be styling changes/examples (for slotted content) and tests added too?

[DavidVollmers]

So in my opinion if you want to build a proper Design System and use the slots on the text-field component (for example for validation icons) you will also want to have this for the text-area component.

[DavidVollmers]

@scomea @bheston Sorry if being annoying but I really would like to contribute more to this repository in the future and I thought of this for a good first addition. If there are any problems or concers I am open to discuss.

[bheston]

Excited to have you contribute! I have this change open in #6798 though. I'll be merging it soon as part of an effort to improve templates all around.

[DavidVollmers]

That's great news! Then I will close this one as it is redundant.