Skip to content

feat(select): allow HTML within options#31072

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thetaPC merged 31 commits into from
Apr 28, 2026
Merged

feat(select): allow HTML within options #31072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
9918f4a
feat(select): allow HTML within options
thetaPC Apr 9, 2026
d0a8a56
feat(select): add HTML to options
thetaPC Apr 10, 2026
d53d627
refactor(many): rename files to common
thetaPC Apr 10, 2026
5415cad
chore(select): run build
thetaPC Apr 10, 2026
8f3e623
refactor(select): cleanup
thetaPC Apr 10, 2026
f0b45d3
Merge branch 'next' of github.com:ionic-team/ionic-framework into FW-…
thetaPC Apr 10, 2026
a48cf66
chore(): run build proper
thetaPC Apr 10, 2026
e9eb575
refactor(select): cleanup and tests
thetaPC Apr 10, 2026
e4bce6b
refactor(select): select text spacing
thetaPC Apr 10, 2026
03b8351
fix(select): revert deletion
thetaPC Apr 11, 2026
cc0af05
refactor(many): add internal type
thetaPC Apr 14, 2026
49e0e6c
refactor(select): split out type
thetaPC Apr 14, 2026
0c7e4d6
refactr(select): return string label as is
thetaPC Apr 14, 2026
17e9e37
feat(select): add useSpan boolean
thetaPC Apr 14, 2026
6ef2355
docs(select-popover): fix text
thetaPC Apr 14, 2026
22dace3
fix(select): sanitize content
thetaPC Apr 14, 2026
f2695ca
feat(select): add spans to rich content select text
thetaPC Apr 15, 2026
8a4e59b
test(select): add rich content page
thetaPC Apr 15, 2026
deaafb9
feat(select): strip out elements for plain options
thetaPC Apr 15, 2026
96a4bb3
refactor(select-option): remove comment
thetaPC Apr 22, 2026
7fad490
test(select-option): remove ids
thetaPC Apr 22, 2026
d6332e7
refactor(select): export RichContentOption
thetaPC Apr 22, 2026
cd276fc
Merge branch 'next' of github.com:ionic-team/ionic-framework into FW-…
thetaPC Apr 22, 2026
968103a
fix(select-popover): add max content width
thetaPC Apr 24, 2026
8009bfe
fix(select-popover): adjust the width to the option content
thetaPC Apr 25, 2026
91091c2
fix(select-option): use correct slot props
thetaPC Apr 25, 2026
bfd3c52
docs(select): add JSDocs to function
thetaPC Apr 25, 2026
57c557d
fix(select): add undefined to select cssClass
thetaPC Apr 27, 2026
fabd521
docs(select-option): update text
thetaPC Apr 27, 2026
97b2704
fix(item-sliding): update snapshot to correct result
thetaPC Apr 27, 2026
5c8622d
test(item-sliding): skip Safari
thetaPC Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions core/api.txt
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2327,6 +2327,27 @@ ion-select,css-prop,--placeholder-opacity,md
ion-select,css-prop,--ripple-color,ionic
ion-select,css-prop,--ripple-color,ios
ion-select,css-prop,--ripple-color,md
ion-select,css-prop,--select-text-gap,ionic
ion-select,css-prop,--select-text-gap,ios
ion-select,css-prop,--select-text-gap,md
ion-select,css-prop,--select-text-media-border-color,ionic
ion-select,css-prop,--select-text-media-border-color,ios
ion-select,css-prop,--select-text-media-border-color,md
ion-select,css-prop,--select-text-media-border-radius,ionic
ion-select,css-prop,--select-text-media-border-radius,ios
ion-select,css-prop,--select-text-media-border-radius,md
ion-select,css-prop,--select-text-media-border-style,ionic
ion-select,css-prop,--select-text-media-border-style,ios
ion-select,css-prop,--select-text-media-border-style,md
ion-select,css-prop,--select-text-media-border-width,ionic
ion-select,css-prop,--select-text-media-border-width,ios
ion-select,css-prop,--select-text-media-border-width,md
ion-select,css-prop,--select-text-media-height,ionic
ion-select,css-prop,--select-text-media-height,ios
ion-select,css-prop,--select-text-media-height,md
ion-select,css-prop,--select-text-media-width,ionic
ion-select,css-prop,--select-text-media-width,ios
ion-select,css-prop,--select-text-media-width,md
ion-select,part,bottom
ion-select,part,container
ion-select,part,error-text
Expand All@@ -2347,6 +2368,7 @@ ion-select-modal,prop,multiple,boolean | undefined,undefined,false,false
ion-select-modal,prop,options,SelectModalOption[],[],false,false

ion-select-option,shadow
ion-select-option,prop,description,string | undefined,undefined,false,false
ion-select-option,prop,disabled,boolean,false,false,false
ion-select-option,prop,mode,"ios" | "md",undefined,false,false
ion-select-option,prop,theme,"ios" | "md" | "ionic",undefined,false,false
Expand Down
9 changes: 9 additions & 0 deletions core/src/components.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3823,6 +3823,10 @@ export namespace Components {
"options": SelectModalOption[];
}
interface IonSelectOption {
/**
* Text that is placed underneath the option text to provide additional details about the option.
*/
"description"?: string;
/**
* If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
* @default false
Expand DownExpand Up@@ -9922,6 +9926,10 @@ declare namespace LocalJSX {
"options"?: SelectModalOption[];
}
interface IonSelectOption {
/**
* Text that is placed underneath the option text to provide additional details about the option.
*/
"description"?: string;
/**
* If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
* @default false
Expand DownExpand Up@@ -11300,6 +11308,7 @@ declare namespace LocalJSX {
interface IonSelectOptionAttributes {
"disabled": boolean;
"value": string;
"description": string;
}
interface IonSelectPopoverAttributes {
"header": string;
Expand Down
17 changes: 17 additions & 0 deletions ...components/action-sheet/action-sheet.scss → ...nts/action-sheet/action-sheet.common.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -233,3 +233,20 @@
}
}
}

// Action Sheet: Select Option
// --------------------------------------------------

.action-sheet-button-label {
display: flex;

align-items: center;
}

.select-option-content {
flex: 1;
}

.select-option-description {
display: block;
}
22 changes: 22 additions & 0 deletions core/src/components/action-sheet/action-sheet.ionic.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./action-sheet.common";
@use "./action-sheet.md" as action-sheet-md;

@brandyscarneybrandyscarneyApr 24, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
@use "./action-sheet.md" as action-sheet-md;

Is this an accidental import? It is adding the native styles for the ionic theme.

You should add any shared styles to common.

@thetaPCthetaPCApr 25, 2026

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

This was not. Before creating the ionic file, the ionic theme was using md styles. So it still needs the md styles, I just didn't think it was necessary to copy and paste code.

@brandyscarneybrandyscarneyApr 28, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

The ionic styles should not be importing the md styles. This causes unnecessary overrides. If this is something we aren't going to do on this PR then we need to add it to the ticket to migrate action-sheet as part of the modular work (FW-6885).


// Ionic Action Sheet
// --------------------------------------------------

// Action Sheet: Select Option
// --------------------------------------------------

.action-sheet-button-label {
gap: globals.$ion-space-300;
}

.select-option-description {
@include globals.typography(globals.$ion-body-md-regular);
@include globals.padding(0);

@brandyscarneybrandyscarneyApr 24, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
@include globals.padding(0);

This can be removed when the md import is removed.

@thetaPCthetaPCApr 25, 2026

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

#31072 (comment)


color: globals.$ion-text-subtle;

font-size: globals.$ion-font-size-350;
}
2 changes: 1 addition & 1 deletion core/src/components/action-sheet/action-sheet.ios.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
@import "./action-sheet";
@import "./action-sheet.native";
@import "./action-sheet.ios.vars";

// iOS Action Sheet
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/action-sheet/action-sheet.md.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
@import "./action-sheet";
@import "./action-sheet.native";
@import "./action-sheet.md.vars";

// Material Design Action Sheet Title
Expand Down
19 changes: 19 additions & 0 deletions core/src/components/action-sheet/action-sheet.native.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
@use "../../themes/native/native.theme.default" as native;
@use "../../themes/mixins" as mixins;
@use "../../themes/functions.font" as font;
@use "./action-sheet.common";

// Action Sheet: Native
// --------------------------------------------------

.action-sheet-button-label {
gap: 12px;

@thetaPCthetaPCApr 10, 2026

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

I decided to use the same value that ionic uses.

@thetaPCthetaPCApr 15, 2026

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Based it off ionic theme

}

.select-option-description {
@include mixins.padding(5px, 0, 0, 0);

color: native.$text-color-step-300;

font-size: font.dynamic-font(12px);
}
21 changes: 19 additions & 2 deletions core/src/components/action-sheet/action-sheet.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,11 +16,13 @@ import {
safeCall,
setOverlayId,
} from '@utils/overlays';
import { renderOptionLabel } from '@utils/select-option-render';
import { getClassMap } from '@utils/theme';

import { getIonMode, getIonTheme } from '../../global/ionic-global';
import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
import type { OverlayEventDetail } from '../../utils/overlays-interface';
import type { SelectActionSheetButton } from '../select/select-interface';

import type { ActionSheetButton } from './action-sheet-interface';
import { iosEnterAnimation } from './animations/ios.enter';
Expand All@@ -37,7 +39,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
styleUrls: {
ios: 'action-sheet.ios.scss',
md: 'action-sheet.md.scss',
ionic: 'action-sheet.md.scss',
ionic: 'action-sheet.ionic.scss',
},
scoped: true,
})
Expand DownExpand Up@@ -559,6 +561,21 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
}

/**
* Cast to `SelectActionSheetButton` to access rich content
* fields (`startContent`, `endContent`, `description`)
* that are passed through from `ion-select` but not
* part of the public `ActionSheetButton` interface.
*/
const richButton = b as SelectActionSheetButton;
const optionLabelOptions = {
id: buttonId,
label: richButton.text,
startContent: richButton.startContent,
endContent: richButton.endContent,
description: richButton.description,
};

return (
<button
{...htmlAttrs}
Expand All@@ -580,7 +597,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
>
<span class="action-sheet-button-inner">
{b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
{b.text}
{renderOptionLabel(optionLabelOptions, 'action-sheet-button-label', true)}
</span>
{theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</button>
Expand Down
18 changes: 18 additions & 0 deletions core/src/components/alert/alert.scss → core/src/components/alert/alert.common.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -247,3 +247,21 @@ textarea.alert-input {
min-height: $alert-input-min-height;
resize: none;
}

// Alert Button: Select Option
// --------------------------------------------------

.alert-radio-label,
.alert-checkbox-label {
display: flex;

align-items: center;
}

.select-option-content {
flex: 1;
}

.select-option-description {
display: block;
}
23 changes: 23 additions & 0 deletions core/src/components/alert/alert.ionic.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./alert.common";
@use "./alert.md" as alert-md;

@brandyscarneybrandyscarneyApr 24, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
@use "./alert.md" as alert-md;

Is this an accidental import? It is adding the native styles for the ionic theme.

You should add any shared styles to common.

@thetaPCthetaPCApr 25, 2026

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

This was not. Before creating the ionic file, the ionic theme was using md styles. So it still needs the md styles, I just didn't think it was necessary to copy and paste code.

@brandyscarneybrandyscarneyApr 28, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

The ionic styles should not be importing the md styles. This causes unnecessary overrides. If this is something we aren't going to do on this PR then we need to add it to the ticket to migrate alert as part of the modular work (FW-6886).


// Ionic Alert
// --------------------------------------------------

// Alert: Select Option
// --------------------------------------------------

.alert-radio-label,
.alert-checkbox-label {
gap: globals.$ion-space-300;
}

.select-option-description {
@include globals.typography(globals.$ion-body-md-regular);
@include globals.padding(0);

@brandyscarneybrandyscarneyApr 24, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
@include globals.padding(0);

This can be removed when the md import is removed.

@thetaPCthetaPCApr 25, 2026

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

#31072 (comment)


color: globals.$ion-text-subtle;

font-size: globals.$ion-font-size-350;
}
2 changes: 1 addition & 1 deletion core/src/components/alert/alert.ios.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
@import "./alert";
@import "./alert.native";
@import "./alert.ios.vars";

// iOS Alert
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/alert/alert.md.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
@import "./alert";
@import "./alert.native";
@import "./alert.md.vars";

// Material Design Alert
Expand Down
20 changes: 20 additions & 0 deletions core/src/components/alert/alert.native.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
@use "../../themes/native/native.theme.default" as native;
@use "../../themes/mixins" as mixins;
@use "../../themes/functions.font" as font;
@use "./alert.common";

// Alert: Native
// --------------------------------------------------

.alert-radio-label,
.alert-checkbox-label {
gap: 12px;
}

.select-option-description {
@include mixins.padding(5px, 0, 0, 0);

color: native.$text-color-step-300;

font-size: font.dynamic-font(12px);
}
Loading
Loading