diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index da01ffb9916..619bffd9f3f 100644 --- 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 new file mode 100644 index 00000000000..7e5ebcf9c69 --- /dev/null +++ b/core/src/components/input/test/states/index.html @@ -0,0 +1,64 @@ + + + + + Input - Disabled + + + + + + + + + + + + + + Input - Disabled + + + + +
+
+

Readonly

+ + +
+ +
+

Disabled

+ + +
+
+ + + + diff --git a/core/src/components/input/test/states/input.e2e.ts b/core/src/components/input/test/states/input.e2e.ts new file mode 100644 index 00000000000..594ee5ac66a --- /dev/null +++ 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(` + + `); + + 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(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-disabled-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..46a552a63b8 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e5527237b22 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..37f8dc6ff87 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..40c18acd05c Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1fe3ea15656 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..251296a8100 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..cf4654235eb Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..80acc9b94af Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ac2e07b7a5e Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..10f051c4fef Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f2e1d2ca9d3 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..6e073771c36 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-md-ltr-Mobile-Safari-linux.png differ