@lion/field - npm Package Compare versions

Comparing version 0.8.5 to 0.8.6

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [0.8.6](https://github.com/ing-bank/lion/compare/@lion/field@0.8.5...@lion/field@0.8.6) (2020-02-05)
+
+
+### Bug Fixes
+
+* **field:** allow html inside labels ([c2c5e7c](https://github.com/ing-bank/lion/commit/c2c5e7c299d99750db5bded1014d8e24f2f6d4c8))
+
+
+
+
+
 ## [0.8.5](https://github.com/ing-bank/lion/compare/@lion/field@0.8.4...@lion/field@0.8.5) (2020-02-03)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@lion/field",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "description": "Fields are the most fundamental building block of the Form System",
@@ -45,3 +45,3 @@ "author": "ing-bank",
   },
-  "gitHead": "30a8197f18bf1f27fc41f392bde517a5fb94cbcd"
+  "gitHead": "19a0909df3b9ad290343b434e1ee1d570a7259ce"
 }

src/FormControlMixin.js

@@ -56,2 +56,30 @@ import { html, css, nothing, dedupeMixin, SlotMixin } from '@lion/core';
 
+      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() {
@@ -58,0 +86,0 @@ return {

src/LionField.js

@@ -233,7 +233,4 @@ import { SlotMixin, LitElement } from '@lion/core';
   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;
   }
 }

test/FormControlMixin.test.js

@@ -26,20 +26,62 @@ import { expect, fixture, html, defineCE, unsafeStatic } from '@open-wc/testing';
 
-  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 address</label>
+        ${inputSlot}
+      </${tag}>`);
+    expect(elElem.label).to.equal('Email address', 'as an element');
   });
 
+  it('has a label that supports inner html', async () => {
+    const el = await fixture(html`
+      <${tag}>
+        <label slot="label">Email <span>address</span></label>
+        ${inputSlot}
+      </${tag}>`);
+    expect(el.label).to.equal('Email address');
+  });
+
+  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 spam</label>
+        ${inputSlot}
+      </${tag}>`);
+    expect(elElem.helpText).to.equal('We will not send you any spam', 'as an element');
+  });
+
+  it('can have a help-text that supports inner html', async () => {
+    const el = await fixture(html`
+      <${tag}>
+        <label slot="help-text">We will not send you any spam</label>
+        ${inputSlot}
+      </${tag}>`);
+    expect(el.helpText).to.equal('We will not send you any spam');
+  });
+
   it('does not duplicate aria-describedby and aria-labelledby ids', async () => {
@@ -46,0 +88,0 @@ const lionField = await fixture(`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

157914

increased by1.35%

Lines of code

3166

increased by1.83%

No dependency changes