feat(select): add HTML to options

Author: thetaPC

core/src/components/action-sheet/action-sheet-interface.ts

@@ -14,7 +14,7 @@ export interface ActionSheetOptions extends OverlayOptions {
 }
 
 export interface ActionSheetButton<T = any> {
-  text?: string;
+  text?: string | HTMLElement;
   role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
   icon?: string;
   cssClass?: string | string[];
@@ -30,4 +30,7 @@ export interface ActionSheetButton<T = any> {
    * users to dismiss the action sheet.
    */
   disabled?: boolean;
+  startContent?: HTMLElement;
+  endContent?: HTMLElement;
+  description?: string;
 }

core/src/components/action-sheet/action-sheet.ionic.scss

@@ -0,0 +1,22 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./action-sheet";
+@use "./action-sheet.md" as action-sheet-md;
+
+// 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);
+
+  color: globals.$ion-text-subtle;
+
+  font-size: globals.$ion-font-size-350;
+}

core/src/components/action-sheet/action-sheet.ios.scss

@@ -1,4 +1,4 @@
-@import "./action-sheet";
+@import "./action-sheet.native";
 @import "./action-sheet.ios.vars";
 
 // iOS Action Sheet

core/src/components/action-sheet/action-sheet.md.scss

@@ -1,4 +1,4 @@
-@import "./action-sheet";
+@import "./action-sheet.native";
 @import "./action-sheet.md.vars";
 
 // Material Design Action Sheet Title

core/src/components/action-sheet/action-sheet.native.scss

@@ -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";
+
+// Action Sheet: Native
+// --------------------------------------------------
+
+.action-sheet-button-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);
+}

core/src/components/action-sheet/action-sheet.scss

@@ -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;
+}

core/src/components/action-sheet/action-sheet.tsx

@@ -1,6 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Watch, Component, Element, Event, Host, Listen, Method, Prop, State, h, readTask } from '@stencil/core';
-import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
 import type { Gesture } from '@utils/gesture';
 import { createButtonActiveGesture } from '@utils/gesture/button-active';
 import { raf } from '@utils/helpers';
@@ -17,10 +16,9 @@ import {
   safeCall,
   setOverlayId,
 } from '@utils/overlays';
-import { sanitizeDOMString } from '@utils/sanitization';
+import { renderOptionLabel } from '@utils/select-option-render';
 import { getClassMap } from '@utils/theme';
 
-import { config } from '../../global/config';
 import { getIonMode, getIonTheme } from '../../global/ionic-global';
 import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
@@ -40,7 +38,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,
 })
@@ -52,7 +50,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   private groupEl?: HTMLElement;
   private gesture?: Gesture;
   private hasRadioButtons = false;
-  private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
 
   presented = false;
   lastFocus?: HTMLElement;
@@ -563,6 +560,14 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
       }
 
+      const optionLabelOptions = {
+        id: buttonId,
+        label: b.text,
+        startContent: b.startContent,
+        endContent: b.endContent,
+        description: b.description,
+      };
+
       return (
         <button
           {...htmlAttrs}
@@ -584,7 +589,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" />}
-            {this.customHTMLEnabled ? <span innerHTML={sanitizeDOMString(b.text)}></span> : b.text}
+            {renderOptionLabel(optionLabelOptions, 'action-sheet-button-label')}
           </span>
           {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
         </button>

core/src/components/alert/alert-interface.ts

@@ -25,7 +25,7 @@ export interface AlertInput {
   /**
    * The label text to display next to the input, if the input type is `radio` or `checkbox`.
    */
-  label?: string;
+  label?: string | HTMLElement;
   checked?: boolean;
   disabled?: boolean;
   id?: string;
@@ -35,6 +35,9 @@ export interface AlertInput {
   cssClass?: string | string[];
   attributes?: { [key: string]: any };
   tabindex?: number;
+  startContent?: HTMLElement;
+  endContent?: HTMLElement;
+  description?: string;
 }
 
 type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };

core/src/components/alert/alert.ionic.scss

@@ -0,0 +1,23 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./alert";
+@use "./alert.md" as alert-md;
+
+// 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);
+
+  color: globals.$ion-text-subtle;
+
+  font-size: globals.$ion-font-size-350;
+}

core/src/components/alert/alert.ios.scss

@@ -1,4 +1,4 @@
-@import "./alert";
+@import "./alert.native";
 @import "./alert.ios.vars";
 
 // iOS Alert