fix(input): add focused state for ionic theme (#29342)

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>

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

@@ -8,8 +8,6 @@
   --border-radius: #{$ionic-border-radius-rounded-small};
   --padding-start: 12px;
   --padding-end: 12px;
-  --placeholder-color: #{$ionic-color-neutral-600};
-  --placeholder-opacity: 1;
 }
 
 :host(.input-fill-outline.input-size-large.input-shape-round) {

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

@@ -11,6 +11,8 @@
   --border-color: #{$ionic-color-neutral-300};
   --highlight-color-valid: #{$ionic-color-success-400};
   --highlight-color-invalid: #{$ionic-color-error-400};
+  --placeholder-color: #{$ionic-color-neutral-500};
+  --placeholder-opacity: 1;
   --text-color-invalid: #{$ionic-color-error-600};
 }
 
@@ -91,6 +93,11 @@
   color: var(--text-color-invalid);
 }
 
+:host(.has-focus.ion-valid),
+:host(.ion-touched.ion-invalid) {
+  --border-width: #{tokens.$ionic-border-size-small};
+}
+
 // Input Hover
 // ----------------------------------------------------------------
 
@@ -137,3 +144,11 @@
 :host(.input-disabled.ion-color) .helper-text {
   opacity: 0.6;
 }
+
+// Input Focus
+// ----------------------------------------------------------------
+
+:host(.has-focus) {
+  --border-color: #{tokens.$ionic-color-primary};
+  --border-width: #{tokens.$ionic-border-size-medium};
+}

core/src/components/input/test/states/index.html

@@ -19,7 +19,7 @@
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
-      h3 {
+      h2 {
         font-size: 12px;
         font-weight: normal;
 
@@ -46,19 +46,18 @@
 
       <ion-content id="content" class="ion-padding">
         <h1>Readonly</h1>
-        <h2>No Fill</h2>
         <div class="grid">
           <div class="grid-item">
-            <h3>Default</h3>
+            <h2>No Fill</h2>
 
             <ion-input label="Email" value="hi@ionic.io" readonly="true"></ion-input>
           </div>
         </div>
+
         <h1>Disabled</h1>
+        <div class="grid">
+          <div class="grid-item">
             <h2>No Fill</h2>
-        <div class="grid">
-          <div class="grid-item">
-            <h3>Default</h3>
 
             <ion-input
               label="Email"
@@ -71,7 +70,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Valid</h3>
+            <h2>No Fill, Valid</h2>
 
             <ion-input
               label="Email"
@@ -85,7 +84,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Invalid</h3>
+            <h2>No Fill, Invalid</h2>
 
             <ion-input
               label="Email"
@@ -99,7 +98,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Color (ionic theme only)</h3>
+            <h2>No Fill, Color (ionic theme only)</h2>
 
             <ion-input
               label="Email"
@@ -113,10 +112,9 @@
           </div>
         </div>
 
+        <div class="grid">
+          <div class="grid-item">
             <h2>Outline</h2>
-        <div class="grid">
-          <div class="grid-item">
-            <h3>Default</h3>
 
             <ion-input
               fill="outline"
@@ -130,7 +128,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Valid</h3>
+            <h2>Outline, Valid</h2>
 
             <ion-input
               fill="outline"
@@ -145,7 +143,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Invalid</h3>
+            <h2>Outline, Invalid</h2>
 
             <ion-input
               fill="outline"
@@ -160,7 +158,7 @@
           </div>
 
           <div class="grid-item">
-            <h3>Color (ionic theme only)</h3>
+            <h2>Outline, Color (ionic theme only)</h2>
 
             <ion-input
               fill="outline"
@@ -174,6 +172,21 @@
             ></ion-input>
           </div>
         </div>
+
+        <h1>Focused</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Fill</h2>
+
+            <ion-input label="Email" value="hi@ionic.io" class="has-focus"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline</h2>
+
+            <ion-input fill="outline" label="Email" value="hi@ionic.io" class="has-focus"></ion-input>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>

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

@@ -142,5 +142,38 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
         });
       });
     });
+
+    test.describe(title('focused'), () => {
+      test('should render focused input correctly', async ({ page }) => {
+        await page.setContent(
+          `
+          <div class="container">
+            <ion-input
+              label="Email" 
+              value="hi@ionic.io"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              class="has-focus"
+            ></ion-input>
+
+            <ion-input
+              fill="outline"
+              label="Email" 
+              value="hi@ionic.io"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              class="has-focus"
+            ></ion-input>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('.container');
+        await expect(container).toHaveScreenshot(screenshot(`input-focused`));
+      });
+    });
   });
 });