mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
fix(back-button, breadcrumb, item): flip chevron icons on RTL (#24705)
This commit is contained in:
@ -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>}
|
||||
|
@ -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();
|
||||
});
|
||||
|
Reference in New Issue
Block a user