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

---
 core/api.txt                                     |  1 +
 .../components/toast/test/buttons/toast.e2e.ts   | 16 ++++++++++++++++
 core/src/components/toast/toast.tsx              | 13 ++++++++++++-
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 core/src/components/toast/test/buttons/toast.e2e.ts

diff --git a/core/api.txt b/core/api.txt
index 55ace969a9a..77a12c3b805 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/buttons/toast.e2e.ts b/core/src/components/toast/test/buttons/toast.e2e.ts
new file mode 100644
index 00000000000..9dbddbf2901
--- /dev/null
+++ b/core/src/components/toast/test/buttons/toast.e2e.ts
@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, config }) => {
+  test.describe(title('toast: cancel button'), () => {
+    test('should render the cancel button with part button-cancel', async ({ page }) => {
+      await page.goto('/src/components/toast/test/buttons', config);
+
+      const toast = page.locator('#closeArray');
+      await toast.click();
+
+      const buttonCancel = page.locator('.toast-button-cancel');
+      await expect(buttonCancel).toHaveAttribute('part', 'button-cancel');
+    });
+  });
+});
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 4f397d94a7c..1d344f50a22 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -34,6 +34,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.
@@ -405,7 +406,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
@@ -568,5 +575,9 @@ const buttonClass = (button: ToastButton): CssClassMap => {
   };
 };
 
+const buttonPart = (button: ToastButton): string => {
+  return isCancel(button.role) ? 'button-cancel' : 'button';
+};
+
 type ToastPresentOptions = ToastPosition;
 type ToastDismissOptions = ToastPosition;

From 06fc764577060498a25e59c3a87b4f5f9601346b Mon Sep 17 00:00:00 2001
From: luisbytes <137983537+luisbytes@users.noreply.github.com>
Date: Wed, 9 Aug 2023 20:08:52 +0000
Subject: [PATCH 2/2] feat(toast): add part for button cancel

---
 core/api.txt                                     |  2 +-
 .../components/toast/test/buttons/toast.e2e.ts   | 16 ----------------
 core/src/components/toast/test/toast.spec.tsx    | 15 +++++++++++++++
 core/src/components/toast/toast.tsx              |  4 ++--
 4 files changed, 18 insertions(+), 19 deletions(-)
 delete mode 100644 core/src/components/toast/test/buttons/toast.e2e.ts

diff --git a/core/api.txt b/core/api.txt
index 77a12c3b805..47b1307e5ae 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1471,7 +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,button cancel
 ion-toast,part,container
 ion-toast,part,header
 ion-toast,part,icon
diff --git a/core/src/components/toast/test/buttons/toast.e2e.ts b/core/src/components/toast/test/buttons/toast.e2e.ts
deleted file mode 100644
index 9dbddbf2901..00000000000
--- a/core/src/components/toast/test/buttons/toast.e2e.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs().forEach(({ title, config }) => {
-  test.describe(title('toast: cancel button'), () => {
-    test('should render the cancel button with part button-cancel', async ({ page }) => {
-      await page.goto('/src/components/toast/test/buttons', config);
-
-      const toast = page.locator('#closeArray');
-      await toast.click();
-
-      const buttonCancel = page.locator('.toast-button-cancel');
-      await expect(buttonCancel).toHaveAttribute('part', 'button-cancel');
-    });
-  });
-});
diff --git a/core/src/components/toast/test/toast.spec.tsx b/core/src/components/toast/test/toast.spec.tsx
index 7955acf3d31..d59e7d32e91 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 f71eadafb0a..6b2117cfaf6 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -35,7 +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 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.
@@ -587,7 +587,7 @@ const buttonClass = (button: ToastButton): CssClassMap => {
 };
 
 const buttonPart = (button: ToastButton): string => {
-  return isCancel(button.role) ? 'button-cancel' : 'button';
+  return isCancel(button.role) ? 'button cancel' : 'button';
 };
 
 type ToastPresentOptions = ToastPosition;