chore(fieldset): replaced CssClassMixin by DisabledMixin

packages/fieldset/src/LionFieldset.js

@@ -1,6 +1,6 @@
 import { SlotMixin, html } from '@lion/core';
 import { LionLitElement } from '@lion/core/src/LionLitElement.js';
-import { CssClassMixin } from '@lion/core/src/CssClassMixin.js';
+import { DisabledMixin } from '@lion/core/src/DisabledMixin.js';
 import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
 import { ValidateMixin } from '@lion/validate';
 import { FormControlMixin, FormRegistrarMixin } from '@lion/field';
@@ -15,16 +15,10 @@ const pascalCase = str => str.charAt(0).toUpperCase() + str.slice(1);
  * @extends LionLitElement
  */
 export class LionFieldset extends FormRegistrarMixin(
-  FormControlMixin(ValidateMixin(CssClassMixin(SlotMixin(ObserverMixin(LionLitElement))))),
+  FormControlMixin(ValidateMixin(DisabledMixin(SlotMixin(ObserverMixin(LionLitElement))))),
 ) {
   static get properties() {
     return {
-      ...super.properties,
-      disabled: {
-        type: Boolean,
-        reflect: true,
-        nonEmptyToClass: 'state-disabled',
-      },
       name: {
         type: String,
       },
@@ -35,13 +29,6 @@ export class LionFieldset extends FormRegistrarMixin(
     };
   }
 
-  static get asyncObservers() {
-    return {
-      ...super.asyncObservers,
-      _onDisabledChanged: ['disabled'],
-    };
-  }
-
   get inputElement() {
     return this;
   }
@@ -121,6 +108,36 @@ export class LionFieldset extends FormRegistrarMixin(
     this.removeEventListener('dirty-changed', this._updateDirtyClass);
   }
 
+  updated(changedProps) {
+    super.updated(changedProps);
+
+    if (changedProps.has('disabled')) {
+      if (this.disabled) {
+        this.__requestChildrenToBeDisabled();
+        this.classList.add('state-disabled'); // eslint-disable-line wc/no-self-class
+      } else {
+        this.__retractRequestChildrenToBeDisabled();
+        this.classList.remove('state-disabled'); // eslint-disable-line wc/no-self-class
+      }
+    }
+  }
+
+  __requestChildrenToBeDisabled() {
+    this.formElementsArray.forEach(child => {
+      if (child.makeRequestToBeDisabled) {
+        child.makeRequestToBeDisabled();
+      }
+    });
+  }
+
+  __retractRequestChildrenToBeDisabled() {
+    this.formElementsArray.forEach(child => {
+      if (child.retractRequestToBeDisabled) {
+        child.retractRequestToBeDisabled();
+      }
+    });
+  }
+
   // eslint-disable-next-line class-methods-use-this
   inputGroupTemplate() {
     return html`
@@ -251,13 +268,6 @@ export class LionFieldset extends FormRegistrarMixin(
     this.classList[this.dirty ? 'add' : 'remove']('state-dirty');
   }
 
-  _onDisabledChanged({ disabled }, { disabled: oldDisabled }) {
-    // do not propagate/override inital disabled value on nested form elements
-    if (typeof oldDisabled !== 'undefined') {
-      this._setValueForAllFormElements('disabled', disabled);
-    }
-  }
-
   _setRole(role) {
     this.setAttribute('role', role || 'group');
   }
@@ -303,7 +313,7 @@ export class LionFieldset extends FormRegistrarMixin(
 
     if (this.disabled) {
       // eslint-disable-next-line no-param-reassign
-      child.disabled = true;
+      child.makeRequestToBeDisabled();
     }
     if (name.substr(-2) === '[]') {
       if (!Array.isArray(this.formElements[name])) {

packages/fieldset/stories/index.stories.js

@@ -31,6 +31,30 @@ storiesOf('Forms|Fieldset', module)
       </lion-fieldset>
     `,
   )
+  .add('Disabled', () => {
+    function toggleDisabled() {
+      const fieldset = document.querySelector('#fieldset');
+      fieldset.disabled = !fieldset.disabled;
+    }
+    return html`
+      <lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
+        <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+        <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+        <lion-fieldset name="nameGroup2" label="Name">
+          <lion-input
+            name="FirstName2"
+            label="First Name"
+            .modelValue=${'Foo'}
+            disabled
+          ></lion-input>
+          <lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
+        </lion-fieldset>
+      </lion-fieldset>
+      <button @click=${toggleDisabled}>
+        Toggle disabled
+      </button>
+    `;
+  })
   .add(
     'Sub Fieldsets Data',
     () => html`

packages/fieldset/test/lion-fieldset.test.js

@@ -223,12 +223,11 @@ describe('<lion-fieldset>', () => {
     expect(el.formElements['hobbies[]'][1].disabled).to.equal(false);
   });
 
-  it('does not propagate/override inital disabled value on nested form elements', async () => {
+  it('does not propagate/override initial disabled value on nested form elements', async () => {
     const el = await fixture(
       `<${tagString}><${tagString} name="sub" disabled>${inputSlotString}</${tagString}></${tagString}>`,
     );
-    await nextFrame();
-
+    await el.updateComplete;
     expect(el.disabled).to.equal(false);
     expect(el.formElements.sub.disabled).to.equal(true);
     expect(el.formElements.sub.formElements.color.disabled).to.equal(true);
@@ -236,6 +235,16 @@ describe('<lion-fieldset>', () => {
     expect(el.formElements.sub.formElements['hobbies[]'][1].disabled).to.equal(true);
   });
 
+  // classes are added only for backward compatibility - they are deprecated
+  it('sets a state-disabled class when disabled', async () => {
+    const el = await fixture(`<${tagString} disabled>${inputSlotString}</${tagString}>`);
+    await nextFrame();
+    expect(el.classList.contains('state-disabled')).to.equal(true);
+    el.disabled = false;
+    await nextFrame();
+    expect(el.classList.contains('state-disabled')).to.equal(false);
+  });
+
   describe('validation', () => {
     it('validates on init', async () => {
       function isCat(value) {