diff --git a/core/api.txt b/core/api.txt index ee9de029b9..bee279b382 100644 --- a/core/api.txt +++ b/core/api.txt @@ -628,7 +628,7 @@ ion-input,prop,pattern,string | undefined,undefined,false,false 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,"rectangular" | "round" | undefined,undefined,false,false +ion-input,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,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 diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 8855cce9f8..08838a19d4 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1471,9 +1471,9 @@ export namespace Components { */ "setFocus": () => Promise; /** - * The shape of the input. Set to `"round"` for an input with more rounded corners, or `"rectangular"` for an input without rounded corners. + * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. */ - "shape"?: 'round' | 'rectangular'; + "shape"?: 'soft' | 'round' | 'rectangular'; /** * 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. */ @@ -6751,9 +6751,9 @@ declare namespace LocalJSX { */ "required"?: boolean; /** - * The shape of the input. Set to `"round"` for an input with more rounded corners, or `"rectangular"` for an input without rounded corners. + * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. */ - "shape"?: 'round' | 'rectangular'; + "shape"?: 'soft' | 'round' | 'rectangular'; /** * 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. */ diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss index 3f75fc57db..6183016b21 100644 --- a/core/src/components/input/input.ionic.scss +++ b/core/src/components/input/input.ionic.scss @@ -104,6 +104,10 @@ // Ionic Input Shapes // -------------------------------------------------- +:host(.input-shape-soft) { + --border-radius: #{$ionic-border-radius-rounded-medium}; +} + :host(.input-shape-round) { --border-radius: #{$ionic-border-radius-rounded-full}; } diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 84c58887fd..7d212fc1a7 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -246,10 +246,11 @@ export class Input implements ComponentInterface { @Prop() required = false; /** - * The shape of the input. Set to `"round"` for an input with more rounded corners, - * or `"rectangular"` for an input without rounded corners. + * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully + * rounded corners, or `"rectangular"` for an input without rounded corners. + * Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. */ - @Prop() shape?: 'round' | 'rectangular'; + @Prop() shape?: 'soft' | 'round' | 'rectangular'; /** * If `true`, the element will have its spelling and grammar checked. @@ -518,7 +519,8 @@ export class Input implements ComponentInterface { private getShape() { const theme = getIonTheme(this); const { shape } = this; - if (theme === 'ios' && shape === 'round') { + // TODO(ROU-5475): Remove the check for `soft` when the shape is supported in ios and md. + if ((theme === 'ios' && shape === 'round') || (theme !== 'ionic' && shape === 'soft')) { printIonWarning(`The "${shape}" shape is not supported in the ${theme} theme.`); return undefined; } diff --git a/core/src/components/input/test/shape/index.html b/core/src/components/input/test/shape/index.html index b8b27b9d68..04c75f0280 100644 --- a/core/src/components/input/test/shape/index.html +++ b/core/src/components/input/test/shape/index.html @@ -52,6 +52,10 @@

Default Shape

+
+

Soft Shape

+ +

Round Shape

diff --git a/core/src/components/input/test/shape/input.e2e.ts b/core/src/components/input/test/shape/input.e2e.ts index 5b700c606c..4f78c4a05f 100644 --- a/core/src/components/input/test/shape/input.e2e.ts +++ b/core/src/components/input/test/shape/input.e2e.ts @@ -112,6 +112,32 @@ configs({ modes: ['ionic-md', 'md'] }).forEach(({ title, screenshot, config }) = configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('input: shape'), () => { + // TODO(ROU-5475): Add the `md` theme once the `soft` shape is available + // in the `md` theme by combining these tests with the above tests. + test.describe('soft shape', () => { + test.describe('outline fill', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const input = page.locator('ion-input'); + await expect(input).toHaveScreenshot(screenshot(`input-shape-soft-fill-outline`)); + }); + }); + }); + /** * Rectangular shape is only available in the ionic theme * TODO(FW-6098): Add test for rectangular shape in md diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..eecbeb2817 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..361f492869 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..34abcae880 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..95fadc9caf Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..25316cbca5 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a8cdf3e037 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ