fix(select): support floating labels with slotted content - #31326
fix(select): support floating labels with slotted content#31326brandyscarney wants to merge 53 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?
Internal DOM Structure Changes
The component's internal DOM structure has been restructured 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. The
innerwrapper element has been removed, and its content has been split across separate wrapper elements for the start slot, control, and end slot. This may introduce breaking changes for developers who rely on the component's internal DOM structure or apply custom styling to internal elements.Developers who previously styled
ion-select::part(inner)should migrate to targeting the updated component structure using the following CSS parts instead:ion-select::part(start)- Target the start slot wrapperion-select::part(control)- Target the control wrapper containing the label and native select. When the label is not floating or stacked, this part also contains the dropdown icon.ion-select::part(end)- Target the end slot wrapper. When the label is floating or stacked, this part also contains the dropdown icon.Other information
Preview