javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Wael M.B
2022-02-14 16:34:10 +01:00
committed by GitHub
parent 82c41510de
commit a093544fdf
6 changed files with 26 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/back-button/back-button.tsx
View File

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

9
core/src/components/back-button/test/basic/e2e.ts
View File

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

2
core/src/components/breadcrumb/breadcrumb.tsx
View File

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

9
core/src/components/breadcrumbs/test/basic/e2e.ts
View File

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

2
core/src/components/item/item.tsx
View File

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

4
core/src/components/item/test/basic/index.html
View File

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