diff --git a/core/api.txt b/core/api.txt index 745d82786af..be2fa67ffff 100644 --- a/core/api.txt +++ b/core/api.txt @@ -930,7 +930,9 @@ ion-item,css-prop,--ripple-color,ios ion-item,css-prop,--ripple-color,md ion-item,css-prop,--transition,ios ion-item,css-prop,--transition,md +ion-item,part,content ion-item,part,detail-icon +ion-item,part,inner ion-item,part,native ion-item-divider,shadow diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index e5269bb4f0b..5f06aa730ba 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -18,6 +18,8 @@ import type { RouterDirection } from '../router/utils/interface'; * @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL. * * @part native - The native HTML button, anchor or div element that wraps all child elements. + * @part inner - The inner container element that wraps the item content. + * @part content - The wrapper element that contains the default slot. * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`. */ @Component({ @@ -390,8 +392,8 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac {...clickFn} > -
-
+
+
diff --git a/core/src/components/item/test/css-variables/index.html b/core/src/components/item/test/css-variables/index.html deleted file mode 100644 index 44dbfe0c88e..00000000000 --- a/core/src/components/item/test/css-variables/index.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - Item - CSS Variables - - - - - - - - - - - - - - - Item CSS variables - - - - - - - Item 1 - - - - Item 2 - - - - Item 3 - - - - - - diff --git a/core/src/components/item/test/css-variables/item.e2e.ts b/core/src/components/item/test/css-variables/item.e2e.ts deleted file mode 100644 index 7f24b1724cd..00000000000 --- a/core/src/components/item/test/css-variables/item.e2e.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -/** - * This behavior does not vary across directions - */ -configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - test.describe(title('item: CSS variables'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/item/test/css-variables`, config); - - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(screenshot(`item-css-vars-diff`)); - }); - }); -}); diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index e5deac11796..00000000000 Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index de756ae34fc..00000000000 Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 763572ddc84..00000000000 Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 10e9806c874..00000000000 Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 24b45b3112e..00000000000 Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index dbcf1f27b7a..00000000000 Binary files a/core/src/components/item/test/css-variables/item.e2e.ts-snapshots/item-css-vars-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/item/test/custom/item.e2e.ts b/core/src/components/item/test/custom/item.e2e.ts new file mode 100644 index 00000000000..b52b70198c9 --- /dev/null +++ b/core/src/components/item/test/custom/item.e2e.ts @@ -0,0 +1,174 @@ +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: custom'), () => { + test.describe(title('CSS shadow parts'), () => { + test('should be able to customize native part', async ({ page }) => { + await page.setContent( + ` + + + + Item + + `, + config + ); + + const item = page.locator('ion-item'); + const backgroundColor = await item.evaluate((el) => { + const shadowRoot = el.shadowRoot; + const native = shadowRoot?.querySelector('.item-native'); + return native ? window.getComputedStyle(native).backgroundColor : ''; + }); + expect(backgroundColor).toBe('rgb(255, 0, 0)'); + }); + + test('should be able to customize inner part', async ({ page }) => { + await page.setContent( + ` + + + + Item + + `, + config + ); + + const item = page.locator('ion-item'); + const backgroundColor = await item.evaluate((el) => { + const shadowRoot = el.shadowRoot; + const inner = shadowRoot?.querySelector('.item-inner'); + return inner ? window.getComputedStyle(inner).backgroundColor : ''; + }); + expect(backgroundColor).toBe('rgb(0, 128, 0)'); + }); + + test('should be able to customize content part', async ({ page }) => { + await page.setContent( + ` + + + + Item + + `, + config + ); + + const item = page.locator('ion-item'); + const backgroundColor = await item.evaluate((el) => { + const shadowRoot = el.shadowRoot; + const content = shadowRoot?.querySelector('.input-wrapper'); + return content ? window.getComputedStyle(content).backgroundColor : ''; + }); + expect(backgroundColor).toBe('rgb(0, 0, 255)'); + }); + + test('should be able to customize detail-icon part', async ({ page }) => { + await page.setContent( + ` + + + + Item + + `, + config + ); + + const item = page.locator('ion-item'); + const backgroundColor = await item.evaluate((el) => { + const shadowRoot = el.shadowRoot; + const detailIcon = shadowRoot?.querySelector('.item-detail-icon'); + return detailIcon ? window.getComputedStyle(detailIcon).backgroundColor : ''; + }); + expect(backgroundColor).toBe('rgb(255, 0, 0)'); + }); + }); + + test.describe(title('CSS variables'), () => { + test('should be able to customize background using css variables', async ({ page }) => { + await page.setContent( + ` + + + + Item + + `, + config + ); + + const item = page.locator('ion-item'); + const backgroundColor = await item.evaluate((el) => { + const shadowRoot = el.shadowRoot; + const native = shadowRoot?.querySelector('.item-native'); + return native ? window.getComputedStyle(native).backgroundColor : ''; + }); + expect(backgroundColor).toBe('rgb(255, 0, 0)'); + }); + + test('should be able to customize padding using css variables', async ({ page }) => { + await page.setContent( + ` + + + + Item + + `, + config + ); + + const item = page.locator('ion-item'); + const paddingValues = await item.evaluate((el) => { + const shadowRoot = el.shadowRoot; + const native = shadowRoot?.querySelector('.item-native'); + return { + paddingTop: native ? window.getComputedStyle(native).paddingTop : '', + paddingBottom: native ? window.getComputedStyle(native).paddingBottom : '', + paddingStart: native ? window.getComputedStyle(native).paddingLeft : '', + paddingEnd: native ? window.getComputedStyle(native).paddingRight : '', + }; + }); + expect(paddingValues.paddingTop).toBe('20px'); + expect(paddingValues.paddingBottom).toBe('20px'); + expect(paddingValues.paddingStart).toBe('10px'); + expect(paddingValues.paddingEnd).toBe('10px'); + }); + }); + }); +});