fix(button,iconbutton): use form-associated mixin behavior

PiperOrigin-RevId: 876381068

Author: asyncliz

button/internal/button.ts

@@ -12,34 +12,23 @@ import {property, query, queryAssignedElements} from 'lit/decorators.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
-import {
-  FormSubmitter,
-  setupFormSubmitter,
-  type FormSubmitterType,
-} from '../../internal/controller/form-submitter.js';
 import {
   dispatchActivationClick,
   isActivationClick,
 } from '../../internal/events/form-label-activation.js';
-import {
-  internals,
-  mixinElementInternals,
-} from '../../labs/behaviors/element-internals.js';
+import {mixinElementInternals} from '../../labs/behaviors/element-internals.js';
+import {mixinFormAssociated} from '../../labs/behaviors/form-associated.js';
+import {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';
 
 // Separate variable needed for closure.
-const buttonBaseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
+const buttonBaseClass = mixinDelegatesAria(
+  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),
+);
 
 /**
  * A button component.
  */
-export abstract class Button extends buttonBaseClass implements FormSubmitter {
-  static {
-    setupFormSubmitter(Button);
-  }
-
-  /** @nocollapse */
-  static readonly formAssociated = true;
-
+export abstract class Button extends buttonBaseClass {
   /** @nocollapse */
   static override shadowRootOptions: ShadowRootInit = {
     mode: 'open',
@@ -49,7 +38,7 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
   /**
    * Whether or not the button is disabled.
    */
-  @property({type: Boolean, reflect: true}) disabled = false;
+  declare disabled: boolean; // for jsdoc until lit-analyzer is updated
 
   /**
    * Whether or not the button is "soft-disabled" (disabled but still
@@ -95,32 +84,6 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
   @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =
     false;
 
-  /**
-   * The default behavior of the button. May be "button", "reset", or "submit"
-   * (default).
-   */
-  @property() type: FormSubmitterType = 'submit';
-
-  /**
-   * The value added to a form with the button's name when the button submits a
-   * form.
-   */
-  @property({reflect: true}) value = '';
-
-  get name() {
-    return this.getAttribute('name') ?? '';
-  }
-  set name(name: string) {
-    this.setAttribute('name', name);
-  }
-
-  /**
-   * The associated form element with which this element's value will submit.
-   */
-  get form() {
-    return this[internals].form;
-  }
-
   @query('.button') private readonly buttonElement!: HTMLElement | null;
 
   @queryAssignedElements({slot: 'icon', flatten: true})

iconbutton/internal/icon-button.ts

@@ -14,26 +14,20 @@ import {literal, html as staticHtml} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
-import {
-  FormSubmitter,
-  setupFormSubmitter,
-  type FormSubmitterType,
-} from '../../internal/controller/form-submitter.js';
 import {isRtl} from '../../internal/controller/is-rtl.js';
 import {
   afterDispatch,
   setupDispatchHooks,
 } from '../../internal/events/dispatch-hooks.js';
-import {
-  internals,
-  mixinElementInternals,
-} from '../../labs/behaviors/element-internals.js';
+import {mixinElementInternals} from '../../labs/behaviors/element-internals.js';
+import {mixinFormAssociated} from '../../labs/behaviors/form-associated.js';
+import {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';
 
 type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
 
 // Separate variable needed for closure.
 const iconButtonBaseClass = mixinDelegatesAria(
-  mixinElementInternals(LitElement),
+  mixinFormSubmitter(mixinFormAssociated(mixinElementInternals(LitElement))),
 );
 
 /**
@@ -43,14 +37,7 @@ const iconButtonBaseClass = mixinDelegatesAria(
  * --composed
  * @fires change {Event} Dispatched when a toggle button toggles --bubbles
  */
-export class IconButton extends iconButtonBaseClass implements FormSubmitter {
-  static {
-    setupFormSubmitter(IconButton);
-  }
-
-  /** @nocollapse */
-  static readonly formAssociated = true;
-
+export class IconButton extends iconButtonBaseClass {
   /** @nocollapse */
   static override shadowRootOptions: ShadowRootInit = {
     mode: 'open',
@@ -60,7 +47,7 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter {
   /**
    * Disables the icon button and makes it non-interactive.
    */
-  @property({type: Boolean, reflect: true}) disabled = false;
+  declare disabled: boolean; // for jsdoc until lit-analyzer is updated
 
   /**
    * "Soft-disables" the icon button (disabled but still focusable).
@@ -113,39 +100,6 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter {
    */
   @property({type: Boolean, reflect: true}) selected = false;
 
-  /**
-   * The default behavior of the button. May be "button", "reset", or "submit"
-   * (default).
-   */
-  @property() type: FormSubmitterType = 'submit';
-
-  /**
-   * The value added to a form with the button's name when the button submits a
-   * form.
-   */
-  @property({reflect: true}) value = '';
-
-  get name() {
-    return this.getAttribute('name') ?? '';
-  }
-  set name(name: string) {
-    this.setAttribute('name', name);
-  }
-
-  /**
-   * The associated form element with which this element's value will submit.
-   */
-  get form() {
-    return this[internals].form;
-  }
-
-  /**
-   * The labels this element is associated with.
-   */
-  get labels() {
-    return this[internals].labels;
-  }
-
   @state() private flipIcon = isRtl(this, this.flipIconInRtl);
 
   constructor() {

internal/controller/form-submitter.ts

@@ -46,15 +46,16 @@ export interface FormAssociated {
   disabled: boolean;
 
   /**
-   * Gets the current form value of a component.
+   * Gets the current form value of a component. Defaults to the component's
+   * `value` attribute.
    *
    * @return The current form value.
    */
   [getFormValue](): FormValue | null;
 
   /**
    * Gets the current form state of a component. Defaults to the component's
-   * `[formValue]`.
+   * `[getFormValue]()` result.
    *
    * Use this when the state of an element is different from its value, such as
    * checkboxes (internal boolean state and a user string value).
@@ -72,25 +73,26 @@ export interface FormAssociated {
   formDisabledCallback(disabled: boolean): void;
 
   /**
-   * A callback for when the form requests to reset its value. Typically, the
-   * default value that is reset is represented in the attribute of an element.
+   * An optional callback for when the form requests to reset its value.
+   * Typically, the default value that is reset is represented in the attribute
+   * of an element.
    *
    * This means the attribute used for the value should not update as the value
    * changes. For example, a checkbox should not change its default `checked`
    * attribute when selected. Ensure form values do not reflect.
    */
-  formResetCallback(): void;
+  formResetCallback?(): void;
 
   /**
-   * A callback for when the form restores the state of a component. For
-   * example, when a page is reloaded or forms are autofilled.
+   * An optional callback for when the form restores the state of a component.
+   * For example, when a page is reloaded or forms are autofilled.
    *
    * @param state The state to restore, or null to reset the form control's
    *     value.
    * @param reason The reason state was restored, either `'restore'` or
    *   `'autocomplete'`.
    */
-  formStateRestoreCallback(
+  formStateRestoreCallback?(
     state: FormRestoreState | null,
     reason: FormRestoreReason,
   ): void;
@@ -238,7 +240,9 @@ export function mixinFormAssociated<
       return this.hasAttribute('disabled');
     }
     set disabled(disabled: boolean) {
-      this.toggleAttribute('disabled', disabled);
+      // Coerce `disabled` in `Boolean()` to ensure that setting to `null` or
+      // `undefined` sets the attribute to `false`.
+      this.toggleAttribute('disabled', Boolean(disabled));
       // We don't need to call `requestUpdate()` since it's called synchronously
       // in `attributeChangedCallback()`.
     }
@@ -282,9 +286,7 @@ export function mixinFormAssociated<
     }
 
     [getFormValue](): FormValue | null {
-      // Closure does not allow abstract symbol members, so a default
-      // implementation is needed.
-      throw new Error('Implement [getFormValue]');
+      return this.getAttribute('value');
     }
 
     [getFormState](): FormValue | null {
@@ -294,13 +296,6 @@ export function mixinFormAssociated<
     formDisabledCallback(disabled: boolean) {
       this.disabled = disabled;
     }
-
-    abstract formResetCallback(): void;
-
-    abstract formStateRestoreCallback(
-      state: FormRestoreState | null,
-      reason: FormRestoreReason,
-    ): void;
   }
 
   return FormAssociatedElement;