diff --git a/core/api.txt b/core/api.txt
index 067b07e818c..8333cd73e79 100644
--- a/core/api.txt
+++ b/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
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 2d8a59f1903..f17aacb39e2 100644
--- a/core/src/components.d.ts
+++ b/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;
diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index 672b0728726..26710a4a366 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/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";
diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index e3480feefe4..38075e28639 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/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 {
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 2519c214f3f..ef1d5aec575 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/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,7 +217,7 @@
// Action Sheet: Focused
// --------------------------------------------------
-.action-sheet-button.ion-focused {
+.action-sheet-button.ion-focused:not(.ion-activated) {
color: var(--button-color-focused);
&::after {
@@ -221,6 +225,12 @@
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
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index f5fae2c0ebb..c48e95d862d 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/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 (
diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html
index 640801b2ddf..73f78ca635d 100644
--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/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;
diff --git a/core/src/components/action-sheet/test/states/action-sheet.e2e.ts b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts
new file mode 100644
index 00000000000..d3d7eac4b8b
--- /dev/null
+++ b/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');
+ });
+ });
+});
diff --git a/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5a3e78894ef
Binary files /dev/null and b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..15b8f9a3b2f
Binary files /dev/null and b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d03447bdf25
Binary files /dev/null and b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..26357e0ef67
Binary files /dev/null and b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..74d193b19c5
Binary files /dev/null and b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1d3bc166290
Binary files /dev/null and b/core/src/components/action-sheet/test/states/action-sheet.e2e.ts-snapshots/action-sheet-states-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/action-sheet/test/states/index.html b/core/src/components/action-sheet/test/states/index.html
new file mode 100644
index 00000000000..5d5339d5d1b
--- /dev/null
+++ b/core/src/components/action-sheet/test/states/index.html
@@ -0,0 +1,97 @@
+
+
+
+
+ Action Sheet - States
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Action Sheet - States
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
index 259d00e0112..4241b89c591 100644
--- a/core/src/components/alert/alert.ios.scss
+++ b/core/src/components/alert/alert.ios.scss
@@ -1,3 +1,4 @@
+@use "../select-option/select-option.ios.overlay";
@import "./alert";
@import "./alert.ios.vars";
@@ -146,9 +147,6 @@
.alert-radio-label {
@include padding($alert-ios-radio-label-padding-top, $alert-ios-radio-label-padding-end, $alert-ios-radio-label-padding-bottom, $alert-ios-radio-label-padding-start);
- flex: 1;
- order: 0;
-
color: $alert-ios-radio-label-text-color;
}
@@ -167,7 +165,7 @@
.alert-radio-icon {
position: relative;
- order: 1;
+ flex-shrink: 0;
min-width: $alert-ios-radio-min-width;
}
@@ -176,8 +174,8 @@
// iOS Alert Radio Checked
// -----------------------------------------
-[aria-checked=true] .alert-radio-inner {
- @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start);
+[aria-checked="true"] .alert-radio-inner {
+ @include position($alert-ios-radio-icon-top, null, null, null);
position: absolute;
@@ -193,6 +191,15 @@
border-color: $alert-ios-radio-icon-border-color;
}
+// The icon's inline offset gives it a gap from whichever edge the icon
+// sits on, which depends on label placement
+[aria-checked="true"] .radio-label-placement-end .alert-radio-inner {
+ @include position-horizontal(null, $alert-ios-radio-icon-start);
+}
+
+[aria-checked="true"] .radio-label-placement-start .alert-radio-inner {
+ @include position-horizontal($alert-ios-radio-icon-start, null);
+}
// iOS Alert Checkbox Label
// --------------------------------------------------
@@ -200,8 +207,6 @@
.alert-checkbox-label {
@include padding($alert-ios-checkbox-label-padding-top, $alert-ios-checkbox-label-padding-end, $alert-ios-checkbox-label-padding-bottom, $alert-ios-checkbox-label-padding-start);
- flex: 1;
-
color: $alert-ios-checkbox-label-text-color;
}
@@ -210,10 +215,12 @@
.alert-checkbox-icon {
@include border-radius($alert-ios-checkbox-border-radius);
- @include margin($alert-ios-checkbox-margin-top, $alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-bottom, $alert-ios-checkbox-margin-start);
+ @include margin($alert-ios-checkbox-margin-top, null, $alert-ios-checkbox-margin-bottom, null);
position: relative;
+ flex-shrink: 0;
+
width: $alert-ios-checkbox-size;
height: $alert-ios-checkbox-size;
@@ -226,6 +233,16 @@
contain: strict;
}
+// The icon's inline margins are asymmetric (larger gap from the row
+// edge, smaller gap toward the label), so they swap with label
+// placement.
+.checkbox-label-placement-end .alert-checkbox-icon {
+ @include margin-horizontal($alert-ios-checkbox-margin-start, $alert-ios-checkbox-margin-end);
+}
+
+.checkbox-label-placement-start .alert-checkbox-icon {
+ @include margin-horizontal($alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-start);
+}
// iOS Alert Checkbox Outer Circle: Checked
// -----------------------------------------
@@ -240,8 +257,8 @@
// iOS Alert Checkbox Inner Checkmark: Checked
// -----------------------------------------
-[aria-checked=true] .alert-checkbox-inner {
- @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start);
+[aria-checked="true"] .alert-checkbox-inner {
+ @include position($alert-ios-checkbox-icon-top, null, null, null);
position: absolute;
@@ -257,6 +274,15 @@
border-color: $alert-ios-checkbox-icon-border-color;
}
+// The icon's inline offset gives it a gap from whichever edge the icon
+// sits on, which depends on label placement
+[aria-checked="true"] .checkbox-label-placement-end .alert-checkbox-inner {
+ @include position-horizontal($alert-ios-checkbox-icon-start, null);
+}
+
+[aria-checked="true"] .checkbox-label-placement-start .alert-checkbox-inner {
+ @include position-horizontal(null, $alert-ios-checkbox-icon-start);
+}
// iOS Alert Button
// --------------------------------------------------
@@ -329,7 +355,7 @@
background-color: $alert-ios-button-background-color-activated;
}
-// iOS Action Sheet Button: Destructive
+// iOS Alert Button: Destructive
// ---------------------------------------------------
.alert-button-role-destructive,
diff --git a/core/src/components/alert/alert.md.scss b/core/src/components/alert/alert.md.scss
index 3ab3833e6c0..951105c0818 100644
--- a/core/src/components/alert/alert.md.scss
+++ b/core/src/components/alert/alert.md.scss
@@ -1,3 +1,4 @@
+@use "../select-option/select-option.md.overlay";
@import "./alert";
@import "./alert.md.vars";
@@ -140,25 +141,47 @@
// --------------------------------------------------
.alert-radio-label {
- @include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start);
+ @include padding($alert-md-radio-label-padding-top, null, $alert-md-radio-label-padding-bottom, null);
- flex: 1;
+ // Required for the radio icon to stay on the screen without
+ // being squished when the font size scales up.
+ max-width: calc(100% - $alert-md-radio-width);
color: $alert-md-radio-label-text-color;
font-size: $alert-md-radio-label-font-size;
}
+.radio-label-placement-end .alert-radio-label {
+ /**
+ * The label's inline padding clears space for the icon on the icon's side.
+ * When the label is placed at the end, the icon is at the start, so the
+ * larger padding clears it on the start side.
+ */
+ @include padding-horizontal($alert-md-radio-label-padding-start, $alert-md-radio-label-padding-end);
+}
+
+.radio-label-placement-start .alert-radio-label {
+ /**
+ * The label's inline padding clears space for the icon on the icon's side.
+ * When the label is placed at the start, the icon is at the end, so the
+ * larger padding clears it on the end side.
+ */
+ @include padding-horizontal($alert-md-radio-label-padding-end, $alert-md-radio-label-padding-start);
+}
+
// Material Design Alert Radio Unchecked Circle
// ---------------------------------------------------
.alert-radio-icon {
- @include position($alert-md-radio-top, null, null, $alert-md-radio-left);
+ @include position($alert-md-radio-top, null, null, null);
@include border-radius($alert-md-radio-border-radius);
display: block;
position: relative;
+ flex-shrink: 0;
+
width: $alert-md-radio-width;
height: $alert-md-radio-height;
@@ -167,6 +190,16 @@
border-color: $alert-md-radio-border-color-off;
}
+// The icon's inline offset gives it a gap from whichever edge the icon
+// sits on, which depends on label placement
+.radio-label-placement-end .alert-radio-icon {
+ @include position-horizontal($alert-md-radio-left, null);
+}
+
+.radio-label-placement-start .alert-radio-icon {
+ @include position-horizontal(null, $alert-md-radio-left);
+}
+
// Material Design Alert Radio Checked Dot
// ---------------------------------------------------
@@ -207,29 +240,46 @@
// --------------------------------------------------
.alert-checkbox-label {
- @include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start);
-
- flex: 1;
+ @include padding($alert-md-checkbox-label-padding-top, null, $alert-md-checkbox-label-padding-bottom, null);
// Required for the checkbox icon to stay on the screen without
// being squished when the font size scales up.
- width: calc(100% - $alert-md-checkbox-label-padding-start);
+ max-width: calc(100% - $alert-md-checkbox-width);
color: $alert-md-checkbox-label-text-color;
font-size: $alert-md-checkbox-label-font-size;
}
+.checkbox-label-placement-end .alert-checkbox-label {
+ /**
+ * The label's inline padding clears space for the icon on the icon's side.
+ * When the label is placed at the end, the icon is at the start, so the
+ * larger padding clears it on the start side.
+ */
+ @include padding-horizontal($alert-md-checkbox-label-padding-start, $alert-md-checkbox-label-padding-end);
+}
+
+.checkbox-label-placement-start .alert-checkbox-label {
+ /**
+ * The label's inline padding clears space for the icon on the icon's side.
+ * When the label is placed at the start, the icon is at the end, so the
+ * larger padding clears it on the end side.
+ */
+ @include padding-horizontal($alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-start);
+}
// Material Design Alert Checkbox Outline: Unchecked
// --------------------------------------------------
.alert-checkbox-icon {
- @include position($alert-md-checkbox-top, null, null, $alert-md-checkbox-left);
+ @include position($alert-md-checkbox-top, null, null, null);
@include border-radius($alert-md-checkbox-border-radius);
position: relative;
+ flex-shrink: 0;
+
width: $alert-md-checkbox-width;
height: $alert-md-checkbox-height;
@@ -240,6 +290,16 @@
contain: strict;
}
+// The icon's inline offset gives it a gap from whichever edge the icon
+// sits on, which depends on label placement
+.checkbox-label-placement-end .alert-checkbox-icon {
+ @include position-horizontal($alert-md-checkbox-left, null);
+}
+
+.checkbox-label-placement-start .alert-checkbox-icon {
+ @include position-horizontal(null, $alert-md-checkbox-left);
+}
+
// Material Design Alert Checkbox Checkmark: Checked
// --------------------------------------------------
@@ -298,7 +358,7 @@
overflow: hidden;
}
-.alert-button-inner {
+.alert-button-group .alert-button-inner {
justify-content: $alert-md-button-group-justify-content;
}
diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss
index 5f56d9161da..df47f3d0664 100644
--- a/core/src/components/alert/alert.md.vars.scss
+++ b/core/src/components/alert/alert.md.vars.scss
@@ -33,11 +33,14 @@ $alert-md-background-color: $overlay-md-background-color;
/// @prop - Box shadow color of the alert
$alert-md-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
+/// @prop - Padding end of the alert
+$alert-md-padding-end: 24px;
+
/// @prop - Padding top of the alert head
$alert-md-head-padding-top: 20px;
/// @prop - Padding end of the alert head
-$alert-md-head-padding-end: 23px;
+$alert-md-head-padding-end: $alert-md-padding-end;
/// @prop - Padding bottom of the alert head
$alert-md-head-padding-bottom: 15px;
@@ -67,7 +70,7 @@ $alert-md-sub-title-text-color: $text-color;
$alert-md-message-padding-top: 20px;
/// @prop - Padding end of the alert message
-$alert-md-message-padding-end: 24px;
+$alert-md-message-padding-end: $alert-md-padding-end;
/// @prop - Padding bottom of the alert message
$alert-md-message-padding-bottom: $alert-md-message-padding-top;
@@ -186,11 +189,14 @@ $alert-md-list-border-top: 1px solid $alert-md-input-border-c
/// @prop - Border bottom of the alert list
$alert-md-list-border-bottom: $alert-md-list-border-top;
+/// @prop - Spacing between control and label
+$alert-md-control-label-spacing: 32px;
+
/// @prop - Top of the alert radio
$alert-md-radio-top: 0;
/// @prop - Left of the alert radio
-$alert-md-radio-left: 26px;
+$alert-md-radio-left: $alert-md-padding-end;
/// @prop - Width of the alert radio
$alert-md-radio-width: 20px;
@@ -241,13 +247,13 @@ $alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0
$alert-md-radio-label-padding-top: 13px;
/// @prop - Padding end on the label for the radio alert
-$alert-md-radio-label-padding-end: 26px;
+$alert-md-radio-label-padding-end: $alert-md-padding-end;
/// @prop - Padding bottom on the label for the radio alert
$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top;
/// @prop - Padding start on the label for the radio alert
-$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px;
+$alert-md-radio-label-padding-start: $alert-md-radio-left + $alert-md-control-label-spacing;
/// @prop - Font size of the label for the radio alert
$alert-md-radio-label-font-size: dynamic-font(16px);
@@ -262,7 +268,7 @@ $alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color;
$alert-md-checkbox-top: 0;
/// @prop - Left of the checkbox in the alert
-$alert-md-checkbox-left: 26px;
+$alert-md-checkbox-left: $alert-md-padding-end;
/// @prop - Width of the checkbox in the alert
$alert-md-checkbox-width: 16px;
@@ -313,13 +319,13 @@ $alert-md-checkbox-icon-transform: rotate(45deg);
$alert-md-checkbox-label-padding-top: 13px;
/// @prop - Padding end of the label for the checkbox in the alert
-$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left;
+$alert-md-checkbox-label-padding-end: $alert-md-padding-end;
/// @prop - Padding bottom of the label for the checkbox in the alert
$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top;
/// @prop - Padding start of the label for the checkbox in the alert
-$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px;
+$alert-md-checkbox-label-padding-start: $alert-md-checkbox-left + $alert-md-control-label-spacing;
/// @prop - Text color of the label for the checkbox in the alert
$alert-md-checkbox-label-text-color: $text-color-step-150;
diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
index 12cdac9040b..9d93a4e74d9 100644
--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.scss
@@ -199,6 +199,46 @@
}
+// Alert Option: Label Placement
+// --------------------------------------------------
+
+/**
+ * Label is on the right of the radio in LTR and
+ * on the left in RTL.
+ */
+.radio-label-placement-start,
+.checkbox-label-placement-start {
+ flex-direction: row-reverse;
+}
+
+/**
+ * Label is on the left of the radio in LTR and
+ * on the right in RTL.
+ */
+.radio-label-placement-end,
+.checkbox-label-placement-end {
+ flex-direction: row;
+}
+
+// Alert Option: Justify
+// --------------------------------------------------
+
+.radio-justify-start,
+.checkbox-justify-start {
+ justify-content: start;
+}
+
+.radio-justify-end,
+.checkbox-justify-end {
+ justify-content: end;
+}
+
+.radio-justify-space-between,
+.checkbox-justify-space-between {
+ justify-content: space-between;
+}
+
+
// Alert Button: Disabled
// --------------------------------------------------
.alert-input-disabled,
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index ac7f84d802f..3d5ed015873 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -6,6 +6,7 @@ import { createButtonActiveGesture } from '@utils/gesture/button-active';
import { raf } from '@utils/helpers';
import { createLockController } from '@utils/lock-controller';
import { printIonWarning } from '@utils/logging';
+import { getOverlayLabelJustify, getOverlayLabelPlacement } from '@utils/overlay-control-label';
import {
BACKDROP,
cleanupRootFocusTrapAccessibility,
@@ -20,6 +21,7 @@ import {
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';
@@ -27,6 +29,7 @@ import { getIonMode } from '../../global/ionic-global';
import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
import type { OverlayEventDetail } from '../../utils/overlays-interface';
import type { IonicSafeString } from '../../utils/sanitization';
+import type { SelectAlertInput } from '../select/select-interface';
import type { AlertButton, AlertInput } from './alert-interface';
import { iosEnterAnimation } from './animations/ios.enter';
@@ -339,25 +342,20 @@ export class Alert implements ComponentInterface, OverlayInterface {
}
this.inputType = inputTypes.values().next().value;
- this.processedInputs = inputs.map(
- (i, index) =>
- ({
- type: i.type || 'text',
- name: i.name || `${index}`,
- placeholder: i.placeholder || '',
- value: i.value,
- label: i.label,
- checked: !!i.checked,
- disabled: !!i.disabled,
- id: i.id || `alert-input-${this.overlayIndex}-${index}`,
- handler: i.handler,
- min: i.min,
- max: i.max,
- cssClass: i.cssClass ?? '',
- attributes: i.attributes || {},
- tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
- } as AlertInput)
- );
+ this.processedInputs = inputs.map((i, index) => {
+ return {
+ ...i,
+ type: i.type || 'text',
+ name: i.name || `${index}`,
+ placeholder: i.placeholder || '',
+ checked: !!i.checked,
+ disabled: !!i.disabled,
+ id: i.id || `alert-input-${this.overlayIndex}-${index}`,
+ cssClass: i.cssClass ?? '',
+ attributes: i.attributes || {},
+ tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
+ } as AlertInput;
+ });
}
connectedCallback() {
@@ -595,39 +593,66 @@ export class Alert implements ComponentInterface, OverlayInterface {
return (