Foundation: Update Number field, Search, Switch, Text area, and Text field

[bheston]

Pull Request

📖 Description

As part of the next major release of fast-foundation, we wanted to do a complete review of the component templates and align the structure and naming as much as possible.

This PR is split from https://github.com/microsoft/fast/pull/6286 and standardizes Number field, Search, Switch, Text area, and Text field.

Before on the left, update on the right. "C" = class, "P" = part, "R" = role, "S" = slot. 💔 = potentially style-breaking.

Number field

• 💔 Rename “control” to “field”
• 💔 Rename “root” to “control”
• 💔 Rename “controls” to “step-buttons”
• 💔 Rename “step-up-glyph” to “step-up-icon”
• 💔 Rename “step-down-glyph” to “step-down-icon”

Search

• 💔 Rename “control” to “field”
• 💔 Rename “root” to “control”
• 💔 Remove “input-wrapper”
• 💔 Rename “clear-glyph” to “clear-icon”

Switch

• 💔 Rename “switch” to “control”
• 💔 Rename "switch" slot to "thumb"
• Add default "thumb" element with class and part

Text area

• 💔 Rename “control” to “field”
• Add wrapper element “control”
• Add "start" and "end" slots

Text field

• 💔 Rename “control” to “field”
• 💔 Rename “root” to “control”

👩‍💻 Reviewer Notes

Review the Storybook site, or the illustrations of the components before and after, compared to the changes in code.

📑 Test Plan

Tested via comparison against proposal and in Storybook.

✅ Checklist

General

• [x] I have included a change request file using $ yarn change
• [ ] I have added tests for my changes.
• [x] I have tested my changes.
• [x] I have updated the project documentation to reflect my changes.
• [x] I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• [ ] I have added a new component
• [x] I have modified an existing component
• [ ] I have updated the definition file
• [ ] I have updated the configuration file

[scomea]

Text/Number/Search field inputs don't track width of parent component in samples -

[bheston]

I tested the width issue in Storybook by manually adding width: 500px to each host element and found no issues. Hopefully that was the problem, either way there shouldn't be an issue with the underlying components, potentially only the local Storybook sample styling.