feat: Add horizontal start and end label position for form field

[mannycarrera4]

Summary

Fixes: #2809

Release Category

Components

Release Note

The orientation prop on the FormField component will be updated to accept the following values: vertical, horizontalStart, and horizontalEnd. horizontal will still be accepted as a value in v12, but it will be deprecated and slated for removal in a future major release. These changes are intended to provide more flexibility with label alignments on FormField elements.

Instances where the orientation prop of the FormField component is set to horizontal will automatically default to horizontalStart via a codemod. A console warning message will also appear with a message to change the prop value to either horizontalStart or horizontalEnd.

---

Checklist

• MDX documentation adheres to Canvas Kit's Documentation Guidelines
• Label ready for review has been added to PR

For the Reviewer

• PR title is short and descriptive
• PR summary describes the change (Fixes/Resolves linked correctly)
• PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
• Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

Areas for Feedback? (optional)

• Code
• Documentation
• Testing
• Codemods

Testing Manually

Screenshots or GIFs (if applicable)

Thank You Gif (optional)

[cypress]

Workday/canvas-kit    Run #7723

Run Properties:   Failed #7723  •  4ab495f1f3 ℹ️: Merge 158378bfb2869a850b7324324178e054ae99ab4b into 3f613f779a40091a316491e86646...

Project	Workday/canvas-kit
Branch Review	mc-label-positioning
Run status	Failed #7723
Run duration	02m 51s
Commit	4ab495f1f3 ℹ️: Merge 158378bfb2869a850b7324324178e054ae99ab4b into 3f613f779a40091a316491e86646...
Committer	Manuel Carrera
View all properties for this run ↗︎

---

Test results
Failures	11
Flaky	3
Pending	1
Skipped	43
Passing	182
View all changes introduced in this branch ↗︎

---

Warning

Partial Report: The results for the Application Quality reports may be incomplete.

UI Coverage  11.11%
Untested elements	848
Tested elements	106

Accessibility  99.4%
Failed rules	1 critical   3 serious   0 moderate   0 minor
Failed elements	4

---

Tests for review

  ColorPicker.spec.tsx • 10 failed tests

View Output

Test		Artifacts
ColorInput > given the 'Basic' example is rendered > should not have any axe errors		Test Replay Screenshots
ColorInput > given the 'Alert' example is rendered > should not have any axe errors		Test Replay Screenshots
ColorInput > given the 'Error' example is rendered > should not have any axe errors		Test Replay Screenshots
ColorInput > given the 'Checked' example is rendered > should not have any axe errors		Test Replay Screenshots
ColorInput > given the 'Grow' example is rendered > should not have any axe errors		Test Replay Screenshots
ColorInput > given the `Disabled` example is rendered > should not have any axe errors		Test Replay Screenshots
ColorPreview > given the 'Basic' story is rendered > should not have any axe errors		Test Replay Screenshots
... > should not have any axe errors		Test Replay Screenshots
... > should not have any axe errors		Test Replay Screenshots
... > should not enter a newline in the textarea		Test Replay Screenshots

  Modal.spec.tsx • 1 failed test

View Output

Test		Artifacts
given the [Components/Popups/Modal, Custom focus] story is rendered > when the target button is clicked > should open the modal		Test Replay Screenshots

  Menu.spec.tsx • 0 failed tests

View Output

Test		Artifacts

  Breadcrumbs.spec.tsx • 0 failed tests

View Output

Test		Artifacts

  Autocomplete.spec.tsx • 0 failed tests

View Output

Test		Artifacts

The first 5 failed specs are shown, see all 31 specs in Cypress Cloud.

  Tabs.spec.tsx • 1 flaky test

View Output

Test		Artifacts
... > when the "More" button is clicked > should have the third Tab as the first menu item		Test Replay Screenshots

  Modal.spec.tsx • 2 flaky tests

View Output

Test		Artifacts
... > should focus in the iframe		Test Replay Screenshots
... > should focus on the last button in the iframe		Test Replay Screenshots

[josh-bagwell]

Left some small nits