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

Open
thetaPC wants to merge 27 commits into
base: next
Choose a base branch
from
Open

feat(select): allow HTML within options #31072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 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
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 number Diff line number Diff 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 number Diff line number Diff 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 Down Expand 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 Down Expand 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 number Diff line number Diff 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 number Diff line number Diff 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;
Copy link
Copy Markdown
Member

@brandyscarney brandyscarney Apr 24, 2026

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.

Copy link
Copy Markdown
Contributor Author

@thetaPC thetaPC Apr 25, 2026

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.


// 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);
Copy link
Copy Markdown
Member

@brandyscarney brandyscarney Apr 24, 2026

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.

Copy link
Copy Markdown
Contributor Author

@thetaPC thetaPC Apr 25, 2026

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 number Diff line number Diff 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 number Diff line number Diff 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 number Diff line number Diff 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;
Copy link
Copy Markdown
Contributor Author

@thetaPC thetaPC Apr 10, 2026

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.

Copy link
Copy Markdown
Contributor Author

@thetaPC thetaPC Apr 15, 2026

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 number Diff line number Diff 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 Down Expand 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 number Diff line number Diff 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 number Diff line number Diff line change
@@ -0,0 +1,23 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./alert.common";
@use "./alert.md" as alert-md;
Copy link
Copy Markdown
Member

@brandyscarney brandyscarney Apr 24, 2026

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.

Copy link
Copy Markdown
Contributor Author

@thetaPC thetaPC Apr 25, 2026

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.


// 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);
Copy link
Copy Markdown
Member

@brandyscarney brandyscarney Apr 24, 2026

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.

Copy link
Copy Markdown
Contributor Author

@thetaPC thetaPC Apr 25, 2026

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 number Diff line number Diff 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 number Diff line number Diff 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 number Diff line number Diff 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