fix(picker): do not change datetime/picker column order in RTL (#17018)

Closes #16294
ionic-team · Jan 9, 2019 · 1338d71 · 1338d71
1 parent b4f3405
commit 1338d71
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml
@@ -239,6 +239,7 @@ rules:
       - contain
       - content
       - cursor
+      - direction
       - empty-cells
       - object-fit
       - opacity
@@ -254,7 +255,6 @@ rules:
 
   property-blacklist:
     - background-position
-    - direction
     - right
     - left
     - float

diff --git a/core/src/components/datetime/test/basic/e2e.ts b/core/src/components/datetime/test/basic/e2e.ts
@@ -18,3 +18,19 @@ test('datetime: basic', async () => {
   compare = await page.compareScreenshot('should open custom picker');
   expect(compare).toMatchScreenshot();
 });
+
+test('datetime: basic-rtl', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/datetime/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  const datetime = await page.find('#customPickerOptions');
+  await datetime.click();
+
+  const picker = await page.find('ion-picker');
+  await picker.waitForVisible();
+  await page.waitFor(250);
+
+  const compare = await page.compareScreenshot('should open custom picker');
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html
@@ -101,7 +101,7 @@
 
         <ion-item>
           <ion-label>h:mm a</ion-label>
-          <ion-datetime display-format="h:mm a"></ion-datetime>
+          <ion-datetime display-format="h:mm a" value="01:47"></ion-datetime>
         </ion-item>
 
         <ion-item>

diff --git a/core/src/components/picker/picker.scss b/core/src/components/picker/picker.scss
@@ -108,11 +108,6 @@
 // --------------------------------------------------
 
 .picker-columns {
-  @include rtl() {
-    // Date is the same format in both directions
-    flex-direction: row-reverse;
-  }
-
   display: flex;
   position: relative;
 
@@ -121,6 +116,7 @@
   margin-bottom: var(--ion-safe-area-bottom, 0);
 
   contain: strict;
+  direction: ltr;
   overflow: hidden;
 }