From d8ecf16febaccc52a42af7caaf11464662d8a471 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 26 Sep 2016 00:40:10 +0100
Subject: [PATCH] refactor(nav): do not auto-add pascal case css class

Previously a css class generated from the JS class name, was
automatically being added to the page element. However, the JS class
name returned is not consistent among all browsers. Instead of
automatically applying a css classname, we now recommend adding a
`selector` to each page component.
---
 src/components/modal/modal-component.ts     | 2 --
 src/components/popover/popover-component.ts | 2 --
 src/navigation/nav-controller-base.ts       | 7 +------
 src/navigation/url-serializer.ts            | 7 +++++--
 src/util/util.ts                            | 9 ---------
 5 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/src/components/modal/modal-component.ts b/src/components/modal/modal-component.ts
index f4005535f0..bf4baf4038 100644
--- a/src/components/modal/modal-component.ts
+++ b/src/components/modal/modal-component.ts
@@ -2,7 +2,6 @@ import { Component, ComponentFactoryResolver, HostListener, Renderer, ViewChild,
 
 import { Key } from '../../util/key';
 import { NavParams } from '../../navigation/nav-params';
-import { pascalCaseToDashCase } from '../../util/util';
 import { ViewController } from '../../navigation/view-controller';
 
 
@@ -46,7 +45,6 @@ export class ModalCmp {
 
       this._setCssClass(componentRef, 'ion-page');
       this._setCssClass(componentRef, 'show-page');
-      this._setCssClass(componentRef, pascalCaseToDashCase(component.name));
       this._enabled = true;
     }
   }
diff --git a/src/components/popover/popover-component.ts b/src/components/popover/popover-component.ts
index 5f1a925b63..9efed77335 100644
--- a/src/components/popover/popover-component.ts
+++ b/src/components/popover/popover-component.ts
@@ -1,7 +1,6 @@
 import { Component, ComponentFactoryResolver, ElementRef, HostListener, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
 
 import { Config } from '../../config/config';
-import { pascalCaseToDashCase } from '../../util/util';
 import { Key } from '../../util/key';
 import { NavParams } from '../../navigation/nav-params';
 import { ViewController } from '../../navigation/view-controller';
@@ -78,7 +77,6 @@ export class PopoverCmp {
       const componentRef = this._viewport.createComponent(componentFactory, this._viewport.length, this._viewport.parentInjector, []);
       this._viewCtrl._setInstance(componentRef.instance);
 
-      this._setCssClass(componentRef, pascalCaseToDashCase(component.name));
       this._enabled = true;
     }
   }
diff --git a/src/navigation/nav-controller-base.ts b/src/navigation/nav-controller-base.ts
index 635e6318a3..e7ae3a64e5 100644
--- a/src/navigation/nav-controller-base.ts
+++ b/src/navigation/nav-controller-base.ts
@@ -8,7 +8,7 @@ import { convertToView, convertToViews, NavOptions, DIRECTION_BACK, DIRECTION_FO
 import { setZIndex } from './nav-util';
 import { DeepLinker } from './deep-linker';
 import { GestureController } from '../gestures/gesture-controller';
-import { isBlank, isNumber, isPresent, pascalCaseToDashCase } from '../util/util';
+import { isBlank, isNumber, isPresent } from '../util/util';
 import { isViewController, ViewController } from './view-controller';
 import { Ion } from '../components/ion';
 import { Keyboard } from '../util/keyboard';
@@ -575,11 +575,6 @@ export class NavControllerBase extends Ion implements NavController {
       this._renderer.setElementClass(pageElement, view._cssClass, true);
     }
 
-    // auto-add page css className created from component JS class name
-    // ******** DOM WRITE ****************
-    const cssClassName = pascalCaseToDashCase(view.component.name);
-    this._renderer.setElementClass(pageElement, cssClassName, true);
-
     componentRef.changeDetectorRef.detectChanges();
   }
 
diff --git a/src/navigation/url-serializer.ts b/src/navigation/url-serializer.ts
index 085c4a54d5..95fadac3e3 100644
--- a/src/navigation/url-serializer.ts
+++ b/src/navigation/url-serializer.ts
@@ -1,7 +1,7 @@
 import { OpaqueToken } from '@angular/core';
 
 import { DeepLinkConfig, NavLink, NavSegment } from './nav-util';
-import { isArray, isBlank, isPresent, pascalCaseToDashCase } from '../util/util';
+import { isArray, isBlank, isPresent } from '../util/util';
 
 
 export class UrlSerializer {
@@ -104,7 +104,10 @@ export class UrlSerializer {
   }
 
   formatUrlPart(name: string): string {
-    name = pascalCaseToDashCase(name.replace(URL_REPLACE_REG, '-'));
+    name = name.replace(URL_REPLACE_REG, '-');
+    name = name.charAt(0).toLowerCase() + name.substring(1).replace(/[A-Z]/g, match => {
+      return '-' + match.toLowerCase();
+    });
     while (name.indexOf('--') > -1) {
       name = name.replace('--', '-');
     }
diff --git a/src/util/util.ts b/src/util/util.ts
index 8e7ec80ffe..2065de5a5a 100644
--- a/src/util/util.ts
+++ b/src/util/util.ts
@@ -145,15 +145,6 @@ export const isCheckedProperty = function(a: any, b: any): boolean {
   /* tslint:enable */
 };
 
-/**
- * Convert a string in the format thisIsAString to a slug format this-is-a-string
- */
-export function pascalCaseToDashCase(val: string = ''): string {
-  return val.charAt(0).toLowerCase() + val.substring(1).replace(/[A-Z]/g, match => {
-    return '-' + match.toLowerCase();
-  });
-}
-
 
 /**
  * @private