From c2c5e7c299d99750db5bded1014d8e24f2f6d4c8 Mon Sep 17 00:00:00 2001
From: qa46hx <Gerjan.van.Geest@ing.com>
Date: Mon, 3 Feb 2020 10:52:09 +0100
Subject: [PATCH] fix(field): allow html inside labels

---
 packages/field/src/FormControlMixin.js       | 28 ++++++++++++
 packages/field/src/LionField.js              |  5 +--
 packages/field/test/FormControlMixin.test.js | 46 +++++++++++++++-----
 3 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/packages/field/src/FormControlMixin.js b/packages/field/src/FormControlMixin.js
index c835e2922..1fd94e8ca 100644
--- a/packages/field/src/FormControlMixin.js
+++ b/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,
diff --git a/packages/field/src/LionField.js b/packages/field/src/LionField.js
index e2ccb2647..8e05f5863 100644
--- a/packages/field/src/LionField.js
+++ b/packages/field/src/LionField.js
@@ -230,9 +230,6 @@ export class LionField extends FormControlMixin(
   }
 
   get fieldName() {
-    const label =
-      this.label ||
-      (this.querySelector('[slot=label]') && this.querySelector('[slot=label]').textContent);
-    return this.__fieldName || label || this.name;
+    return this.__fieldName || this.label || this.name;
   }
 }
diff --git a/packages/field/test/FormControlMixin.test.js b/packages/field/test/FormControlMixin.test.js
index df30e8ae9..115b66af3 100644
--- a/packages/field/test/FormControlMixin.test.js
+++ b/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 () => {
-    const lionFieldAttr = await fixture(html`
-      <${tag} help-text="This email address is already taken">${inputSlot}</${tag}>
+  it('has a label', async () => {
+    const elAttr = await fixture(html`
+      <${tag} label="Email address">${inputSlot}</${tag}>
     `);
-    expect(
-      Array.from(lionFieldAttr.children).find(child => child.slot === 'help-text').textContent,
-    ).to.contain('This email address is already taken');
-    const lionFieldProp = await fixture(html`
+    expect(elAttr.label).to.equal('Email address', 'as an attribute');
+
+    const elProp = 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(
-      Array.from(lionFieldProp.children).find(child => child.slot === 'help-text').textContent,
-    ).to.contain('This email address is already taken');
+    const elElem = await fixture(html`
+      <${tag}>
+        <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 () => {