From a093544fdfc438ed03024285b2a35c5f645ea011 Mon Sep 17 00:00:00 2001
From: "Wael M.B" <bettayebwael@gmail.com>
Date: Mon, 14 Feb 2022 16:34:10 +0100
Subject: [PATCH] fix(back-button, breadcrumb, item): flip chevron icons on RTL
 (#24705)

---
 core/src/components/back-button/back-button.tsx   | 4 ++--
 core/src/components/back-button/test/basic/e2e.ts | 9 +++++++++
 core/src/components/breadcrumb/breadcrumb.tsx     | 2 +-
 core/src/components/breadcrumbs/test/basic/e2e.ts | 9 +++++++++
 core/src/components/item/item.tsx                 | 2 +-
 core/src/components/item/test/basic/index.html    | 4 ++++
 6 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 043ea04594..d0dfa52141 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -121,7 +121,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   }
 
   render() {
-    const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, inheritedAttributes } = this;
+    const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, icon, inheritedAttributes } = this;
     const showBackButton = defaultHref !== undefined;
     const mode = getIonMode(this);
     const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
@@ -149,7 +149,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
           aria-label={ariaLabel}
         >
           <span class="button-inner">
-            {backButtonIcon && <ion-icon part="icon" icon={backButtonIcon} aria-hidden="true" lazy={false}></ion-icon>}
+            {backButtonIcon && <ion-icon part="icon" icon={backButtonIcon} aria-hidden="true" lazy={false} flip-rtl={icon === undefined}></ion-icon>}
             {backButtonText && <span part="text" aria-hidden="true" class="button-text">{backButtonText}</span>}
           </span>
           {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
diff --git a/core/src/components/back-button/test/basic/e2e.ts b/core/src/components/back-button/test/basic/e2e.ts
index 5b813c6da8..5f007e1d76 100644
--- a/core/src/components/back-button/test/basic/e2e.ts
+++ b/core/src/components/back-button/test/basic/e2e.ts
@@ -8,3 +8,12 @@ test('back-button: basic', async () => {
   const compare = await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
 });
+
+test('back-button: basic-rtl', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/back-button/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/breadcrumb/breadcrumb.tsx b/core/src/components/breadcrumb/breadcrumb.tsx
index 706502a50e..0e512e9b43 100644
--- a/core/src/components/breadcrumb/breadcrumb.tsx
+++ b/core/src/components/breadcrumb/breadcrumb.tsx
@@ -212,7 +212,7 @@ export class Breadcrumb implements ComponentInterface {
           <span class="breadcrumb-separator" part="separator">
             <slot name="separator">
               { mode === 'ios'
-                ? <ion-icon icon={chevronForwardOutline} lazy={false}></ion-icon>
+                ? <ion-icon icon={chevronForwardOutline} lazy={false} flip-rtl></ion-icon>
                 : <span>/</span>
               }
             </slot>
diff --git a/core/src/components/breadcrumbs/test/basic/e2e.ts b/core/src/components/breadcrumbs/test/basic/e2e.ts
index 1c206b3728..e4fcab9a75 100644
--- a/core/src/components/breadcrumbs/test/basic/e2e.ts
+++ b/core/src/components/breadcrumbs/test/basic/e2e.ts
@@ -8,3 +8,12 @@ test('breadcrumbs: basic', async () => {
   const compare = await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
 });
+
+test('breadcrumbs: basic-rtl', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/breadcrumbs/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
\ No newline at end of file
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 345ebb54da..7254f9be2c 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -369,7 +369,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
               <slot></slot>
             </div>
             <slot name="end"></slot>
-            {showDetail && <ion-icon icon={detailIcon} lazy={false} class="item-detail-icon" part="detail-icon" aria-hidden="true"></ion-icon>}
+            {showDetail && <ion-icon icon={detailIcon} lazy={false} class="item-detail-icon" part="detail-icon" aria-hidden="true" flip-rtl={detailIcon === chevronForward}></ion-icon>}
             <div class="item-inner-highlight"></div>
           </div>
           {canActivate && mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
diff --git a/core/src/components/item/test/basic/index.html b/core/src/components/item/test/basic/index.html
index e5aa87f5fe..3ecf534f12 100644
--- a/core/src/components/item/test/basic/index.html
+++ b/core/src/components/item/test/basic/index.html
@@ -120,6 +120,10 @@
       <ion-item class="overflow-scroll">
         <ion-label class="ion-text-wrap">Item with overflow scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Vulputate enim nulla aliquet porttitor. Fermentum dui faucibus in ornare quam viverra orci sagittis eu. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Cras semper auctor neque vitae. Cursus eget nunc scelerisque viverra mauris in aliquam. Non sodales neque sodales ut etiam sit amet. Sit amet nulla facilisi morbi tempus. Accumsan in nisl nisi scelerisque eu. Sed elementum tempus egestas sed sed. Urna nunc id cursus metus aliquam. Gravida dictum fusce ut placerat orci nulla pellentesque. Id diam maecenas ultricies mi eget. Elementum nisi quis eleifend quam adipiscing vitae proin.</ion-label>
       </ion-item>
+
+      <ion-item detail>
+        <ion-label>Item with details.</ion-label>
+      </ion-item>
     </ion-content>
 
     <ion-footer>