Form Element Mixin

[MekalaNagarajan-Centrica]

Outcome

Base setup for any form element.

Scope

• how do we test?
• Prefix different inputs in the tokens
• initial text styles first

Properties

• value
• name
• id
• heading
• labelID

Attributes

Tokens

• typography
• input states
• focus
• hover
• disabled
• active
• valid
• invalid

Slots

• label

States

• id

Events

• change

HTML Templates

• label
• input ?

[MekalaNagarajan-Centrica]

Templates

In mixin individual element templates can be defined and components extending the mixin can define the actual rendering template based on the type.

• headingTemplate - used in multiple option input (eg. radio, checkbox)
• labelTemplate - used in select and single option input
• htmlFormElementTemplate - used to render anonymous slot template.

[MekalaNagarajan-Centrica]

Should labelID be added as properties in FormElementMixin? If label slot is scoped within this mixin, aria mapping between label and slotted HTML form element should also happen here.

[MekalaNagarajan-Centrica]

Added heading property into the mixin scope. As heading property is required for the multi-option form element.

[MekalaNagarajan-Centrica]

For testing mixins,

• create a test component that extends the mixin and do dummy template implementation.
• use the test component within tests.

const MuonFormElement = class extends FormElementMixin(MuonElement) {
  get standardTemplate() {
    return html `
    <div class="slotted-content">
        ${this._isMultiple ? this._headingTemplate : this._labelTemplate}
      <div class="input-holder">
        ${super.standardTemplate}
      </div>
    </div>
    `;
  }
}

const tagName = defineCE(MuonFormElement);