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

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

@ -128,14 +128,10 @@ export class LionField extends FormControlMixin(
updated(changedProps) { updated(changedProps) {
super.updated(changedProps); super.updated(changedProps);
if (changedProps.has('disabled')) { if (changedProps.has('disabled') && this.disabled) {
if (this.disabled) {
this._inputNode.disabled = true; this._inputNode.disabled = true;
this.classList.add('state-disabled'); // eslint-disable-line wc/no-self-class } else if (changedProps.has('disabled')) {
} else {
this._inputNode.disabled = false; this._inputNode.disabled = false;
this.classList.remove('state-disabled'); // eslint-disable-line wc/no-self-class
}
} }
if (changedProps.has('name')) { if (changedProps.has('name')) {
@ -195,7 +191,9 @@ export class LionField extends FormControlMixin(
super._onValueChanged(); super._onValueChanged();
} }
// For styling purposes, make it known the input field is not empty // 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) // 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 // 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}>`); 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 = ''; el.value = '';
await el.updateComplete; await el.updateComplete;
expect(el.classList.contains('state-filled')).to.equal(false); expect(el.hasAttribute('filled')).to.equal(false);
el.value = 'bla'; el.value = 'bla';
await el.updateComplete; 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 () => { 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 // 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}>`); 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); expect(el._inputNode.hasAttribute('disabled')).to.equal(false);
el.disabled = true; el.disabled = true;
await el.updateComplete; await el.updateComplete;
await aTimeout(); await aTimeout();
expect(el.classList.contains('state-disabled')).to.equal(true);
expect(el._inputNode.hasAttribute('disabled')).to.equal(true); expect(el._inputNode.hasAttribute('disabled')).to.equal(true);
const disabledel = await fixture(html`<${tag} disabled>${inputSlot}</${tag}>`); 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); expect(disabledel._inputNode.hasAttribute('disabled')).to.equal(true);
}); });