diff --git a/core/src/components/input/input.ionic.outline.scss b/core/src/components/input/input.ionic.outline.scss index d749926339..cccc28bc26 100644 --- a/core/src/components/input/input.ionic.outline.scss +++ b/core/src/components/input/input.ionic.outline.scss @@ -20,6 +20,16 @@ border-top: none; } +:host(.input-fill-outline.input-shape-round) .input-bottom, +:host(.input-fill-outline.input-label-placement-floating) .input-bottom { + /** + * The bottom content should take on the start and end + * padding so it is always aligned with either the label + * or the start of the text input. + */ + @include padding-horizontal(var(--padding-start), var(--padding-end)); +} + :host(.input-fill-outline) .input-wrapper { /** * For the ionic theme, the padding needs to sit on the diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss index 411599422f..42e9d5bb51 100644 --- a/core/src/components/input/input.ionic.scss +++ b/core/src/components/input/input.ionic.scss @@ -9,6 +9,7 @@ :host { --border-width: #{$ionic-border-size-small}; --border-color: #{$ionic-color-neutral-300}; + --highlight-color-valid: #{$ionic-color-success-400}; --highlight-color-invalid: #{$ionic-color-error-400}; --text-color-invalid: #{$ionic-color-error-600}; } @@ -20,6 +21,16 @@ min-height: 48px; } +// Input Bottom Content +// ---------------------------------------------------------------- + +.input-bottom { + @include padding-horizontal(0, 0); + + // TODO(FW-6112): Update it to `$ionic-font-weight-medium` when it's available + font-weight: var(--ionic-font-weight-medium, 500); +} + // Input Hint Text // ---------------------------------------------------------------- @@ -27,6 +38,10 @@ color: tokens.$ionic-color-neutral-600; } +:host(.has-focus.ion-valid) .helper-text { + color: #{tokens.$ionic-color-success-800}; +} + :host(.ion-touched.ion-invalid) .error-text { color: var(--text-color-invalid); } diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png index fc24853efb..c77e59c992 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png index 502516f9bc..1085660dc4 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png index 22af658a60..b7c2a42370 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png index 79257c241b..d5a4c17b82 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png index a11cdc1bca..64efa12213 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png index 23fd2f4e72..006ad74a31 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9501df02e7..ed47fe5a3b 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index 75c38b841a..6cbeffc8eb 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png index e2a501d68b..4c05452d1e 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png index b760f53d3f..b886c5f36d 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png index f3bbf2e529..6c98b6b677 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png index 4f74da008a..a52f12c342 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 08ca55434e..fbb9485547 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 93e76e9194..6f94fc3e5e 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index e47733f1a5..1d67fb7d1e 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts b/core/src/components/input/test/highlight/input.e2e.ts index 60ac42fe31..ef540e2d04 100644 --- a/core/src/components/input/test/highlight/input.e2e.ts +++ b/core/src/components/input/test/highlight/input.e2e.ts @@ -348,6 +348,25 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('input: highlights'), () => { test.describe('input: no fill', () => { + test('should render valid state correctly', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const input = page.locator('ion-input'); + await expect(input).toHaveScreenshot(screenshot(`input-no-fill-valid`)); + }); test('should render invalid state correctly', async ({ page }) => { await page.setContent( ` @@ -369,6 +388,26 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh }); }); test.describe('input: outline', () => { + test('should render valid state correctly', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const input = page.locator('ion-input'); + await expect(input).toHaveScreenshot(screenshot(`input-outline-valid`)); + }); test('should render invalid state correctly', async ({ page }) => { await page.setContent( ` @@ -389,6 +428,34 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh const input = page.locator('ion-input'); await expect(input).toHaveScreenshot(screenshot(`input-outline-invalid`)); }); + test('should render custom highlight correctly', async ({ page }) => { + await page.setContent( + ` + + +
+ +
+ `, + config + ); + + const container = page.locator('.container'); + await expect(container).toHaveScreenshot(screenshot(`input-outline-custom-highlight`)); + }); }); }); }); diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4f88c1166d..cac4172615 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png index ad6c5625ee..32d2aae600 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png index f32157a224..d22407520d 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2abf1880ed Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..cb8b03d9d8 Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..241d9d9dfc Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7758b56518 Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..30508fe296 Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2cbc538f40 Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1b09273be4..00a206bca6 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png index cecc2a850c..32cc425a04 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png index 06fd69b534..b21dc738a4 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f24f775a21 Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..56fb460803 Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0d5a7ea500 Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png differ