fix(many): add rich content styles for select options by thetaPC · Pull Request #31138 · ionic-team/ionic-framework

thetaPC · 2026-05-12T13:14:22Z

Issue number: resolves internal

What is the current behavior?

ion-select-option doesn't expose labelPlacement or justify props
The ionic theme's overlay rendering doesn't match the latest design
<ion-icon> placed inside an ion-select-option renders empty in Vue/React (and other frameworks that bind custom-element props as DOM properties)
Slotted children in select-option-start / select-option-end aren't size-capped consistently: oversized content
Several theme style files (alert.{ios,md,ionic}.scss, action-sheet.ionic.scss, select-{modal,popover}.{ios,md,ionic}.scss) import the wrong shared partials

What is the new behavior?

Add labelPlacement and justify props to ion-select-option and pass them through to alert, popover, and modal overlay paths
Update the ionic theme's alert, popover, and modal overlay styles to match the current design
Add per-theme slot-size limitations so oversized slotted content is capped to keep option rows visually uniform within an overlay
Audit and correct the @use / @import chains in the affected theme stylesheets so each theme file pulls in the right shared partials (mixins, theme globals, common base) and no longer relies on transitive imports that weren't guaranteed
Add reflectPropertiesToAttributes to core/src/utils/sanitization/ and call it from getOptionContent immediately before cloneNode. The helper mirrors a registered set of custom-element DOM properties (icon, name, src, ios, md on ion-icon) onto attributes so the cloned overlay copy renders correctly regardless of how the framework bound the prop.
Add test pages and Playwright snapshots for the overlays

Does this introduce a breaking change?

Yes
No

Other information

Dev build: 8.8.9-dev.11779411201.1a483e09

Preview:

vercel · 2026-05-12T13:14:36Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	May 30, 2026 3:14am

thetaPC · 2026-05-22T02:56:12Z

+     * - Chromium and WebKit suppress it because of hasTouch and isMobile.
+     * - Headless Firefox doesn't detect input devices and reports no hover
+     *   capability regardless of context options, so override it via
+     *   launchOptions.firefoxUserPrefs. Bit values: 4 = FINE (mouse),


Overriding it would lead to a global change so I didn't want to attempt that in this PR.

thetaPC · 2026-05-22T03:14:31Z

+.action-sheet-button.ion-focused:not(.ion-activated) {
  color: var(--button-color-focused);

  &::after {
    background: var(--button-background-focused);

    opacity: var(--button-background-focused-opacity);
  }
+
+  &.action-sheet-selected::after {
+    background: var(--button-background-focused, var(--button-background-selected));
+
+    opacity: var(--button-background-focused-opacity, var(--button-background-selected-opacity));
+  }


By restructuring it this way, we are making sure that this style will be just a copy and paste for the Modular Ionic migration.

thetaPC · 2026-05-22T03:15:41Z

 $action-sheet-ios-button-translucent-filter: saturate(120%);
+
+/// @prop - Maximum size of slotted children rendered in a select option's start/end slot
+$action-sheet-ios-select-option-slot-size: dynamic-font-max(24px, 2);


Based on what I found through iOS code and that it scales up.

Do you have a screenshot of how iOS looks?

Here is an example I took from my Contacts app:

It looks closer to 30px.

thetaPC · 2026-05-22T03:15:49Z

+ */
+.select-option-start > *,
+.select-option-end > * {
+  max-height: 24px;


Based on MD3

The avatar looks pretty small compared to md3:

Ionic MD3

MD2 is also a bit bigger:

but maybe because they don't show it by checkboxes?

I used the designs from input since it made more sense to me to compare it to another form control. Thoughts?

thetaPC · 2026-05-22T03:16:41Z

Ionic theme didn't have any screenshots for alert.

thetaPC · 2026-05-26T17:15:47Z

-:host(.in-select-modal) {
-  --background-focused: #{globals.$ion-bg-neutral-subtlest-press};
-  --background-focused-opacity: 0;
-}
-
-:host(.in-select-modal.ion-focused) .item-native {
-  --border-radius: #{globals.$ion-border-radius-400};
-}


These can live under the select-modal.ionic.scss file

thetaPC · 2026-05-26T17:29:13Z

Updated to match latest designs

brandyscarney

This is looking really good, great work! I mostly have questions about some styles and requests for tests. There were a lot of files on this so sorry if I repeated myself anywhere.

brandyscarney · 2026-05-28T20:36:57Z

+  overflow: hidden;
+}
+
+.action-sheet-icon {


Is this the right size for icons? It looks kind of small:

I'm basing it off the tab button icon size and the radio box size as it seems that 24px is the consistent size for elements like this: ccdd136

brandyscarney · 2026-05-28T20:39:20Z

Why is there no padding around this when the local test shows padding:

brandyscarney · 2026-05-28T20:40:06Z

Why is there no padding around this when the local test shows padding:

brandyscarney · 2026-05-28T20:40:13Z

Why is there no padding around this when the local test shows padding:

brandyscarney · 2026-05-28T20:45:11Z

The inner label text is not vertically aligned for all themes:

You need to add the following:

.action-sheet-button-label-text { display: flex; align-items: center; }

It would probably look nicer to have a gap here as well.

3c32066 and fdf9226

brandyscarney · 2026-05-28T22:50:15Z

@@ -3,3 +3,6 @@

 // iOS Select Popover
 // --------------------------------------------------
+
+/// @prop - Maximum size of slotted children rendered in a select option's start/end slot
+$select-popover-ios-select-option-slot-size: dynamic-font-max(24px, 2);


Do we need this as a variable?

brandyscarney · 2026-05-28T22:56:39Z

The inner label text is not vertically aligned for all themes:

You need to add the following:

.select-option-label-text { align-items: center; }

brandyscarney · 2026-05-28T22:58:17Z


-  private closeModal() {
+  private closeModal(isOptionDisabled = false) {
+    if (isOptionDisabled) {


Same question as popover - why is this suddenly needed and do we have tests for it?

brandyscarney · 2026-05-28T23:01:37Z

I have the same concern with the avatar size as I commented on action sheet and popover.

brandyscarney · 2026-05-28T23:01:41Z

I have the same concern with the avatar size as I commented on action sheet and popover.

fix(select-option): add rich content styles

df394f2

github-actions Bot added the package: core @ionic/core package label May 12, 2026

vercel Bot deployed to Preview May 12, 2026 13:19 View deployment

fix(action-sheet): add ionic theme

ce322f5

vercel Bot deployed to Preview May 12, 2026 22:07 View deployment

fix(action-sheet): add ionic theme

db262b5

vercel Bot deployed to Preview May 13, 2026 18:31 View deployment

test(action-sheet): add states page

c4aff48

vercel Bot deployed to Preview May 13, 2026 21:17 View deployment

test(action-sheet): update states page

01cbf63

vercel Bot deployed to Preview May 13, 2026 22:51 View deployment

fix(alert): add ionic theme

d4680c5

vercel Bot deployed to Preview May 13, 2026 23:09 View deployment

fix(action-sheet): split imports

bf4bc97

vercel Bot deployed to Preview May 13, 2026 23:25 View deployment

fix(alert): strip out imports

b3bd9ec

vercel Bot deployed to Preview May 14, 2026 02:51 View deployment

thetaPC added 2 commits May 13, 2026 20:26

fix(select-modal): update ionic theme

2d7c760

fix(action-sheet, alert): update ionic theme

03eb8d2

vercel Bot deployed to Preview May 14, 2026 03:32 View deployment

thetaPC added 2 commits May 14, 2026 09:13

fix(select-modal): update ionic theme

efc38be

fix(action-sheet, alert, item): update ionic theme

6d01165

vercel Bot deployed to Preview May 14, 2026 16:20 View deployment

thetaPC added 2 commits May 14, 2026 10:01

fix(alert): update ionic theme

2305fc4

test(action-sheet): update snapshots

dce202e

vercel Bot deployed to Preview May 14, 2026 17:08 View deployment

fix(select-modal): update ionic theme

865d9af

vercel Bot deployed to Preview May 14, 2026 21:23 View deployment

fix(select-popover): update ionic theme

5fa29e5

thetaPC commented May 22, 2026

View reviewed changes

thetaPC marked this pull request as ready for review May 22, 2026 03:25

thetaPC requested a review from a team as a code owner May 22, 2026 03:25

thetaPC requested a review from brandyscarney May 22, 2026 03:25

thetaPC changed the title ~~fix(select-option): add rich content styles~~ fix(many): add rich content styles for select options May 22, 2026

fix(many): update tokens and snapshots

8bcf91b

vercel Bot deployed to Preview May 22, 2026 18:47 View deployment

thetaPC commented May 26, 2026

View reviewed changes

fix(select-modal): remove focus styles

286ab81

thetaPC commented May 26, 2026

View reviewed changes

Comment thread core/src/components/item/item.ionic.scss

Copy link
Copy Markdown

Contributor Author

thetaPC May 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated to match latest designs

vercel Bot deployed to Preview May 26, 2026 17:34 View deployment

test(select): update snapshots

e897877

vercel Bot deployed to Preview May 26, 2026 18:08 View deployment

brandyscarney requested changes May 28, 2026

View reviewed changes

fix(action-sheet): update icon size

ccdd136

vercel Bot deployed to Preview May 29, 2026 22:47 View deployment

test(select): update snapshots

d475f86

vercel Bot deployed to Preview May 29, 2026 23:07 View deployment

feat(select-option): align items center

3c32066

vercel Bot deployed to Preview May 30, 2026 02:43 View deployment

feat(select-option): add gap

fdf9226

vercel Bot deployed to Preview May 30, 2026 02:51 View deployment

feat(select-option): add checkbox flex

e669e54

vercel Bot deployed to Preview May 30, 2026 02:59 View deployment

fix(alert): remove uppercase for buttons on ionic

863ca6c

vercel Bot deployed to Preview May 30, 2026 03:14 View deployment

Conversation

thetaPC commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thetaPC May 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

thetaPC commented May 12, 2026 •

edited

Loading

vercel Bot commented May 12, 2026 •

edited

Loading

thetaPC May 30, 2026 •

edited

Loading