fix(many): add rich content styles for select options #31138
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Member
There was a problem hiding this comment. 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.
Contributor
Author
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,139 @@ | ||
| @use "../../themes/ionic/ionic.globals.scss" as globals; | ||
| @use "../../themes/mixins" as mixins; | ||
| @use "../select-option/select-option.ionic.interface"; | ||
| @use "./action-sheet.common"; | ||
|
|
||
| // Ionic Action Sheet | ||
| // -------------------------------------------------- | ||
|
|
||
| :host { | ||
| --background: #{globals.$ion-bg-surface-default}; | ||
| --backdrop-opacity: 0.7; | ||
| --button-background: transparent; | ||
| --button-background-selected: #{globals.$ion-bg-primary-subtle-default}; | ||
| --button-background-selected-opacity: 1; | ||
| --button-background-activated: #{globals.$ion-bg-neutral-subtlest-press}; | ||
| --button-background-activated-opacity: 1; | ||
| --button-background-hover: #{globals.$ion-bg-neutral-subtlest-press}; | ||
| --button-background-hover-opacity: 1; | ||
| --button-color: #{globals.$ion-text-default}; | ||
| --button-color-disabled: #{globals.$ion-text-disabled}; | ||
| --color: #{globals.$ion-text-default}; | ||
|
|
||
| z-index: 1001; | ||
| } | ||
|
|
||
| .action-sheet-wrapper { | ||
| z-index: 10; | ||
| } | ||
|
|
||
| .action-sheet-button.ion-focused::after { | ||
| @include globals.focused-state( | ||
| globals.$ion-border-size-050, | ||
| globals.$ion-border-style-solid, | ||
| globals.$ion-border-focus-default | ||
| ); | ||
|
|
||
| outline-offset: calc(globals.$ion-border-size-050 * -1); | ||
| } | ||
|
|
||
| // Action Sheet Wrapper | ||
| // ----------------------------------------- | ||
|
|
||
| .action-sheet-wrapper { | ||
| @include mixins.margin(var(--ion-safe-area-top, 0), auto, 0, auto); | ||
| } | ||
|
|
||
| .action-sheet-title { | ||
| @include mixins.padding(globals.$ion-space-400); | ||
| @include globals.typography(globals.$ion-heading-h6-medium); | ||
|
|
||
| color: var(--color); | ||
|
|
||
| text-align: start; | ||
| } | ||
|
|
||
| .action-sheet-sub-title { | ||
| @include globals.typography(globals.$ion-body-md-regular); | ||
|
|
||
| color: globals.$ion-text-subtlest; | ||
| } | ||
|
|
||
| // Action Sheet Group | ||
| // ----------------------------------------- | ||
|
|
||
| .action-sheet-group:first-child { | ||
| @include mixins.padding(globals.$ion-space-400, null, null, null); | ||
| } | ||
|
|
||
| .action-sheet-group:last-child { | ||
| @include mixins.padding(null, null, globals.$ion-space-400, null); | ||
| } | ||
|
|
||
| // Action Sheet Buttons | ||
| // ----------------------------------------- | ||
|
|
||
| .action-sheet-button { | ||
| @include mixins.padding( | ||
| globals.$ion-space-300, | ||
| globals.$ion-space-400, | ||
| globals.$ion-space-300, | ||
| globals.$ion-space-400 | ||
| ); | ||
| @include globals.typography(globals.$ion-body-md-regular); | ||
|
|
||
| position: relative; | ||
|
|
||
| min-height: 52px; | ||
|
|
||
| text-align: start; | ||
|
|
||
| contain: content; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .action-sheet-icon { | ||
|
Member
There was a problem hiding this comment. Is this the right size for icons? It looks kind of small: 
Contributor
Author
There was a problem hiding this comment. 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 |
||
| @include mixins.margin(globals.$ion-space-0, globals.$ion-space-600, globals.$ion-space-0, globals.$ion-space-0); | ||
|
|
||
| width: globals.$ion-scale-600; | ||
| height: globals.$ion-scale-600; | ||
|
|
||
| color: var(--color, globals.$ion-text-default); | ||
| } | ||
|
|
||
| .action-sheet-button-inner { | ||
| justify-content: flex-start; | ||
| } | ||
|
|
||
| .action-sheet-selected { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| // Action Sheet: Select Option | ||
| // -------------------------------------------------- | ||
|
|
||
| .action-sheet-button-label { | ||
| gap: globals.$ion-space-300; | ||
| } | ||
|
|
||
| .select-option-start, | ||
| .select-option-end { | ||
| gap: globals.$ion-space-200; | ||
| } | ||
|
|
||
| /** | ||
| * Cap slotted children so they can't stretch the option | ||
| * row out of proportion, keeping rows visually uniform | ||
| * regardless of the content. | ||
| */ | ||
| .select-option-start > *, | ||
| .select-option-end > * { | ||
| max-height: globals.$ion-scale-1200; | ||
| } | ||
|
|
||
| .select-option-description { | ||
| @include globals.typography(globals.$ion-body-md-regular); | ||
| @include globals.padding(globals.$ion-space-0); | ||
|
|
||
| color: globals.$ion-text-subtle; | ||
| } | ||
|
Member
There was a problem hiding this comment. iOS looks kind of weird: 
Should we left-align the label when it has rich content? It isn't perfectly centered due to the slots and in this example it doesn't even align the label and description the same way: 
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,7 +1,7 @@ | ||||||
| @import "./action-sheet.native"; | ||||||
| @import "./action-sheet.md.vars"; | ||||||
|
|
||||||
| // Material Design Action Sheet | ||||||
| // ----------------------------------------- | ||||||
|
|
||||||
| :host { | ||||||
|
|
@@ -110,3 +110,16 @@ | |||||
| .action-sheet-selected { | ||||||
| font-weight: bold; | ||||||
| } | ||||||
|
|
||||||
| // Action Sheet: Select Option | ||||||
| // -------------------------------------------------- | ||||||
|
|
||||||
| /** | ||||||
| * Cap slotted children so they can't stretch the option | ||||||
| * row out of proportion, keeping rows visually uniform | ||||||
| * regardless of the content. | ||||||
| */ | ||||||
| .select-option-start > *, | ||||||
| .select-option-end > * { | ||||||
| max-height: 24px; | ||||||
|
Member
There was a problem hiding this comment. The avatar looks pretty small compared to md3:
MD2 is also a bit bigger: 
but maybe because they don't show it by checkboxes?
Contributor
Author
There was a problem hiding this comment. I used the designs from |
||||||
| } | ||||||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldn't this be a
featsince it adds new properties to the api?