ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(field): allow html inside labels

Browse source
This commit is contained in:
qa46hx 2020-02-03 10:52:09 +01:00
parent 30a8197f18
commit c2c5e7c299
3 changed files with 64 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
packages/field/src/FormControlMixin.js
View file

@ -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,

5
packages/field/src/LionField.js
View file

@ -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;
}
}

46
packages/field/test/FormControlMixin.test.js
View file

@ -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 () => {