diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 55f61afc6f..049ef29f1c 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3621,7 +3621,7 @@ export namespace Components { */ "shape"?: 'round'; /** - * The size of the textarea. If "large", it will have an increased height. By default the size is "medium". This property only applies to the `"ionic"` theme. + * 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. */ "size"?: 'small' | 'medium' | 'large'; /** @@ -8981,7 +8981,7 @@ declare namespace LocalJSX { */ "shape"?: 'round'; /** - * The size of the textarea. If "large", it will have an increased height. By default the size is "medium". This property only applies to the `"ionic"` theme. + * 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. */ "size"?: 'small' | 'medium' | 'large'; /** diff --git a/core/src/components/textarea/test/size/index.html b/core/src/components/textarea/test/size/index.html index 884371f930..9b4aab60ca 100644 --- a/core/src/components/textarea/test/size/index.html +++ b/core/src/components/textarea/test/size/index.html @@ -50,23 +50,70 @@
-

No Fill: No Size

- +

Outline: Small Size

+ +
+ +
+

Outline: Small Size, Round Shape

+

Outline: No Size

- -
- -
-

No Fill: No Size, Round Shape

- +

Outline: No Size, Round Shape

- + +
+ +
+

Outline: Large Size

+ +
+ +
+

Outline: Large Size, Round Shape

+
diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts b/core/src/components/textarea/test/size/textarea.e2e.ts index 7e9c4ab81c..67e15196e9 100644 --- a/core/src/components/textarea/test/size/textarea.e2e.ts +++ b/core/src/components/textarea/test/size/textarea.e2e.ts @@ -6,6 +6,57 @@ import { configs, test } from '@utils/test/playwright'; */ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('textarea: size'), () => { + test.describe('textarea: size small', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-small`)); + }); + test('should render correctly with stacked label', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-small-label-stacked`)); + }); + test('should not have visual regressions with fill outline', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-small-outline`)); + }); + }); + test.describe('textarea: size medium', () => { test('should not have visual regressions', async ({ page }) => { await page.setContent( @@ -53,5 +104,56 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-medium-outline`)); }); }); + + test.describe('textarea: size large', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-large`)); + }); + test('should render correctly with stacked label', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-large-label-stacked`)); + }); + test('should not have visual regressions with fill outline', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-large-outline`)); + }); + }); }); }); diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..33e3003b7f Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d49407cbe4 Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6381c3db0f Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..beb47dc886 Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..33eb8d1808 Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..44db08e0c3 Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a033fc590f Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..69a60bf60c Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9d0fd0423d Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-large-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6c9b5386f7..158d92993f 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png index fff638eea4..b1d1d97a7f 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png index 4d82189d49..3e7925b8b6 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0a6965e52e..dbc550f22b 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png index f8e26fdd4f..c34a67ad10 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png index ccb4f07e33..f53501bf36 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index fb233be320..c773eb94f9 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5a1727ec70..caa323f720 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 83ba831bef..dcc65d01cb 100644 Binary files a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8a8ca9be20 Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f8853899a1 Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..51d35938ca Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7fb12dbc44 Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..dea5b41735 Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..50d5652af2 Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..aeae9b2c89 Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bc4f4ef3ad Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..90909fe539 Binary files /dev/null and b/core/src/components/textarea/test/size/textarea.e2e.ts-snapshots/textarea-size-small-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/textarea.ionic.scss b/core/src/components/textarea/textarea.ionic.scss index 46b1801e9f..c31f3ea015 100644 --- a/core/src/components/textarea/textarea.ionic.scss +++ b/core/src/components/textarea/textarea.ionic.scss @@ -13,10 +13,6 @@ --placeholder-color: #{globals.$ionic-color-neutral-800}; --placeholder-opacity: 1; --background: #{globals.$ionic-color-base-white}; - --padding-top: #{globals.$ionic-space-300}; - --padding-end: #{globals.$ionic-space-400}; - --padding-bottom: #{globals.$ionic-space-300}; - --padding-start: #{globals.$ionic-space-400}; @include globals.typography(globals.$ionic-body-md-regular); } @@ -30,10 +26,33 @@ height: 0; } +:host(.textarea-size-small) .textarea-wrapper-inner { + --padding-top: #{globals.$ionic-space-200}; + --padding-end: #{globals.$ionic-space-300}; + --padding-bottom: #{globals.$ionic-space-200}; + --padding-start: #{globals.$ionic-space-300}; + + min-height: globals.$ionic-scale-2800; +} + :host(.textarea-size-medium) .textarea-wrapper-inner { + --padding-top: #{globals.$ionic-space-300}; + --padding-end: #{globals.$ionic-space-400}; + --padding-bottom: #{globals.$ionic-space-300}; + --padding-start: #{globals.$ionic-space-400}; + min-height: globals.$ionic-scale-3400; } +:host(.textarea-size-large) .textarea-wrapper-inner { + --padding-top: #{globals.$ionic-space-400}; + --padding-end: #{globals.$ionic-space-500}; + --padding-bottom: #{globals.$ionic-space-400}; + --padding-start: #{globals.$ionic-space-500}; + + min-height: globals.$ionic-scale-3600; +} + // Textarea Wrapper // ---------------------------------------------------------------- diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 95c1877364..420a8f81ce 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -249,8 +249,9 @@ export class Textarea implements ComponentInterface { @Prop() shape?: 'round'; /** - * The size of the textarea. If "large", it will have an increased height. By default the - * size is "medium". This property only applies to the `"ionic"` theme. + * 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. */ @Prop() size?: 'small' | 'medium' | 'large' = 'medium';