diff --git a/core/api.txt b/core/api.txt index cc52be0b4d..ee9de029b9 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,"round" | undefined,undefined,false,false +ion-input,prop,shape,"rectangular" | "round" | 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 9d0a9ed6b1..8855cce9f8 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. If "round" it will have an increased border radius. + * The shape of the input. Set to `"round"` for an input with more rounded corners, or `"rectangular"` for an input without rounded corners. */ - "shape"?: 'round'; + "shape"?: '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. If "round" it will have an increased border radius. + * The shape of the input. Set to `"round"` for an input with more rounded corners, or `"rectangular"` for an input without rounded corners. */ - "shape"?: 'round'; + "shape"?: '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 bf4053bb8f..3f75fc57db 100644 --- a/core/src/components/input/input.ionic.scss +++ b/core/src/components/input/input.ionic.scss @@ -55,8 +55,8 @@ ::slotted([slot="end"]), .input-clear-icon { /** - * The target area has a z-index of 1, so the slotted elements - * should be higher. Otherwise, the slotted elements will not + * The target area has a z-index of 1, so the slotted elements + * should be higher. Otherwise, the slotted elements will not * be interactable. This is especially important for the clear * button, which should be clickable. */ @@ -108,6 +108,10 @@ --border-radius: #{$ionic-border-radius-rounded-full}; } +:host(.input-shape-rectangular) { + --border-radius: #{$ionic-border-radius-square}; +} + // Input Bottom Content // ---------------------------------------------------------------- diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index f84f1483ba..84c58887fd 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -246,9 +246,10 @@ export class Input implements ComponentInterface { @Prop() required = false; /** - * The shape of the input. If "round" it will have an increased border radius. + * The shape of the input. Set to `"round"` for an input with more rounded corners, + * or `"rectangular"` for an input without rounded corners. */ - @Prop() shape?: 'round'; + @Prop() shape?: 'round' | 'rectangular'; /** * If `true`, the element will have its spelling and grammar checked. diff --git a/core/src/components/input/test/shape/index.html b/core/src/components/input/test/shape/index.html index 1e91492573..b8b27b9d68 100644 --- a/core/src/components/input/test/shape/index.html +++ b/core/src/components/input/test/shape/index.html @@ -56,6 +56,10 @@

Round Shape

+
+

Rectangular Shape

+ +
diff --git a/core/src/components/input/test/shape/input.e2e.ts b/core/src/components/input/test/shape/input.e2e.ts index 0a891cb0a4..5b700c606c 100644 --- a/core/src/components/input/test/shape/input.e2e.ts +++ b/core/src/components/input/test/shape/input.e2e.ts @@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright'; configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('input: shape'), () => { /** - * Solid fill is only available in MD theme. + * Solid fill is only available in the md theme */ test.describe('solid fill', () => { test('should not have visual regressions', async ({ page }) => { @@ -88,7 +88,7 @@ configs({ modes: ['ionic-md', 'md'] }).forEach(({ title, screenshot, config }) = --border-radius: 10px !important; } - + { + test.describe(title('input: shape'), () => { + /** + * Rectangular shape is only available in the ionic theme + * TODO(FW-6098): Add test for rectangular shape in md + * by combining these tests with the above tests + */ + test.describe('rectangular 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-rectangular-fill-outline`)); + }); + + test('border radius should be customizable', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const input = page.locator('ion-input'); + await expect(input).toHaveScreenshot(screenshot(`input-shape-rectangular-fill-outline-custom`)); + }); + }); + }); + }); +}); diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..94ab0dc691 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6993086989 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bc4c1ce397 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1dfbede228 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0724f38ed9 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..cc590d8d15 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..140ff9f448 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-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-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..613419b240 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-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-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..178aa34e6f Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-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-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..5f5d8d4f5e Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-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-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b603de3e63 Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-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-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..76d823862c Binary files /dev/null and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ