From 37a9489253ecb2b0cfec1ff7d886e83459ef5d12 Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Sat, 13 May 2017 01:45:31 +0300
Subject: [PATCH 01/12] feat(item-reorder): add side

---
 src/components/item/item-reorder.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts
index 6c90eb45618..6e752d3df5b 100644
--- a/src/components/item/item-reorder.ts
+++ b/src/components/item/item-reorder.ts
@@ -2,7 +2,7 @@ import { Directive, ElementRef, EventEmitter, Input, NgZone, Renderer, Optional,
 
 import { Content } from '../content/content';
 import { DomController } from '../../platform/dom-controller';
-import { isTrueProperty, reorderArray } from '../../util/util';
+import { isTrueProperty, reorderArray, Side } from '../../util/util';
 import { ItemReorderGestureDelegate, ItemReorderGesture } from './item-reorder-gesture';
 import { Platform } from '../../platform/platform';
 
@@ -158,6 +158,11 @@ export class ItemReorder implements ItemReorderGestureDelegate {
    */
   @Output() ionItemReorder: EventEmitter<ReorderIndexes> = new EventEmitter<ReorderIndexes>();
 
+  /**
+   * @input {string} Which side of the view the ion-reorder should be placed. Default `"end"`.
+   */
+  @Input() side: Side = 'end';
+
   constructor(
     private _plt: Platform,
     private _dom: DomController,

From 44f8d0f275adb708c4baf579278fa22961f188f1 Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Sat, 13 May 2017 02:00:48 +0300
Subject: [PATCH 02/12] feat(item-reorder): host the side

---
 src/components/item/item-reorder.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts
index 6e752d3df5b..27830279184 100644
--- a/src/components/item/item-reorder.ts
+++ b/src/components/item/item-reorder.ts
@@ -142,6 +142,7 @@ export class ReorderIndexes {
   host: {
     '[class.reorder-enabled]': '_enableReorder',
     '[class.reorder-visible]': '_visibleReorder',
+    'side': 'side',
   }
 })
 export class ItemReorder implements ItemReorderGestureDelegate {

From f7dc4e82af49130949fa01a2f22289ca00787e8c Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Sat, 13 May 2017 02:01:26 +0300
Subject: [PATCH 03/12] tests(item-reorder): add tests for all sides

---
 .../reorder/pages/root-page/root-page.html    | 60 ++++++++++---------
 .../test/reorder/pages/root-page/root-page.ts |  2 +-
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/components/item/test/reorder/pages/root-page/root-page.html b/src/components/item/test/reorder/pages/root-page/root-page.html
index 605da572db6..9200c3170c2 100644
--- a/src/components/item/test/reorder/pages/root-page/root-page.html
+++ b/src/components/item/test/reorder/pages/root-page/root-page.html
@@ -1,36 +1,40 @@
 <ion-header>
-  <ion-toolbar color="primary">
-    <ion-title>Item Reorder</ion-title>
-    <ion-buttons end>
-      <button ion-button (click)="toggle()">
-        Edit
-      </button>
-    </ion-buttons>
-  </ion-toolbar>
+    <ion-toolbar color="primary">
+        <ion-title>Item Reorder</ion-title>
+        <ion-buttons end>
+            <button ion-button (click)="toggle()">
+                Edit
+            </button>
+        </ion-buttons>
+    </ion-toolbar>
 </ion-header>
 
 <ion-content>
 
-  <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
-    <button ion-item *ngFor="let item of items" (click)="clickedButton(item)"
-    [style.background]="'rgb('+(255-item*4)+','+(255-item*4)+','+(255-item*4)+')'"
-    [style.min-height]="item*2+35+'px'">
-      {{item}}
-    </button>
-  </ion-list>
-
-  <ion-list [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)">
-    <ion-item-sliding *ngFor="let item of items">
-      <button ion-item (click)="clickedButton(item)">
-        <h2>Sliding item {{item}}</h2>
-      </button>
-      <ion-item-options side="right" icon-left>
-        <button ion-button color='danger'>
-          <ion-icon name="trash"></ion-icon>
-          Remove
+    <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
+        <button ion-item *ngFor="let item of items" (click)="clickedButton(item)"
+                [style.background]="'rgb('+(255-item*4)+','+(255-item*4)+','+(255-item*4)+')'"
+                [style.min-height]="item*2+35+'px'">
+            {{item}}
         </button>
-      </ion-item-options>
-    </ion-item-sliding>
-  </ion-list>
+    </ion-list>
+
+    <div *ngFor="let side of ['left', 'right', 'start', 'end']">
+        <ion-list [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)" [side]="side">
+            <ion-list-header>{{side}}</ion-list-header>
+            <ion-item-sliding *ngFor="let item of items">
+                <button ion-item (click)="clickedButton(item)">
+                    <h2>Sliding item {{item}}</h2>
+                    <div item-right>right</div>
+                </button>
+                <ion-item-options side="right" icon-left>
+                    <button ion-button color='danger'>
+                        <ion-icon name="trash"></ion-icon>
+                        Remove
+                    </button>
+                </ion-item-options>
+            </ion-item-sliding>
+        </ion-list>
+    </div>
 
 </ion-content>
diff --git a/src/components/item/test/reorder/pages/root-page/root-page.ts b/src/components/item/test/reorder/pages/root-page/root-page.ts
index 7300c3aa73e..fccd3f61bb2 100644
--- a/src/components/item/test/reorder/pages/root-page/root-page.ts
+++ b/src/components/item/test/reorder/pages/root-page/root-page.ts
@@ -9,7 +9,7 @@ export class RootPage {
   isReordering: boolean = false;
 
   constructor() {
-    let nu = 9;
+    let nu = 5;
     for (let i = 0; i < nu; i++) {
       this.items.push(i);
     }

From ce128c11166a909e7175ab2f29a9183d84ce7f36 Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Sat, 13 May 2017 02:13:04 +0300
Subject: [PATCH 04/12] feat(item-reorder): add classes

---
 src/components/item/item-reorder.scss | 27 +++++++++++++++++++++++++--
 src/components/item/item-reorder.ts   |  5 ++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/item/item-reorder.scss b/src/components/item/item-reorder.scss
index 01f9fb82c88..c792db83bc7 100644
--- a/src/components/item/item-reorder.scss
+++ b/src/components/item/item-reorder.scss
@@ -16,14 +16,37 @@ ion-reorder {
   font-size: 1.7em;
   opacity: .25;
 
-  transform: translate3d(160%, 0, 0);
-
   transition: transform 140ms ease-in;
 
   pointer-events: all;
   touch-action: manipulation;
 }
 
+.reorder-side-end ion-reorder {
+  transform: translate3d(160%, 0, 0)
+}
+
+.reorder-side-start ion-reorder {
+  order: -1;
+  transform: translate3d(-160%, 0, 0);
+}
+
+.reorder-side-right ion-reorder {
+  transform: translate3d(160%, 0, 0); // stays the same for rtl
+
+  @include rtl() {
+    order: -1;
+  }
+}
+
+.reorder-side-left ion-reorder {
+  transform: translate3d(-160%, 0, 0); // stays the same for rtl
+
+  //@include ltr() {
+    order: -1;
+  //}
+}
+
 ion-reorder ion-icon {
   pointer-events: none;
 }
diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts
index 27830279184..6a1ae3a3180 100644
--- a/src/components/item/item-reorder.ts
+++ b/src/components/item/item-reorder.ts
@@ -142,7 +142,10 @@ export class ReorderIndexes {
   host: {
     '[class.reorder-enabled]': '_enableReorder',
     '[class.reorder-visible]': '_visibleReorder',
-    'side': 'side',
+    '[class.reorder-side-left]': 'side === "left"',
+    '[class.reorder-side-right]': 'side === "right"',
+    '[class.reorder-side-start]': 'side === "start"',
+    '[class.reorder-side-end]': 'side === "end"'
   }
 })
 export class ItemReorder implements ItemReorderGestureDelegate {

From 93279f0db30a2bb8061c3c9be89b2bc11bfede25 Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Sat, 13 May 2017 02:31:59 +0300
Subject: [PATCH 05/12] fix(item-reorder): change coord depending on side

---
 src/components/item/item-reorder-gesture.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/item/item-reorder-gesture.ts b/src/components/item/item-reorder-gesture.ts
index 374fdf164ff..a41f97b3931 100644
--- a/src/components/item/item-reorder-gesture.ts
+++ b/src/components/item/item-reorder-gesture.ts
@@ -2,6 +2,7 @@ import { indexForItem, findReorderItem } from './item-reorder-util';
 import { Platform } from '../../platform/platform';
 import { PointerCoordinates, pointerCoord } from '../../util/dom';
 import { UIEventManager } from '../../gestures/ui-event-manager';
+import { isRightSide, Side } from '../../util/util';
 
 
 /**
@@ -134,7 +135,7 @@ export class ItemReorderGesture {
   }
 
   private itemForCoord(coord: PointerCoordinates): HTMLElement {
-    const sideOffset = this.plt.isRTL ? 100 : -100;
+    const sideOffset = isRightSide(this.reorderList.side, this.plt.isRTL) ? -100 : 100;
     const x = this.offset.x + sideOffset;
     const y = coord.y;
     const element = this.plt.getElementFromPoint(x, y);
@@ -167,6 +168,7 @@ const SCROLL_JUMP = 10;
 const ITEM_REORDER_ACTIVE = 'reorder-active';
 
 export interface ItemReorderGestureDelegate {
+  side: Side;
   getNativeElement: () => any;
   _reorderPrepare: () => void;
   _scrollContent: (scrollPosition: number) => number;

From 56c7e0295ac659d7a2200ebe640698de784f89d5 Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Sat, 13 May 2017 02:33:14 +0300
Subject: [PATCH 06/12] feat(item-reorder): add ltr support

---
 src/components/item/item-reorder.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/item/item-reorder.scss b/src/components/item/item-reorder.scss
index c792db83bc7..6d68aa943c7 100644
--- a/src/components/item/item-reorder.scss
+++ b/src/components/item/item-reorder.scss
@@ -42,9 +42,9 @@ ion-reorder {
 .reorder-side-left ion-reorder {
   transform: translate3d(-160%, 0, 0); // stays the same for rtl
 
-  //@include ltr() {
+  @include ltr() {
     order: -1;
-  //}
+  }
 }
 
 ion-reorder ion-icon {

From 26e26994ef9534a0123377165dde43ae9a74ba00 Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Sat, 13 May 2017 19:38:16 +0300
Subject: [PATCH 07/12] style(item-reorder): fix indent

---
 .../reorder/pages/root-page/root-page.html    | 62 +++++++++----------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/item/test/reorder/pages/root-page/root-page.html b/src/components/item/test/reorder/pages/root-page/root-page.html
index 9200c3170c2..6f1f882f13a 100644
--- a/src/components/item/test/reorder/pages/root-page/root-page.html
+++ b/src/components/item/test/reorder/pages/root-page/root-page.html
@@ -1,40 +1,40 @@
 <ion-header>
-    <ion-toolbar color="primary">
-        <ion-title>Item Reorder</ion-title>
-        <ion-buttons end>
-            <button ion-button (click)="toggle()">
-                Edit
-            </button>
-        </ion-buttons>
-    </ion-toolbar>
+  <ion-toolbar color="primary">
+    <ion-title>Item Reorder</ion-title>
+    <ion-buttons end>
+      <button ion-button (click)="toggle()">
+        Edit
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
 </ion-header>
 
 <ion-content>
 
-    <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
-        <button ion-item *ngFor="let item of items" (click)="clickedButton(item)"
-                [style.background]="'rgb('+(255-item*4)+','+(255-item*4)+','+(255-item*4)+')'"
-                [style.min-height]="item*2+35+'px'">
-            {{item}}
+  <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
+    <button ion-item *ngFor="let item of items" (click)="clickedButton(item)"
+            [style.background]="'rgb('+(255-item*4)+','+(255-item*4)+','+(255-item*4)+')'"
+            [style.min-height]="item*2+35+'px'">
+      {{item}}
+    </button>
+  </ion-list>
+
+  <div *ngFor="let side of ['left', 'right', 'start', 'end']">
+    <ion-list [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)" [side]="side">
+      <ion-list-header>{{side}}</ion-list-header>
+      <ion-item-sliding *ngFor="let item of items">
+        <button ion-item (click)="clickedButton(item)">
+          <h2>Sliding item {{item}}</h2>
+          <div item-right>right</div>
         </button>
+        <ion-item-options side="right" icon-left>
+          <button ion-button color='danger'>
+            <ion-icon name="trash"></ion-icon>
+            Remove
+          </button>
+        </ion-item-options>
+      </ion-item-sliding>
     </ion-list>
-
-    <div *ngFor="let side of ['left', 'right', 'start', 'end']">
-        <ion-list [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)" [side]="side">
-            <ion-list-header>{{side}}</ion-list-header>
-            <ion-item-sliding *ngFor="let item of items">
-                <button ion-item (click)="clickedButton(item)">
-                    <h2>Sliding item {{item}}</h2>
-                    <div item-right>right</div>
-                </button>
-                <ion-item-options side="right" icon-left>
-                    <button ion-button color='danger'>
-                        <ion-icon name="trash"></ion-icon>
-                        Remove
-                    </button>
-                </ion-item-options>
-            </ion-item-sliding>
-        </ion-list>
-    </div>
+  </div>
 
 </ion-content>

From a6ca1a6e56be455c4c3f3769f8c605c60462d27c Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Fri, 19 May 2017 11:57:44 +0300
Subject: [PATCH 08/12] feat(item-reorder): support only start and end

---
 src/components/item/item-reorder.scss | 25 ++++---------------------
 src/components/item/item-reorder.ts   |  9 +++------
 2 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/src/components/item/item-reorder.scss b/src/components/item/item-reorder.scss
index 6d68aa943c7..6138bee771b 100644
--- a/src/components/item/item-reorder.scss
+++ b/src/components/item/item-reorder.scss
@@ -4,6 +4,8 @@
 // --------------------------------------------------
 
 ion-reorder {
+  @include translate3d(160%, 0, 0);
+
   display: none;
 
   flex: 1;
@@ -22,29 +24,10 @@ ion-reorder {
   touch-action: manipulation;
 }
 
-.reorder-side-end ion-reorder {
-  transform: translate3d(160%, 0, 0)
-}
-
 .reorder-side-start ion-reorder {
-  order: -1;
-  transform: translate3d(-160%, 0, 0);
-}
+  @include translate3d(-160%, 0, 0);
 
-.reorder-side-right ion-reorder {
-  transform: translate3d(160%, 0, 0); // stays the same for rtl
-
-  @include rtl() {
-    order: -1;
-  }
-}
-
-.reorder-side-left ion-reorder {
-  transform: translate3d(-160%, 0, 0); // stays the same for rtl
-
-  @include ltr() {
-    order: -1;
-  }
+  order: -1;
 }
 
 ion-reorder ion-icon {
diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts
index 6a1ae3a3180..9b3d7be65de 100644
--- a/src/components/item/item-reorder.ts
+++ b/src/components/item/item-reorder.ts
@@ -2,7 +2,7 @@ import { Directive, ElementRef, EventEmitter, Input, NgZone, Renderer, Optional,
 
 import { Content } from '../content/content';
 import { DomController } from '../../platform/dom-controller';
-import { isTrueProperty, reorderArray, Side } from '../../util/util';
+import { isTrueProperty, reorderArray } from '../../util/util';
 import { ItemReorderGestureDelegate, ItemReorderGesture } from './item-reorder-gesture';
 import { Platform } from '../../platform/platform';
 
@@ -142,10 +142,7 @@ export class ReorderIndexes {
   host: {
     '[class.reorder-enabled]': '_enableReorder',
     '[class.reorder-visible]': '_visibleReorder',
-    '[class.reorder-side-left]': 'side === "left"',
-    '[class.reorder-side-right]': 'side === "right"',
-    '[class.reorder-side-start]': 'side === "start"',
-    '[class.reorder-side-end]': 'side === "end"'
+    '[class.reorder-side-start]': 'side === "start"'
   }
 })
 export class ItemReorder implements ItemReorderGestureDelegate {
@@ -165,7 +162,7 @@ export class ItemReorder implements ItemReorderGestureDelegate {
   /**
    * @input {string} Which side of the view the ion-reorder should be placed. Default `"end"`.
    */
-  @Input() side: Side = 'end';
+  @Input() side: 'start' | 'end' = 'end';
 
   constructor(
     private _plt: Platform,

From f78f0964548e803b4682dbca27a16e87e260c1fb Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Thu, 8 Jun 2017 22:41:08 +0300
Subject: [PATCH 09/12] fix(item-reorder): correct test

---
 src/components/item/test/reorder/pages/root-page/root-page.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/item/test/reorder/pages/root-page/root-page.html b/src/components/item/test/reorder/pages/root-page/root-page.html
index 6f1f882f13a..fcedc02fef0 100644
--- a/src/components/item/test/reorder/pages/root-page/root-page.html
+++ b/src/components/item/test/reorder/pages/root-page/root-page.html
@@ -19,7 +19,7 @@
     </button>
   </ion-list>
 
-  <div *ngFor="let side of ['left', 'right', 'start', 'end']">
+  <div *ngFor="let side of ['start', 'end']">
     <ion-list [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)" [side]="side">
       <ion-list-header>{{side}}</ion-list-header>
       <ion-item-sliding *ngFor="let item of items">

From a30f433295a54fee0cc485faabdfa57912f1b2bd Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Thu, 15 Jun 2017 22:41:24 +0300
Subject: [PATCH 10/12] refactor(item-reorder): boolean comparison, css
 variable

---
 src/components/item/item-reorder-gesture.ts | 5 ++---
 src/components/item/item-reorder.scss       | 6 ++++--
 src/components/item/item-reorder.ts         | 8 ++++++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/item/item-reorder-gesture.ts b/src/components/item/item-reorder-gesture.ts
index a41f97b3931..1967446df2b 100644
--- a/src/components/item/item-reorder-gesture.ts
+++ b/src/components/item/item-reorder-gesture.ts
@@ -2,7 +2,6 @@ import { indexForItem, findReorderItem } from './item-reorder-util';
 import { Platform } from '../../platform/platform';
 import { PointerCoordinates, pointerCoord } from '../../util/dom';
 import { UIEventManager } from '../../gestures/ui-event-manager';
-import { isRightSide, Side } from '../../util/util';
 
 
 /**
@@ -135,7 +134,7 @@ export class ItemReorderGesture {
   }
 
   private itemForCoord(coord: PointerCoordinates): HTMLElement {
-    const sideOffset = isRightSide(this.reorderList.side, this.plt.isRTL) ? -100 : 100;
+    const sideOffset = this.reorderList._isStart === this.plt.isRTL ? -100 : 100;
     const x = this.offset.x + sideOffset;
     const y = coord.y;
     const element = this.plt.getElementFromPoint(x, y);
@@ -168,7 +167,7 @@ const SCROLL_JUMP = 10;
 const ITEM_REORDER_ACTIVE = 'reorder-active';
 
 export interface ItemReorderGestureDelegate {
-  side: Side;
+  _isStart: boolean;
   getNativeElement: () => any;
   _reorderPrepare: () => void;
   _scrollContent: (scrollPosition: number) => number;
diff --git a/src/components/item/item-reorder.scss b/src/components/item/item-reorder.scss
index 782a47be7d7..45e04bbe636 100644
--- a/src/components/item/item-reorder.scss
+++ b/src/components/item/item-reorder.scss
@@ -1,10 +1,12 @@
 @import "../../themes/ionic.globals";
 
+$reorder-initial-transform: 160% !default;
+
 // Item reorder
 // --------------------------------------------------
 
 ion-reorder {
-  @include transform(translate3d(160%, 0, 0));
+  @include transform(translate3d($reorder-initial-transform, 0, 0));
 
   display: none;
 
@@ -25,7 +27,7 @@ ion-reorder {
 }
 
 .reorder-side-start ion-reorder {
-  @include transform(translate3d(-160%, 0, 0));
+  @include transform(translate3d(-$reorder-initial-transform, 0, 0));
 
   order: -1;
 }
diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts
index 9b3d7be65de..d21cb23873c 100644
--- a/src/components/item/item-reorder.ts
+++ b/src/components/item/item-reorder.ts
@@ -142,13 +142,14 @@ export class ReorderIndexes {
   host: {
     '[class.reorder-enabled]': '_enableReorder',
     '[class.reorder-visible]': '_visibleReorder',
-    '[class.reorder-side-start]': 'side === "start"'
+    '[class.reorder-side-start]': '_isStart'
   }
 })
 export class ItemReorder implements ItemReorderGestureDelegate {
 
   _enableReorder: boolean = false;
   _visibleReorder: boolean = false;
+  _isStart: boolean = false;
   _reorderGesture: ItemReorderGesture;
   _lastToIndex: number = -1;
   _element: HTMLElement;
@@ -162,7 +163,10 @@ export class ItemReorder implements ItemReorderGestureDelegate {
   /**
    * @input {string} Which side of the view the ion-reorder should be placed. Default `"end"`.
    */
-  @Input() side: 'start' | 'end' = 'end';
+  @Input('side')
+  set side(side: 'start' | 'end') {
+    this._isStart = side === 'start';
+  }
 
   constructor(
     private _plt: Platform,

From 6ea2fb618d7c677378fd8e03685b4110228bd4dd Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Thu, 15 Jun 2017 23:10:42 +0300
Subject: [PATCH 11/12] fix(item-reorder): test need to use item group

---
 .../reorder/pages/root-page/root-page.html    | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/item/test/reorder/pages/root-page/root-page.html b/src/components/item/test/reorder/pages/root-page/root-page.html
index fcedc02fef0..cb15a750f2a 100644
--- a/src/components/item/test/reorder/pages/root-page/root-page.html
+++ b/src/components/item/test/reorder/pages/root-page/root-page.html
@@ -20,20 +20,22 @@
   </ion-list>
 
   <div *ngFor="let side of ['start', 'end']">
-    <ion-list [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)" [side]="side">
+    <ion-list>
       <ion-list-header>{{side}}</ion-list-header>
-      <ion-item-sliding *ngFor="let item of items">
-        <button ion-item (click)="clickedButton(item)">
-          <h2>Sliding item {{item}}</h2>
-          <div item-right>right</div>
-        </button>
-        <ion-item-options side="right" icon-left>
-          <button ion-button color='danger'>
-            <ion-icon name="trash"></ion-icon>
-            Remove
+      <ion-item-group [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)" [side]="side">
+        <ion-item-sliding *ngFor="let item of items">
+          <button ion-item (click)="clickedButton(item)">
+            <h2>Sliding item {{item}}</h2>
+            <div item-right>right</div>
           </button>
-        </ion-item-options>
-      </ion-item-sliding>
+          <ion-item-options side="right" icon-left>
+            <button ion-button color='danger'>
+              <ion-icon name="trash"></ion-icon>
+              Remove
+            </button>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-item-group>
     </ion-list>
   </div>
 

From 59c7d971398a80d93ce4d9fd4f2573c79310cbf4 Mon Sep 17 00:00:00 2001
From: Amit Moryossef <amitmoryossef@gmail.com>
Date: Thu, 15 Jun 2017 23:20:44 +0300
Subject: [PATCH 12/12] fix(item-reorder): remove deprecated icon/item

---
 .../item/test/reorder/pages/root-page/root-page.html          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/item/test/reorder/pages/root-page/root-page.html b/src/components/item/test/reorder/pages/root-page/root-page.html
index cb15a750f2a..4138bd6a3ae 100644
--- a/src/components/item/test/reorder/pages/root-page/root-page.html
+++ b/src/components/item/test/reorder/pages/root-page/root-page.html
@@ -26,9 +26,9 @@
         <ion-item-sliding *ngFor="let item of items">
           <button ion-item (click)="clickedButton(item)">
             <h2>Sliding item {{item}}</h2>
-            <div item-right>right</div>
+            <div item-end>right</div>
           </button>
-          <ion-item-options side="right" icon-left>
+          <ion-item-options side="right" icon-start>
             <button ion-button color='danger'>
               <ion-icon name="trash"></ion-icon>
               Remove