diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png index 65390c4830..b3fa91f7a1 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6354974408..94f3a00127 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png index 1a707b6047..6e93148e3b 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png index 2a59d14a8e..c7db65d8eb 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png index 4048fde999..8a9c4c5242 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png index 1a6aa2e23a..46111984cf 100644 Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss index 97ddddfa02..4c221c7500 100644 --- a/core/src/components/item/item.ionic.scss +++ b/core/src/components/item/item.ionic.scss @@ -11,6 +11,9 @@ --border-color: #{globals.$ionic-color-neutral-300}; --border-style: #{globals.$ionic-border-style-solid}; --border-width: #{0 0 globals.$ionic-border-size-025 0}; + --detail-icon-color: #{globals.$ionic-color-neutral-800}; + --detail-icon-font-size: #{globals.$ionic-scale-600}; + --detail-icon-opacity: 1; --min-height: #{globals.$ionic-scale-1800}; --padding-top: #{globals.$ionic-space-200}; --padding-end: #{globals.$ionic-space-400}; @@ -29,6 +32,13 @@ min-height: initial; } +// Item Detail Icon +// -------------------------------------------------- + +.item-detail-icon { + margin-inline-end: 0; +} + // Ionic Item Slots // -------------------------------------------------- @@ -40,6 +50,12 @@ slot[name="end"]::slotted(*) { @include globals.margin(null, null, null, #{globals.$ionic-space-400}); } +::slotted(ion-icon:not(.item-detail-icon)) { + color: globals.$ionic-color-neutral-1000; + + font-size: globals.$ionic-scale-1000; +} + // Item: Disabled // -------------------------------------------------- diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 0e8ad7cf12..07271256c7 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -264,6 +264,14 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac return config.get('itemDetailIcon', defaultIcon); } + /** + * The icon should be flipped when the app is RTL and + * the icon is a variation of chevron. + */ + get shouldFlipIcon() { + return this.itemDetailIcon === chevronForward || this.itemDetailIcon === caretRightRegular; + } + render() { const { detail, @@ -273,6 +281,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac disabled, href, itemDetailIcon, + shouldFlipIcon, rel, target, routerAnimation, @@ -396,7 +405,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac class="item-detail-icon" part="detail-icon" aria-hidden="true" - flip-rtl={itemDetailIcon === chevronForward} + flip-rtl={shouldFlipIcon} > )} diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d5c5e82c56 Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5d2048bd3c Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fc87ba7469 Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..dd56e32d3f Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4de4870dd2 Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e56bab2be8 Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9734c334ca..635d03fdb6 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png index bfd326e326..57d0fd4715 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png index c8a108c993..22c1fe4764 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png differ