Label checkboxes via django template. (#2002)

static/components.js

@@ -27,7 +27,6 @@ import './elements/icons';
 import './elements/chromedash-approvals-dialog';
 import './elements/chromedash-banner';
 import './elements/chromedash-callout';
-import './elements/chromedash-checkbox';
 import './elements/chromedash-color-status';
 import './elements/chromedash-feature';
 import './elements/chromedash-feature-detail';

static/elements/chromedash-checkbox.js

@@ -1,48 +0,0 @@
-import {LitElement, css, html} from 'lit';
-import {ifDefined} from 'lit/directives/if-defined.js';
-import {live} from 'lit/directives/live.js';
-import {SHARED_STYLES} from '../sass/shared-css.js';
-
-export class ChromedashCheckbox extends LitElement {
-  static get properties() {
-    return {
-      id: {type: String},
-      name: {type: String},
-      label: {type: String},
-      class: {type: String},
-      checked: {type: Boolean},
-      disabled: {type: Boolean},
-      required: {type: Boolean},
-      value: {type: String},
-    };
-  }
-
-  static get styles() {
-    return [
-      ...SHARED_STYLES,
-      css`
-        :host sl-checkbox::part(label) {
-            font-size: var(--sl-input-font-size-small);
-        }
-    `];
-  }
-
-  render() {
-    return html`
-    <sl-checkbox
-      id=${ifDefined(this.id)}
-      name=${ifDefined(this.name)}
-      class=${ifDefined(this.class)}
-      size="small"
-      .checked=${live(this.checked)}
-      .disabled=${this.disabled}
-      .required=${this.required}
-      value=${ifDefined(this.value)}
-      >
-      ${this.label}
-    </sl-checkbox>`;
-  }
-}
-
-customElements.define('chromedash-checkbox', ChromedashCheckbox);
-

templates/django/forms/widgets/checkbox.html

@@ -1,8 +1,11 @@
-<chromedash-checkbox
+<sl-checkbox
     name="{{ widget.name }}"
     size="small"
-    {% if widget.value != None %} 
+    {% if widget.value != None %}
       value="{{ widget.value|stringformat:'s' }}"
     {% endif %}
     {% include "django/forms/widgets/attrs.html" %}>
-</chromedash-checkbox>
+  {% for attr_name, attr_value in widget.attrs.items %}
+    {% if attr_name == "label" %} {{ attr_value }} {% endif %}
+  {% endfor %}
+</sl-checkbox>