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}>
+
+ ${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}>
+
+ ${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 () => {