diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss index 338adc517e4..314a8f46630 100644 --- a/core/src/components/input/input.ios.scss +++ b/core/src/components/input/input.ios.scss @@ -8,6 +8,7 @@ font-size: $input-ios-font-size; } +// TODO FW-2764 Remove this :host(.legacy-input) { --padding-top: #{$input-ios-padding-top}; --padding-end: #{$input-ios-padding-end}; diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index d78519fa113..3df60a4a1bc 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -2,6 +2,7 @@ @import "./input.md.vars"; @import "./input.md.solid.scss"; @import "./input.md.outline.scss"; +@import "../item/item.md.vars.scss"; // Material Design Input // -------------------------------------------------- @@ -13,6 +14,7 @@ font-size: $input-md-font-size; } +// TODO FW-2764 Remove this :host(.legacy-input) { --padding-top: #{$input-md-padding-top}; --padding-end: #{$input-md-padding-end}; @@ -36,6 +38,16 @@ background-size: $input-md-input-clear-icon-size; } +/** + * The input with no fill in item should + * have start padding applied on the input + * not the item. + */ +:host(.in-full-item:not(.input-fill-outline)), +:host(.in-full-item:not(.input-fill-solid)) { + --padding-start: #{$item-md-padding-start}; +} + // Input Bottom // ---------------------------------------------------------------- /** diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 0e52dc90bf0..689dae558c9 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -67,6 +67,7 @@ z-index: $z-index-item-input; } +// TODO FW-2764 Remove this :host(.legacy-input) { display: flex; @@ -76,15 +77,17 @@ background: var(--background); } +// TODO FW-2764 Remove this :host(.legacy-input) .native-input { @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); @include border-radius(var(--border-radius)); } -:host-context(ion-item:not(.item-label)) { +:host-context(ion-item:not(.item-label):not(.item-has-modern-input)) { --padding-start: 0; } +// TODO FW-2764 Remove this :host(.legacy-input.ion-color) { color: current-color(base); } @@ -180,8 +183,13 @@ // Clear Input Icon // -------------------------------------------------- -.input-clear-icon { +// TODO FW-2764 Remove this +:host(.legacy-input) .input-clear-icon { @include margin(0); +} + +.input-clear-icon { + @include margin(auto); @include padding(0); @include background-position(center); @@ -263,6 +271,17 @@ background: var(--background); } +// Input Native Wrapper +// ---------------------------------------------------------------- + +.native-wrapper { + display: flex; + + flex-grow: 1; + + width: 100%; +} + // Input Highlight // ---------------------------------------------------------------- diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index e90691c66fb..7e6212299ae 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -15,7 +15,7 @@ import type { } from '../../interface'; import type { Attributes } from '../../utils/helpers'; import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes } from '../../utils/helpers'; -import { createColorClasses } from '../../utils/theme'; +import { createColorClasses, hostContext } from '../../utils/theme'; import { getCounterText } from './input.utils'; @@ -616,60 +616,63 @@ export class Input implements ComponentInterface { [`input-fill-${fill}`]: fill !== undefined, [`input-shape-${shape}`]: shape !== undefined, [`input-label-placement-${labelPlacement}`]: true, + 'in-full-item': hostContext('ion-item:not(.item-lines-inset)', this.el), })} >
{this.renderLabelContainer()} - (this.nativeInput = input)} - id={inputId} - disabled={disabled} - accept={this.accept} - autoCapitalize={this.autocapitalize} - autoComplete={this.autocomplete} - autoCorrect={this.autocorrect} - autoFocus={this.autofocus} - enterKeyHint={this.enterkeyhint} - inputMode={this.inputmode} - min={this.min} - max={this.max} - minLength={this.minlength} - maxLength={this.maxlength} - multiple={this.multiple} - name={this.name} - pattern={this.pattern} - placeholder={this.placeholder || ''} - readOnly={readonly} - required={this.required} - spellcheck={this.spellcheck} - step={this.step} - size={this.size} - type={this.type} - value={value} - onInput={this.onInput} - onChange={this.onChange} - onBlur={this.onBlur} - onFocus={this.onFocus} - onKeyDown={this.onKeydown} - {...this.inheritedAttributes} - /> - {this.clearInput && !readonly && !disabled && ( -
{shouldRenderHighlight &&
} {this.renderBottomContent()} @@ -677,6 +680,7 @@ export class Input implements ComponentInterface { ); } + // TODO FW-2764 Remove this private renderLegacyInput() { if (!this.hasLoggedDeprecationWarning) { printIonWarning( diff --git a/core/src/components/input/test/basic/index.html b/core/src/components/input/test/basic/index.html deleted file mode 100644 index a98bada1199..00000000000 --- a/core/src/components/input/test/basic/index.html +++ /dev/null @@ -1,174 +0,0 @@ - - - - - Input - Basic - - - - - - - - - - - - - Input - Basic - - - - - - - - - - - - - - - - - - - - - diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts new file mode 100644 index 00000000000..ddfdc1a1ba4 --- /dev/null +++ b/core/src/components/input/test/basic/input.e2e.ts @@ -0,0 +1,99 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('input: basic', () => { + test.describe('input with overflow', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent(` + + `); + const input = page.locator('ion-input'); + // Validates the display of an input where text extends off the edge of the component. + expect(await input.screenshot()).toMatchSnapshot(`input-with-text-overflow-${page.getSnapshotSettings()}.png`); + }); + }); + test.describe('input with placeholder', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent(` + + `); + const input = page.locator('ion-input'); + // Validates the display of an input with a placeholder. + expect(await input.screenshot()).toMatchSnapshot(`input-with-placeholder-${page.getSnapshotSettings()}.png`); + }); + }); + + test.describe('input with clear button', () => { + test('should not have visual regressions with default label', async ({ page }) => { + await page.setContent(` + + `); + const input = page.locator('ion-input'); + // Validates the display of an input with a clear button. + expect(await input.screenshot()).toMatchSnapshot(`input-with-clear-button-${page.getSnapshotSettings()}.png`); + }); + test('should not have visual regressions with stacked label', async ({ page }) => { + await page.setContent(` + + `); + const input = page.locator('ion-input'); + // Validates the display of an input with a clear button. + expect(await input.screenshot()).toMatchSnapshot( + `input-with-clear-button-stacked-${page.getSnapshotSettings()}.png` + ); + }); + }); +}); + +test.describe('input: clear button', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + }); + test('should clear the input when pressed', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + const clearButton = input.locator('.input-clear-icon'); + + await expect(input).toHaveJSProperty('value', 'abc'); + + await clearButton.click(); + await page.waitForChanges(); + + await expect(input).toHaveJSProperty('value', ''); + }); + /** + * Note: This only tests the desktop focus behavior. + * Mobile browsers have different restrictions around + * focusing inputs, so these platforms should always + * be tested when making changes to the focus behavior. + */ + test('should keep the input focused when the clear button is pressed', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + const nativeInput = input.locator('input'); + const clearButton = input.locator('.input-clear-icon'); + + await input.click(); + await expect(nativeInput).toBeFocused(); + + await clearButton.click(); + await page.waitForChanges(); + + await expect(nativeInput).toBeFocused(); + }); +}); diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1edc1a881f5 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ea9a9930a91 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5ed484a58d5 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d7512268ed3 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..a11f76e8761 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d3a4be7a4b9 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3cc34d073d5 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..05842e20d42 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0fc97e58a48 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..281acabed61 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b667f395ae7 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..daa5e14d578 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..901218fba6f Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f7b180f8824 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..95cfdac9f80 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..abcd148e1e6 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..22bd335f034 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..210b5355641 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..59f2c369a94 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3ac1fb79fbf Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..7c891cc6b75 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b71820e9c6c Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9d1ab23021b Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ecac7681af3 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-stacked-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..8c3191ac66f Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..bb5d8821841 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..02e39b85223 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..0ab40997b04 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..95e22648661 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..c05f55c8540 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..58252c1d526 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e0cd162d2de Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2094a6f06b6 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e9cbff0ff4c Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..cb6090f2005 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1100e1b0844 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..83a81061c4e Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..afc36e571c5 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e2bdd9cd016 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..272013882dd Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e4af87296a3 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..8b999f2c068 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c90e5b7b0a5 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b05dbf5ba26 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..00657f32c82 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..994195e7f8a Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..554a246c5da Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..6e5f3098a61 Binary files /dev/null and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts b/core/src/components/input/test/bottom-content/input.e2e.ts index 4d449afb3ec..f1390b42f22 100644 --- a/core/src/components/input/test/bottom-content/input.e2e.ts +++ b/core/src/components/input/test/bottom-content/input.e2e.ts @@ -4,14 +4,35 @@ import { test } from '@utils/test/playwright'; test.describe('input: bottom content', () => { test.beforeEach(({ skip }) => { skip.rtl(); - skip.mode('ios', 'Rendering is the same across modes'); }); - test('should not render bottom content if no hint or counter is enabled', async ({ page }) => { + test('should not render bottom content if no hint or counter is enabled', async ({ page, skip }) => { + skip.mode('ios', 'Rendering is the same across modes'); await page.setContent(``); const bottomEl = page.locator('ion-input .item-bottom'); await expect(bottomEl).toHaveCount(0); }); + test('entire input component should render correctly with no fill', async ({ page }) => { + await page.setContent(` + + `); + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-full-bottom-no-fill-${page.getSnapshotSettings()}.png`); + }); + test('entire input component should render correctly with solid fill', async ({ page }) => { + await page.setContent(` + + `); + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-full-bottom-solid-${page.getSnapshotSettings()}.png`); + }); + test('entire input component should render correctly with outline fill', async ({ page }) => { + await page.setContent(` + + `); + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-full-bottom-outline-${page.getSnapshotSettings()}.png`); + }); }); test.describe('input: hint text', () => { diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..29098919f50 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..6ddaa18d076 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..04aee41bde8 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..038a64796f1 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..92fe890eb43 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..92e65194aa1 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..29098919f50 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..6ddaa18d076 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..04aee41bde8 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..65b8242ed41 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d0d3652d4b3 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..c16f99263ad Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..29098919f50 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..6ddaa18d076 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..04aee41bde8 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1846b04b5a2 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..8776b15c7ae Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..658103fe144 Binary files /dev/null and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-solid-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/index.html b/core/src/components/input/test/item/index.html new file mode 100644 index 00000000000..f58da8cbfe5 --- /dev/null +++ b/core/src/components/input/test/item/index.html @@ -0,0 +1,104 @@ + + + + + Input - Item + + + + + + + + + + + + + + Input - Item + + + + +

Regular List

+
+
+

No Fill

+ + + + + +
+ +
+

Solid

+ + + + + +
+ +
+

Outline

+ + + + + +
+ +
+

Outline, Floating

+ + + + + +
+
+ +

Inset List

+
+
+

No Fill

+ + + + + + + + +
+
+ + + + diff --git a/core/src/components/input/test/item/input.e2e.ts b/core/src/components/input/test/item/input.e2e.ts new file mode 100644 index 00000000000..ec586ad4bd6 --- /dev/null +++ b/core/src/components/input/test/item/input.e2e.ts @@ -0,0 +1,75 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('input: item', () => { + test('should render correctly in list with no fill', async ({ page }) => { + await page.setContent(` + + + + + + `); + const list = page.locator('ion-list'); + expect(await list.screenshot()).toMatchSnapshot(`input-list-no-fill-${page.getSnapshotSettings()}.png`); + }); + test('should render correctly in list with solid fill', async ({ page }) => { + await page.setContent(` + + + + + + `); + const list = page.locator('ion-list'); + expect(await list.screenshot()).toMatchSnapshot(`input-list-solid-${page.getSnapshotSettings()}.png`); + }); + test('should render correctly in list with outline fill', async ({ page }) => { + await page.setContent(` + + + + + + `); + const list = page.locator('ion-list'); + expect(await list.screenshot()).toMatchSnapshot(`input-list-outline-${page.getSnapshotSettings()}.png`); + }); + test('should render correctly in inset list with no fill', async ({ page }) => { + await page.setContent(` + + + + + + `); + const list = page.locator('ion-list'); + expect(await list.screenshot()).toMatchSnapshot(`input-inset-list-no-fill-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..066e035126d Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ac695269bb3 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..53cb9541a47 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ce0c9f100e1 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..059a648db47 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2caefe050a1 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..8377fe7400d Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..63feb095bee Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..229f2d5cd25 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2d3a762760c Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e7704975787 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5b3edf9a7f5 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-inset-list-no-fill-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..800c6df4264 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9071b1909a0 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cdc603dbe22 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d241e5de9b3 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2dd1f3248cb Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ce67a57c67f Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a47213419fb Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e52817becbb Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..71dc933e49c Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..17b05e6fca9 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f0d5624fdda Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..dbfdf6179c6 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-no-fill-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..800c6df4264 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9071b1909a0 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cdc603dbe22 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d241e5de9b3 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2dd1f3248cb Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ce67a57c67f Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4bad8fae114 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5438b999857 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0f5b415b925 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2072acb8fb1 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f9c7787b063 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d2ee5494624 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-outline-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..800c6df4264 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9071b1909a0 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cdc603dbe22 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d241e5de9b3 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2dd1f3248cb Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ce67a57c67f Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..23657ba3027 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..089d9f03ab9 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4728461be7d Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7ff4817562b Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c28e1dac4cc Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d73c87db198 Binary files /dev/null and b/core/src/components/input/test/item/input.e2e.ts-snapshots/input-list-solid-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 8077fb4df7d..9ef3b1699dc 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -35,6 +35,19 @@ --highlight-height: 2px; } +// Item: Modern Input +// -------------------------------------------------- + +/** + * Since ion-item should be a relatively + * unopinionated container, the padding + * should be set on the ion-input instead. + */ +// TODO FW-2764 This should check to see if item has ion-input or ion-textarea +:host(.item-has-modern-input:not(.item-lines-inset)) .item-native { + @include padding(null, null, null, 0px); +} + // Item Fill: None // -------------------------------------------------- diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index 4e1ab93adfc..68791d0691a 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -95,6 +95,17 @@ box-sizing: border-box; } +/** + * The highlight on ion-input should extend to + * the end of the item and should overlay any + * border that the ion-item has added. + */ +// TODO FW-2764 This should check to see if item has ion-input or ion-textarea +:host(.item-has-modern-input) { + --inner-padding-end: 0px; + + overflow: initial; +} // Item: Color // -------------------------------------------------- diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index f72ebfe3eaa..59bdd027ee1 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -310,6 +310,11 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac return this.canActivate() || focusableChild !== null; } + private hasModernInput(): boolean { + const input = this.el.querySelector('ion-input:not(.legacy-input)'); + return input !== null; + } + private getFirstInput(): HTMLIonInputElement | HTMLIonTextareaElement { const inputs = this.el.querySelectorAll('ion-input, ion-textarea') as NodeListOf< HTMLIonInputElement | HTMLIonTextareaElement @@ -395,6 +400,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null; const fillValue = fill || 'none'; const inList = hostContext('ion-list', this.el); + const hasModernInput = this.hasModernInput(); return (