diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss index 2caa4d5ff3..6a7d72f2d3 100644 --- a/core/src/components/alert/alert.ios.scss +++ b/core/src/components/alert/alert.ios.scss @@ -280,7 +280,17 @@ overflow: hidden; } +.alert-button:first-child { + @include rtl() { + border-right: 0; + } +} + .alert-button:last-child { + @include rtl() { + border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; + } + border-right: 0; font-weight: $alert-ios-button-main-font-weight; diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss index c4148236c4..f49a588c47 100644 --- a/core/src/components/alert/alert.scss +++ b/core/src/components/alert/alert.scss @@ -87,6 +87,8 @@ overscroll-behavior-y: contain; } +.alert-checkbox-group::-webkit-scrollbar, +.alert-radio-group::-webkit-scrollbar, .alert-message::-webkit-scrollbar { display: none; } diff --git a/core/src/components/alert/test/basic/e2e.ts b/core/src/components/alert/test/basic/e2e.ts index 73d226dd58..ec0985ac37 100644 --- a/core/src/components/alert/test/basic/e2e.ts +++ b/core/src/components/alert/test/basic/e2e.ts @@ -1,8 +1,11 @@ import { newE2EPage } from '@stencil/core/testing'; -async function openAlert(selector: string) { +async function openAlert(selector: string, rtl = false) { + const pageUrl = rtl + ? '/src/components/alert/test/basic?ionic:_testing=true&rtl=true' + : '/src/components/alert/test/basic?ionic:_testing=true'; const page = await newE2EPage({ - url: '/src/components/alert/test/basic?ionic:_testing=true' + url: pageUrl }); await page.click(selector); @@ -12,7 +15,9 @@ async function openAlert(selector: string) { await alert.waitForVisible(); await page.waitFor(250); - const compare = await page.compareScreenshot(); + const compare = rtl + ? await page.compareScreenshot('rtl') + : await page.compareScreenshot(); expect(compare).toMatchScreenshot(); await alert.callMethod('dismiss'); @@ -53,3 +58,38 @@ test(`alert: basic, radio`, async () => { test(`alert: basic, checkbox`, async () => { await openAlert('#checkbox'); }); + +// Right to Left tests +// ------------------------------------------------------ + +test(`alert: basic`, async () => { + await openAlert('#basic', true); +}); + +test(`alert: basic, long message`, async () => { + await openAlert('#longMessage', true); +}); + +test(`alert: basic, multiple buttons`, async () => { + await openAlert('#multipleButtons', true); +}); + +test(`alert: basic, no message`, async () => { + await openAlert('#noMessage', true); +}); + +test(`alert: basic, confirm`, async () => { + await openAlert('#confirm', true); +}); + +test(`alert: basic, prompt`, async () => { + await openAlert('#prompt', true); +}); + +test(`alert: basic, radio`, async () => { + await openAlert('#radio', true); +}); + +test(`alert: basic, checkbox`, async () => { + await openAlert('#checkbox', true); +}); diff --git a/core/src/themes/ionic.functions.string.scss b/core/src/themes/ionic.functions.string.scss index cd104eeba9..8013b99de8 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); } } diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss index b1fe867aec..eac527fb84 100644 --- a/core/src/themes/ionic.mixins.scss +++ b/core/src/themes/ionic.mixins.scss @@ -142,42 +142,30 @@ // ---------------------------------------------------------- @mixin multi-dir() { - @if $app-direction == multi { - $root: #{&}; - @at-root [dir] { - #{$root} { - @content; - } - } - } @else { - @content; - } + @content; + + // @if $app-direction == multi { + // $root: #{&}; + // @at-root [dir] { + // #{$root} { + // @content; + // } + // } + // } @else { + // @content; + // } } @mixin rtl() { - @if $app-direction == multi or $app-direction == null { - $root: #{&}; + $root: #{&}; - @at-root #{add-root-selector($root, "[dir=rtl]")} { - @content; - } - - } @else if $app-direction == rtl { + @at-root #{add-root-selector($root, "[dir=rtl]")} { @content; } } @mixin ltr() { - @if $app-direction == multi { - $root: #{&}; - @at-root [dir="ltr"] { - #{$root} { - @content; - } - } - } @else if $app-direction == ltr or $app-direction == null { - @content; - } + @content; }