fix(select): support floating labels with slotted content - #31326
fix(select): support floating labels with slotted content#31326brandyscarney wants to merge 43 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.
Co-authored-by: Shane <shane.king@outsystems.com>
Co-authored-by: Shane <shane.king@outsystems.com>
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