fix(back-button, breadcrumb, item): flip chevron icons on RTL (#24705)

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>}

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

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>

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

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>}

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>