fix(select): support floating labels with slotted content - #31326
fix(select): support floating labels with slotted content#31326brandyscarney wants to merge 22 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.
There was a problem hiding this comment.
This change is correct. The placeholder color with a floating label should match the same opacity as other selects. This is a fix for bug #30402.
| // Select Inner Wrapper | ||
| // ---------------------------------------------------------------- | ||
|
|
||
| :host(.select-label-placement-stacked) .select-wrapper-inner, | ||
| :host(.select-label-placement-floating) .select-wrapper-inner { | ||
| width: calc(100% - $select-ios-icon-size - $select-icon-margin-start); | ||
| } |
There was a problem hiding this comment.
I could not find anywhere this is necessary after changing the icon structure.
| // Select Inner Wrapper | ||
| // ---------------------------------------------------------------- | ||
|
|
||
| :host(.select-label-placement-stacked) .select-wrapper-inner, | ||
| :host(.select-label-placement-floating) .select-wrapper-inner { | ||
| width: calc(100% - $select-md-icon-size - $select-icon-margin-start); | ||
| } |
There was a problem hiding this comment.
I could not find anywhere this is necessary after changing the icon structure.
| /** | ||
| * The select icon should be centered with | ||
| * the entire container not just the control | ||
| * with floating/stacked labels. | ||
| */ | ||
| :host(.select-label-placement-stacked) .select-icon, | ||
| :host(.select-label-placement-floating) .select-icon { | ||
| position: absolute; | ||
|
|
||
| height: 100%; | ||
| } | ||
|
|
||
| /** | ||
| * This positions the icon at the correct | ||
| * edge of the component with LTR and RTL | ||
| * text directions. The position mixin cannot be | ||
| * used here because the icon is in the Shadow DOM. | ||
| */ | ||
| :host(.select-ltr.select-label-placement-stacked) .select-icon, | ||
| :host(.select-ltr.select-label-placement-floating) .select-icon { | ||
| // stylelint-disable-next-line property-disallowed-list | ||
| right: var(--padding-end, 0); | ||
| } | ||
|
|
||
| :host(.select-rtl.select-label-placement-stacked) .select-icon, | ||
| :host(.select-rtl.select-label-placement-floating) .select-icon { | ||
| // stylelint-disable-next-line property-disallowed-list | ||
| left: var(--padding-start, 0); | ||
| } |
There was a problem hiding this comment.
This is no longer necessary using flex properties to center the icon vertically.
| } | ||
|
|
||
| /* Hide the backdrop for action sheets */ | ||
| ion-action-sheet.select-action-sheet ion-backdrop { |
There was a problem hiding this comment.
I changed all of the selects here to use an action sheet with a clear backdrop so that you could see the states better when interacting with them.
2 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