fix(select-modal): rename closeText to cancelText

Author: Nicolas Naso

core/src/components.d.ts

@@ -2862,7 +2862,7 @@ export namespace Components {
         "value"?: any | null;
     }
     interface IonSelectModal {
-        "closeText"?: string;
+        "cancelText"?: string;
         "header"?: string;
         "multiple"?: boolean;
         "options": SelectModalOption[];
@@ -7743,7 +7743,7 @@ declare namespace LocalJSX {
         "value"?: any | null;
     }
     interface IonSelectModal {
-        "closeText"?: string;
+        "cancelText"?: string;
         "header"?: string;
         "multiple"?: boolean;
         "options"?: SelectModalOption[];

core/src/components/select-modal/select-modal.tsx

@@ -23,7 +23,7 @@ export class SelectModal implements ComponentInterface {
 
   @Prop() header?: string;
 
-  @Prop() closeText?: string;
+  @Prop() cancelText?: string;
 
   @Prop() multiple?: boolean;
 
@@ -151,7 +151,7 @@ export class SelectModal implements ComponentInterface {
             {this.header !== undefined && <ion-title>{this.header}</ion-title>}
 
             <ion-buttons slot="end">
-              <ion-button onClick={() => this.closeModal()}>{this.closeText || 'Close'}</ion-button>
+              <ion-button onClick={() => this.closeModal()}>{this.cancelText || 'Close'}</ion-button>
             </ion-buttons>
           </ion-toolbar>
         </ion-header>

core/src/components/select-modal/test/custom-close-text/index.html

@@ -24,7 +24,7 @@
 
       <ion-content>
         <ion-modal is-open="true">
-          <ion-select-modal multiple="false" close-text="Close me"></ion-select-modal>
+          <ion-select-modal multiple="false" cancel-text="Close me"></ion-select-modal>
         </ion-modal>
       </ion-content>
     </ion-app>

core/src/components/select-modal/test/fixtures.ts

@@ -31,7 +31,7 @@ export class SelectModalPage {
       const selectModal = document.querySelector('ion-select-modal');
       selectModal.options = ${JSON.stringify(options)};
       selectModal.multiple = ${multiple};
-      selectModal.closeText = 'Close me';
+      selectModal.cancelText = 'Close me';
     </script>
     `,
       config

core/src/components/select/select.tsx

@@ -1,10 +1,10 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
+import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { NotchController } from '@utils/forms';
 import { compareOptions, createNotchController, isOptionSelected } from '@utils/forms';
-import { focusVisibleElement, renderHiddenInput, inheritAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
-import { actionSheetController, alertController, popoverController, modalController } from '@utils/overlays';
+import { focusVisibleElement, inheritAttributes, renderHiddenInput } from '@utils/helpers';
+import { actionSheetController, alertController, modalController, popoverController } from '@utils/overlays';
 import type { OverlaySelect } from '@utils/overlays-interface';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -17,15 +17,15 @@ import type {
   AlertOptions,
   Color,
   CssClassMap,
+  ModalOptions,
   PopoverOptions,
   StyleEventDetail,
-  ModalOptions,
 } from '../../interface';
 import type { ActionSheetButton } from '../action-sheet/action-sheet-interface';
 import type { AlertInput } from '../alert/alert-interface';
 import type { SelectPopoverOption } from '../select-popover/select-popover-interface';
 
-import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from './select-interface';
+import type { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from './select-interface';
 
 // TODO(FW-2832): types
 
@@ -724,7 +724,7 @@ export class Select implements ComponentInterface {
       component: 'ion-select-modal',
       componentProps: {
         header: interfaceOptions.header,
-        closeText: interfaceOptions.closeText,
+        cancelText: this.cancelText,
         multiple,
         value,
         options: this.createOverlaySelectOptions(this.childOpts, value),

packages/angular/src/directives/proxies.ts

@@ -2109,14 +2109,14 @@ This event will not emit when programmatically setting the `value` property.
 
 
 @ProxyCmp({
-  inputs: ['closeText', 'header', 'multiple', 'options']
+  inputs: ['cancelText', 'header', 'multiple', 'options']
 })
 @Component({
   selector: 'ion-select-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['closeText', 'header', 'multiple', 'options'],
+  inputs: ['cancelText', 'header', 'multiple', 'options'],
 })
 export class IonSelectModal {
   protected el: HTMLIonSelectModalElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -1901,14 +1901,14 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
 
 @ProxyCmp({
   defineCustomElementFn: defineIonSelectModal,
-  inputs: ['closeText', 'header', 'multiple', 'options']
+  inputs: ['cancelText', 'header', 'multiple', 'options']
 })
 @Component({
   selector: 'ion-select-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['closeText', 'header', 'multiple', 'options'],
+  inputs: ['cancelText', 'header', 'multiple', 'options'],
   standalone: true
 })
 export class IonSelectModal {

packages/vue/src/proxies.ts

@@ -910,7 +910,7 @@ export const IonSelect: StencilVueComponent<JSX.IonSelect, JSX.IonSelect["value"
 
 export const IonSelectModal: StencilVueComponent<JSX.IonSelectModal> = /*@__PURE__*/ defineContainer<JSX.IonSelectModal>('ion-select-modal', defineIonSelectModal, [
   'header',
-  'closeText',
+  'cancelText',
   'multiple',
   'options'
 ]);