diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss index 2caa4d5ff31..853a79ba5aa 100644 --- a/core/src/components/alert/alert.ios.scss +++ b/core/src/components/alert/alert.ios.scss @@ -280,10 +280,19 @@ overflow: hidden; } +.alert-button:first-child { + @include rtl() { + border-right: 0; + } +} + .alert-button:last-child { + font-weight: $alert-ios-button-main-font-weight; border-right: 0; - font-weight: $alert-ios-button-main-font-weight; + @include rtl() { + border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; + } } .alert-button.activated { diff --git a/core/src/components/alert/test/basic/e2e.ts b/core/src/components/alert/test/basic/e2e.ts index 73d226dd580..44df9c2179c 100644 --- a/core/src/components/alert/test/basic/e2e.ts +++ b/core/src/components/alert/test/basic/e2e.ts @@ -22,34 +22,64 @@ async function openAlert(selector: string) { expect(alert).toBe(null); } +async function openRTLAlert(selector: string) { + const page = await newE2EPage({ + url: '/src/components/alert/test/basic?ionic:_testing=true&rtl=true' + }); + + await page.click(selector); + + let alert = await page.find('ion-alert'); + expect(alert).not.toBe(null); + await alert.waitForVisible(); + await page.waitFor(250); + + const compare = await page.compareScreenshot('rtl'); + expect(compare).toMatchScreenshot(); + + await alert.callMethod('dismiss'); + await alert.waitForNotVisible(); + + alert = await page.find('ion-alert'); + expect(alert).toBe(null); +} + test(`alert: basic`, async () => { await openAlert('#basic'); + await openRTLAlert('#basic'); }); test(`alert: basic, long message`, async () => { await openAlert('#longMessage'); + await openRTLAlert('#longMessage'); }); test(`alert: basic, multiple buttons`, async () => { await openAlert('#multipleButtons'); + await openRTLAlert('#multipleButtons'); }); test(`alert: basic, no message`, async () => { await openAlert('#noMessage'); + await openRTLAlert('#noMessage'); }); test(`alert: basic, confirm`, async () => { await openAlert('#confirm'); + await openRTLAlert('#confirm'); }); test(`alert: basic, prompt`, async () => { await openAlert('#prompt'); + await openRTLAlert('#prompt'); }); test(`alert: basic, radio`, async () => { await openAlert('#radio'); + await openRTLAlert('#radio'); }); test(`alert: basic, checkbox`, async () => { await openAlert('#checkbox'); + await openRTLAlert('#checkbox'); }); diff --git a/core/src/themes/ionic.functions.string.scss b/core/src/themes/ionic.functions.string.scss index cd104eeba9e..8013b99de84 100644 --- a/core/src/themes/ionic.functions.string.scss +++ b/core/src/themes/ionic.functions.string.scss @@ -103,7 +103,8 @@ $list: append($list, ":host(#{$addHostSelector}) #{$selector}", comma); } @else { - $list: append($list, "#{$addHostSelector} #{$selector}", comma); + // TODO host-context should be for scoped only + $list: append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma); } }