From 67f164b441ee3731eef25a4762c93358faba2215 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 19 Jan 2026 16:42:56 -0500 Subject: [PATCH 1/3] feat(item-divider): add inner and content parts --- core/api.txt | 2 ++ core/src/components/item-divider/item-divider.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/core/api.txt b/core/api.txt index 745d82786af..760f8f1b89a 100644 --- a/core/api.txt +++ b/core/api.txt @@ -957,6 +957,8 @@ ion-item-divider,css-prop,--padding-start,ios ion-item-divider,css-prop,--padding-start,md ion-item-divider,css-prop,--padding-top,ios ion-item-divider,css-prop,--padding-top,md +ion-item-divider,part,content +ion-item-divider,part,inner ion-item-group,none diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx index ac449ffa3ad..62cd9fabf8b 100644 --- a/core/src/components/item-divider/item-divider.tsx +++ b/core/src/components/item-divider/item-divider.tsx @@ -11,6 +11,9 @@ import type { Color } from '../../interface'; * @slot - Content is placed between the named slots if provided without a slot. * @slot start - Content is placed to the left of the divider text in LTR, and to the right in RTL. * @slot end - Content is placed to the right of the divider text in LTR, and to the left in RTL. + * + * @part inner - The inner container element that wraps the divider content. + * @part content - The wrapper element that contains the default slot. */ @Component({ tag: 'ion-item-divider', @@ -50,8 +53,8 @@ export class ItemDivider implements ComponentInterface { })} > -
-
+
+
From 5491a272b48a515b954da23b9e670cb7e12336cd Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 20 Jan 2026 10:10:57 -0500 Subject: [PATCH 2/3] test(item-divider): add e2e test for css shadow parts --- .../test/custom/item-divider.e2e.ts | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 core/src/components/item-divider/test/custom/item-divider.e2e.ts diff --git a/core/src/components/item-divider/test/custom/item-divider.e2e.ts b/core/src/components/item-divider/test/custom/item-divider.e2e.ts new file mode 100644 index 00000000000..af20ef88dc8 --- /dev/null +++ b/core/src/components/item-divider/test/custom/item-divider.e2e.ts @@ -0,0 +1,57 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across modes/directions + */ +configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => { + test.describe(title('item-divider: custom'), () => { + test.describe(title('CSS shadow parts'), () => { + test('should be able to customize inner part', async ({ page }) => { + await page.setContent( + ` + + + Divider + `, + config + ); + + const divider = page.locator('ion-item-divider'); + const backgroundColor = await divider.evaluate((el) => { + const shadowRoot = el.shadowRoot; + const inner = shadowRoot?.querySelector('.item-divider-inner'); + return inner ? window.getComputedStyle(inner).backgroundColor : ''; + }); + expect(backgroundColor).toBe('rgb(255, 0, 0)'); + }); + + test('should be able to customize content part', async ({ page }) => { + await page.setContent( + ` + + + Divider + `, + config + ); + + const divider = page.locator('ion-item-divider'); + const backgroundColor = await divider.evaluate((el) => { + const shadowRoot = el.shadowRoot; + const content = shadowRoot?.querySelector('.item-divider-wrapper'); + return content ? window.getComputedStyle(content).backgroundColor : ''; + }); + expect(backgroundColor).toBe('rgb(0, 128, 0)'); + }); + }); + }); +}); From 80c77d03f0388a22261ffca44c6cd6cd39e8d7f4 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Fri, 13 Feb 2026 16:07:21 -0500 Subject: [PATCH 3/3] refactor(item-divider): rename content part to container --- core/api.txt | 2 +- core/src/components/item-divider/item-divider.tsx | 4 ++-- .../item-divider/test/custom/item-divider.e2e.ts | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/core/api.txt b/core/api.txt index 760f8f1b89a..54ddd2f81e6 100644 --- a/core/api.txt +++ b/core/api.txt @@ -957,7 +957,7 @@ ion-item-divider,css-prop,--padding-start,ios ion-item-divider,css-prop,--padding-start,md ion-item-divider,css-prop,--padding-top,ios ion-item-divider,css-prop,--padding-top,md -ion-item-divider,part,content +ion-item-divider,part,container ion-item-divider,part,inner ion-item-group,none diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx index 62cd9fabf8b..dd6adc188ef 100644 --- a/core/src/components/item-divider/item-divider.tsx +++ b/core/src/components/item-divider/item-divider.tsx @@ -13,7 +13,7 @@ import type { Color } from '../../interface'; * @slot end - Content is placed to the right of the divider text in LTR, and to the left in RTL. * * @part inner - The inner container element that wraps the divider content. - * @part content - The wrapper element that contains the default slot. + * @part container - The wrapper element that contains the default slot. */ @Component({ tag: 'ion-item-divider', @@ -54,7 +54,7 @@ export class ItemDivider implements ComponentInterface { >
-
+
diff --git a/core/src/components/item-divider/test/custom/item-divider.e2e.ts b/core/src/components/item-divider/test/custom/item-divider.e2e.ts index af20ef88dc8..a1f82bbac63 100644 --- a/core/src/components/item-divider/test/custom/item-divider.e2e.ts +++ b/core/src/components/item-divider/test/custom/item-divider.e2e.ts @@ -30,11 +30,11 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => { expect(backgroundColor).toBe('rgb(255, 0, 0)'); }); - test('should be able to customize content part', async ({ page }) => { + test('should be able to customize container part', async ({ page }) => { await page.setContent( ` @@ -47,8 +47,8 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => { const divider = page.locator('ion-item-divider'); const backgroundColor = await divider.evaluate((el) => { const shadowRoot = el.shadowRoot; - const content = shadowRoot?.querySelector('.item-divider-wrapper'); - return content ? window.getComputedStyle(content).backgroundColor : ''; + const container = shadowRoot?.querySelector('.item-divider-wrapper'); + return container ? window.getComputedStyle(container).backgroundColor : ''; }); expect(backgroundColor).toBe('rgb(0, 128, 0)'); });