feat(textarea): adjusting min-height of the textarea for ionic theme by rugoncalves · Pull Request #30957 · ionic-team/ionic-framework

rugoncalves · 2026-02-16T17:58:48Z

Issue number: resolves internal

What is the current behavior?

The height of the textarea would not correspond to the rows number, when it the row number was set to 1:
Ionic theme specifics:
- Some paddings and margins were applied in different place;

What is the new behavior?

The min-height is now respecting the rows attribute:
The ionic theme has the following changes:
- .textarea-size-* classes stopped forcing the min-height;

Does this introduce a breaking change?

Yes
No

Other information

Original PR

vercel · 2026-02-16T17:58:53Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Feb 18, 2026 0:47am

Copilot

Pull request overview

This PR fixes an issue where textareas with the rows attribute set to 1 (or other values) would not properly respect the row count due to forced min-height values in the Ionic theme. The fix adjusts padding placement and removes fixed min-height constraints when the rows attribute is present.

Changes:

Removed hardcoded min-height values from .textarea-size-* classes in the Ionic theme
Added min-height: auto override for textareas with the rows attribute
Moved padding from .textarea-wrapper-inner to .native-textarea when rows is set (for proper scrolling behavior)
Added comprehensive e2e tests for the rows functionality

Reviewed changes

Copilot reviewed 4 out of 91 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`textarea.ionic.scss`	Removed `min-height` from size classes; added padding redistribution for rows attribute
`textarea.common.scss`	Added `min-height: auto` override for textareas with rows attribute
`test/rows/textarea.e2e.ts`	New comprehensive test suite for rows functionality
`test/rows/index.html`	New manual testing page for rows feature
Various snapshot files	Updated visual regression test snapshots

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

core/src/components/textarea/textarea.ionic.scss

core/src/components/textarea/textarea.common.scss

…amework into ROU-12443-v4

thetaPC · 2026-02-17T18:06:29Z

@rugoncalves for future PRs, please make sure to link the original PR since it is helpful to review feedback left by the reviewers. I've already added the link.

thetaPC · 2026-02-17T17:43:18Z

core/src/components/textarea/test/rows/textarea.e2e.ts

+ * Rows attribute is only available in the Ionic theme.
+ * When set, it increases the container min-height to accommodate the number of rows.


Let's be consistent with the other tests:

Suggested change

* Rows attribute is only available in the Ionic theme.

* When set, it increases the container min-height to accommodate the number of rows.

* This behavior does not vary across directions

* This behavior only applies to the `ionic` theme.

Suggestion committed.

thetaPC · 2026-02-17T17:44:21Z

core/src/components/textarea/test/rows/textarea.e2e.ts

+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('textarea: rows'), () => {
+    test('should respect rows attribute and set min-height', async ({ page }) => {


Suggested change

test('should respect rows attribute and set min-height', async ({ page }) => {

test('should respect rows attribute, async ({ page }) => {

Suggestion committed.

thetaPC · 2026-02-17T17:48:59Z

core/src/components/textarea/test/rows/index.html

We don't need to have examples of multiple rows example. Keep it simple:

Default (no size) with the row of 3

Small with the row of 3

Medium with the row of 3

Large with the row of 3

Default (no size) with the row of 3 and autosize

One of the things this task solves, as stated in the PR, is the height of the text area when rows is equal to 1 (it was equivalent to the height of rows=2). Given this, having tests that different row number, specially lower than the default 3, would be valuable.
But as the final word is yours, let me know, if I should proceed with removing the tests mentioned.

I agree with Rúben we need to make sure we are testing rows=1 at the very least and probably a larger one too.

thetaPC · 2026-02-17T17:49:20Z

core/src/components/textarea/test/rows/index.html

Remove the label-placement attribute since the rows changes is not associated to the label based on the CSS.

Property removed from the tests.

thetaPC · 2026-02-17T17:49:54Z

core/src/components/textarea/test/rows/index.html

Remove the helper-text since we don't need to extra indication of how many rows there are since it's being defined in the header.

Property removed from the tests.

thetaPC · 2026-02-17T18:20:59Z

core/src/components/textarea/textarea.ionic.scss

+:host([rows]:not([auto-grow])) .start-slot-wrapper,
+:host([rows]:not([auto-grow])) .end-slot-wrapper {
+  @include globals.padding(var(--padding-top), 0, var(--padding-bottom), 0);
+}


Why is this needed? There's no example on the test page or in the E2E tests. Add an example to verify that these styles are needed.

I've added a test to verify the relevance of these styles: d460dcc

thetaPC · 2026-02-17T18:21:54Z

core/src/components/textarea/test/rows/textarea.e2e.ts

+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-values`));
+    });
+
+    test('should respect rows attribute with fill outline and solid', async ({ page }) => {


Remove this test since the change is not dependent to the outline. Make sure to delete the old snapshots too.

Removed test.

thetaPC · 2026-02-17T18:25:09Z

core/src/components/textarea/test/rows/textarea.e2e.ts

+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));


Suggested change

await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));

await expect(container).toHaveScreenshot(screenshot(`textarea-rows-sizes`));

Make sure to delete the old snapshots too.

Depending on the decision made above, this should be or not removed.

thetaPC · 2026-02-17T18:25:48Z

core/src/components/textarea/test/rows/textarea.e2e.ts

+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));
+    });
+
+    test('should respect rows attribute with value content', async ({ page }) => {


Delete this test since it's the same as the first one. Make sure to delete the old snapshots too.

Depending on the decision made above, this should be or not removed.

thetaPC · 2026-02-17T18:26:08Z

core/src/components/textarea/test/rows/textarea.e2e.ts

+      );
+
+      const textarea = page.locator('ion-textarea');
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`));


Suggested change

await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`));

await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-autogrow`));

Make sure to delete the old snapshots too.

Depending on the decision made above, this should be or not removed.

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

rugoncalves and others added 14 commits February 16, 2026 10:25

Adding half row height to textarea wrapper

8e44a84

Adding tests

6d2cf2f

Trying out to increase height differently

be69a19

Change labels in tests

ed3e0d3

Adding paddings

98c4643

chore(): add updated snapshots

8d105ba

Fixing the visual tests

06dba03

chore(): add updated snapshots

1002e0a

Specifying when height should be 0

00b375b

chore(): add updated snapshots

3c2ae2f

Removing setting height = 0

dbbde87

chore(): add updated snapshots

a64bba9

Re-adding the height: 0

682c40f

Enforcing respect over row parameter

d17e70c

vercel bot deployed to Preview February 16, 2026 17:58 View deployment

Copilot AI review requested due to automatic review settings February 16, 2026 17:58

rugoncalves requested a review from a team as a code owner February 16, 2026 17:58

rugoncalves requested a review from ShaneK February 16, 2026 17:58

github-actions bot added the package: core @ionic/core package label Feb 16, 2026

rugoncalves marked this pull request as draft February 16, 2026 17:59

Copilot started reviewing on behalf of rugoncalves February 16, 2026 17:59 View session

Fix on the height

4f4283a

Copilot AI reviewed Feb 16, 2026

View reviewed changes

core/src/components/textarea/textarea.ionic.scss Outdated Show resolved Hide resolved

core/src/components/textarea/textarea.common.scss Outdated Show resolved Hide resolved

rugoncalves marked this pull request as ready for review February 16, 2026 18:04

vercel bot deployed to Preview February 16, 2026 18:04 View deployment

rugoncalves marked this pull request as draft February 16, 2026 18:05

chore(): add updated snapshots

388c87b

rugoncalves marked this pull request as ready for review February 16, 2026 18:33

Removing extra leading space

fe037ef

Removing forced height

8390653

vercel bot deployed to Preview February 16, 2026 18:40 View deployment

chore(): add updated snapshots

75b34a5

vercel bot deployed to Preview February 16, 2026 18:44 View deployment

rugoncalves added 2 commits February 16, 2026 20:03

Fix lint

10cbe31

Merge branch 'ROU-12443-v4' of https://github.com/ionic-team/ionic-fr…

5b8a456

…amework into ROU-12443-v4

vercel bot deployed to Preview February 16, 2026 19:15 View deployment

thetaPC requested changes Feb 17, 2026

View reviewed changes

Update comments

0deda70

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

vercel bot deployed to Preview February 18, 2026 10:13 View deployment

Changing test name

d864510

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

vercel bot had a problem deploying to Preview February 18, 2026 11:04 Failure

rugoncalves added 2 commits February 18, 2026 12:22

Removing property label-placement from tests

c8c1fb1

Removing property helper-text from tests

f833b25

vercel bot had a problem deploying to Preview February 18, 2026 11:23 Failure

Improving consistency

373f66a

vercel bot had a problem deploying to Preview February 18, 2026 11:24 Failure

Fix test missing quote

527fac6

vercel bot deployed to Preview February 18, 2026 12:03 View deployment

Reviewing the order of the css in ionic theme

e05db9f

vercel bot deployed to Preview February 18, 2026 12:16 View deployment

Improved comment

5f0075a

vercel bot deployed to Preview February 18, 2026 12:19 View deployment

Remove old screenshots

56a5638

vercel bot deployed to Preview February 18, 2026 12:23 View deployment

rugoncalves added 2 commits February 18, 2026 13:43

Adding test with icon in the start and end slots

d460dcc

Removing test for fill outline and solid

3fb17c6

vercel bot deployed to Preview February 18, 2026 12:47 View deployment

rugoncalves mentioned this pull request Feb 18, 2026

feat(textarea): adjusting min-height of the textarea for ionic theme #30950

Closed

2 tasks

		* Rows attribute is only available in the Ionic theme.
		* When set, it increases the container min-height to accommodate the number of rows.

	test('should respect rows attribute and set min-height', async ({ page }) => {
	test('should respect rows attribute, async ({ page }) => {

	await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));
	await expect(container).toHaveScreenshot(screenshot(`textarea-rows-sizes`));

	await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`));
	await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-autogrow`));

Conversation

rugoncalves commented Feb 16, 2026 • edited by thetaPC Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

thetaPC commented Feb 17, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rugoncalves Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rugoncalves Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rugoncalves commented Feb 16, 2026 •

edited by thetaPC

Loading

vercel bot commented Feb 16, 2026 •

edited

Loading

rugoncalves Feb 18, 2026 •

edited

Loading

rugoncalves Feb 18, 2026 •

edited

Loading