From e9faf54d0a7409521706ce9c8b0d26f3fbe9ba41 Mon Sep 17 00:00:00 2001
From: luisbytes <137983537+luisbytes@users.noreply.github.com>
Date: Thu, 10 Aug 2023 11:26:01 -0500
Subject: [PATCH] feat(toast): add shadow part for cancel button (#27921)

resolves #27920
---
 core/api.txt                                  |  1 +
 core/src/components/toast/test/toast.spec.tsx | 15 +++++++++++++++
 core/src/components/toast/toast.tsx           |  7 ++++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/core/api.txt b/core/api.txt
index 55ace969a9..47b1307e5a 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1471,6 +1471,7 @@ ion-toast,css-prop,--start
 ion-toast,css-prop,--white-space
 ion-toast,css-prop,--width
 ion-toast,part,button
+ion-toast,part,button cancel
 ion-toast,part,container
 ion-toast,part,header
 ion-toast,part,icon
diff --git a/core/src/components/toast/test/toast.spec.tsx b/core/src/components/toast/test/toast.spec.tsx
index 7955acf3d3..d59e7d32e9 100644
--- a/core/src/components/toast/test/toast.spec.tsx
+++ b/core/src/components/toast/test/toast.spec.tsx
@@ -129,3 +129,18 @@ describe('toast: htmlAttributes', () => {
     await expect(toast.getAttribute('data-testid')).toBe('basic-toast');
   });
 });
+
+describe('toast: button cancel', () => {
+  it('should render the cancel button with part button-cancel', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      template: () => <ion-toast buttons={[{ text: 'Cancel', role: 'cancel' }]}></ion-toast>,
+    });
+
+    const toast = page.body.querySelector('ion-toast');
+
+    const buttonCancel = toast?.shadowRoot?.querySelector('.toast-button-cancel');
+
+    expect(buttonCancel.getAttribute('part')).toBe('button cancel');
+  });
+});
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 33f985e7c8..fcc234ae85 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -35,6 +35,7 @@ import type { ToastButton, ToastPosition, ToastLayout } from './toast-interface'
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part button - Any button element that is displayed inside of the toast.
+ * @part button cancel - Any button element with role "cancel" that is displayed inside of the toast.
  * @part container - The element that wraps all child elements.
  * @part header - The header text of the toast.
  * @part message - The body text of the toast.
@@ -422,7 +423,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
             class={buttonClass(b)}
             tabIndex={0}
             onClick={() => this.buttonClick(b)}
-            part="button"
+            part={buttonPart(b)}
           >
             <div class="toast-button-inner">
               {b.icon && (
@@ -586,5 +587,9 @@ const buttonClass = (button: ToastButton): CssClassMap => {
   };
 };
 
+const buttonPart = (button: ToastButton): string => {
+  return isCancel(button.role) ? 'button cancel' : 'button';
+};
+
 type ToastPresentOptions = ToastPosition;
 type ToastDismissOptions = ToastPosition;