feat(textarea): adjusting min-height of the textarea for ionic theme #30950
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
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-rowsattribute to the textarea inner wrapper to enable rows-based styling. - Update Ionic theme sizing/min-height behavior, plus tighten
auto-growselectors to excludeauto-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.
| * Clamp the minimum value to 1 to prevent 0 or negative heights. | ||
| * Add 0.5 to show a half-line peek at the next row. | ||
| */ | ||
| --number-rows: calc(max(var(--host-rows, 1), 1) + 0.5); |
There was a problem hiding this comment.
Is it possible to accomplish the styling without creating new CSS variables?
There was a problem hiding this comment.
I tried to use the approach of adding an attribute (data-attr-rows) to the element with the css class .textarea-wrapper-inner, and used in for the calculations in the way:
--root-rows = attr(data-attr-rows number);
But soon I discovered that attr() is not supported by all browsers.... namely safari.
The alternative is to generate selectors/classes for the number of supported rows (didn't sound too logical). Let me know your thoughts!
| })} | ||
| // For ionic theme, we need to define this css variable | ||
| style={ | ||
| theme === 'ionic' ? { '--host-rows': this.rows !== undefined ? this.rows.toString() : undefined } : undefined |
There was a problem hiding this comment.
Is it possible to accomplish the styling without creating new CSS variables?
There was a problem hiding this comment.
Answered above.
rugoncalves
changed the title
4 participants
Issue number: resolves internal
What is the current behavior?
The
heightof the textarea would not correspond to the rows number, when it the row number was set to1:Ionic theme specifics:
:host([auto-grow]) .textarea-wrapper-innerThis selector was always being applied independently on the value of the attribute
auto-grow;What is the new behavior?
The
min-heightis now respecting the rows attribute:The ionic theme has the following changes:
.textarea-size-*classes stopped forcing themin-height;This will cause the last line to be partially visible;
:host([auto-grow]) .textarea-wrapper-inner, to be applied only whenauto-grow = false;--host-rowsin the host, so that the minimum height can be calculated in the elementdiv[.textarea-wrapper-inner];Does this introduce a breaking change?
Other information