refactor: Form associated components validity behavior (#1786)

Changed how validation is performed in the base form associated mixin class.

Before, validation was based on an internal `_dirty` flag and the `hasUpdated`
state of the form associated element. However, this was awkward when the element
is rendered/updated multiple times (ahem, React) and did not align with the behavior
of native browser form elements, more precisely the `:user-invalid` state.

Now, validation will try to stay as closely to the native `:user-invalid` behavior as possible,
with some little changes to accommodate for our own UX patterns and designs.

The important parts of the changes are the following:
* the `invalid` property **no longer reflects** back as an attribute on the element 
  and should not be used in styling rules.
* a new custom state, `ig-invalid` is exposed for styling rules and custom logic.
* Moved all the ElementInternals handling into the new controller.
* Fixed several bugs around styles and invalid states.
---------

Co-authored-by: sivanova <[email protected]>
Co-authored-by: Silvia Ivanova <[email protected]>

Author: rkaraivanov

src/components/checkbox/checkbox-base.ts

@@ -81,7 +81,6 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   @property({ type: Boolean })
   public set checked(value: boolean) {
     this._formValue.setValueAndFormState(value);
-    this._validate();
   }
 
   public get checked(): boolean {
@@ -119,13 +118,10 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   protected _handleClick(event: PointerEvent): void {
     event.stopPropagation();
 
+    this._setTouchedState();
     this.checked = !this.checked;
     this.emitEvent('igcChange', {
       detail: { checked: this.checked, value: this.value },
     });
   }
-
-  protected _handleFocus(): void {
-    this._dirty = true;
-  }
 }

src/components/checkbox/checkbox.spec.ts

@@ -5,9 +5,11 @@ import { defineComponents } from '../common/definitions/defineComponents.js';
 import {
   createFormAssociatedTestBed,
   isFocused,
+} from '../common/utils.spec.js';
+import {
   runValidationContainerTests,
   type ValidationContainerTestsParams,
-} from '../common/utils.spec.js';
+} from '../common/validity-helpers.spec.js';
 import IgcCheckboxComponent from './checkbox.js';
 
 describe('Checkbox', () => {
@@ -123,18 +125,6 @@ describe('Checkbox', () => {
       expect(input).dom.to.equal(`<input value="${value}"/>`, DIFF_OPTIONS);
     });
 
-    it('should set the checkbox invalid property correctly', () => {
-      element.invalid = true;
-      expect(element).dom.to.equal(
-        `<igc-checkbox invalid label-position="after">${label}</igc-checkbox>`
-      );
-
-      element.invalid = false;
-      expect(element).dom.to.equal(
-        `<igc-checkbox label-position="after">${label}</igc-checkbox>`
-      );
-    });
-
     it('should correctly report validity status', () => {
       element.required = true;
       expect(element.reportValidity()).to.be.false;

src/components/checkbox/checkbox.ts

@@ -108,7 +108,7 @@ export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent {
           aria-labelledby=${labelledBy ? labelledBy : this._labelId}
           aria-describedby=${describedBy}
           @click=${this._handleClick}
-          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
         />
         <span part=${partMap({ control: true, checked })}>
           <span part=${partMap({ indicator: true, checked })}>

src/components/checkbox/switch.spec.ts

@@ -87,22 +87,6 @@ describe('Switch', () => {
       expect(input).dom.to.equal(`<input value="${value}"/>`, DIFF_OPTIONS);
     });
 
-    it('should set the switch invalid property correctly', async () => {
-      element.invalid = true;
-      await elementUpdated(element);
-
-      expect(element).dom.to.equal(
-        `<igc-switch invalid label-position="after">${label}</igc-switch>`
-      );
-
-      element.invalid = false;
-      await elementUpdated(element);
-
-      expect(element).dom.to.equal(
-        `<igc-switch label-position="after">${label}</igc-switch>`
-      );
-    });
-
     it('should correctly report validity status', () => {
       element.required = true;
       expect(element.reportValidity()).to.be.false;

src/components/checkbox/switch.ts

@@ -58,7 +58,7 @@ export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
           .checked=${live(checked)}
           aria-labelledby=${labelledBy ? labelledBy : this._labelId}
           @click=${this._handleClick}
-          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
         />
         <span
           part=${partMap({

src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss

@@ -8,8 +8,8 @@ $theme: $bootstrap;
     @include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled]):state(ig-invalid)),
+:host(:not(:disabled):state(ig-invalid)) {
     [part~='indicator'] {
         stroke: black;
     }

src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss

@@ -8,7 +8,7 @@ $theme: $fluent;
     @include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
 }
 
-:host([invalid]:hover) {
+:host(:state(ig-invalid):hover) {
     [part~='indicator'] {
         stroke: color('error', 500);
     }

src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss

@@ -100,8 +100,8 @@ $theme: $bootstrap;
     }
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled]):state(ig-invalid)),
+:host(:not(:disabled):state(ig-invalid)) {
     [part~='control'] {
         &::after {
             box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'error-color');
@@ -123,10 +123,10 @@ $theme: $bootstrap;
     }
 }
 
-:host(:hover:not([disabled])[invalid]),
-:host(:hover:not(:disabled)[invalid]),
-:host(:hover:not([disabled])[invalid][indeterminate]),
-:host(:hover:not(:disabled)[invalid][indeterminate]) {
+:host(:hover:not([disabled]):state(ig-invalid)),
+:host(:hover:not(:disabled):state(ig-invalid)),
+:host(:hover:not([disabled]):state(ig-invalid)[indeterminate]),
+:host(:hover:not(:disabled):state(ig-invalid)[indeterminate]) {
     [part~='control'],
     [part='control checked'] {
         &::after {
@@ -141,28 +141,28 @@ $theme: $bootstrap;
     }
 }
 
-:host(:not([disabled])[invalid][indeterminate]),
-:host(:not(:disabled)[invalid][indeterminate]) {
+:host(:not([disabled]):state(ig-invalid)[indeterminate]),
+:host(:not(:disabled):state(ig-invalid)[indeterminate]) {
     [part~='control'] {
         &::after {
             background: var-get($theme, 'error-color');
         }
     }
 }
 
-:host(:hover:not([disabled])[invalid][indeterminate]),
-:host(:hover:not(:disabled)[invalid][indeterminate]) {
+:host(:hover:not([disabled]):state(ig-invalid)[indeterminate]),
+:host(:hover:not(:disabled):state(ig-invalid)[indeterminate]) {
     [part~='control'] {
         &::after {
             background: var-get($theme, 'error-color-hover');
         }
     }
 }
 
-:host(:focus-visible:not([disabled])[invalid]) [part~='control'],
-:host(:focus-visible:not(:disabled)[invalid]) [part~='control'],
-:host(:not([disabled])[invalid]) [part~='focused'] [part~='control'],
-:host(:not(:disabled)[invalid]) [part~='focused'] [part~='control'] {
+:host(:focus-visible:not([disabled]):state(ig-invalid)) [part~='control'],
+:host(:focus-visible:not(:disabled):state(ig-invalid)) [part~='control'],
+:host(:not([disabled]):state(ig-invalid)) [part~='focused'] [part~='control'],
+:host(:not(:disabled):state(ig-invalid)) [part~='focused'] [part~='control'] {
     box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color-error');
 }
 

src/components/checkbox/themes/shared/checkbox/checkbox.common.scss

@@ -17,8 +17,8 @@ $theme: $base;
     stroke: var-get($theme, 'tick-color');
 }
 
-:host(:not([disabled])[invalid]),
-:host(:not(:disabled)[invalid]) {
+:host(:not([disabled]):state(ig-invalid)),
+:host(:not(:disabled):state(ig-invalid)) {
     [part~='label'] {
         color: var-get($theme, 'error-color');
     }

src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss

@@ -107,7 +107,7 @@ $disabled-color: var-get($theme, 'disabled-color');
     }
 }
 
-:host([invalid]:not([disabled])) {
+:host(:state(ig-invalid):not([disabled])) {
     [part~='control'] {
         &::after {
             box-shadow: inset 0 0 0 rem(1px) $invalid-color;
@@ -121,7 +121,7 @@ $disabled-color: var-get($theme, 'disabled-color');
     }
 }
 
-:host([invalid]:focus-visible) {
+:host(:state(ig-invalid):focus-visible) {
     [part~='control'] {
         &::after {
             box-shadow: inset 0 0 0 rem(1px) $invalid-hover-color;
@@ -135,7 +135,7 @@ $disabled-color: var-get($theme, 'disabled-color');
     }
 }
 
-:host([invalid]:hover) {
+:host(:state(ig-invalid):hover) {
     [part~='indicator'] {
         stroke: $invalid-color;
     }
@@ -157,8 +157,8 @@ $disabled-color: var-get($theme, 'disabled-color');
     }
 }
 
-:host(:not([disabled])[invalid][indeterminate]),
-:host(:not(:disabled)[invalid][indeterminate]) {
+:host(:not([disabled]):state(ig-invalid)[indeterminate]),
+:host(:not(:disabled):state(ig-invalid)[indeterminate]) {
     [part~='control'] {
         &::before {
             background: $invalid-color;
@@ -184,8 +184,8 @@ $disabled-color: var-get($theme, 'disabled-color');
     }
 }
 
-:host(:hover:not([disabled])[invalid][indeterminate]),
-:host(:hover:not(:disabled)[invalid][indeterminate]) {
+:host(:hover:not([disabled]):state(ig-invalid)[indeterminate]),
+:host(:hover:not(:disabled):state(ig-invalid)[indeterminate]) {
     [part~='control'] {
         &::before {
             background: $invalid-hover-color;
@@ -198,13 +198,6 @@ $disabled-color: var-get($theme, 'disabled-color');
     }
 }
 
-:host([invalid][checked]) [part='control checked'] {
-    &::after {
-        box-shadow: inset 0 0 0 rem(1px) $invalid-color;
-        background: $invalid-color;
-    }
-}
-
 [part~='focused'] {
     position: relative;
 
@@ -250,33 +243,3 @@ $disabled-color: var-get($theme, 'disabled-color');
         }
     }
 }
-
-:host([disabled][invalid]),
-:host(:disabled[invalid]) {
-    [part~='control'] {
-        &::after {
-            box-shadow: inset 0 0 0 rem(1px) $disabled-color;
-        }
-    }
-
-    [part='control checked'] {
-        &::after {
-            background: $disabled-color;
-        }
-    }
-}
-
-:host([disabled][invalid][indeterminate]),
-:host(:disabled[invalid][indeterminate]) {
-    [part~='control'] {
-        &::before {
-            background: $disabled-color;
-        }
-
-        &::after {
-            box-shadow: inset 0 0 0 rem(1px) $disabled-color;
-            background: transparent;
-        }
-    }
-}
-