feat(switch): add full form association support

PiperOrigin-RevId: 532627572

Author: asyncliz

switch/lib/switch.ts

@@ -7,14 +7,13 @@
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
 
-import {html, isServer, LitElement, nothing, TemplateResult} from 'lit';
+import {html, isServer, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';
 import {property, query, queryAsync, state} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 import {when} from 'lit/directives/when.js';
 
 import {requestUpdateOnAriaChange} from '../../aria/delegate.js';
 import {dispatchActivationClick, isActivationClick} from '../../controller/events.js';
-import {FormController, getFormValue} from '../../controller/form-controller.js';
 import {ripple} from '../../ripple/directive.js';
 import {MdRipple} from '../../ripple/ripple.js';
 
@@ -68,30 +67,40 @@ export class Switch extends LitElement {
   @query('button') private readonly button!: HTMLButtonElement|null;
 
   /**
-   * The associated form element with which this element's value will submit.
+   * The value associated with this switch on form submission. `null` is
+   * submitted when `selected` is `false`.
    */
-  get form() {
-    return this.closest('form');
-  }
+  @property() value = 'on';
 
   /**
    * The HTML name to use in form submission.
    */
-  @property({reflect: true}) name = '';
+  get name() {
+    return this.getAttribute('name') ?? '';
+  }
+  set name(name: string) {
+    this.setAttribute('name', name);
+  }
 
   /**
-   * The value associated with this switch on form submission. `null` is
-   * submitted when `selected` is `false`.
+   * The associated form element with which this element's value will submit.
    */
-  @property() value = 'on';
+  get form() {
+    return this.internals.form;
+  }
 
-  [getFormValue]() {
-    return this.selected ? this.value : null;
+  /**
+   * The labels this element is associated with.
+   */
+  get labels() {
+    return this.internals.labels;
   }
 
+  private readonly internals =
+      (this as HTMLElement /* needed for closure */).attachInternals();
+
   constructor() {
     super();
-    this.addController(new FormController(this));
     if (!isServer) {
       this.addEventListener('click', (event: MouseEvent) => {
         if (!isActivationClick(event)) {
@@ -106,6 +115,12 @@ export class Switch extends LitElement {
     }
   }
 
+  protected override update(changed: PropertyValues<Switch>) {
+    const state = String(this.selected);
+    this.internals.setFormValue(this.selected ? this.value : null, state);
+    super.update(changed);
+  }
+
   protected override render(): TemplateResult {
     // NOTE: buttons must use only [phrasing
     // content](https://html.spec.whatwg.org/multipage/dom.html#phrasing-content)
@@ -218,4 +233,16 @@ export class Switch extends LitElement {
     // Additionally, native change event is not an InputEvent.
     this.dispatchEvent(new Event('change', {bubbles: true}));
   }
+
+  /** @private */
+  formResetCallback() {
+    // The selected property does not reflect, so the original attribute set by
+    // the user is used to determine the default value.
+    this.selected = this.hasAttribute('selected');
+  }
+
+  /** @private */
+  formStateRestoreCallback(state: string) {
+    this.selected = state === 'true';
+  }
 }

switch/switch_test.ts

@@ -6,6 +6,9 @@
 
 // import 'jasmine'; (google3-only)
 
+import {html} from 'lit';
+
+import {createFormTests} from '../testing/forms.js';
 import {createTokenTests} from '../testing/tokens.js';
 
 import {MdSwitch} from './switch.js';
@@ -14,4 +17,101 @@ describe('<md-switch>', () => {
   describe('.styles', () => {
     createTokenTests(MdSwitch.styles);
   });
+
+  describe('forms', () => {
+    createFormTests({
+      queryControl: root => root.querySelector('md-switch'),
+      valueTests: [
+        {
+          name: 'unnamed',
+          render: () => html`<md-switch selected></md-switch>`,
+          assertValue(formData) {
+            expect(formData)
+                .withContext('should not add anything to form without a name')
+                .toHaveSize(0);
+          }
+        },
+        {
+          name: 'unselected',
+          render: () => html`<md-switch name="switch"></md-switch>`,
+          assertValue(formData) {
+            expect(formData)
+                .withContext('should not add anything to form when unselected')
+                .toHaveSize(0);
+          }
+        },
+        {
+          name: 'selected default value',
+          render: () => html`<md-switch name="switch" selected></md-switch>`,
+          assertValue(formData) {
+            expect(formData.get('switch')).toBe('on');
+          }
+        },
+        {
+          name: 'selected custom value',
+          render: () =>
+              html`<md-switch name="switch" selected value="Custom value"></md-switch>`,
+          assertValue(formData) {
+            expect(formData.get('switch')).toBe('Custom value');
+          }
+        },
+        {
+          name: 'disabled',
+          render: () =>
+              html`<md-switch name="switch" selected disabled></md-switch>`,
+          assertValue(formData) {
+            expect(formData)
+                .withContext('should not add anything to form when disabled')
+                .toHaveSize(0);
+          }
+        }
+      ],
+      resetTests: [
+        {
+          name: 'reset to unselected',
+          render: () => html`<md-switch name="switch"></md-switch>`,
+          change(control) {
+            control.selected = true;
+          },
+          assertReset(control) {
+            expect(control.selected)
+                .withContext('control.selected after reset')
+                .toBeFalse();
+          }
+        },
+        {
+          name: 'reset to selected',
+          render: () => html`<md-switch name="switch" selected></md-switch>`,
+          change(control) {
+            control.selected = false;
+          },
+          assertReset(control) {
+            expect(control.selected)
+                .withContext('control.selected after reset')
+                .toBeTrue();
+          }
+        },
+      ],
+      restoreTests: [
+        {
+          name: 'restore unselected',
+          render: () => html`<md-switch name="switch"></md-switch>`,
+          assertRestored(control) {
+            expect(control.selected)
+                .withContext('control.selected after restore')
+                .toBeFalse();
+          }
+        },
+        {
+          name: 'restore selected',
+          render: () => html`<md-switch name="switch" selected></md-switch>`,
+          assertRestored(control) {
+            expect(control.selected)
+                .withContext('control.selected after restore')
+                .toBeTrue();
+          }
+        },
+      ]
+    });
+  });
 });