Merge pull request #539 from ing-bank/fix/field-label

Fix/field label as html

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 =
-      this.label ||
-      (this.querySelector('[slot=label]') && this.querySelector('[slot=label]').textContent);
-    return this.__fieldName || label || this.name;
+    return this.__fieldName || this.label || this.name;
   }
 }

packages/field/test/FormControlMixin.test.js

@@ -23,22 +23,64 @@ 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 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 () => {

packages/input/stories/index.stories.mdx

@@ -10,7 +10,7 @@ import '../lion-input.js';
 
 `lion-input` component is a webcomponent that enhances the functionality of the native `<input>` element.
 
-<Story name="default">
+<Story name="Default">
   {html`
     <lion-input label="First Name"></lion-input>
   `}
@@ -25,7 +25,7 @@ import '../lion-input.js';
 - Based on [field](?path=/docs/forms-system-overview--page)
 - Extra visual elements can be added via `slots`
   - **label**: can also be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
-    For example add an `sr-only` class to the label to make it visually hidden.
+    For example add an `u-sr-only` class to the label to make it visually hidden.
     A label is always needed for accessibility reasons.
   - **help-text**: a helper text shown below the label to give extra clarification.
   - **prefix**: does not have an active use case yet, but the option is in place.
@@ -49,9 +49,64 @@ import '@lion/input/lion-input.js';
 
 ## Examples
 
+### Label
+
+Can be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
+For example add an `u-sr-only` class to the label to make it (partially) visually hidden.
+A label is always needed for accessibility reasons.
+
+<Story name="Label">
+  {html`
+    <style>
+      .u-sr-only {
+        position: absolute;
+        top: 0;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(100%);
+        clip: rect(1px, 1px, 1px, 1px);
+        white-space: nowrap;
+        border: 0;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+    <lion-input>
+      <label slot="label">Label <span class="u-sr-only">partially only visible for screen-readers</span></label>
+    </lion-input>
+  `}
+</Story>
+
+```html
+<style>
+  .u-sr-only {
+    position: absolute;
+    top: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(100%);
+    clip: rect(1px, 1px, 1px, 1px);
+    white-space: nowrap;
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+</style>
+<lion-input>
+  <label slot="label">Label <span class="u-sr-only">partially only visible for screen-readers</span></label>
+</lion-input>
+```
+
 ### Help-text
 
-<Story name="Help-text with html">
+A helper text shown below the label to give extra clarification.
+
+Just like the `label`, a `help-text` can be provided via the `help-text` attribute, a slot can be used to change the `html` and `CSS` of the help-text.
+For example add an anchor with further explanation.
+
+<Story name="Help-text">
   {html`
     <lion-input>
       <label slot="label">Label</label>