diff --git a/core/api.txt b/core/api.txt index 745d82786af..cd4e1229ca7 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1766,6 +1766,7 @@ ion-select,part,supporting-text ion-select,part,text ion-select-modal,scoped +ion-select-modal,prop,cancelText,string,'Close',false,false ion-select-modal,prop,header,string | undefined,undefined,false,false ion-select-modal,prop,multiple,boolean | undefined,undefined,false,false ion-select-modal,prop,options,SelectModalOption[],[],false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 5e47667392b..ae6d9f4c2fb 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3223,6 +3223,11 @@ export namespace Components { "value"?: any | null; } interface IonSelectModal { + /** + * The text to display on the cancel button. + * @default 'Close' + */ + "cancelText": string; "header"?: string; "multiple"?: boolean; /** @@ -8548,6 +8553,11 @@ declare namespace LocalJSX { "value"?: any | null; } interface IonSelectModal { + /** + * The text to display on the cancel button. + * @default 'Close' + */ + "cancelText"?: string; "header"?: string; "multiple"?: boolean; /** diff --git a/core/src/components/select-modal/select-modal.tsx b/core/src/components/select-modal/select-modal.tsx index 5925d209640..d83d7fa76b0 100644 --- a/core/src/components/select-modal/select-modal.tsx +++ b/core/src/components/select-modal/select-modal.tsx @@ -23,6 +23,11 @@ export class SelectModal implements ComponentInterface { @Prop() header?: string; + /** + * The text to display on the cancel button. + */ + @Prop() cancelText = 'Close'; + @Prop() multiple?: boolean; @Prop() options: SelectModalOption[] = []; @@ -149,7 +154,7 @@ export class SelectModal implements ComponentInterface { {this.header !== undefined && {this.header}} - this.closeModal()}>Close + this.closeModal()}>{this.cancelText} diff --git a/core/src/components/select-modal/test/custom/index.html b/core/src/components/select-modal/test/custom/index.html new file mode 100644 index 00000000000..20de632ce3d --- /dev/null +++ b/core/src/components/select-modal/test/custom/index.html @@ -0,0 +1,40 @@ + + + + + Select - Custom + + + + + + + + + + + + + Select Modal - Custom + + + + + + + + + + + + + diff --git a/core/src/components/select-modal/test/custom/select-modal.e2e.ts b/core/src/components/select-modal/test/custom/select-modal.e2e.ts new file mode 100644 index 00000000000..7c95a4428dd --- /dev/null +++ b/core/src/components/select-modal/test/custom/select-modal.e2e.ts @@ -0,0 +1,45 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +import type { SelectModalOption } from '../../select-modal-interface'; +import { SelectModalPage } from '../fixtures'; + +const options: SelectModalOption[] = [ + { value: 'apple', text: 'Apple', disabled: false, checked: false }, + { value: 'banana', text: 'Banana', disabled: false, checked: false }, +]; + +/** + * This behavior does not vary across modes/directions. + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('select-modal: custom'), () => { + let selectModalPage: SelectModalPage; + + test.beforeEach(async ({ page }) => { + selectModalPage = new SelectModalPage(page); + }); + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + test('should render custom cancel text when prop is provided', async ({ page: _page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/30295', + }); + + await selectModalPage.setup(config, options, false); + + const cancelButton = selectModalPage.selectModal.locator('ion-button'); + + // Verify the default text on the cancel button + await expect(cancelButton).toHaveText('Close'); + + await selectModalPage.selectModal.evaluate((selectModal: HTMLIonSelectModalElement) => { + selectModal.cancelText = 'Close me'; + }); + + // Verify the cancel button text has been updated + await expect(cancelButton).toHaveText('Close me'); + }); + }); +}); diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index b8de35c4843..97309bac332 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -795,6 +795,7 @@ export class Select implements ComponentInterface { component: 'ion-select-modal', componentProps: { header: interfaceOptions.header, + cancelText: this.cancelText, 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 a66e87cecba..43fcd9ef709 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 2e4f0b3a06f..b25f9c98d2f 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 e49ddb007b3..0cd3370fa9a 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 2acdba257d9..a75ada58efb 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 96561b7dad8..81dd78d1d86 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 a4e7755364c..984eb8a0483 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 diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index c81ac8f8571..beaf411cec5 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -2192,14 +2192,14 @@ This event will not emit when programmatically setting the `value` property. @ProxyCmp({ - inputs: ['header', 'multiple', 'options'] + inputs: ['cancelText', 'header', 'multiple', 'options'] }) @Component({ selector: 'ion-select-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['header', 'multiple', 'options'], + inputs: ['cancelText', 'header', 'multiple', 'options'], }) export class IonSelectModal { protected el: HTMLIonSelectModalElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 93f9bf10c86..2fa0482d3d6 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -1921,14 +1921,14 @@ export declare interface IonSegmentView extends Components.IonSegmentView { @ProxyCmp({ defineCustomElementFn: defineIonSelectModal, - inputs: ['header', 'multiple', 'options'] + inputs: ['cancelText', 'header', 'multiple', 'options'] }) @Component({ selector: 'ion-select-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['header', 'multiple', 'options'], + inputs: ['cancelText', 'header', 'multiple', 'options'], standalone: true }) export class IonSelectModal { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index a0c23232908..72e22d2c7b4 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -947,6 +947,7 @@ export const IonSelect: StencilVueComponent = /*@__PURE__*/ defineContainer('ion-select-modal', defineIonSelectModal, [ 'header', + 'cancelText', 'multiple', 'options' ]);