From f69ec4798a74998919df95ae8a337440e33aa1ff Mon Sep 17 00:00:00 2001 From: Hurubon <58346722+Hurubon@users.noreply.github.com> Date: Thu, 20 Nov 2025 10:03:42 -0800 Subject: [PATCH 1/2] feat(toast): add wrapper and content parts (#30737) Issue number: resolves #30735 --------- ## What is the current behavior? Toast's wrapper and content divs do not have part attributes. ## What is the new behavior? - Adds `wrapper` and `content` parts to Toast. ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> --- core/api.txt | 2 + .../components/toast/test/custom/toast.e2e.ts | 133 ++++++++++++++++++ core/src/components/toast/toast.tsx | 12 +- 3 files changed, 142 insertions(+), 5 deletions(-) create mode 100644 core/src/components/toast/test/custom/toast.e2e.ts diff --git a/core/api.txt b/core/api.txt index 745d82786af..7cc6d2f0389 100644 --- a/core/api.txt +++ b/core/api.txt @@ -2016,9 +2016,11 @@ ion-toast,css-prop,--width,md ion-toast,part,button ion-toast,part,button cancel ion-toast,part,container +ion-toast,part,content ion-toast,part,header ion-toast,part,icon ion-toast,part,message +ion-toast,part,wrapper ion-toggle,shadow ion-toggle,prop,alignment,"center" | "start" | undefined,undefined,false,false diff --git a/core/src/components/toast/test/custom/toast.e2e.ts b/core/src/components/toast/test/custom/toast.e2e.ts new file mode 100644 index 00000000000..a607e3e238b --- /dev/null +++ b/core/src/components/toast/test/custom/toast.e2e.ts @@ -0,0 +1,133 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across directions + */ +configs({ directions: ['ltr'] }).forEach(({ config, title }) => { + test.describe(title('toast: custom'), () => { + test('should be able to customize toast wrapper, container, and content using css parts', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const wrapperColor = await page.locator('ion-toast').evaluate((el: any) => { + const partEl = el.shadowRoot?.querySelector('[part="wrapper"]') as HTMLElement | null; + return partEl ? getComputedStyle(partEl).backgroundColor : null; + }); + + expect(wrapperColor).toBe('rgb(255, 0, 0)'); + + const containerColor = await page.locator('ion-toast').evaluate((el: any) => { + const partEl = el.shadowRoot?.querySelector('[part="container"]') as HTMLElement | null; + return partEl ? getComputedStyle(partEl).backgroundColor : null; + }); + + expect(containerColor).toBe('rgb(0, 128, 0)'); + + const contentColor = await page.locator('ion-toast').evaluate((el: any) => { + const partEl = el.shadowRoot?.querySelector('[part="content"]') as HTMLElement | null; + return partEl ? getComputedStyle(partEl).backgroundColor : null; + }); + + expect(contentColor).toBe('rgb(0, 0, 255)'); + }); + + test('should be able to customize toast header and message using css parts', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const headerColor = await page.locator('ion-toast').evaluate((el: any) => { + const partEl = el.shadowRoot?.querySelector('[part="header"]') as HTMLElement | null; + return partEl ? getComputedStyle(partEl).color : null; + }); + + expect(headerColor).toBe('rgb(255, 0, 0)'); + + const messageColor = await page.locator('ion-toast').evaluate((el: any) => { + const partEl = el.shadowRoot?.querySelector('[part="message"]') as HTMLElement | null; + return partEl ? getComputedStyle(partEl).color : null; + }); + + expect(messageColor).toBe('rgb(0, 128, 0)'); + }); + + test('should be able to customize toast icon, button, and button cancel using css parts', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const iconColor = await page.locator('ion-toast').evaluate((el: any) => { + const partEl = el.shadowRoot?.querySelector('[part="icon"]') as HTMLElement | null; + return partEl ? getComputedStyle(partEl).color : null; + }); + + expect(iconColor).toBe('rgb(255, 0, 0)'); + + const buttonColor = await page.locator('ion-toast').evaluate((el: any) => { + const partEl = el.shadowRoot?.querySelector('[part="button"]') as HTMLElement | null; + return partEl ? getComputedStyle(partEl).color : null; + }); + + expect(buttonColor).toBe('rgb(0, 128, 0)'); + + const buttonCancelColor = await page.locator('ion-toast').evaluate((el: any) => { + const partEl = el.shadowRoot?.querySelector('[part="button cancel"]') as HTMLElement | null; + return partEl ? getComputedStyle(partEl).color : null; + }); + + expect(buttonCancelColor).toBe('rgb(0, 0, 255)'); + }); + }); +}); diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index 4fdcc90f42a..6f0929662af 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -47,12 +47,14 @@ import type { /** * @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 wrapper - The outer wrapper for the toast overlay. + * @part container - Groups the icon, content, and buttons. + * @part content - The live region that contains the header and message. * @part header - The header text of the toast. * @part message - The body text of the toast. * @part icon - The icon that appears next to the toast content. + * @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. */ @Component({ tag: 'ion-toast', @@ -727,7 +729,7 @@ export class Toast implements ComponentInterface, OverlayInterface { })} onIonToastWillDismiss={this.dispatchCancelHandler} > -
+
{this.renderButtons(startButtons, 'start')} @@ -746,7 +748,7 @@ export class Toast implements ComponentInterface, OverlayInterface { not interrupt the user which is why this has a "status" role and a "polite" presentation. */} -
+
{/* This logic below is done to improve consistency across platforms when showing and updating live regions. From fab7d493d3c5b559905f89673951f2c9847f6830 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=BE=D0=B1=D0=B5?= =?UTF-8?q?=D0=BB=D0=B5=D0=B2?= Date: Wed, 3 Dec 2025 11:57:24 +0800 Subject: [PATCH 2/2] Update button.tsx A small edit that will get rid of unnecessary code and give access to the inside of the button for styling To avoid unnecessary code, as in example #29935 --- core/src/components/button/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 9eecd0d2c62..74e9d47e2f7 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -406,7 +406,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf onBlur={this.onBlur} {...inheritedAttributes} > - +