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

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

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

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