fix(field): allow html inside labels

packages/field/src/FormControlMixin.js

@@ -53,6 +53,34 @@ export const FormControlMixin = dedupeMixin(
         };
       }
 
+      get label() {
+        return (
+          (this.querySelector('[slot="label"]') &&
+            this.querySelector('[slot="label"]').textContent) ||
+          this.__label
+        );
+      }
+
+      set label(newValue) {
+        const oldValue = this.label;
+        this.__label = newValue;
+        this.requestUpdate('label', oldValue);
+      }
+
+      get helpText() {
+        return (
+          (this.querySelector('[slot="help-text"]') &&
+            this.querySelector('[slot="help-text"]').textContent) ||
+          this.__helpText
+        );
+      }
+
+      set helpText(newValue) {
+        const oldValue = this.helpText;
+        this.__helpText = newValue;
+        this.requestUpdate('helpText', oldValue);
+      }
+
       get slots() {
         return {
           ...super.slots,

packages/field/src/LionField.js

@@ -230,9 +230,6 @@ export class LionField extends FormControlMixin(
   }
 
   get fieldName() {
-    const label =
+    return this.__fieldName || this.label || this.name;
-      this.label ||
-      (this.querySelector('[slot=label]') && this.querySelector('[slot=label]').textContent);
-    return this.__fieldName || label || this.name;
   }
 }

packages/field/test/FormControlMixin.test.js

@@ -23,22 +23,46 @@ describe('FormControlMixin', () => {
     tag = unsafeStatic(elem);
   });
 
-  it('has the capability to override the help text', async () => {
+  it('has a label', async () => {
-    const lionFieldAttr = await fixture(html`
+    const elAttr = await fixture(html`
-      <${tag} help-text="This email address is already taken">${inputSlot}</${tag}>
+      <${tag} label="Email address">${inputSlot}</${tag}>
     `);
-    expect(
+    expect(elAttr.label).to.equal('Email address', 'as an attribute');
-      Array.from(lionFieldAttr.children).find(child => child.slot === 'help-text').textContent,
+
-    ).to.contain('This email address is already taken');
+    const elProp = await fixture(html`
-    const lionFieldProp = await fixture(html`
       <${tag}
-        .helpText=${'This email address is already taken'}
+        .label=${'Email address'}
       >${inputSlot}
       </${tag}>`);
+    expect(elProp.label).to.equal('Email address', 'as a property');
 
-    expect(
+    const elElem = await fixture(html`
-      Array.from(lionFieldProp.children).find(child => child.slot === 'help-text').textContent,
+      <${tag}>
-    ).to.contain('This email address is already taken');
+        <label slot="label">Email <span>address</span></label>
+        ${inputSlot}
+      </${tag}>`);
+    expect(elElem.label).to.equal('Email address', 'as an element');
+  });
+
+  it('can have a help-text', async () => {
+    const elAttr = await fixture(html`
+      <${tag} help-text="We will not send you any spam">${inputSlot}</${tag}>
+    `);
+    expect(elAttr.helpText).to.equal('We will not send you any spam', 'as an attribute');
+
+    const elProp = await fixture(html`
+      <${tag}
+        .helpText=${'We will not send you any spam'}
+      >${inputSlot}
+      </${tag}>`);
+    expect(elProp.helpText).to.equal('We will not send you any spam', 'as a property');
+
+    const elElem = await fixture(html`
+      <${tag}>
+        <label slot="help-text">We will not send you any <span>spam</span></label>
+        ${inputSlot}
+      </${tag}>`);
+    expect(elElem.helpText).to.equal('We will not send you any spam', 'as an element');
   });
 
   it('does not duplicate aria-describedby and aria-labelledby ids', async () => {