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.

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 {

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;

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-reorder>
-              <ion-item>Item 8 (the whole item can be dragged)</ion-item>
+              <ion-item>
+                <ion-label>
+                  Item 8 (the whole item can be dragged)
+                </ion-label>
+                </ion-item>
             </ion-reorder>
 
-            <ion-reorder class="no-hide">
+            <ion-reorder>
-              <ion-item>Item 9 (the whole item can be dragged)</ion-item>
+              <ion-item>
+                <ion-label>
+                  Item 9 (the whole item can be dragged)
+                </ion-label>
+                </ion-item>
             </ion-reorder>
 
-            <ion-reorder class="no-hide">
+            <ion-reorder>
-              <ion-item>Item 10 (the whole item can be dragged)</ion-item>
+              <ion-item>
+                <ion-label>
+                  Item 10 (the whole item can be dragged)
+                </ion-label>
+                </ion-item>
             </ion-reorder>
 
           </ion-reorder-group>