diff --git a/core/src/components/textarea/test/autogrow/textarea.e2e.ts b/core/src/components/textarea/test/autogrow/textarea.e2e.ts index 2b6f6119d8..416144fcb0 100644 --- a/core/src/components/textarea/test/autogrow/textarea.e2e.ts +++ b/core/src/components/textarea/test/autogrow/textarea.e2e.ts @@ -11,8 +11,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { await expect(page).toHaveScreenshot(screenshot(`textarea-autogrow-diff`)); }); - // TODO(FW-3920): Autogrow test is flaky - test.skip('should grow when typing', async ({ page }) => { + test('should grow when typing', async ({ page }) => { await page.setContent( ` @@ -25,6 +24,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { await nativeTextarea.type('Now, this is a story all about how'); + await page.waitForChanges(); await expect(ionTextarea).toHaveScreenshot(screenshot(`textarea-autogrow-initial`)); await nativeTextarea.type( @@ -52,8 +52,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - + value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"> `, config diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts index dc39462842..32a46889c5 100644 --- a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts +++ b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts @@ -14,8 +14,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { expect(await page.screenshot()).toMatchSnapshot(screenshot(`textarea-autogrow-diff`)); }); - // TODO(FW-3920): Autogrow test is flaky - test.skip('should grow when typing', async ({ page }) => { + test('should grow when typing', async ({ page }) => { await page.setContent( ` @@ -66,8 +65,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - + value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"> `, config diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png index 8dbbcb70c6..bd8a9e696d 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png index 59985790bc..62e16123f5 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png index 04e9cc6463..48183d3fbd 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png index a5df640363..63640ab228 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png index a5f2eb8c9b..b750e70e7a 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png index 6d0e4c2ada..9bb583798d 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-after-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png index 7fcabada26..defbaa4b08 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png index 46eb90896c..0f9d1755eb 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png index 97021523f4..fd1ee348c2 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png index 5e193467e4..ca141bdc34 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png index 108a2905c7..26a3105499 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png index 296b072c55..ffc0d250d1 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-initial-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png index 806345c2d0..4c61393f92 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png index d959d81fc1..a092c3e48b 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png index b18f880e79..085d32f55d 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png index baeb8176af..414e046c42 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png index ba03e37272..0bc9a9a138 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png index d5c1508b70..e3d524e819 100644 Binary files a/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts-snapshots/textarea-autogrow-word-break-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss index e9878dffa4..6bf3911c3d 100644 --- a/core/src/components/textarea/textarea.scss +++ b/core/src/components/textarea/textarea.scss @@ -173,8 +173,28 @@ @include border-radius(var(--border-radius)); } -.native-textarea, -// TODO: FW-2876 - Remove this selector, keep .native-textarea +.native-textarea { + color: inherit; + + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + + letter-spacing: inherit; + + text-align: inherit; + text-decoration: inherit; + text-indent: inherit; + text-overflow: inherit; + text-transform: inherit; + + grid-area: 1 / 1 / 2 / 2; + + word-break: break-word; +} + +// TODO: FW-2876 - Remove this selector :host(.legacy-textarea) .textarea-legacy-wrapper::after { @include text-inherit(); @@ -319,9 +339,28 @@ .native-wrapper::after { @include padding(var(--padding-top), 0, var(--padding-bottom), 0); @include margin(0, 0, 0, 0); - @include text-inherit(); @include border-radius(var(--border-radius)); + /** + * Note: Do not use @include text-inherit() + * as that sets white-space: inherit + * Instead, we use white-space: pre-wrap above. + */ + color: inherit; + + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + + letter-spacing: inherit; + + text-align: inherit; + text-decoration: inherit; + text-indent: inherit; + text-overflow: inherit; + text-transform: inherit; + grid-area: 1 / 1 / 2 / 2; word-break: break-word;