feat(select): add labelPlacement prop, justify prop, and rich content for select options (#31241)

Issue number: resolves #29890

Author: thetaPC

core/api.txt

@@ -1741,6 +1741,20 @@ ion-select,css-prop,--placeholder-opacity,ios
 ion-select,css-prop,--placeholder-opacity,md
 ion-select,css-prop,--ripple-color,ios
 ion-select,css-prop,--ripple-color,md
+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,ios
+ion-select,css-prop,--select-text-media-border-color,md
+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,ios
+ion-select,css-prop,--select-text-media-border-style,md
+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,ios
+ion-select,css-prop,--select-text-media-height,md
+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
@@ -1760,7 +1774,11 @@ 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,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
+ion-select-option,prop,labelPlacement,"end" | "start" | undefined,undefined,false,false
+ion-select-option,prop,mode,"ios" | "md",undefined,false,false
 ion-select-option,prop,value,any,undefined,false,false
 
 ion-skeleton-text,shadow

core/src/components.d.ts

@@ -3143,10 +3143,26 @@ export namespace Components {
     }
     interface IonSelectOption {
         /**
-          * 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.
+          * 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.
           * @default false
          */
         "disabled": boolean;
+        /**
+          * How to pack the label and the option's selection control within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).  When unset, the interface picks a default based on mode and control type.
+         */
+        "justify"?: 'start' | 'end' | 'space-between';
+        /**
+          * Where the label is placed relative to the option's selection control (radio circle or checkbox box) when the option is rendered in an `alert`, `popover`, or `modal` interface. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).  When unset, the interface picks a default based on mode and control type.
+         */
+        "labelPlacement"?: 'start' | 'end';
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The text value of the option.
          */
@@ -8345,10 +8361,26 @@ declare namespace LocalJSX {
     }
     interface IonSelectOption {
         /**
-          * 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.
+          * 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.
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * How to pack the label and the option's selection control within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).  When unset, the interface picks a default based on mode and control type.
+         */
+        "justify"?: 'start' | 'end' | 'space-between';
+        /**
+          * Where the label is placed relative to the option's selection control (radio circle or checkbox box) when the option is rendered in an `alert`, `popover`, or `modal` interface. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).  When unset, the interface picks a default based on mode and control type.
+         */
+        "labelPlacement"?: 'start' | 'end';
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The text value of the option.
          */
@@ -9528,6 +9560,9 @@ declare namespace LocalJSX {
     interface IonSelectOptionAttributes {
         "disabled": boolean;
         "value": string;
+        "description": string;
+        "labelPlacement": 'start' | 'end';
+        "justify": 'start' | 'end' | 'space-between';
     }
     interface IonSelectPopoverAttributes {
         "header": string;

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

@@ -1,3 +1,4 @@
+@use "../select-option/select-option.ios.overlay";
 @import "./action-sheet";
 @import "./action-sheet.ios.vars";
 

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

@@ -1,7 +1,8 @@
+@use "../select-option/select-option.md.overlay";
 @import "./action-sheet";
 @import "./action-sheet.md.vars";
 
-// Material Design Action Sheet Title
+// Material Design Action Sheet
 // -----------------------------------------
 
 :host {

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

@@ -109,6 +109,10 @@
   opacity: 0.4;
 }
 
+.action-sheet-button:disabled ion-icon {
+  color: currentColor;
+}
+
 .action-sheet-button-inner {
   display: flex;
 
@@ -213,14 +217,20 @@
 // Action Sheet: Focused
 // --------------------------------------------------
 
-.action-sheet-button.ion-focused {
+.action-sheet-button.ion-focused:not(.ion-activated) {
   color: var(--button-color-focused);
 
   &::after {
     background: var(--button-background-focused);
 
     opacity: var(--button-background-focused-opacity);
   }
+
+  &.action-sheet-selected::after {
+    background: var(--button-background-focused, var(--button-background-selected));
+
+    opacity: var(--button-background-focused-opacity, var(--button-background-selected-opacity));
+  }
 }
 
 // Action Sheet: Hover

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

@@ -17,11 +17,13 @@ import {
   safeCall,
   setOverlayId,
 } from '@utils/overlays';
+import { renderOptionLabel } from '@utils/select-option-render';
 import { getClassMap } from '@utils/theme';
 
 import { getIonMode } 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';
@@ -562,6 +564,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}
@@ -583,7 +600,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>
           {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
         </button>

core/src/components/action-sheet/test/basic/index.html

@@ -46,6 +46,8 @@
       .my-color-class {
         --background: #292929;
         --button-background-selected: #222222;
+        --button-background-activated: #393838;
+        --button-background-activated-opacity: 1;
 
         --color: #dfdfdf;
         --button-color: #dfdfdf;

core/src/components/action-sheet/test/states/action-sheet.e2e.ts

@@ -0,0 +1,40 @@
+import { configs, test } from '@utils/test/playwright';
+
+import { ActionSheetFixture } from '../basic/fixture';
+
+/**
+ * This behavior does not vary across  directions.
+ */
+configs({ directions: ['ltr'], modes: ['ios', 'md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('action sheet: states'), () => {
+    /**
+     * `(any-hover: hover)` evaluates to "none" in all three mobile-emulated
+     * projects, suppressing the hover rules:
+     *
+     * - Chromium and WebKit suppress it because of hasTouch and isMobile.
+     * - Headless Firefox doesn't detect input devices and reports no hover
+     *   capability regardless of context options, so override it via
+     *   launchOptions.firefoxUserPrefs. Bit values: 4 = FINE (mouse),
+     *   8 = HOVER, 12 = FINE | HOVER.
+     *
+     * Viewport, userAgent, and scale factor remain mobile-sized.
+     */
+    test.use({
+      hasTouch: false,
+      isMobile: false,
+    });
+
+    test('should render all button states', async ({ page }) => {
+      await page.goto(`/src/components/action-sheet/test/states`, config);
+
+      const actionSheetFixture = new ActionSheetFixture(page, screenshot);
+
+      await actionSheetFixture.open('#basic');
+
+      const defaultButton = page.locator('ion-action-sheet button.action-sheet-button').first();
+      await defaultButton.hover();
+
+      await actionSheetFixture.screenshot('states');
+    });
+  });
+});