From 90d77fc2d3b6f84f7cb722a34d482287ba1b120c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 30 Jan 2018 16:42:34 -0500
Subject: [PATCH] fix(reorder): remove the class needed to make reorder visible

This fixes the requirement of adding `no-hide` to an item so that it is
always visible by only hiding reorder elements inside of item slots.

Renames the `hasContent` state to `custom` and adds a class since this
is basically providing a custom reorder instead of our standard icon.
---
 .../core/src/components/reorder/reorder.scss  | 18 +------
 .../core/src/components/reorder/reorder.tsx   | 19 +++++--
 .../components/reorder/test/basic/index.html  | 52 ++++++++++++++-----
 3 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/packages/core/src/components/reorder/reorder.scss b/packages/core/src/components/reorder/reorder.scss
index 0ab6248820..b06fcdd1ce 100644
--- a/packages/core/src/components/reorder/reorder.scss
+++ b/packages/core/src/components/reorder/reorder.scss
@@ -4,25 +4,11 @@
 // --------------------------------------------------
 
 .reorder[slot] {
-  @include margin(auto, null);
+  display: none;
 
   line-height: 0;
 }
 
-.reorder[slot="start"] {
-  order: -1;
-}
-
-.reorder.no-hide {
-  display: block;
-
-  visibility: normal;
-}
-
-.reorder:not(.no-hide) {
-  display: none;
-}
-
 .reorder-enabled .reorder {
   display: block;
 
@@ -79,7 +65,7 @@
 // --------------------------------------------------
 
 .item .reorder[slot] {
-  @include margin(0);
+  @include margin(0, null);
 }
 
 .item .reorder-icon {
diff --git a/packages/core/src/components/reorder/reorder.tsx b/packages/core/src/components/reorder/reorder.tsx
index 6b43f17a6a..016da763ee 100644
--- a/packages/core/src/components/reorder/reorder.tsx
+++ b/packages/core/src/components/reorder/reorder.tsx
@@ -10,18 +10,29 @@ import { Component, Element, State } from '@stencil/core';
 })
 export class Reorder {
 
-  @State() hasContent: boolean = null;
   @Element() private el: HTMLElement;
 
+  @State() custom: boolean;
+
   componentDidLoad() {
-    this.hasContent = this.el.childElementCount > 0;
+    this.custom = this.el.childElementCount > 0;
+  }
+
+  hostData() {
+    const hostClasses = {
+      'reorder-custom': this.custom
+    };
+
+    return {
+      class: hostClasses
+    };
   }
 
   render() {
     // TODO: https://github.com/ionic-team/stencil/issues/171
-    if (this.hasContent === true) {
+    if (this.custom === true) {
       return <slot></slot>;
-    } else if (this.hasContent === false) {
+    } else if (this.custom === false) {
       return <ion-icon class='reorder-icon' name='reorder'></ion-icon>;
     } else {
       return undefined;
diff --git a/packages/core/src/components/reorder/test/basic/index.html b/packages/core/src/components/reorder/test/basic/index.html
index 3514d577d5..2e06b9cdd5 100644
--- a/packages/core/src/components/reorder/test/basic/index.html
+++ b/packages/core/src/components/reorder/test/basic/index.html
@@ -25,56 +25,82 @@
           <ion-reorder-group id="reorder">
 
             <ion-item>
-              Item 1 (default ion-reorder)
+              <ion-label>
+                Item 1 (default ion-reorder)
+              </ion-label>
               <ion-reorder slot="end"></ion-reorder>
             </ion-item>
 
             <ion-item>
-              Item 2 (default ion-reorder)
+              <ion-label>
+                Item 2 (default ion-reorder)
+              </ion-label>
               <ion-reorder slot="end"></ion-reorder>
             </ion-item>
 
             <ion-item>
-              Item 3 (default ion-reorder slot="start")
+              <ion-label>
+                Item 3 (default ion-reorder slot="start")
+              </ion-label>
               <ion-reorder slot="start"></ion-reorder>
             </ion-item>
 
             <ion-item color="secondary">
-              Item 4 (default ion-reorder slot="start")
+              <ion-label>
+                Item 4 (default ion-reorder slot="start")
+              </ion-label>
               <ion-reorder slot="start"></ion-reorder>
             </ion-item>
 
             <ion-item>
-              Item 5 (custom ion-reorder)
+              <ion-label>
+                Item 5 (custom ion-reorder)
+              </ion-label>
               <ion-reorder slot="end">
                 <ion-icon name="pizza"></ion-icon>
               </ion-reorder>
             </ion-item>
 
             <ion-item>
-              Item 6 (custom ion-reorder)
+              <ion-label>
+                Item 6 (custom ion-reorder)
+              </ion-label>
               <ion-reorder slot="end">
                 <ion-icon name="pizza"></ion-icon>
               </ion-reorder>
             </ion-item>
 
             <ion-item>
-              Item 7 (custom ion-reorder slot="start")
+              <ion-label>
+                Item 7 (custom ion-reorder slot="start")
+              </ion-label>
               <ion-reorder slot="start">
                 <ion-icon name="pizza"></ion-icon>
               </ion-reorder>
             </ion-item>
 
-            <ion-reorder class="no-hide">
-              <ion-item>Item 8 (the whole item can be dragged)</ion-item>
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 8 (the whole item can be dragged)
+                </ion-label>
+                </ion-item>
             </ion-reorder>
 
-            <ion-reorder class="no-hide">
-              <ion-item>Item 9 (the whole item can be dragged)</ion-item>
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 9 (the whole item can be dragged)
+                </ion-label>
+                </ion-item>
             </ion-reorder>
 
-            <ion-reorder class="no-hide">
-              <ion-item>Item 10 (the whole item can be dragged)</ion-item>
+            <ion-reorder>
+              <ion-item>
+                <ion-label>
+                  Item 10 (the whole item can be dragged)
+                </ion-label>
+                </ion-item>
             </ion-reorder>
 
           </ion-reorder-group>