feat(input): add the readonly styles for the ionic theme (#29483)

Issue number: internal

---------

## What is the current behavior?
There are no custom styles when readonly is added to an input.

## What is the new behavior?
- Applies an `input-readonly` class when the `readonly` property is
`true`
- Styles the class in the `ionic` theme to match the design requirements
for readonly inputs
- Adds screenshot tests for the readonly style for an unset `fill` and
`"outline"` fill

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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

@@ -7,6 +7,8 @@
 // --------------------------------------------------
 
 :host {
+  // TODO(ROU-5477): use design token here when it is added
+  --color: #121212;
   --border-width: #{$ionic-border-size-small};
   --border-color: #{$ionic-color-neutral-300};
   --highlight-color-valid: #{$ionic-color-success-400};
@@ -178,6 +180,13 @@
   opacity: 0.6;
 }
 
+// Input - Readonly
+// ----------------------------------------------------------------
+
+:host(.input-readonly) {
+  --background: #{tokens.$ionic-color-neutral-10};
+}
+
 // Input Highlight
 // ----------------------------------------------------------------
 

core/src/components/input/input.tsx

@@ -808,6 +808,7 @@ export class Input implements ComponentInterface {
           'in-item': inItem,
           'in-item-color': hostContext('ion-item.ion-color', this.el),
           'input-disabled': disabled,
+          'input-readonly': readonly,
         })}
       >
         {/**

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

@@ -50,7 +50,28 @@
           <div class="grid-item">
             <h2>No Fill</h2>
 
-            <ion-input label="Email" value="hi@ionic.io" readonly="true"></ion-input>
+            <ion-input
+              label="Email"
+              value="hi@ionic.io"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              readonly="true"
+            ></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline</h2>
+
+            <ion-input
+              fill="outline"
+              label="Email"
+              value="hi@ionic.io"
+              helper-text="Enter an email"
+              counter="true"
+              maxlength="20"
+              readonly="true"
+            ></ion-input>
           </div>
         </div>
 

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

@@ -38,7 +38,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
             `
             <div class="container">
               <ion-input
-                label="Email" 
+                label="Email"
                 value="hi@ionic.io"
                 helper-text="Enter an email"
                 counter="true"
@@ -55,7 +55,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
                 class="ion-valid has-focus"
                 disabled="true"
               ></ion-input>
-  
+
               <ion-input
                 label="Email"
                 value="hi@ionic.io"
@@ -92,7 +92,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
             <div class="container">
               <ion-input
                 fill="outline"
-                label="Email" 
+                label="Email"
                 value="hi@ionic.io"
                 helper-text="Enter an email"
                 counter="true"
@@ -110,7 +110,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
                 class="ion-valid has-focus"
                 disabled="true"
               ></ion-input>
-  
+
               <ion-input
                 fill="outline"
                 label="Email"
@@ -149,7 +149,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
           `
           <div class="container">
             <ion-input
-              label="Email" 
+              label="Email"
               value="hi@ionic.io"
               helper-text="Enter an email"
               counter="true"
@@ -159,7 +159,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
 
             <ion-input
               fill="outline"
-              label="Email" 
+              label="Email"
               value="hi@ionic.io"
               helper-text="Enter an email"
               counter="true"
@@ -175,5 +175,54 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
         await expect(container).toHaveScreenshot(screenshot(`input-focused`));
       });
     });
+
+    test.describe(title('readonly'), () => {
+      test.describe(title('no fill'), () => {
+        test('should render readonly 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"
+                readonly="true"
+              ></ion-input>
+            </div>
+          `,
+            config
+          );
+
+          const container = page.locator('.container');
+          await expect(container).toHaveScreenshot(screenshot(`input-readonly-no-fill`));
+        });
+      });
+
+      test.describe(title('outline'), () => {
+        test('should render readonly input correctly', async ({ page }) => {
+          await page.setContent(
+            `
+            <div class="container">
+              <ion-input
+                fill="outline"
+                label="Email"
+                value="hi@ionic.io"
+                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-outline`));
+        });
+      });
+    });
   });
 });