(web-components) Use ElementInternals for Checkbox component

[radium-v]

Previous Behavior

Currently, form-associated custom elements use the FormAssociated class mixin. This mixin is heavy and duplicative, being copied wholesale for every component which utilizes it. While FormAssociated includes minimal support for ElementInternals, the implementation isn't fully baked.

New Behavior

Improvements:

• Switches the <fluent-checkbox> custom element to use ElementInternals by default. An optional polyfill may be added in the near future, as more components transition to use ElementInternals.
• Adds a <fluent-field> custom element to handle layout and label management. Most elements have a heavy template which includes a slotted <label> due to cross-root ARIA not existing yet. The <fluent-field> component allows for better composition, and makes each individual input-style component lighter and more performant.

[fabricteam]

📊 Bundle size report

✅ No changes found

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[davatron5000]

Great work! 🙌 I do have a general question/thought. I know the objective was to covert this to elementInternals but it seems like the amount of script for a fluent-checkbox has increased ~4x.

I don't think it's a blocker but any thoughts there? Maybe there's a future abstraction like a FASTFormAssociatedElement base class that pulls out of some the boilerplate?

[radium-v]

Great work! 🙌 I do have a general question/thought. I know the objective was to covert this to elementInternals but it seems like the amount of script for a fluent-checkbox has increased ~4x.

I don't think it's a blocker but any thoughts there? Maybe there's a future abstraction like a FASTFormAssociatedElement base class that pulls out of some the boilerplate?

@davatron5000 It's an optical illusion 🌫️

The original Checkbox class extended from the CheckableFormAssociated mixin class:

fluentui/packages/web-components/src/form-associated/form-associated.ts

Line 572 in 9b68140

export function CheckableFormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T {

The CheckableFormAssociated function extends the FormAssociated mixin class, so it's fair to say that almost everything present in that file was being added to the class at build time.