From 8e7670e501a1000b2ba39d31b9f5c56cf747bbf1 Mon Sep 17 00:00:00 2001
From: Aymen Ben Amor <aymen.ben.amor@ing.com>
Date: Mon, 3 Feb 2020 15:24:02 +0100
Subject: [PATCH] fix(field): replace state-disabled/filled css classes with
 attributes

---
 packages/field/src/FormControlMixin.js | 21 +++++++++++----------
 packages/field/src/LionField.js        | 16 +++++++---------
 packages/field/test/lion-field.test.js | 14 +++++---------
 3 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/packages/field/src/FormControlMixin.js b/packages/field/src/FormControlMixin.js
index fcd8fa9f0..8133e6ae3 100644
--- a/packages/field/src/FormControlMixin.js
+++ b/packages/field/src/FormControlMixin.js
@@ -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);
             }
 
diff --git a/packages/field/src/LionField.js b/packages/field/src/LionField.js
index 8e05f5863..39a560026 100644
--- a/packages/field/src/LionField.js
+++ b/packages/field/src/LionField.js
@@ -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', '');
+    }
   }
 
   /**
diff --git a/packages/field/test/lion-field.test.js b/packages/field/test/lion-field.test.js
index e23bad50f..c14daaccf 100644
--- a/packages/field/test/lion-field.test.js
+++ b/packages/field/test/lion-field.test.js
@@ -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);
   });