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

core/api.txt

@@ -2378,6 +2378,8 @@ 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,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-select-option,prop,value,any,undefined,false,false

core/src/components.d.ts

@@ -3863,6 +3863,14 @@ export namespace Components {
           * @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 the `md` and `ionic` themes (the radio control is hidden there).  When unset, the interface picks a default based on theme 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 the `md` and `ionic` themes (the radio control is hidden there).  When unset, the interface picks a default based on theme and control type.
+         */
+        "labelPlacement"?: 'start' | 'end';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -10002,6 +10010,14 @@ declare namespace LocalJSX {
           * @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 the `md` and `ionic` themes (the radio control is hidden there).  When unset, the interface picks a default based on theme 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 the `md` and `ionic` themes (the radio control is hidden there).  When unset, the interface picks a default based on theme and control type.
+         */
+        "labelPlacement"?: 'start' | 'end';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -11382,6 +11398,8 @@ declare namespace LocalJSX {
         "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.common.scss

@@ -1,4 +1,5 @@
-@import "./action-sheet.vars";
+@use "../../themes/mixins" as mixins;
+@use "../select-option/select-option.common.overlay";
 
 // Action Sheet
 // --------------------------------------------------
@@ -41,34 +42,31 @@
   --button-color-hover: var(--button-color);
   --button-color-selected: var(--button-color);
   --min-width: auto;
-  --width: #{$action-sheet-width};
-  --max-width: #{$action-sheet-max-width};
+  --width: 100%;
+  --max-width: 500px;
   --min-height: auto;
   --height: auto;
   --max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
 
-  @include font-smoothing();
-  @include position(0, 0, 0, 0);
+  @include mixins.font-smoothing();
+  @include mixins.position(0, 0, 0, 0);
 
   display: block;
   position: fixed;
 
   outline: none;
 
-  font-family: $font-family-base;
-
   touch-action: none;
   user-select: none;
-  z-index: $z-index-overlay;
 }
 
 :host(.overlay-hidden) {
   display: none;
 }
 
 .action-sheet-wrapper {
-  @include position(null, 0, 0, 0);
-  @include transform(translate3d(0, 100%, 0));
+  @include mixins.position(null, 0, 0, 0);
+  @include mixins.transform(translate3d(0, 100%, 0));
 
   display: block;
   position: absolute;
@@ -81,7 +79,6 @@
   min-height: var(--min-height);
   max-height: var(--max-height);
 
-  z-index: $z-index-overlay-wrapper;
   pointer-events: none;
 }
 
@@ -109,6 +106,10 @@
   opacity: 0.4;
 }
 
+.action-sheet-button:disabled ion-icon {
+  color: currentColor;
+}
+
 .action-sheet-button-inner {
   display: flex;
 
@@ -177,7 +178,7 @@
 // --------------------------------------------------
 
 .action-sheet-button::after {
-  @include button-state();
+  @include mixins.button-state();
 }
 
 // Action Sheet: Selected
@@ -209,14 +210,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
@@ -233,20 +240,3 @@
     }
   }
 }
-
-// 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.ionic.scss

@@ -1,22 +1,110 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "../../themes/mixins" as mixins;
+@use "../select-option/select-option.ionic.interface";
 @use "./action-sheet.common";
-@use "./action-sheet.md" as action-sheet-md;
 
 // Ionic Action Sheet
 // --------------------------------------------------
 
-// Action Sheet: Select Option
-// --------------------------------------------------
+: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-button-label {
-  gap: globals.$ion-space-300;
+.action-sheet-wrapper {
+  @include mixins.margin(var(--ion-safe-area-top, 0), auto, 0, auto);
 }
 
-.select-option-description {
+.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);
-  @include globals.padding(0);
 
-  color: globals.$ion-text-subtle;
+  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-200,
+    globals.$ion-space-400,
+    globals.$ion-space-200,
+    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 {
+  @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;
+}
 
-  font-size: globals.$ion-font-size-350;
+.action-sheet-selected {
+  font-weight: bold;
 }

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

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

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

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

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

@@ -1,19 +1,15 @@
-@use "../../themes/native/native.theme.default" as native;
-@use "../../themes/mixins" as mixins;
-@use "../../themes/functions.font" as font;
+@use "../../themes/native/native.globals" as native;
 @use "./action-sheet.common";
 
 // Action Sheet: Native
 // --------------------------------------------------
 
-.action-sheet-button-label {
-  gap: 12px;
-}
-
-.select-option-description {
-  @include mixins.padding(5px, 0, 0, 0);
+:host {
+  font-family: native.$font-family-base;
 
-  color: native.$text-color-step-300;
+  z-index: native.$z-index-overlay;
+}
 
-  font-size: font.dynamic-font(12px);
+.action-sheet-wrapper {
+  z-index: native.$z-index-overlay-wrapper;
 }

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', 'ionic-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');
+    });
+  });
+});