Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
4620d25
Removing min-height from textarea-sizes classes
rugoncalves Jan 28, 2026
2ef9d30
Enforcing respect over row parameter
rugoncalves Jan 28, 2026
fcc4bf4
Adding row attribute to container
rugoncalves Feb 6, 2026
4062300
Calculate appropriate min-height for textarea
rugoncalves Feb 6, 2026
228df5f
Removing margin from textarea element
rugoncalves Feb 6, 2026
df337e8
Respecting correct value of attribute
rugoncalves Feb 6, 2026
0d7441e
Recalculating size
rugoncalves Feb 6, 2026
f205099
Adding a fix for ODC Studio nuance
rugoncalves Feb 6, 2026
631cea2
Adding variable for padding and border
rugoncalves Feb 9, 2026
13f92b3
Ensuring attribute is only added for ionic theme
rugoncalves Feb 9, 2026
6398b20
Fix typo
rugoncalves Feb 9, 2026
44984f9
Fix typo
rugoncalves Feb 9, 2026
9ad8705
Fix typo
rugoncalves Feb 9, 2026
223ce69
Fixing lint errors
rugoncalves Feb 10, 2026
d65d117
Merge branch 'ROU-12443-v2' of https://github.com/ionic-team/ionic-fr…
rugoncalves Feb 10, 2026
0be00d5
Remove attribute data-attr-rows
rugoncalves Feb 10, 2026
dd58785
Adding inline css variable for ionic theme
rugoncalves Feb 10, 2026
791a201
Simplifying formula
rugoncalves Feb 10, 2026
bf9c315
chore(): add updated snapshots
Ionitron Feb 10, 2026
239488f
Fix for when the rows are not set
rugoncalves Feb 10, 2026
10b94bc
Merge branch 'ROU-12443-v2' of https://github.com/ionic-team/ionic-fr…
rugoncalves Feb 10, 2026
7b8aa7a
chore(): add updated snapshots
Ionitron Feb 11, 2026
493e575
Removing generated css classes
rugoncalves Feb 11, 2026
b9bf225
Removing extra space when auto-grow is used
rugoncalves Feb 11, 2026
89f53f3
Adding e2e tests for rows attribute
rugoncalves Feb 11, 2026
876e094
Adding more tests to the rows attribute
rugoncalves Feb 11, 2026
99a8725
Improving test page
rugoncalves Feb 11, 2026
417c219
Changing the paddings
rugoncalves Feb 11, 2026
a814a80
Removing unneeded code
rugoncalves Feb 11, 2026
49e8b35
chore(): add updated snapshots
Ionitron Feb 11, 2026
eae4132
Improving tests
rugoncalves Feb 11, 2026
16c8adc
chore(): add updated snapshots
Ionitron Feb 11, 2026
7b67b7c
Formula correction (padding change related)
rugoncalves Feb 11, 2026
c72c75c
chore(): add updated snapshots
Ionitron Feb 11, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 38 additions & 11 deletions core/src/components/textarea/test/basic/index.html
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

next branch
next branch

From Figma:

Image

Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,28 @@
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(250px, 1fr));
grid-row-gap: 20px;
grid-column-gap: 20px;
}

h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
}

@media screen and (max-width: 800px) {
.grid {
grid-template-columns: 1fr;
padding: 0;
}
}
</style>
</head>

<body>
Expand All @@ -23,17 +45,22 @@
</ion-header>

<ion-content id="content" class="ion-padding">
<ion-textarea
fill="outline"
label="Label"
label-placement="stacked"
placeholder="Placeholder"
helper-text="Helper message"
counter="true"
maxlength="999"
>
<ion-icon slot="end" name="square-outline"></ion-icon>
</ion-textarea>
<div class="grid">
<div class="grid-item">
<h2>Default</h2>
<ion-textarea
fill="outline"
label="Label"
label-placement="stacked"
placeholder="Placeholder"
helper-text="Helper message"
counter="true"
maxlength="999"
>
<ion-icon slot="end" name="square-outline"></ion-icon>
</ion-textarea>
</div>
</div>
</ion-content>
</ion-app>
</body>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
255 changes: 255 additions & 0 deletions core/src/components/textarea/test/rows/index.html
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Textarea - Rows</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(250px, 1fr));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

grid-row-gap: 20px;
grid-column-gap: 20px;
}

h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
}

@media screen and (max-width: 800px) {
.grid {
grid-template-columns: 1fr;
padding: 0;
}
}
Comment on lines +30 to +35
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

See above change that accounts for this

</style>
</head>

<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Textarea - Rows</ion-title>
</ion-toolbar>
</ion-header>

<ion-content id="content" class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Rows: 3</h2>
<ion-textarea
rows="3"
label="Comments"
label-placement="stacked"
helper-text="rows=3, 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>

<div class="grid-item">
<h2>Rows: 2</h2>
<ion-textarea
rows="2"
label="Small"
label-placement="stacked"
helper-text="rows=2, 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>

<div class="grid-item">
<h2>Rows: 5</h2>
<ion-textarea
rows="5"
label="Medium"
label-placement="stacked"
helper-text="rows=5, 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>

<div class="grid-item">
<h2>Rows: 8</h2>
<ion-textarea
rows="8"
label="Large"
label-placement="stacked"
helper-text="rows=8, 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>

<div class="grid-item">
<h2>Rows: 4, Fill Outline</h2>
<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>
</div>

<div class="grid-item">
<h2>Rows: 4, Fill Solid</h2>
<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>
Comment on lines +93 to +115
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div class="grid-item">
<h2>Rows: 4, Fill Outline</h2>
<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>
</div>
<div class="grid-item">
<h2>Rows: 4, Fill Solid</h2>
<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>


<div class="grid-item">
<h2>Rows: 3, Size Small</h2>
<ion-textarea
rows="3"
size="small"
label="Small Size"
label-placement="stacked"
helper-text="rows=3, size=small, 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>

<div class="grid-item">
<h2>Rows: 3, Size Medium</h2>
<ion-textarea
rows="3"
size="medium"
label="Medium Size"
label-placement="stacked"
helper-text="rows=3, size=medium, 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>

<div class="grid-item">
<h2>Rows: 3, Size Large</h2>
<ion-textarea
rows="3"
size="large"
label="Large Size"
label-placement="stacked"
helper-text="rows=3, size=large, 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>

<div class="grid-item">
<h2>Rows: 3, Auto-grow</h2>
<ion-textarea
rows="3"
auto-grow="true"
label="Comments"
label-placement="stacked"
helper-text="rows=3, auto-grow=true, 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>

<div class="grid-item">
<h2>Rows: 3, Label Start</h2>
<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>
</div>

<div class="grid-item">
<h2>Rows: 3, Label End</h2>
<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>
</div>

<div class="grid-item">
<h2>Rows: 3, Label Floating</h2>
<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>
</div>

<div class="grid-item">
<h2>Rows: 3, Label Fixed</h2>
<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>
</div>

<div class="grid-item">
<h2>Rows: 3, Shape Soft</h2>
<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>
</div>

<div class="grid-item">
<h2>Rows: 3, Shape Round</h2>
<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>
</div>

<div class="grid-item">
<h2>Rows: 3, Shape Rectangular</h2>
<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>
Comment on lines +165 to +250
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div class="grid-item">
<h2>Rows: 3, Label Start</h2>
<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>
</div>
<div class="grid-item">
<h2>Rows: 3, Label End</h2>
<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>
</div>
<div class="grid-item">
<h2>Rows: 3, Label Floating</h2>
<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>
</div>
<div class="grid-item">
<h2>Rows: 3, Label Fixed</h2>
<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>
</div>
<div class="grid-item">
<h2>Rows: 3, Shape Soft</h2>
<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>
</div>
<div class="grid-item">
<h2>Rows: 3, Shape Round</h2>
<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>
</div>
<div class="grid-item">
<h2>Rows: 3, Shape Rectangular</h2>
<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>

</div>
</ion-content>
</ion-app>
</body>
</html>
Loading
Loading