1946596 - Create a MozBoxBase class with common properties, templates, and styles

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

When talking through how we wanted to implement the different moz-box-* components it became clear that many of them will need to support similar properties and will need the same templates and styles. Rather than duplicate/reimplement the same code in multiple components we would like to create a MozBoxBase class with the common code that other box elements can subclass. It will need to support label, description, and iconSrc and will somehow provied the stylesheet that we will likely use for all box components. We also don't need to provide a render function or define a custom element from this class (no need to do customElements.define("moz-box-base")) - it will be like the base input class. Something like:

class MozBoxBase extends MozLitElement {
  static properties = {
    label: { type: String, fluent: true },
    description: { type: String, fluent: true },
    iconSrc: { type: String },
  }
  
  labelTemplate() {
    ...
  }

  descriptionTemplate() {
    ...
  }
 
  // We could also provide a stylesTemplate?
  // We'll either need to call super.render() in the subclass render functions
  // Or call stylesTemplate() in the subclass render functions
  render() {
    return html`
      <link
        rel="stylesheet"
        href="chrome://global/content/elements/path-to-common-box-styles.css"
      />`
  }
}

Comment 1

[Hanna Jones [:hjones]]

We already have a version of moz-box-button that implements some of this. I didn't file a bug specifically for migrating that component to use the base class - we can do that work as part of that bug or under a separate bug if we prefer. We also have a lot of prior art for implementing icon/label/description in the base input class and its styles. Some of this may be relevant, though there are complexities related to the inputs - specifically needing to support a "block" style layout for selects, text inputs, etc. and a limitation where we couldn't use flexbox - that do not apply to our box elements.

Comment 2

[Hanna Jones [:hjones]]

Attachment: Bug 1946596 - create a base class for moz-box-* elements r=mstriemer,#recomp-reviewers

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/478d0ea62f6e
create a base class for moz-box-* elements r=mstriemer,reusable-components-reviewers

Comment 4

[amarc]

Backed out for causing mochitest failures @ test_moz_checkbox.html

• Backout link
• Push with failures
• Failure Log
• Failure line:

TEST-UNEXPECTED-FAIL | toolkit/content/tests/widgets/test_moz_checkbox.html | TypeError: this.renderInputElements is not a function - Should not throw any errors

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/76d209609ee4
create a base class for moz-box-* elements r=mstriemer,reusable-components-reviewers

Comment 6

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/76d209609ee4