- remove highlight styles for ionic theme;

- add tests for ionic solid input;

Author: JoaoFerreira-FrontEnd

core/src/components/input/input.ionic.scss

@@ -331,24 +331,6 @@
   --background: #{globals.$ion-primitives-neutral-100};
 }
 
-// Input Highlight
-// ----------------------------------------------------------------
-
-.input-highlight {
-  @include globals.position(null, null, -1px, 0);
-
-  position: absolute;
-
-  width: 100%;
-  height: globals.$ion-border-size-050;
-
-  transform: scale(0);
-
-  transition: transform globals.$ion-transition-time-200;
-
-  background: var(--border-color);
-}
-
 // Input Focus
 // ----------------------------------------------------------------
 

core/src/components/input/test/states/input.e2e.ts

@@ -137,6 +137,62 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
             config
           );
 
+          const container = page.locator('.container');
+          await expect(container).toHaveScreenshot(screenshot(`input-disabled-outline`));
+        });
+      });
+      test.describe(title('solid'), () => {
+        test('should render disabled input correctly', async ({ page }) => {
+          await page.setContent(
+            `
+            <div class="container">
+              <ion-input
+                fill="solid"
+                label="Email"
+                value="[email protected]"
+                helper-text="Enter an email"
+                counter="true"
+                maxlength="20"
+                disabled="true"
+              ></ion-input>
+
+              <ion-input
+                fill="solid"
+                label="Email"
+                value="[email protected]"
+                helper-text="Enter an email"
+                counter="true"
+                maxlength="20"
+                class="ion-valid has-focus"
+                disabled="true"
+              ></ion-input>
+
+              <ion-input
+                fill="solid"
+                label="Email"
+                value="[email protected]"
+                error-text="Please enter a valid email"
+                counter="true"
+                maxlength="20"
+                class="ion-touched ion-invalid"
+                disabled="true"
+              ></ion-input>
+
+              <ion-input
+                fill="solid"
+                label="Email"
+                value="[email protected]"
+                helper-text="Enter an email"
+                counter="true"
+                maxlength="20"
+                disabled="true"
+                color="warning"
+              ></ion-input>
+            </div>
+          `,
+            config
+          );
+
           const container = page.locator('.container');
           await expect(container).toHaveScreenshot(screenshot(`input-disabled-outline`));
         });
@@ -166,6 +222,16 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
               maxlength="20"
               class="has-focus"
             ></ion-input>
+
+            <ion-input
+              fill="solid"
+              label="Email"
+              value="[email protected]"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              class="has-focus"
+            ></ion-input>
           </div>
         `,
           config
@@ -223,6 +289,30 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
           await expect(container).toHaveScreenshot(screenshot(`input-readonly-outline`));
         });
       });
+
+      test.describe(title('solid'), () => {
+        test('should render readonly input correctly', async ({ page }) => {
+          await page.setContent(
+            `
+            <div class="container">
+              <ion-input
+                fill="solid"
+                label="Email"
+                value="[email protected]"
+                helper-text="Enter an email"
+                counter="true"
+                maxlength="20"
+                readonly="true"
+              ></ion-input>
+            </div>
+          `,
+            config
+          );
+
+          const container = page.locator('.container');
+          await expect(container).toHaveScreenshot(screenshot(`input-readonly-solid`));
+        });
+      });
     });
   });
 });