diff --git a/core/src/components/input/input.ionic.outline.scss b/core/src/components/input/input.ionic.outline.scss index cccc28bc26..8e1b9c16c2 100644 --- a/core/src/components/input/input.ionic.outline.scss +++ b/core/src/components/input/input.ionic.outline.scss @@ -119,3 +119,19 @@ :host(.input-fill-outline) ::slotted([slot="end"]) { margin-inline-start: 8px; } + +// Input - Disabled +// ---------------------------------------------------------------- + +:host(.input-fill-outline.input-disabled) { + // color for the text within the input + --color: #{$ionic-color-neutral-400}; + --background: transparent; +} + +:host(.input-fill-outline.input-disabled) .native-wrapper { + --background: #{$ionic-color-neutral-10}; + border-radius: inherit; + + background: var(--background); +} diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss index 42e9d5bb51..01409800bc 100644 --- a/core/src/components/input/input.ionic.scss +++ b/core/src/components/input/input.ionic.scss @@ -54,3 +54,41 @@ --border-color: #{tokens.$ionic-color-neutral-600}; } } + +// Input - Disabled +// ---------------------------------------------------------------- + +:host(.input-disabled) { + // color for the text within the input + --color: #{tokens.$ionic-color-neutral-400}; + --background: #{tokens.$ionic-color-neutral-10}; + + pointer-events: none; +} + +:host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text, +:host(.input-disabled) .input-bottom .counter, +:host(.input-disabled) .label-text-wrapper { + color: tokens.$ionic-color-neutral-400; +} + +:host(.input-disabled.has-focus.ion-valid) { + // TODO(FW-6112): Update to use the correct color token when rgb tokens are available + --border-color: rgba(var(--ionic-color-success-400-rgb, 82, 165, 24), 0.6); +} + +:host(.input-disabled.ion-touched.ion-invalid) { + // TODO(FW-6112): Update to use the correct color token when rgb tokens are available + --border-color: rgba(var(--ionic-color-error-400-rgb, 247, 44, 44), 0.6); +} + +:host(.input-disabled.ion-color) { + --border-color: #{current-color(base, 0.6)}; +} + +:host(.input-disabled.has-focus.ion-valid) .input-bottom .helper-text, +:host(.input-disabled.ion-touched.ion-invalid) .error-text, +:host(.input-disabled.ion-color) .input-bottom .helper-text, +:host(.input-disabled.ion-color) .helper-text { + opacity: 0.6; +} diff --git a/core/src/components/input/test/states/index.html b/core/src/components/input/test/states/index.html index 7e5ebcf9c6..3dff3af45a 100644 --- a/core/src/components/input/test/states/index.html +++ b/core/src/components/input/test/states/index.html @@ -2,7 +2,7 @@ - Input - Disabled + Input - States - Input - Disabled + Input - States +

Readonly

+

No Fill

-

Readonly

+

Default

+
+

Disabled

+

No Fill

+
+
+

Default

+ + +
-

Disabled

+

Valid

- + +
+ +
+

Invalid

+ + +
+ +
+

Color (ionic theme only)

+ + +
+
+ +

Outline

+
+
+

Default

+ + +
+ +
+

Valid

+ + +
+ +
+

Invalid

+ + +
+ +
+

Color (ionic theme only)

+ +
diff --git a/core/src/components/input/test/states/input.e2e.ts b/core/src/components/input/test/states/input.e2e.ts index eb51f76096..e0a7fa303f 100644 --- a/core/src/components/input/test/states/input.e2e.ts +++ b/core/src/components/input/test/states/input.e2e.ts @@ -28,3 +28,119 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { }); }); }); + +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('input: states'), () => { + test.describe(title('disabled'), () => { + test.describe(title('no fill'), () => { + test('should render disabled input correctly', async ({ page }) => { + await page.setContent( + ` +
+ + + + + + + +
+ `, + config + ); + + const container = page.locator('.container'); + await expect(container).toHaveScreenshot(screenshot(`input-disabled-no-fill`)); + }); + }); + + test.describe(title('outline'), () => { + test('should render disabled input correctly', async ({ page }) => { + await page.setContent( + ` +
+ + + + + + + +
+ `, + config + ); + + const container = page.locator('.container'); + await expect(container).toHaveScreenshot(screenshot(`input-disabled-outline`)); + }); + }); + }); + }); +}); diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..058575e2d9 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f3a50b1f52 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7086cc8338 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0ac80c733c Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..cd8d2261c7 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..cbf1cb00e3 Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ