fix(select): set modal interface cancel button to "Okay" by default

Author: thetaPC

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 `'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.
          */
@@ -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 `'Okay'` for the `modal` interface.
          */
         "cancelText"?: string;
         /**

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.
@@ -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:
+   * `'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<OverlaySelect> {
     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),