fix(alert): update styles for rtl (#17129)

- apply border correctly to 2 button mode in iOS
- radio: position icon correctly (fixes #16295)
- checkbox: position icon correctly
- remove scrollbar with radio/checkbox
- updates e2e test to include rtl

https://screenshot.ionicframework.com/5447404/d8bad6a

references #17012

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;

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

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

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

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