fix(select): support floating labels with slotted content - #31326
fix(select): support floating labels with slotted content#31326brandyscarney wants to merge 55 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
I renamed these screenshots from select-slots to select-slot to match the folder name.
|
|
||
| configs().forEach(({ title, screenshot, config }) => { | ||
| test.describe(title('select: start and end slots (visual checks)'), () => { | ||
| test.describe(title('select: slot'), () => { |
There was a problem hiding this comment.
This was updated to match the folder name, following how we title other tests.
| test('should not have visual regressions with a floating label when expanded', async ({ page }) => { | ||
| test.info().annotations.push({ | ||
| type: 'issue', | ||
| description: 'https://github.com/ionic-team/ionic-framework/issues/30402', |
There was a problem hiding this comment.
I noticed this bug and fixed it while I was cleaning up the styles so I added a test for it here.
There was a problem hiding this comment.
After updating all of the screenshots I found that this is technically covered by this one: https://github.com/ionic-team/ionic-framework/pull/31326/changes?#diff-5a03488c7650116b1b96323c5b1ec6fb3d652e44fd7c78d9a162a22076fcafe2
I could remove this test if desired and add the issue number on that test.
| test('should not have visual regressions with a floating label when expanded', async ({ page }) => { | ||
| test.info().annotations.push({ | ||
| type: 'issue', | ||
| description: 'https://github.com/ionic-team/ionic-framework/issues/30402', |
There was a problem hiding this comment.
I noticed this bug and fixed it while I was cleaning up the styles so I added a test for it here.
ShaneK
left a comment
ShaneK
left a comment
There was a problem hiding this comment.
This seems like an issue, but if you want to defer it to later I'd understand. Just let me know!
| .select-control { | ||
| display: flex; | ||
|
|
||
| align-items: center; | ||
| flex: 1; | ||
|
|
||
| overflow: hidden; | ||
| } | ||
| flex-direction: inherit; | ||
|
|
||
| align-items: center; | ||
| justify-content: inherit; |
There was a problem hiding this comment.
With slots populated, label-placement="end" and justify both come out wrong, and I think both trace back to this block.
The slot containers are siblings of the control now, so the wrapper's row-reverse for label-placement="end" reverses them too. The start slot moves from x=16 to x=308 and the end slot from x=48 to x=16, leaving the barbell jammed against the label at the far end. RTL mirrors it. Reversing .select-control instead of the wrapper fixes that and leaves the no-slot case alone.
The flex: 1 causes the other one. The control eats the free space so justify-content has nothing left, and justify="start" strands the end icon at x=324 instead of x=57. I couldn't find a clean fix, flex-grow: 0 overflows the host since .select-text and .native-wrapper both grow.
No snapshot catches either, they all use a select with no slots. Both seem like issues to me, but I could understand if you want to defer this until later.
There was a problem hiding this comment.
Okay well I broke some stuff trying to keep icon visible and tried about a hundred different approaches but none worked so here is the latest: 79fb5a7
And I made a follow-up (FW-7682) for showing icon when it collapses.
3 participants
Issue number: resolves #30402
What is the current behavior?
Selects with a floating label and a start or end slot always display the label in the floated state, regardless of whether the select contains a value:
What is the new behavior?
--placeholder-opacityinstead of1, matching the other select label placements.mdspecification.Does this introduce a breaking change?
Floating Label Behavior
Floating labels no longer automatically float when the select contains slotted content. Labels float only when the select is focused or has a value. Additionally, when using a floating label, the placeholder is only visible when the select is focused.
Internal DOM Structure Changes
The internal DOM structure has been reorganized to support floating labels with slotted content. This changes the structure and location of several exposed shadow parts.
Added:
.select-start—part="start".select-control—part="control".select-end—part="end"Removed:
.select-wrapper-inner—part="inner"Restructured:
.label-text-wrapperremainspart="label"but moved from.select-wrapperinto.select-control.native-wrapperremainspart="container"but moved from.select-wrapper-innerinto.select-control.select-wrapper-innerinto.select-start(part="start").select-wrapper-innerinto.select-end(part="end").select-iconremainspart="icon"but its location depends on the label state:.select-control.select-endUpdate selectors that target the exposed shadow parts to account for the new structure:
If you currently target
part="inner", that part has been removed. Update those styles to target the new parts as appropriate.If you target
part="label",part="container", orpart="icon", the part names remain unchanged, but their position in the shadow DOM has changed. This may affect styles that depend on the relationship or layout of these parts.Use the new
part="start",part="control", andpart="end"parts to target the new structural wrappers.Other information
Preview