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

rugoncalves · 2026-02-09T18:44:56Z

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 inaccurate;
- Some CSS selectors were being more generic than it should:
  - :host([auto-grow]) .textarea-wrapper-inner
    This selector was always being applied independently on the value of the attribute auto-grow;

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;
- textarea minimum height, is now equivalent to the number of rows plus half row.
  This will cause the last line to be partially visible;
- Fixed selector :host([auto-grow]) .textarea-wrapper-inner, to be applied only when auto-grow = false;
- Removed margin of the native textarea element, as the ionic theme adds padding, will make the textarea never overlaps the label;
- Added a style inline setting up a CSS variable --host-rows in the host, so that the minimum height can be calculated in the element div[.textarea-wrapper-inner];

Does this introduce a breaking change?

Yes
No

Other information

vercel · 2026-02-09T18:45:02Z

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

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Feb 12, 2026 10:49am

Copilot

Pull request overview

Updates ion-textarea styling so the control’s minimum height better matches the configured rows (especially for rows="1"), with additional Ionic-theme-specific selector and spacing fixes.

Changes:

Add a data-attr-rows attribute to the textarea inner wrapper to enable rows-based styling.
Update Ionic theme sizing/min-height behavior, plus tighten auto-grow selectors to exclude auto-grow="false".
Adjust Ionic theme textarea top margin behavior (and remove the old outline-only margin rule).

Reviewed changes

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

File	Description
core/src/components/textarea/textarea.tsx	Adds `data-attr-rows` on the wrapper for CSS-based rows sizing.
core/src/components/textarea/textarea.ionic.scss	Reworks Ionic theme min-height logic, auto-grow selectors, and label-placement spacing.
core/src/components/textarea/textarea.ionic.outline.scss	Removes outline-only textarea margin-top rule (spacing now handled elsewhere).
core/src/components/textarea/textarea.common.scss	Adds rows-related min-height override for certain host/class combinations.

💡 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

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

core/src/components/textarea/textarea.tsx

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

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

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

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…amework into ROU-12443-v2

gnbm · 2026-02-11T21:20:35Z

@rugoncalves https://github.com/ionic-team/ionic-framework/actions/runs/21918703311/job/63293046306?pr=30950 is failing in the PR checks

brandyscarney

I left some comments requesting some test changes but I will defer to @thetaPC for the functionality since she has already left comments on that. 🙂

brandyscarney · 2026-02-11T20:59:25Z

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

Is the icon placement after the changes right? It looks really close to the top:

next branch

From Figma:

Well spotted! That's indeed a bug!

brandyscarney · 2026-02-11T21:04:01Z

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

I think we can remove the shape, fill & label placement examples from this test. The only thing we really need to check for is things that will be affected by rows which is the default textareas, size and auto-grow.

Agree. Accepting suggestion!

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

brandyscarney · 2026-02-11T21:21:08Z

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

+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));


Suggested change

grid-template-columns: repeat(3, minmax(250px, 1fr));

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

brandyscarney · 2026-02-11T21:21:44Z

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

+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }


Suggested change

@media screen and (max-width: 800px) {

.grid {

grid-template-columns: 1fr;

padding: 0;

}

}

See above change that accounts for this

brandyscarney · 2026-02-11T21:26:34Z

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

+    test('should respect rows attribute with fill outline and solid', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container" style="display: flex; flex-direction: column; gap: 20px;">
+          <ion-textarea
+            rows="4"
+            fill="outline"
+            label="Outline"
+            label-placement="stacked"
+            helper-text="rows=4, fill=outline, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="4"
+            fill="solid"
+            label="Solid"
+            label-placement="stacked"
+            helper-text="rows=4, fill=solid, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-4-fill`));
+    });


I don't think we need to check fill since it shouldn't modify anything related to the height.

Note: don't forget to remove screenshots

Suggested change

test('should respect rows attribute with fill outline and solid', async ({ page }) => {

await page.setContent(

`

<div id="container" style="display: flex; flex-direction: column; gap: 20px;">

<ion-textarea

rows="4"

fill="outline"

label="Outline"

label-placement="stacked"

helper-text="rows=4, fill=outline, label-placement=stacked"

value="1
2
3
4
5
6
7
8
9
0"

></ion-textarea>

<ion-textarea

rows="4"

fill="solid"

label="Solid"

label-placement="stacked"

helper-text="rows=4, fill=solid, label-placement=stacked"

value="1
2
3
4
5
6
7
8
9
0"

></ion-textarea>

</div>

`,

config

);

const container = page.locator('#container');

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

});

brandyscarney · 2026-02-11T21:27:33Z

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 }) => {


How is this different from should respect rows attribute and set min-height?

brandyscarney · 2026-02-11T21:28:37Z

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

+    test('should respect rows attribute with different label placements', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container" style="display: flex; flex-direction: column; gap: 20px;">
+          <ion-textarea
+            rows="3"
+            fill="outline"
+            label="Start"
+            label-placement="start"
+            helper-text="rows=3, fill=outline, label-placement=start"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="3"
+            fill="outline"
+            label="End"
+            label-placement="end"
+            helper-text="rows=3, fill=outline, label-placement=end"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="3"
+            fill="outline"
+            label="Floating"
+            label-placement="floating"
+            helper-text="rows=3, fill=outline, label-placement=floating"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="3"
+            fill="outline"
+            label="Fixed"
+            label-placement="fixed"
+            helper-text="rows=3, fill=outline, label-placement=fixed"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="3"
+            fill="outline"
+            label="Stacked"
+            label-placement="stacked"
+            helper-text="rows=3, fill=outline, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-label-placements`));
+    });
+
+    test('should respect rows attribute with different shapes', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="container" style="display: flex; flex-direction: column; gap: 20px;">
+          <ion-textarea
+            rows="3"
+            shape="soft"
+            fill="outline"
+            label="Soft"
+            label-placement="stacked"
+            helper-text="rows=3, shape=soft, fill=outline, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="3"
+            shape="round"
+            fill="outline"
+            label="Round"
+            label-placement="stacked"
+            helper-text="rows=3, shape=round, fill=outline, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+          <ion-textarea
+            rows="3"
+            shape="rectangular"
+            fill="outline"
+            label="Rectangular"
+            label-placement="stacked"
+            helper-text="rows=3, shape=rectangular, fill=outline, label-placement=stacked"
+            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
+          ></ion-textarea>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-shapes`));
+    });


I don't think we need to check these since it shouldn't modify anything related to the height.

Note: don't forget to remove screenshots

Suggested change

test('should respect rows attribute with different label placements', async ({ page }) => {

await page.setContent(

`

<div id="container" style="display: flex; flex-direction: column; gap: 20px;">

<ion-textarea

rows="3"

fill="outline"

label="Start"

label-placement="start"

helper-text="rows=3, fill=outline, label-placement=start"

value="1
2
3
4
5
6
7
8
9
0"

></ion-textarea>

<ion-textarea

rows="3"

fill="outline"

label="End"

label-placement="end"

helper-text="rows=3, fill=outline, label-placement=end"

value="1
2
3
4
5
6
7
8
9
0"

></ion-textarea>

<ion-textarea

rows="3"

fill="outline"

label="Floating"

label-placement="floating"

helper-text="rows=3, fill=outline, label-placement=floating"

value="1
2
3
4
5
6
7
8
9
0"

></ion-textarea>

<ion-textarea

rows="3"

fill="outline"

label="Fixed"

label-placement="fixed"

helper-text="rows=3, fill=outline, label-placement=fixed"

value="1
2
3
4
5
6
7
8
9
0"

></ion-textarea>

<ion-textarea

rows="3"

fill="outline"

label="Stacked"

label-placement="stacked"

helper-text="rows=3, fill=outline, label-placement=stacked"

value="1
2
3
4
5
6
7
8
9
0"

></ion-textarea>

</div>

`,

config

);

const container = page.locator('#container');

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

});

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

await page.setContent(

`

<div id="container" style="display: flex; flex-direction: column; gap: 20px;">

<ion-textarea

rows="3"

shape="soft"

fill="outline"

label="Soft"

label-placement="stacked"

helper-text="rows=3, shape=soft, fill=outline, label-placement=stacked"

value="1
2
3
4
5
6
7
8
9
0"

></ion-textarea>

<ion-textarea

rows="3"

shape="round"

fill="outline"

label="Round"

label-placement="stacked"

helper-text="rows=3, shape=round, fill=outline, label-placement=stacked"

value="1
2
3
4
5
6
7
8
9
0"

></ion-textarea>

<ion-textarea

rows="3"

shape="rectangular"

fill="outline"

label="Rectangular"

label-placement="stacked"

helper-text="rows=3, shape=rectangular, fill=outline, label-placement=stacked"

value="1
2
3
4
5
6
7
8
9
0"

></ion-textarea>

</div>

`,

config

);

const container = page.locator('#container');

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

});

brandyscarney · 2026-02-11T21:30:52Z

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

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


Could we combine this with should respect rows attribute and set min-height with the following:

rows=1
rows=3
rows=5 (or some other larger number)

and then just capture the same screenshots in different sizes? So there would be 3 tests:

// test 1 "small" rows=1 rows=3 rows=5 (or some other larger number) // test 2 "medium" rows=1 rows=3 rows=5 (or some other larger number) // test 3 "large" rows=1 rows=3 rows=5 (or some other larger number)

Implemented.

rugoncalves added 9 commits February 6, 2026 14:20

Removing min-height from textarea-sizes classes

4620d25

Enforcing respect over row parameter

2ef9d30

Adding row attribute to container

fcc4bf4

Calculate appropriate min-height for textarea

4062300

Removing margin from textarea element

228df5f

Respecting correct value of attribute

df337e8

Recalculating size

0d7441e

Adding a fix for ODC Studio nuance

f205099

Adding variable for padding and border

631cea2

rugoncalves requested a review from a team as a code owner February 9, 2026 18:44

rugoncalves requested review from Copilot and thetaPC February 9, 2026 18:44

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

Copilot started reviewing on behalf of rugoncalves February 9, 2026 18:45 View session

Copilot AI reviewed Feb 9, 2026

View reviewed changes

Ensuring attribute is only added for ionic theme

13f92b3

vercel bot deployed to Preview February 9, 2026 19:08 View deployment

rugoncalves and others added 2 commits February 9, 2026 21:14

Fix typo

6398b20

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Fix typo

44984f9

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel bot deployed to Preview February 9, 2026 20:16 View deployment

Fix typo

9ad8705

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel bot deployed to Preview February 9, 2026 20:25 View deployment

rugoncalves added 2 commits February 10, 2026 10:38

Fixing lint errors

223ce69

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

d65d117

…amework into ROU-12443-v2

vercel bot deployed to Preview February 10, 2026 09:41 View deployment

rugoncalves added 3 commits February 10, 2026 11:53

Remove attribute data-attr-rows

0be00d5

Adding inline css variable for ionic theme

dd58785

Simplifying formula

791a201

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

Adding more tests to the rows attribute

876e094

vercel bot deployed to Preview February 11, 2026 17:41 View deployment

Improving test page

99a8725

vercel bot deployed to Preview February 11, 2026 17:57 View deployment

Changing the paddings

417c219

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

Removing unneeded code

a814a80

vercel bot deployed to Preview February 11, 2026 18:20 View deployment

chore(): add updated snapshots

49e8b35

vercel bot deployed to Preview February 11, 2026 18:25 View deployment

Improving tests

eae4132

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

chore(): add updated snapshots

16c8adc

rugoncalves requested a review from thetaPC February 11, 2026 18:45

vercel bot deployed to Preview February 11, 2026 18:45 View deployment

Formula correction (padding change related)

7b67b7c

vercel bot deployed to Preview February 11, 2026 18:52 View deployment

chore(): add updated snapshots

c72c75c

vercel bot deployed to Preview February 11, 2026 18:56 View deployment

brandyscarney reviewed Feb 11, 2026

View reviewed changes

Removing screenshots

3f62dc5

vercel bot deployed to Preview February 12, 2026 09:25 View deployment

Adding padding to the icon slot

560c64f

vercel bot deployed to Preview February 12, 2026 10:09 View deployment

rugoncalves added 2 commits February 12, 2026 11:38

Removing manual tests

4d569f0

Changing e2e tests per feedback

f009c42

vercel bot deployed to Preview February 12, 2026 10:42 View deployment

chore(): add updated snapshots

18bfbe8

vercel bot deployed to Preview February 12, 2026 10:49 View deployment

	grid-template-columns: repeat(3, minmax(250px, 1fr));
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

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

Are you sure you want to change the base?

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

Conversation

rugoncalves commented Feb 9, 2026 • edited 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 9, 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gnbm commented Feb 11, 2026

Uh oh!

brandyscarney left a comment

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!

Uh oh!

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!

6 participants

rugoncalves commented Feb 9, 2026 •

edited

Loading

vercel bot commented Feb 9, 2026 •

edited

Loading