feat(back-button): css, clean-up transition logic

packages/core/src/components.d.ts

@@ -314,6 +314,7 @@ declare global {
   namespace JSXElements {
     export interface IonBackButtonAttributes extends HTMLAttributes {
       mode?: 'ios' | 'md';
+      text?: string;
     }
   }
 }

packages/core/src/components/back-button/back-button.ios.scss

@@ -0,0 +1,43 @@
+@import "./back-button";
+@import "./back-button.ios.vars";
+
+// iOS Back Button
+// --------------------------------------------------
+
+.back-button-ios .back-button-inner-default {
+  @include padding(0, 4px);
+  @include margin(0);
+
+  z-index: $back-button-ios-button-z-index;
+  overflow: visible;
+  min-height: 32px;
+  border: 0;
+  font-size: 17px;
+  line-height: 1;
+  color: $back-button-ios-button-color;
+  background-color: transparent;
+  transform: translateZ(0);
+
+  &.activated {
+    opacity: 0.4;
+  }
+}
+
+.back-button-ios ion-icon {
+  @include padding-horizontal(null, 0.3em);
+  @include margin(-1px, 0, 0, 0);
+
+  display: inherit;
+  min-width: 18px;
+  font-size: 34px;
+  font-size: 1.4em;
+  line-height: 0.67;
+  pointer-events: none;
+}
+.back-button .button-text {
+  letter-spacing: -0.01em;
+}
+
+.enable-hover .back-button-ios:hover {
+  color: $back-button-ios-button-color;
+}

packages/core/src/components/back-button/back-button.ios.vars.scss

@@ -0,0 +1,5 @@
+@import "../../themes/ionic.globals.ios";
+
+$back-button-ios-button-color: ion-color($colors-ios, primary, base, ios) !default;
+
+$back-button-ios-button-z-index: $z-index-toolbar-buttons !default;

packages/core/src/components/back-button/back-button.md.scss

@@ -0,0 +1,43 @@
+@import "./back-button";
+@import "./back-button.md.vars";
+
+// MD Back Button
+// --------------------------------------------------
+.back-button-md .back-button-inner-default {
+  @include margin(0, 6px, 0, 0);
+  @include padding(0, 5px);
+
+  min-width: 44px;
+  height: 32px;
+  border: 0;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: $back-button-md-button-color;
+  background-color: transparent;
+  box-shadow: none;
+
+  &.activated {
+    opacity: 0.4;
+  }
+}
+
+.back-button-md ion-icon {
+  @include padding-horizontal(null, 0.3em);
+
+  @include margin(0);
+  @include padding(0, 6px);
+  @include text-align(start);
+
+  font-size: 24px;
+  font-weight: normal;
+
+
+  line-height: 0.67;
+
+  pointer-events: none;
+}
+
+.enable-hover .back-button-md:hover {
+  color: $back-button-md-button-color;
+}

packages/core/src/components/back-button/back-button.md.vars.scss

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals.md";
+
+$back-button-md-button-color: $toolbar-md-text-color !default;
+

packages/core/src/components/back-button/back-button.scss

@@ -1,3 +1,4 @@
+@import "../../themes/ionic.globals";
 
 // Back Button
 // --------------------------------------------------
@@ -10,6 +11,50 @@
   display: inline-block;
 }
 
+.back-button button {
+  @include text-align(center);
+  @include appearance(none);
+
+  position: relative;
+  z-index: 0;
+  display: inline-block;
+
+  border: 0;
+
+  line-height: 1;
+
+  text-decoration: none;
+  text-overflow: ellipsis;
+  text-transform: none;
+
+  white-space: nowrap;
+  cursor: pointer;
+  vertical-align: top; // the better option for most scenarios
+  vertical-align: -webkit-baseline-middle; // the best for those that support it
+
+  transition: background-color, opacity 100ms linear;
+
+  font-kerning: none;
+  user-select: none;
+
+  contain: content;
+
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+}
+
+.back-button .button-inner {
+  display: flex;
+
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+}
+
 .back-button-text {
   display: flex;
 

packages/core/src/components/back-button/back-button.tsx

@@ -3,7 +3,10 @@ import { Config } from '../../index';
 
 @Component({
   tag: 'ion-back-button',
-  styleUrl: 'back-button.scss',
+  styleUrls: {
+    ios: 'back-button.ios.scss',
+    md: 'back-button.md.scss'
+  },
   host: {
     theme: 'back-button'
   }
@@ -19,6 +22,12 @@ export class BackButton {
    */
   @Prop() mode: 'ios' | 'md';
 
+  /**
+   * The text property is used to provide custom text for the back button while using the
+   * default look-and-feel
+   */
+  @Prop() text: string = null;
+
   @Prop({ context: 'config' }) config: Config;
 
   @Element() el: HTMLElement;
@@ -26,10 +35,11 @@ export class BackButton {
   componentWillLoad() {
     this.custom = this.el.childElementCount > 0;
   }
+
   render() {
     const backButtonIcon = this.config.get('backButtonIcon', 'arrow-back');
-    const backButtonText = this.config.get('backButtonText', 'Back');
+    const defaultBackButtonText = this.config.get('backButtonText', 'Back');
-    const buttonColor = this.mode === 'ios' ? 'primary' : '';
+    const backButtonText = this.text || defaultBackButtonText;
 
     if (this.custom) {
       return (
@@ -37,17 +47,18 @@ export class BackButton {
           <slot />
         </ion-nav-pop>
       );
-    } else if (!this.custom) {
+    } else {
       return (
         <ion-nav-pop>
-          <ion-button color={buttonColor}>
+          <button class='back-button-inner-default'>
+          <span class='button-inner'>
           <ion-icon name={backButtonIcon} slot='start' />
-            {backButtonText}
+          <span class='button-text'>{backButtonText}</span>
-          </ion-button>
+          </span>
+          { this.mode === 'md' && <ion-ripple-effect/> }
+          </button>
         </ion-nav-pop>
       );
-    } else {
-      return undefined;
     }
   }
 }

packages/core/src/components/back-button/readme.md

@@ -70,6 +70,14 @@ Possible values are: `"ios"` or `"md"`.
 For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
+#### text
+
+string
+
+The text property is used to provide custom text for the back button while using the
+default look-and-feel
+
+
 ## Attributes
 
 #### mode
@@ -81,6 +89,14 @@ Possible values are: `"ios"` or `"md"`.
 For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
+#### text
+
+string
+
+The text property is used to provide custom text for the back button while using the
+default look-and-feel
+
+
 
 ----------------------------------------------
 

packages/core/src/components/back-button/test/basic/index.html

@@ -10,19 +10,6 @@
   <ion-app>
     <ion-nav></ion-nav>
   </ion-app>
-  <style>
-      f {
-        display: block;
-        margin: 15px auto;
-        max-width: 150px;
-        height: 150px;
-        background: blue;
-      }
-
-      f:last-of-type {
-        background: yellow;
-      }
-    </style>
 </body>
 
 <script>
@@ -47,7 +34,7 @@
       </ion-content>
     `;
 
-    await nav.push(firstPage);
+    await nav.setRoot(firstPage);
 
     // okay cool, we're in the DOM now
     const button = firstPage.querySelector('.next');
@@ -92,7 +79,7 @@
         <ion-toolbar>
           <ion-buttons slot="start">
             <ion-back-button>
-            <ion-button>
+            <ion-button color="danger">
               <ion-icon name="add" slot="icon-only"></ion-icon>
             </ion-button>
             </ion-back-button>
@@ -110,10 +97,4 @@
     await nav.push(thirdPage);
   }
 </script>
-<!-- <style> -->
-<!--   ion&#45;back&#45;button { -->
-<!--     height: 50px; -->
-<!--     background&#45;color: blue; -->
-<!--   } -->
-<!-- </style> -->
 </html>

packages/core/src/components/back-button/test/host-element/index.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Back Button</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+  <script>
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Page One</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Page One</h1>
+              <ion-nav-push component="page-two">
+                <ion-button class="next">Go to Page Two</ion-button>
+              </ion-nav-push>
+            </ion-content>
+          </ion-page>
+        `;
+      }
+    }
+
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button></ion-back-button>
+                </ion-buttons>
+                <ion-title>Page Two</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Page Two</h1>
+              <div>
+                <ion-nav-push component="page-three">
+                  <ion-button class="next">Go to Page Three</ion-button>
+                </ion-nav-push>
+              </div>
+            </ion-content>
+          </ion-page>
+        `;
+      }
+    }
+
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button text='Page Two'></ion-back-button>
+                </ion-buttons>
+                <ion-title>Page Three</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Page Three</h1>
+              <div>
+                <ion-nav-push component="page-four">
+                  <ion-button class="next">Go to Page Four</ion-button>
+                </ion-nav-push>
+              </div>
+            </ion-content>
+          </ion-page>
+        `;
+      }
+    }
+
+    class PageFour extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-page>
+            <ion-header>
+              <ion-toolbar>
+                <ion-buttons slot="start">
+                  <ion-back-button text='Page Three'></ion-back-button>
+                </ion-buttons>
+                <ion-title>Page Four</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content padding>
+              <h1>Page Four</h1>
+            </ion-content>
+          </ion-page>
+        `;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+    customElements.define('page-four', PageFour);
+
+  </script>
+</head>
+<body>
+  <ion-app>
+    <ion-nav root="page-one"></ion-nav>
+  </ion-app>
+</body>
+
+</html>

packages/core/src/components/back-button/test/standalone/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Back Button</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-back-button class="show-back-button"></ion-back-button>
+</body>
+
+
+</html>

packages/core/src/components/nav/nav.tsx

@@ -974,54 +974,12 @@ export function attachViewToDom(nav: Nav, enteringView: ViewController, ti: Tran
       ti.mountingData = mountingData;
       Object.assign(enteringView, mountingData);
       enteringView.state = STATE_ATTACHED;
-    }).then(() => {
-      return waitForNewlyAttachedViewElementsToHydate(enteringView.element);
     });
   }
   // it's in the wrong state, so don't attach and just return
   return Promise.resolve();
 }
 
-export function waitForNewlyAttachedViewElementsToHydate(element: HTMLElement) {
-  // the element may or may not be a Stencil element
-  // so check if it has an `<ion-nav>`, `<ion-header>`, and `<ion-content>` for
-  // hydration
-  const promises: Promise<any>[] = [];
-  if ((element as any).componentOnReady) {
-    // it's a stencil element
-    promises.push((element as any).componentOnReady());
-  }
-
-  const navs = element.querySelectorAll('ion-nav');
-  for (let i = 0; i < navs.length; i++) {
-    const nav = navs.item(i);
-    promises.push((nav as any).componentOnReady());
-  }
-
-  // check for headers
-  const headers = element.querySelectorAll('ion-header');
-  for (let i = 0; i < headers.length; i++) {
-    const header = headers.item(i);
-    promises.push((header as any).componentOnReady());
-  }
-
-  // check for contents
-  const contents = element.querySelectorAll('ion-content');
-  for (let i = 0; i < contents.length; i++) {
-    const content = contents.item(i);
-    promises.push((content as any).componentOnReady());
-  }
-
-  // check for back buttons
-  const backButtons = element.querySelectorAll('ion-back-button');
-  for (let i = 0; i < backButtons.length; i++) {
-    const backButton = backButtons.item(i);
-    promises.push((backButton as any).componentOnReady());
-  }
-
-  return Promise.all(promises);
-}
-
 export function initializeViewBeforeTransition(ti: TransitionInstruction): Promise<ViewController[]> {
   let leavingView: ViewController = null;
   let enteringView: ViewController = null;

packages/core/src/components/nav/test/basic/index.html

@@ -79,37 +79,6 @@
     customElements.define('page-two', PageTwo);
     customElements.define('page-three', PageThree);
 
-    function regularElement() {
-      const start = Date.now();
-      const element = document.createElement('page-three');
-      document.body.appendChild(element);
-      const end = Date.now();
-      console.log(`It took ${end - start} millis to create the custom element, add it to the DOM`);
-      return Promise.resolve().then(() => {
-
-      }).then(() => {
-
-      }).then(() => {
-        const endTwo = Date.now();
-        console.log(`It took ${endTwo - start} millis after the promise blocks bro`);
-      });
-    }
-
-    function stencilElement() {
-      const start = Date.now();
-      const element = document.createElement('ion-nav');
-      document.body.appendChild(element);
-      const end = Date.now();
-      console.log(`It took ${end - start} millis to create the stencil element, add it to the DOM`);
-      return element.componentOnReady().then(() => {
-
-      }).then(() => {
-
-      }).then(() => {
-        const endTwo = Date.now();
-        console.log(`It took ${endTwo - start} millis after the promise blocks bro`);
-      });
-    }
   </script>
 </head>
 <body>

packages/core/src/components/toolbar/toolbar.ios.scss

@@ -296,38 +296,6 @@
 }
 
 
-// iOS Toolbar Back Button
-// --------------------------------------------------
-
-// .back-button-ios {
-//   @include margin(0);
-//
-//   z-index: $z-index-toolbar-buttons;
-//   overflow: visible;
-//
-//   order: map-get($toolbar-order-ios, back-button);
-//
-//   min-height: 32px;
-//
-//   line-height: 1;
-//   transform: translateZ(0);
-// }
-//
-// .back-button-icon-ios {
-//   @include margin(-1px, 0, 0, 0);
-//
-//   display: inherit;
-//
-//   min-width: 18px;
-//
-//   font-size: 34px;
-// }
-//
-// .back-button-text-ios {
-//   letter-spacing: -.01em;
-// }
-
-
 // iOS Toolbar Menu Toggle
 // --------------------------------------------------
 

packages/core/src/components/toolbar/toolbar.md.scss

@@ -299,27 +299,6 @@
 }
 
 
-// Material Design Toolbar Back Button
-// --------------------------------------------------
-
-.back-button-md {
-  @include margin(0, 6px);
-
-  min-width: 44px;
-
-  box-shadow: none;
-}
-
-.back-button-icon-md {
-  @include margin(0);
-  @include padding(0, 6px);
-  @include text-align(start);
-
-  font-size: 24px;
-  font-weight: normal;
-}
-
-
 // Material Design Toolbar Menu Toggle
 // --------------------------------------------------