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 { })} > -
-
+
+
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)'); + }); + }); + }); +});