diff --git a/BREAKING.md b/BREAKING.md index 2260e43c78c..54df166e4ea 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -139,6 +139,14 @@ When using `interface="action-sheet"`, `ion-select` no longer assigns the `selec Previously, the `selected` role was assigned only to the option matching the select's current value. Because the dismiss role mirrors the tapped button, this surfaced in just one case: re-selecting the already-selected option dismissed the action sheet with `role: "selected"` in `ionActionSheetDidDismiss`. Tapping any other option changed the value and dismissed with `role: ""`. Now that the role is no longer assigned, both cases dismiss with `role: undefined`. Apps that inspected this role to detect that a value was chosen, such as reading `role` from the underlying action sheet's `onDidDismiss` result, should listen for `ion-select`'s `ionChange` event instead, which emits the selected value when the selection changes. +**`cancelText` Default Is Now Per-Interface** + +The default value of the `cancelText` property on `ion-select` now depends on the `interface`. It defaults to `'Ok'` for the `modal` interface and `'Cancel'` for the `alert` and `action-sheet` interfaces. Previously, `cancelText` defaulted to `'Cancel'` for every interface. + +The property type changed from `string` to `string | undefined`. When `cancelText` is left unset, the per-interface default is used. Setting `cancelText` to an explicit string continues to override the button text for all interfaces as before. + +Apps using the `modal` interface that relied on the cancel button reading `'Cancel'` should set `cancelText="Cancel"` to keep the previous text. +

Framework Specific

Angular

diff --git a/core/api.txt b/core/api.txt index 067b07e818c..6611aa3b298 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1680,7 +1680,7 @@ ion-segment-view,prop,swipeGesture,boolean,true,false,false ion-segment-view,event,ionSegmentViewScroll,SegmentViewScrollEvent,true ion-select,shadow -ion-select,prop,cancelText,string,'Cancel',false,false +ion-select,prop,cancelText,string | undefined,undefined,false,false ion-select,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-select,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false ion-select,prop,disabled,boolean,false,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 2d8a59f1903..452a82c9262 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3022,10 +3022,9 @@ export namespace Components { } interface IonSelect { /** - * The text to display on the cancel button. - * @default 'Cancel' + * The text to display on the cancel button. Defaults to `'Cancel'` for the `alert` and `action-sheet` interfaces, and `'Ok'` for the `modal` interface. */ - "cancelText": string; + "cancelText"?: string; /** * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). This property is only available when using the modern select syntax. */ @@ -8205,8 +8204,7 @@ declare namespace LocalJSX { } interface IonSelect { /** - * The text to display on the cancel button. - * @default 'Cancel' + * The text to display on the cancel button. Defaults to `'Cancel'` for the `alert` and `action-sheet` interfaces, and `'Ok'` for the `modal` interface. */ "cancelText"?: string; /** diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 73fb6c59ac7..4ffcb484baf 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -94,8 +94,10 @@ export class Select implements ComponentInterface { /** * The text to display on the cancel button. + * Defaults to `'Cancel'` for the `alert` and `action-sheet` + * interfaces, and `'Ok'` for the `modal` interface. */ - @Prop() cancelText = 'Cancel'; + @Prop() cancelText?: string; /** * The color to use from your application's color palette. @@ -525,6 +527,18 @@ export class Select implements ComponentInterface { return overlay; } + /** + * Resolves the cancel button text, falling back to the + * per-interface default when `cancelText` is not set: + * `'Ok'` for the `modal` interface, `'Cancel'` otherwise. + */ + private get interfaceCancelText(): string { + if (this.cancelText !== undefined) { + return this.cancelText; + } + return this.interface === 'modal' ? 'Ok' : 'Cancel'; + } + private createOverlay(ev?: UIEvent): Promise { let selectInterface = this.interface; if (selectInterface === 'action-sheet' && this.multiple) { @@ -609,7 +623,7 @@ export class Select implements ComponentInterface { // Add "cancel" button actionSheetButtons.push({ - text: this.cancelText, + text: this.interfaceCancelText, role: 'cancel', handler: () => { this.ionCancel.emit(); @@ -783,7 +797,7 @@ export class Select implements ComponentInterface { inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [ { - text: this.cancelText, + text: this.interfaceCancelText, role: 'cancel', handler: () => { this.ionCancel.emit(); @@ -830,7 +844,7 @@ export class Select implements ComponentInterface { component: 'ion-select-modal', componentProps: { header: interfaceOptions.header, - cancelText: this.cancelText, + cancelText: this.interfaceCancelText, multiple, value, options: this.createOverlaySelectOptions(this.childOpts, value), diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png index 43fcd9ef709..e1bd40b26c5 100644 Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png index b25f9c98d2f..0077e636fc0 100644 Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png index 85abf17ca89..6f7d8023a02 100644 Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png index a75ada58efb..48bb008ed5e 100644 Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png index 81dd78d1d86..70967455504 100644 Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png index 5010cc499ea..d887c7a075f 100644 Binary files a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png differ