feat(many): add labelPlacement prop, justify prop, and rich content styles for select options#31138
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Created the select option style to make sure all interfaces are being targeted from one source of truth. By doing this, we reduce the chances of things getting lost with copy and paste.
| * regardless of the content. | ||
| */ | ||
|
|
||
| // Avatar / Image / SVG / Thumbnail / Icon |
There was a problem hiding this comment.
I decided to only update the size for these components based on the Figma design appearing to only support images and icons. This would also follow how MD behaves.
| // -------------------------------------------------- | ||
|
|
||
| /** | ||
| * Cap slotted children so they can't stretch the option |
There was a problem hiding this comment.
The sizes for the slotted children within this file were based off the official Sketch designs for iOS 18 for components that are supported for start and end slots. Since iOS does not have an official select option, I determined the values based on the list component it has.
| * regardless of the content. | ||
| */ | ||
|
|
||
| // Avatar / Image / SVG / Thumbnail |
There was a problem hiding this comment.
Since iOS does not have an official select option, I determined the values based on the list component it has.
Images are considered to be a supported component as shown in the Sketch design. The same value can be seen being used in the Menu list for images.
| height: 44px; | ||
| } | ||
|
|
||
| // Icon |
There was a problem hiding this comment.
Since iOS does not have an official select option, I determined the values based on the list component it has.
Icons are considered to be a supported component as shown in the Sketch design for the Menu list.
| // -------------------------------------------------- | ||
|
|
||
| /** | ||
| * Cap slotted children so they can't stretch the option |
There was a problem hiding this comment.
The sizes for the slotted children within this file were based off the official specs for MD3 for components that are supported for start and end slots. Since MD does not have an official select option, I determined the values based on the list component it has.
| * regardless of the content. | ||
| */ | ||
|
|
||
| // Avatar |
There was a problem hiding this comment.
Since MD does not have an official select option, I determined the values based on the list component it has.
Avatars are considered to be a supported, the size can be found under "Tokens & specs > Token > Size and typography".
| height: 40px; | ||
| } | ||
|
|
||
| // Icon |
There was a problem hiding this comment.
Since MD does not have an official select option, I determined the values based on the list component it has.
Icons are considered to be a supported, the size can be found under "Tokens & specs > Token > Size and typography".
| height: 24px; | ||
| } | ||
|
|
||
| // Image / SVG / Thumbnail |
There was a problem hiding this comment.
Since MD does not have an official select option, I determined the values based on the list component it has.
Images are considered to be a supported, the size can be found under "Tokens & specs > Token > Size and typography".
| height: 56px; | ||
| } | ||
|
|
||
| // Video |
There was a problem hiding this comment.
Since MD does not have an official select option, I determined the values based on the list component it has.
Videos are considered to be a supported, the size can be found under "Tokens & specs > Token > Size and typography".
thetaPC
changed the title
2 participants
Issue number: resolves internal
What is the current behavior?
ion-select-optiondoesn't exposelabelPlacementorjustifyprops<ion-icon>placed inside anion-select-optionrenders empty in Vue/React (and other frameworks that bind custom-element props as DOM properties)select-option-start/select-option-endaren't size-capped consistently: oversized contentalert.{ios,md,ionic}.scss,action-sheet.ionic.scss,select-{modal,popover}.{ios,md,ionic}.scss) import the wrong shared partialsWhat is the new behavior?
labelPlacementandjustifyprops toion-select-optionand pass them through to alert, popover, and modal overlay paths@use/@importchains 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 guaranteedreflectPropertiesToAttributestocore/src/utils/sanitization/and call it fromgetOptionContentimmediately beforecloneNode. The helper mirrors a registered set of custom-element DOM properties (icon,name,src,ios,mdonion-icon) onto attributes so the cloned overlay copy renders correctly regardless of how the framework bound the prop.Does this introduce a breaking change?
Other information
Dev build:
8.8.9-dev.11779411201.1a483e09Preview: