fix(textarea): support floating labels with slotted content - #31321
fix(textarea): support floating labels with slotted content#31321brandyscarney wants to merge 35 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
package: core
| <slot name="start"></slot> | ||
| </div> | ||
| {hasOutlineFill && <div class="textarea-outline-container">{this.renderOutlineDecorations()}</div>} | ||
| <div class="textarea-start"> |
There was a problem hiding this comment.
I renamed the slot wrapper divs from the following:
start-slot-wrapper→textarea-startend-slot-wrapper→textarea-end
The goal was to align the naming with the wrapper elements added to Input.
This also matches our existing naming pattern with elements like input-bottom and textarea-bottom.
github-actions
Bot
removed
package: angular
There was a problem hiding this comment.
I renamed these screenshots from textarea-slots to textarea-slot to match the folder name.
|
|
||
| configs().forEach(({ title, screenshot, config }) => { | ||
| test.describe(title('textarea: start and end slots (visual checks)'), () => { | ||
| test.describe(title('textarea: slot'), () => { |
There was a problem hiding this comment.
This was updated to match the folder name, following how we title other tests.
| @@ -16,6 +16,10 @@ | |||
| --padding-start: 0px; | |||
| --highlight-height: 2px; | |||
|
|
|||
| // Setting the min-height to 72px enforces consistent heights | |||
| // across all label placements and fills. | |||
| min-height: 72px; | |||
There was a problem hiding this comment.
The rule this replaced set min-height: 56px for floating and stacked in the shared stylesheet, so putting the replacement only in the md file drops ios back to the base 44px.
Computed min-height on ios floating is 56px on major-9.0 and 44px here, and with rows="1" an ios floating textarea goes 98px to 74px. Should this live in the shared stylesheet instead? Either way it probably warrants a line in the breaking changes doc.
There was a problem hiding this comment.
I added the min-height: 56px back for ios: 014db57
I tried generating screenshots locally but saw no changes. Will see if the CI yells about it.
|
|
||
| **Minimum Height Change** | ||
|
|
||
| The minimum height of textarea in Material Design (`md` mode) has been increased from `56px` to `72px`. Textareas are now the same height regardless of the `fill` property or `labelPlacement`. If you were relying on textareas being `56px` tall or had custom CSS based on that value, update your styles for the new `72px` height or override it back to `56px`. |
There was a problem hiding this comment.
The 56px was only the floor for solid, outline and stacked/floating. Default fill with start, end or fixed sat on the shared 44px, so it's 44 to 72 there, and overriding back to 56px like this suggests leaves you taller than before.
Worth a word on rows too. On md start, rows="1" goes 44px to 72px and rows="2" 62px to 72px, so those two look the same now. ios changed as well and isn't mentioned.
There was a problem hiding this comment.
Updated breaking changes to mention the rows change: b5f498b
Also created a follow-up ticket to revisit this later.
3 participants
Issue number: N/A
What is the current behavior?
Textareas with a floating label and a start or end slot always display the label in the floated state, regardless of whether the textarea contains a value:
What is the new behavior?
mdspecification.Does this introduce a breaking change?
Internal DOM Structure Changes
The internal DOM structure has been modified to support floating labels with slotted start and end content. Additionally, the structure of the component has been reorganized, with some elements now grouped differently than before. This may introduce breaking changes for developers who rely on the component's internal DOM structure or apply custom styling to internal elements.
The following internal elements have been modified:
<div class="textarea-wrapper-inner"><div class="start-slot-wrapper">is now<div class="textarea-start"><div class="textarea-control">wrapper for the label and native control<div class="end-slot-wrapper">is now<div class="textarea-end">While the public API has not changed, selectors or style overrides targeting the previous markup will need to be updated to reference the new element names and their organization. If you have custom CSS targeting the internal structure of textarea, update your selectors to account for these structural changes.
Minimum Height Change
The minimum height of textarea in Material Design (
mdmode) has been increased from56pxto72px. This change ensures consistent heights across textareas regardless of thefillproperty orlabelPlacement, providing a more uniform and predictable user experience. If you were relying on textareas being56pxtall or had custom CSS based on that value, you will need to either update your styles to accommodate the new72pxheight or override it back to56pxif needed.Other information
Preview