refactor(associated): invalid property no longer reflects to attribute

Author: rkaraivanov

src/components/checkbox/checkbox.spec.ts

@@ -125,22 +125,6 @@ describe('Checkbox', () => {
       expect(input).dom.to.equal(`<input value="${value}"/>`, DIFF_OPTIONS);
     });
 
-    it('should set the checkbox invalid property correctly', async () => {
-      element.invalid = true;
-      await elementUpdated(element);
-
-      expect(element).dom.to.equal(
-        `<igc-checkbox invalid label-position="after">${label}</igc-checkbox>`
-      );
-
-      element.invalid = false;
-      await elementUpdated(element);
-
-      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/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/common/mixins/forms/associated.ts

@@ -96,7 +96,7 @@ function BaseFormAssociated<T extends Constructor<LitElement>>(base: T) {
      * @attr
      * @default false
      */
-    @property({ type: Boolean, reflect: true })
+    @property({ type: Boolean })
     public set invalid(value: boolean) {
       this._isExternalInvalid = value;
       this._setInvalidStyles();

src/components/radio/radio.spec.ts

@@ -76,20 +76,6 @@ describe('Radio Component', () => {
       );
     });
 
-    it('sets invalid properly', async () => {
-      radio.invalid = true;
-      await elementUpdated(radio);
-      expect(radio).dom.to.equal(
-        `<igc-radio invalid label-position="after">${label}</igc-radio>`
-      );
-
-      radio.invalid = false;
-      await elementUpdated(radio);
-      expect(radio).dom.to.equal(
-        `<igc-radio label-position="after">${label}</igc-radio>`
-      );
-    });
-
     it('sets the name property successfully', async () => {
       const name = 'fruit';
 

stories/input.stories.ts

@@ -278,6 +278,7 @@ export const Validation: Story = {
     <form @submit=${formSubmitHandler}>
       <fieldset>
         <igc-input
+          name="min-length-value"
           label="Validate without validation slots and helper text"
           minlength="3"
         >
@@ -286,14 +287,21 @@ export const Validation: Story = {
       </fieldset>
 
       <fieldset>
-        <igc-input label="Username" required>
+        <igc-input name="username" label="Username" required autocomplete="off">
           <p slot="helper-text">The username you will use in the platform</p>
           <p slot="value-missing">The username is required!</p>
         </igc-input>
       </fieldset>
 
       <fieldset>
-        <igc-input id="customError" label="Email" type="email" required>
+        <igc-input
+          name="email"
+          id="customError"
+          label="Email"
+          type="email"
+          required
+          autocomplete="off"
+        >
           <p slot="helper-text">
             A valid email for restoring credentials
             <strong>(not show in your profile)!</strong>
@@ -305,6 +313,8 @@ export const Validation: Story = {
 
       <fieldset>
         <igc-input
+          name="password"
+          autocomplete="off"
           label="Password"
           type="password"
           required