ionic-team · liamdebeasi · Nov 8, 2022 · Oct 31, 2022 · Oct 31, 2022 · Oct 31, 2022
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
@@ -127,10 +127,11 @@
   }
 }
 
-.native-input[disabled] {
-  opacity: .4;
-}
 
+:host(.legacy-input) .native-input[disabled],
+:host([disabled]) {
+  opacity: 0.4;
+}
 
 
 // Input Cover: Unfocused
@@ -295,12 +296,11 @@
 
 .input-wrapper label {
   /**
-   * The padding on the label adds visual
-   * space between the label and the input.
-   * We use padding so that this space can still
-   * be clicked to focus the input.
+   * The margin between the label and
+   * the input should be on the end
+   * when the label sits at the start.
    */
-  @include padding(0, 8px, 0, 0);
+  @include margin(0, 8px, 0, 0);
 
   /**
    * This causes the label to take up
@@ -343,13 +343,12 @@
 }
 
 /**
- * The padding on the label adds visual
- * space between the label and the input.
- * We use padding so that this space can still
- * be clicked to focus the input.
+ * The margin between the label and
+ * the input should be on the start
+ * when the label sits at the end.
  */
 :host(.input-label-placement-end) label {
-  @include padding(0, 0, 0, 8px);
+  @include margin(0, 0, 0, 8px);
 }
 
 /**

diff --git a/core/src/components/input/test/states/index.html b/core/src/components/input/test/states/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Input - Disabled</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Input - Disabled</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Readonly</h2>
+
+            <ion-input label="Email" value="[email protected]" readonly="true"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disabled</h2>
+
+            <ion-input label="Email" value="[email protected]" disabled="true"></ion-input>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/input/test/states/input.e2e.ts b/core/src/components/input/test/states/input.e2e.ts
@@ -0,0 +1,26 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('input: states', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+
+  test('should render readonly input correctly', async ({ page }) => {
+    await page.setContent(`
+      <ion-input label="Email" value="[email protected]" readonly="true"></ion-input>
+    `);
+
+    const input = page.locator('ion-input');
+    expect(await input.screenshot()).toMatchSnapshot(`input-readonly-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should render disabled input correctly', async ({ page }) => {
+    await page.setContent(`
+      <ion-input label="Email" value="[email protected]" disabled="true"></ion-input>
+    `);
+
+    const input = page.locator('ion-input');
+    expect(await input.screenshot()).toMatchSnapshot(`input-disabled-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/...st/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Chrome-linux.png b/...st/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Chrome-linux.png
diff --git a/...t/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Firefox-linux.png b/...t/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Firefox-linux.png
diff --git a/...st/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Safari-linux.png b/...st/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Safari-linux.png
diff --git a/...est/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png b/...est/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png
diff --git a/...st/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png b/...st/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png
diff --git a/...est/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png b/...est/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png
diff --git a/...st/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Chrome-linux.png b/...st/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Chrome-linux.png
diff --git a/...t/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Firefox-linux.png b/...t/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Firefox-linux.png
diff --git a/...st/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Safari-linux.png b/...st/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Safari-linux.png
diff --git a/...est/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Chrome-linux.png b/...est/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Chrome-linux.png
diff --git a/...st/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Firefox-linux.png b/...st/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Firefox-linux.png
diff --git a/...est/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png b/...est/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png