diff --git a/core/api.txt b/core/api.txt index 8a9af0b2918..3120837c1c4 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1734,7 +1734,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 443c04611cf..8079cdc3379 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3121,10 +3121,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 `'Okay'` 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. */ @@ -8465,8 +8464,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 `'Okay'` for the `modal` interface. */ "cancelText"?: string; /** diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index e39856c2482..1159e407ff4 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 `'Okay'` for the `modal` interface. */ - @Prop() cancelText = 'Cancel'; + @Prop() cancelText?: string; /** * The color to use from your application's color palette. @@ -492,6 +494,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: + * `'Okay'` 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) { @@ -577,7 +591,7 @@ export class Select implements ComponentInterface { // Add "cancel" button actionSheetButtons.push({ - text: this.cancelText, + text: this.interfaceCancelText, role: 'cancel', handler: () => { this.ionCancel.emit(); @@ -751,7 +765,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(); @@ -798,7 +812,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