fix(split-pane): side=end works properly

fixes #15013
ionic-team · Aug 7, 2018 · dc50003 · dc50003
1 parent 2ff585f
commit dc50003
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 34 deletions.
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
@@ -90,7 +90,7 @@ export class Menu {
   /**
    * Which side of the view the menu should be placed. Default `"start"`.
    */
-  @Prop() side: Side = 'start';
+  @Prop({ reflectToAttr: true }) side: Side = 'start';
 
   @Watch('side')
   protected sideChanged() {

diff --git a/core/src/components/split-pane/split-pane.ios.scss b/core/src/components/split-pane/split-pane.ios.scss
@@ -1,20 +1,22 @@
 
-@import "../../themes/ionic.globals.ios";
 @import "./split-pane";
 @import "./split-pane.ios.vars";
 
 // Split Pane
 // --------------------------------------------------
 
-.split-pane-ios.split-pane-visible > .split-pane-side {
+.split-pane-ios.split-pane-visible > .split-pane-side[side=start] {
   min-width: $split-pane-ios-side-min-width;
   max-width: $split-pane-ios-side-max-width;
 
   border-right: $split-pane-ios-border;
   border-left: 0;
 }
 
-.split-pane-ios.split-pane-visible > .split-pane-side[side=right] {
+.split-pane-ios.split-pane-visible > .split-pane-side[side=end] {
+  min-width: $split-pane-ios-side-min-width;
+  max-width: $split-pane-ios-side-max-width;
+
   border-right: 0;
   border-left: $split-pane-ios-border;
 }
diff --git a/core/src/components/split-pane/split-pane.md.scss b/core/src/components/split-pane/split-pane.md.scss
@@ -4,15 +4,18 @@
 // Split Pane
 // --------------------------------------------------
 
-.split-pane-md.split-pane-visible > .split-pane-side {
+.split-pane-md.split-pane-visible > .split-pane-side[side=start] {
   min-width: $split-pane-md-side-min-width;
   max-width: $split-pane-md-side-max-width;
 
   border-right: $split-pane-md-border;
   border-left: 0;
 }
 
-.split-pane-md.split-pane-visible > .split-pane-side[side=right] {
+.split-pane-md.split-pane-visible > .split-pane-side[side=end] {
+  min-width: $split-pane-md-side-min-width;
+  max-width: $split-pane-md-side-max-width;
+
   border-right: 0;
   border-left: $split-pane-md-border;
 }
diff --git a/core/src/components/split-pane/split-pane.scss b/core/src/components/split-pane/split-pane.scss
@@ -33,41 +33,16 @@
   display: flex;
 
   flex-shrink: 0;
-  order: -1;
 }
 
 .split-pane-side:not(ion-menu) {
   display: none;
 }
 
 .split-pane-visible > .split-pane-side[side=start] {
-  @include multi-dir() {
-    order: -1;
-  }
+  order: -1;
 }
 
 .split-pane-visible > .split-pane-side[side=end] {
-  @include multi-dir() {
-    order: 1;
-  }
-}
-
-.split-pane-visible > .split-pane-side[side=left] {
-  @include ltr() {
-    order: -1;
-  }
-
-  @include rtl() {
-    order: 1;
-  }
-}
-
-.split-pane-visible > .split-pane-side[side=right] {
-  @include ltr() {
-    order: 1;
-  }
-
-  @include rtl() {
-    order: -1;
-  }
+  order: 1;
 }
diff --git a/core/src/components/split-pane/test/basic/index.html b/core/src/components/split-pane/test/basic/index.html
@@ -13,7 +13,7 @@
   <ion-app>
     <ion-split-pane id="splitPane">
 
-      <ion-menu side="start">
+      <ion-menu side="end">
 
         <ion-header>
           <ion-toolbar color="secondary">