diff --git a/core/api.txt b/core/api.txt index 31ba1f76589..e1f3e7a5198 100644 --- a/core/api.txt +++ b/core/api.txt @@ -2279,7 +2279,7 @@ ion-textarea,prop,placeholder,string | undefined,undefined,false,false ion-textarea,prop,readonly,boolean,false,false,false ion-textarea,prop,required,boolean,false,false,false ion-textarea,prop,rows,number | undefined,undefined,false,false -ion-textarea,prop,shape,"round" | undefined,undefined,false,false +ion-textarea,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false ion-textarea,prop,size,"large" | "medium" | "small" | undefined,'medium',false,false ion-textarea,prop,spellcheck,boolean,false,false,false ion-textarea,prop,theme,"ios" | "md" | "ionic",undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 049ef29f1c0..a4a6199548e 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3617,9 +3617,9 @@ export namespace Components { */ "setFocus": () => Promise; /** - * The shape of the textarea. If "round" it will have an increased border radius. + * Set to `"soft"` for a textarea with slightly rounded corners, `"round"` for a textarea with fully rounded corners, or `"rectangular"` for a textarea without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. */ - "shape"?: 'round'; + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The size of the textarea. If "large" it will increase the height of the textarea, while "small" and "medium" provide progressively smaller heights. The default size is "medium". This property only applies to the `"ionic"` theme. */ @@ -8977,9 +8977,9 @@ declare namespace LocalJSX { */ "rows"?: number; /** - * The shape of the textarea. If "round" it will have an increased border radius. + * Set to `"soft"` for a textarea with slightly rounded corners, `"round"` for a textarea with fully rounded corners, or `"rectangular"` for a textarea without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. */ - "shape"?: 'round'; + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The size of the textarea. If "large" it will increase the height of the textarea, while "small" and "medium" provide progressively smaller heights. The default size is "medium". This property only applies to the `"ionic"` theme. */ diff --git a/core/src/components/textarea/test/shape/index.html b/core/src/components/textarea/test/shape/index.html new file mode 100644 index 00000000000..3b0d306043e --- /dev/null +++ b/core/src/components/textarea/test/shape/index.html @@ -0,0 +1,97 @@ + + + + + Textarea - Shape + + + + + + + + + + + + + + Textarea - Shape + + + + +
+
+

Default

+ +
+ +
+

Round

+ +
+ +
+

Soft

+ +
+ +
+

Rectangular

+ +
+
+ + + + diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts b/core/src/components/textarea/test/shape/textarea.e2e.ts new file mode 100644 index 00000000000..f78f8332d3b --- /dev/null +++ b/core/src/components/textarea/test/shape/textarea.e2e.ts @@ -0,0 +1,100 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across directions + * The round shape is only available in the Ionic and Material Design themes + */ +configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('textarea: shape'), () => { + test.describe('default', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + + await expect(textarea).toHaveScreenshot(screenshot(`textarea-default`)); + }); + }); + + test.describe('round', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + + await expect(textarea).toHaveScreenshot(screenshot(`textarea-round`)); + }); + }); + }); +}); + +/** + * The soft and rectangular shapes are only available in the Ionic theme + */ +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('textarea: shape'), () => { + test.describe('soft', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + + await expect(textarea).toHaveScreenshot(screenshot(`textarea-soft`)); + }); + }); + + test.describe('rectangular', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + + await expect(textarea).toHaveScreenshot(screenshot(`textarea-rectangular`)); + }); + }); + }); +}); diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c773eb94f90 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..caa323f7209 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..dcc65d01cb6 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b42c2a8dcde Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..351fd7bf0e1 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..06a383aa804 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-default-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3efcc02dd27 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..468fe4c0f78 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..69d43da60a1 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c773eb94f90 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..caa323f7209 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..dcc65d01cb6 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ad6254fd7f7 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..590c3757c56 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3c611d2efa8 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-round-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..6f2985aa04c Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..80b6de7e2cc Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e41a04e72a9 Binary files /dev/null and b/core/src/components/textarea/test/shape/textarea.e2e.ts-snapshots/textarea-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/index.html b/core/src/components/textarea/test/size/index.html index 9b4aab60ca1..8cfcd050872 100644 --- a/core/src/components/textarea/test/size/index.html +++ b/core/src/components/textarea/test/size/index.html @@ -15,7 +15,7 @@