From c0ce64a9a531df05ee4178dd32a7f9b0bc2cbf1f Mon Sep 17 00:00:00 2001
From: luisbytes <luisbytesdev@gmail.com>
Date: Wed, 2 Aug 2023 22:51:24 -0500
Subject: [PATCH] feat(toast): add part for button cancel

---
 core/api.txt                        |  1 +
 core/src/components/toast/toast.tsx | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/core/api.txt b/core/api.txt
index 9783b904b80..1a4206dde77 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1419,6 +1419,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/toast.tsx b/core/src/components/toast/toast.tsx
index 6ee79775f63..28721342926 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -30,6 +30,7 @@ import type { ToastAttributes, ToastPosition, ToastLayout } from './toast-interf
  * @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.
@@ -283,7 +284,13 @@ export class Toast implements ComponentInterface, OverlayInterface {
     return (
       <div class={buttonGroupsClasses}>
         {buttons.map((b) => (
-          <button type="button" class={buttonClass(b)} tabIndex={0} onClick={() => this.buttonClick(b)} part="button">
+          <button
+            type="button"
+            class={buttonClass(b)}
+            tabIndex={0}
+            onClick={() => this.buttonClick(b)}
+            part={buttonPart(b)}
+          >
             <div class="toast-button-inner">
               {b.icon && (
                 <ion-icon
@@ -396,5 +403,9 @@ const buttonClass = (button: ToastButton): CssClassMap => {
   };
 };
 
+const buttonPart = (button: ToastButton): string => {
+  return isCancel(button.role) ? 'button-cancel' : 'button';
+};
+
 type ToastPresentOptions = ToastPosition;
 type ToastDismissOptions = ToastPosition;