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

fix(field): replace state-disabled/filled css classes with attributes

Browse source
This commit is contained in:
Aymen Ben Amor 2020-02-03 15:24:02 +01:00 committed by Thomas Allmer
parent d96aca8268
commit 8e7670e501
3 changed files with 23 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -411,13 +411,14 @@ export const FormControlMixin = dedupeMixin(
* (validation) feedback message
*
* Modifiers:
* - {state} .state-disabled : when .form-control (<input>, <textarea> etc.) has disabled set
* - {state} [disabled] when .form-control (<input>, <textarea> etc.) has disabled set
* to true
* - {state} .state-focused: when .form-control (<input>, <textarea> etc.) <input> has focus
* - {state} .state-filled: whether <input> has a value
* - {state} .state-touched: whether the user had blurred the field once
* - {state} .state-dirty: whether the value has changed since initial value
* - {state} [filled] whether <input> has a value
* - {state} [touched] whether the user had blurred the field once
* - {state} [dirty] whether the value has changed since initial value
*
* TODO: update states below
* - {state} .state-focused: when .form-control (<input>, <textarea> etc.) <input> has focus
* - {state} .state-invalid: when input has error(s) (regardless of whether they should be
* shown to the user)
* - {state} .state-error: when input has error(s) and this/these should be shown to the user
@ -456,12 +457,12 @@ export const FormControlMixin = dedupeMixin(
display: block;
}
:host(.state-disabled) {
:host([disabled]) {
pointer-events: none;
}
:host(.state-disabled) .form-field__label ::slotted(*),
:host(.state-disabled) .form-field__help-text ::slotted(*) {
:host([disabled]) .form-field__label ::slotted(*),
:host([disabled]) .form-field__help-text ::slotted(*) {
color: var(--disabled-text-color, #adadad);
}
@ -478,8 +479,8 @@ export const FormControlMixin = dedupeMixin(
display: flex;
}
/***** {state} .state-disabled *****/
:host(.state-disabled) .input-group ::slotted(slot='input') {
/***** {state} :disabled *****/
:host([disabled]) .input-group ::slotted(slot='input') {
color: var(--disabled-text-color, #adadad);
}

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

@ -128,14 +128,10 @@ export class LionField extends FormControlMixin(
updated(changedProps) {
super.updated(changedProps);
if (changedProps.has('disabled')) {
if (this.disabled) {
this._inputNode.disabled = true;
this.classList.add('state-disabled'); // eslint-disable-line wc/no-self-class
} else {
this._inputNode.disabled = false;
this.classList.remove('state-disabled'); // eslint-disable-line wc/no-self-class
}
if (changedProps.has('disabled') && this.disabled) {
this._inputNode.disabled = true;
} else if (changedProps.has('disabled')) {
this._inputNode.disabled = false;
}
if (changedProps.has('name')) {
@ -195,7 +191,9 @@ export class LionField extends FormControlMixin(
super._onValueChanged();
}
// For styling purposes, make it known the input field is not empty
this.classList[value ? 'add' : 'remove']('state-filled');
if (this._inputNode) {
this[value ? 'setAttribute' : 'removeAttribute']('filled', '');
}
}
/**

14
packages/field/test/lion-field.test.js
View file

@ -155,15 +155,15 @@ describe('<lion-field>', () => {
// TODO: find out if we could put all listeners on this.value (instead of this._inputNode.value)
// and make it act on this.value again
it('has a class "state-filled" if this.value is filled', async () => {
it('has an attribute filled if this.value is filled', async () => {
const el = await fixture(html`<${tag} value="filled">${inputSlot}</${tag}>`);
expect(el.classList.contains('state-filled')).to.equal(true);
expect(el.hasAttribute('filled')).to.equal(true);
el.value = '';
await el.updateComplete;
expect(el.classList.contains('state-filled')).to.equal(false);
expect(el.hasAttribute('filled')).to.equal(false);
el.value = 'bla';
await el.updateComplete;
expect(el.classList.contains('state-filled')).to.equal(true);
expect(el.hasAttribute('filled')).to.equal(true);
});
it('preserves the caret position on value change for native text fields (input|textarea)', async () => {
@ -179,20 +179,16 @@ describe('<lion-field>', () => {
});
// TODO: add pointerEvents test for disabled
it('has a class "state-disabled"', async () => {
it('is disabled when disabled property is passed', async () => {
const el = await fixture(html`<${tag}>${inputSlot}</${tag}>`);
expect(el.classList.contains('state-disabled')).to.equal(false);
expect(el._inputNode.hasAttribute('disabled')).to.equal(false);
el.disabled = true;
await el.updateComplete;
await aTimeout();
expect(el.classList.contains('state-disabled')).to.equal(true);
expect(el._inputNode.hasAttribute('disabled')).to.equal(true);
const disabledel = await fixture(html`<${tag} disabled>${inputSlot}</${tag}>`);
expect(disabledel.classList.contains('state-disabled')).to.equal(true);
expect(disabledel._inputNode.hasAttribute('disabled')).to.equal(true);
});