diff --git a/core/api.txt b/core/api.txt index de53285bfe..cc52be0b4d 100644 --- a/core/api.txt +++ b/core/api.txt @@ -629,7 +629,7 @@ ion-input,prop,placeholder,string | undefined,undefined,false,false ion-input,prop,readonly,boolean,false,false,true ion-input,prop,required,boolean,false,false,false ion-input,prop,shape,"round" | undefined,undefined,false,false -ion-input,prop,size,"large" | "medium" | undefined,'medium',false,false +ion-input,prop,size,"large" | "medium" | "xlarge" | undefined,'medium',false,false ion-input,prop,spellcheck,boolean,false,false,false ion-input,prop,step,string | undefined,undefined,false,false ion-input,prop,theme,"ios" | "md" | "ionic",undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 0766d5c2e0..9d0a9ed6b1 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1477,7 +1477,7 @@ export namespace Components { /** * The size of the input. If "large", it will have an increased height. By default the size is medium. This property only applies to the `"ionic"` theme. */ - "size"?: 'medium' | 'large'; + "size"?: 'medium' | 'large' | 'xlarge'; /** * If `true`, the element will have its spelling and grammar checked. */ @@ -6757,7 +6757,7 @@ declare namespace LocalJSX { /** * The size of the input. If "large", it will have an increased height. By default the size is medium. This property only applies to the `"ionic"` theme. */ - "size"?: 'medium' | 'large'; + "size"?: 'medium' | 'large' | 'xlarge'; /** * If `true`, the element will have its spelling and grammar checked. */ diff --git a/core/src/components/input/input.ionic.outline.scss b/core/src/components/input/input.ionic.outline.scss index 5b138df7b9..247a1b446b 100644 --- a/core/src/components/input/input.ionic.outline.scss +++ b/core/src/components/input/input.ionic.outline.scss @@ -15,6 +15,11 @@ --padding-end: 16px; } +:host(.input-fill-outline.input-size-xlarge) { + --padding-start: 20px; + --padding-end: 20px; +} + /** * The bottom content should never have * a border with the outline style. diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss index e322dbaa11..bf4053bb8f 100644 --- a/core/src/components/input/input.ionic.scss +++ b/core/src/components/input/input.ionic.scss @@ -27,6 +27,10 @@ min-height: 48px; } +:host(.input-size-xlarge) .native-wrapper { + min-height: 56px; +} + // Target area // -------------------------------------------------- :host .native-wrapper::after { diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index b135ae99ba..58d68472f8 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -265,7 +265,7 @@ export class Input implements ComponentInterface { * The size of the input. If "large", it will have an increased height. By default the * size is medium. This property only applies to the `"ionic"` theme. */ - @Prop() size?: 'medium' | 'large' = 'medium'; + @Prop() size?: 'medium' | 'large' | 'xlarge' = 'medium'; /** * The type of control to display. The default type is text. @@ -506,9 +506,10 @@ export class Input implements ComponentInterface { private getSize() { const theme = getIonTheme(this); const { size } = this; - if (theme !== 'ionic' && size === 'large') { + if (theme !== 'ionic' && (size === 'large' || size === 'xlarge')) { printIonWarning(`The "${size}" size is not supported in the ${theme} theme.`); - return undefined; + // Fallback to medium size, which is the default size for all themes. + return 'medium'; } return size; } @@ -776,7 +777,7 @@ export class Input implements ComponentInterface { 'label-floating': labelShouldFloat, [`input-fill-${fill}`]: fill !== undefined, [`input-shape-${shape}`]: shape !== undefined, - [`input-size-${size}`]: size !== undefined, + [`input-size-${size}`]: true, [`input-label-placement-${labelPlacement}`]: true, 'in-item': inItem, 'in-item-color': hostContext('ion-item.ion-color', this.el), diff --git a/core/src/components/input/test/size/index.html b/core/src/components/input/test/size/index.html index b993cebee5..d246d5b92d 100644 --- a/core/src/components/input/test/size/index.html +++ b/core/src/components/input/test/size/index.html @@ -90,6 +90,28 @@ + +
+
+

No Fill: XLarge Size

+ +
+ +
+

Outline: XLarge Size

+ +
+ +
+

No Fill: XLarge Size, Round Shape

+ +
+ +
+

Outline: XLarge Size, Round Shape

+ +
+
diff --git a/core/src/components/input/test/size/input.e2e.ts b/core/src/components/input/test/size/input.e2e.ts index 1a31633180..bd225d60e3 100644 --- a/core/src/components/input/test/size/input.e2e.ts +++ b/core/src/components/input/test/size/input.e2e.ts @@ -139,5 +139,74 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh await expect(input).toHaveScreenshot(screenshot(`input-size-large-outline-round`)); }); }); + + test.describe('input: size xlarge', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const input = page.locator('ion-input'); + await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge`)); + }); + test('should render correctly with stacked label', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const input = page.locator('ion-input'); + await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge-label-stacked`)); + }); + test('should not have visual regressions with fill outline', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const input = page.locator('ion-input'); + await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge-outline`)); + }); + test('should not have visual regressions with fill outline and round shape', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const input = page.locator('ion-input'); + await expect(input).toHaveScreenshot(screenshot(`input-size-xlarge-outline-round`)); + }); + }); }); }); diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..292b69a72c Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..af5305acdd Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..43f4a5bcca Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..292b69a72c Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..af5305acdd Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..43f4a5bcca Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3dc0730972 Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6b449c928e Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8047c73108 Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ae8fb42bfb Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..471330b7ec Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..1bac6c647a Binary files /dev/null and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ