feat(select-modal): add cancel icon (#31089)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
Currently the select modal only accepts a string for the `Cancel`
action.

## What is the new behavior?
This PR adds a boolean prop, `cancelIcon` to the `IonSelect` modal which
defaults to false. When the `cancelIcon` prop is true, an `X` icon is
added in place of the `Cancel` text.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

**Preview Links:**
-
https://ionic-framework-git-rou-12695-add-select-cancel-icon-ionic1.vercel.app/src/components/select-modal/test/basic/
-
https://ionic-framework-git-rou-12695-add-select-cancel-icon-ionic1.vercel.app/src/components/select-modal/test/basic?ionic:theme=ionic

---------

Co-authored-by: ionitron <hi@ionicframework.com>

Author: OS-susmitabhowmik

core/api.txt

@@ -2247,6 +2247,7 @@ ion-segment-view,prop,swipeGesture,boolean,true,false,false
 ion-segment-view,event,ionSegmentViewScroll,SegmentViewScrollEvent,true
 
 ion-select,shadow
+ion-select,prop,cancelIcon,boolean,false,false,false
 ion-select,prop,cancelText,string,'Cancel',false,false
 ion-select,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-select,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
@@ -2339,6 +2340,7 @@ ion-select,part,text
 ion-select,part,wrapper
 
 ion-select-modal,scoped
+ion-select-modal,prop,cancelIcon,boolean,false,false,false
 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

core/src/components.d.ts

@@ -3684,6 +3684,11 @@ export namespace Components {
         "swipeGesture": boolean;
     }
     interface IonSelect {
+        /**
+          * If `true`, the cancel button will display an icon instead of the `cancelText`. Only applies when `interface` is set to `"modal"`. Has no effect on `"action-sheet"`, `"alert"`, or `"popover"` interfaces. When `cancelIcon` is `true`, the `cancelText` property is ignored for display but is used as the accessible label for the icon button.
+          * @default false
+         */
+        "cancelIcon": boolean;
         /**
           * The text to display on the cancel button.
           * @default 'Cancel'
@@ -3800,6 +3805,11 @@ export namespace Components {
         "value"?: any | null;
     }
     interface IonSelectModal {
+        /**
+          * If `true`, the cancel button will display a close icon instead of the `cancelText`. When `cancelIcon` is `true`, `cancelText` is not displayed visually but is still used as the accessible label (`aria-label`) for the button.
+          * @default false
+         */
+        "cancelIcon": boolean;
         /**
           * The text to display on the cancel button.
           * @default 'Close'
@@ -9749,6 +9759,11 @@ declare namespace LocalJSX {
         "swipeGesture"?: boolean;
     }
     interface IonSelect {
+        /**
+          * If `true`, the cancel button will display an icon instead of the `cancelText`. Only applies when `interface` is set to `"modal"`. Has no effect on `"action-sheet"`, `"alert"`, or `"popover"` interfaces. When `cancelIcon` is `true`, the `cancelText` property is ignored for display but is used as the accessible label for the icon button.
+          * @default false
+         */
+        "cancelIcon"?: boolean;
         /**
           * The text to display on the cancel button.
           * @default 'Cancel'
@@ -9884,6 +9899,11 @@ declare namespace LocalJSX {
         "value"?: any | null;
     }
     interface IonSelectModal {
+        /**
+          * If `true`, the cancel button will display a close icon instead of the `cancelText`. When `cancelIcon` is `true`, `cancelText` is not displayed visually but is still used as the accessible label (`aria-label`) for the button.
+          * @default false
+         */
+        "cancelIcon"?: boolean;
         /**
           * The text to display on the cancel button.
           * @default 'Close'
@@ -11237,6 +11257,7 @@ declare namespace LocalJSX {
     }
     interface IonSelectAttributes {
         "cancelText": string;
+        "cancelIcon": boolean;
         "color": Color;
         "compareWith": string | SelectCompareFn | null;
         "disabled": boolean;
@@ -11263,6 +11284,7 @@ declare namespace LocalJSX {
     interface IonSelectModalAttributes {
         "header": string;
         "cancelText": string;
+        "cancelIcon": boolean;
         "multiple": boolean;
     }
     interface IonSelectOptionAttributes {

core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png

@@ -1,9 +1,12 @@
-import { getIonMode } from '@global/ionic-global';
+import { getIonMode, getIonTheme } from '@global/ionic-global';
+import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, forceUpdate, h } from '@stencil/core';
 import { safeCall } from '@utils/overlays';
 import { getClassMap, hostContext } from '@utils/theme';
+import { closeOutline, closeSharp } from 'ionicons/icons';
 
+import type { Theme } from '../../interface';
 import type { CheckboxCustomEvent } from '../checkbox/checkbox-interface';
 import type { RadioGroupCustomEvent } from '../radio-group/radio-group-interface';
 
@@ -28,6 +31,13 @@ export class SelectModal implements ComponentInterface {
    */
   @Prop() cancelText = 'Close';
 
+  /**
+   * If `true`, the cancel button will display a close icon instead of the `cancelText`.
+   * When `cancelIcon` is `true`, `cancelText` is not displayed visually but is still used
+   * as the accessible label (`aria-label`) for the button.
+   */
+  @Prop() cancelIcon = false;
+
   @Prop() multiple?: boolean;
 
   @Prop() options: SelectModalOption[] = [];
@@ -79,6 +89,16 @@ export class SelectModal implements ComponentInterface {
     }
   }
 
+  private get cancelButtonIcon(): string {
+    const theme = getIonTheme(this);
+    const icons: Record<Theme, string> = {
+      ios: closeOutline,
+      md: closeSharp,
+      ionic: xRegular,
+    };
+    return icons[theme];
+  }
+
   private getModalContextClasses() {
     const el = this.el;
     return {
@@ -167,7 +187,13 @@ export class SelectModal implements ComponentInterface {
             {this.header !== undefined && <ion-title>{this.header}</ion-title>}
 
             <ion-buttons slot="end">
-              <ion-button onClick={() => this.closeModal()}>{this.cancelText}</ion-button>
+              <ion-button aria-label={this.cancelIcon ? this.cancelText : undefined} onClick={() => this.closeModal()}>
+                {this.cancelIcon ? (
+                  <ion-icon aria-hidden="true" slot="icon-only" icon={this.cancelButtonIcon}></ion-icon>
+                ) : (
+                  this.cancelText
+                )}
+              </ion-button>
             </ion-buttons>
           </ion-toolbar>
         </ion-header>

core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png

@@ -23,18 +23,34 @@
       </ion-header>
 
       <ion-content>
-        <ion-modal is-open="true">
-          <ion-select-modal multiple="false"></ion-select-modal>
+        <ion-list>
+          <ion-item>
+            <ion-label>Cancel Text (default)</ion-label>
+          </ion-item>
+        </ion-list>
+        <ion-modal id="modal-text" is-open="true">
+          <ion-select-modal id="select-modal-text" multiple="false"></ion-select-modal>
+        </ion-modal>
+
+        <ion-list>
+          <ion-item button onclick="document.getElementById('modal-icon').isOpen = true">
+            <ion-label>Cancel Icon</ion-label>
+          </ion-item>
+        </ion-list>
+        <ion-modal id="modal-icon">
+          <ion-select-modal id="select-modal-icon" multiple="false" cancel-icon="true"></ion-select-modal>
         </ion-modal>
       </ion-content>
     </ion-app>
 
     <script>
-      const selectModal = document.querySelector('ion-select-modal');
-      selectModal.options = [
+      const options = [
         { value: 'apple', text: 'Apple', disabled: false, checked: true },
         { value: 'banana', text: 'Banana', disabled: false, checked: false },
       ];
+
+      document.getElementById('select-modal-text').options = options;
+      document.getElementById('select-modal-icon').options = options;
     </script>
   </body>
 </html>

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

@@ -41,5 +41,65 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       // Verify the cancel button text has been updated
       await expect(cancelButton).toHaveText('Close me');
     });
+
+    test('should render an icon on the cancel button when cancelIcon is true', async () => {
+      await selectModalPage.setup(config, options, false);
+
+      const cancelButton = selectModalPage.selectModal.locator('ion-button');
+
+      // Verify no icon is shown by default
+      await expect(cancelButton.locator('ion-icon')).not.toBeAttached();
+
+      await selectModalPage.selectModal.evaluate((selectModal: HTMLIonSelectModalElement) => {
+        selectModal.cancelIcon = true;
+      });
+
+      // Verify the icon is now rendered
+      await expect(cancelButton.locator('ion-icon')).toBeAttached();
+    });
+
+    test('should use cancelText as aria-label on the cancel button when cancelIcon is true', async () => {
+      await selectModalPage.setup(config, options, false);
+
+      const cancelButton = selectModalPage.selectModal.locator('ion-button');
+
+      await selectModalPage.selectModal.evaluate((selectModal: HTMLIonSelectModalElement) => {
+        selectModal.cancelIcon = true;
+        selectModal.cancelText = 'Dismiss';
+      });
+
+      await expect(cancelButton).toHaveAttribute('aria-label', 'Dismiss');
+    });
+
+    test('should not set aria-label on the cancel button when cancelIcon is false', async () => {
+      await selectModalPage.setup(config, options, false);
+
+      const cancelButton = selectModalPage.selectModal.locator('ion-button');
+
+      await expect(cancelButton).not.toHaveAttribute('aria-label');
+    });
+  });
+});
+
+/**
+ * Visual regression tests for cancelIcon across all themes.
+ */
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select-modal: cancel icon'), () => {
+    let selectModalPage: SelectModalPage;
+
+    test.beforeEach(async ({ page }) => {
+      selectModalPage = new SelectModalPage(page);
+    });
+
+    test('should not have visual regressions with cancelIcon', async () => {
+      await selectModalPage.setup(config, options, false);
+
+      await selectModalPage.selectModal.evaluate((selectModal: HTMLIonSelectModalElement) => {
+        selectModal.cancelIcon = true;
+      });
+
+      await selectModalPage.screenshot(screenshot, 'select-modal-cancel-icon-diff');
+    });
   });
 });