feature(back-button): initial swag at software back-button support (yolo)

* wip

* wip

* wip

* feature(back-button): yolo

packages/core/src/components.d.ts

@@ -276,6 +276,36 @@ declare global {
 }
 
 
+import {
+  BackButton as IonBackButton
+} from './components/back-button/back-button';
+
+declare global {
+  interface HTMLIonBackButtonElement extends IonBackButton, HTMLElement {
+  }
+  var HTMLIonBackButtonElement: {
+    prototype: HTMLIonBackButtonElement;
+    new (): HTMLIonBackButtonElement;
+  };
+  interface HTMLElementTagNameMap {
+    "ion-back-button": HTMLIonBackButtonElement;
+  }
+  interface ElementTagNameMap {
+    "ion-back-button": HTMLIonBackButtonElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      "ion-back-button": JSXElements.IonBackButtonAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface IonBackButtonAttributes extends HTMLAttributes {
+      
+    }
+  }
+}
+
+
 import {
   Backdrop as IonBackdrop
 } from './components/backdrop/backdrop';
@@ -1737,6 +1767,36 @@ declare global {
 }
 
 
+import {
+  NavPop as IonNavPop
+} from './components/nav-pop/nav-pop';
+
+declare global {
+  interface HTMLIonNavPopElement extends IonNavPop, HTMLElement {
+  }
+  var HTMLIonNavPopElement: {
+    prototype: HTMLIonNavPopElement;
+    new (): HTMLIonNavPopElement;
+  };
+  interface HTMLElementTagNameMap {
+    "ion-nav-pop": HTMLIonNavPopElement;
+  }
+  interface ElementTagNameMap {
+    "ion-nav-pop": HTMLIonNavPopElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      "ion-nav-pop": JSXElements.IonNavPopAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface IonNavPopAttributes extends HTMLAttributes {
+      
+    }
+  }
+}
+
+
 import {
   Nav as IonNav
 } from './components/nav/nav';

packages/core/src/components/action-sheet/action-sheet.md.vars.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font family of the action sheet
-$action-sheet-md-font-family:                           $font-family-md-base !default;
+$action-sheet-md-font-family:                           ComicSans !default;
 
 /// @prop - Text align of the action sheet
 $action-sheet-md-text-align:                            start !default;

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

@@ -0,0 +1,6 @@
+@import "./back-button";
+@import "./back-button.ios.vars";
+
+// iOS Back Button
+// --------------------------------------------------
+body {color:red;}

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

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Back Button
+// --------------------------------------------------

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

@@ -0,0 +1,22 @@
+@import "./back-button";
+@import "./back-button.md.vars";
+
+// Material Design 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: 2.4rem;
+  font-weight: normal;
+}

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

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Back Button
+// --------------------------------------------------

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

@@ -0,0 +1,19 @@
+
+// Back Button
+// --------------------------------------------------
+
+.back-button {
+  display: none;
+}
+
+// .back-button.show-back-button {
+.back-button {
+  display: inline-block;
+
+}
+
+.back-button-text {
+  display: flex;
+
+  align-items: center;
+}

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

@@ -0,0 +1,53 @@
+import { Component, Prop } from '@stencil/core';
+import { Config } from '../../index';
+
+
+@Component({
+  tag: 'ion-back-button',
+  styleUrls: {
+    ios: 'back-button.ios.scss',
+    md: 'back-button.md.scss'
+  },
+  host: {
+    theme: 'back-button'
+  }
+})
+export class BackButton {
+  private mode: string;
+
+  @Prop({ context: 'config' }) config: Config;
+
+  render() {
+    const iconName = this.config.get('backButtonIcon', this.mode + '-arrow-back');
+    const text = this.config.get('backButtonText', 'Back');
+
+    const iconClass: any = {
+      'back-button-icon': true
+    };
+    const textClass: any = {
+      'back-button-text': true
+    };
+
+    if (this.mode) {
+      iconClass['back-button-icon-' + this.mode] = true;
+      iconClass['back-button-text-' + this.mode] = true;
+    }
+
+    return (
+      <ion-nav-pop>
+        <button>
+          <span class={iconClass}>
+            <slot name='icon'>
+              <ion-icon name={iconName}></ion-icon>
+            </slot>
+          </span>
+          <span class={textClass}>
+            <slot name='text'>
+              {text}
+            </slot>
+          </span>
+        </button>
+      </ion-nav-pop>
+    );
+  }
+}

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

@@ -0,0 +1,10 @@
+# ion-back-button
+
+
+<!-- Auto Generated Below -->
+
+
+
+----------------------------------------------
+
+*Built by [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,112 @@
+<!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 onload="loadFirstPage()">
+  <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>
+
+  async function loadFirstPage() {
+    const nav = document.querySelector('ion-nav');
+    await nav.componentOnReady();
+    const firstPage = document.createElement('ion-page');
+    firstPage.classList.add('first-page');
+    firstPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page One</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page One</h1>
+        <ion-button class="next">Go to Page Two</ion-button>
+      </ion-content>
+    `;
+
+    await nav.push(firstPage);
+
+    // okay cool, we're in the DOM now
+    const button = firstPage.querySelector('ion-button');
+    button.addEventListener('click', async () => {
+      await goToPageTwo(nav);
+    });
+  }
+
+  async function goToPageTwo(nav) {
+    const secondPage = document.createElement('ion-page');
+    secondPage.classList.add('second-page');
+    secondPage.innerHTML = `
+      <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>
+        <ion-button class="next">Go to Page Three</ion-button>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(secondPage);
+
+    const nextButton = secondPage.querySelector('ion-button .next');
+    nextButton.addEventListener('click', async () => {
+      await goToPageThree(nav);
+    });
+  }
+
+  async function goToPageThree(nav) {
+    const thirdPage = document.createElement('ion-page');
+    thirdPage.classList.add('third-page');
+    thirdPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button>
+            </ion-back-button>
+          </ion-buttons>
+          <ion-title>Page Three</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page Three</h1>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(thirdPage);
+  }
+</script>
+<style>
+  ion-back-button {
+    height: 50px;
+    background-color: blue;
+  }
+</style>
+</html>

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

@@ -0,0 +1,30 @@
+import { Component, Element, Listen } from '@stencil/core';
+
+@Component({
+  tag: 'ion-nav-pop',
+  styleUrls: {
+    ios: 'nav-pop.ios.scss',
+    md: 'nav-pop.md.scss'
+  },
+  host: {
+    theme: 'nav-pop'
+  }
+})
+export class NavPop {
+
+  @Element() element: HTMLElement;
+
+  @Listen('child:click')
+  pop() {
+    const nav = this.element.closest('ion-nav') as HTMLIonNavElement;
+    if (nav) {
+      return nav.pop();
+    }
+    return Promise.resolve();
+  }
+
+  render() {
+    return <slot></slot>;
+  }
+
+}

packages/core/src/components/nav-pop/readme.md

@@ -0,0 +1,11 @@
+# ion-nav-pop
+
+
+
+<!-- Auto Generated Below -->
+
+
+
+----------------------------------------------
+
+*Built by [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Nav Pop</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 onload="loadFirstPage()">
+  <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>
+
+  async function loadFirstPage() {
+    const nav = document.querySelector('ion-nav');
+    await nav.componentOnReady();
+    const firstPage = document.createElement('ion-page');
+    firstPage.classList.add('first-page');
+    firstPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page One</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page One</h1>
+        <ion-button class="next">Go to Page Two</ion-button>
+      </ion-content>
+    `;
+
+    await nav.push(firstPage);
+
+    // okay cool, we're in the DOM now
+    const button = firstPage.querySelector('ion-button');
+    button.addEventListener('click', async () => {
+      await goToPageTwo(nav);
+    });
+  }
+
+  async function goToPageTwo(nav) {
+    const secondPage = document.createElement('ion-page');
+    secondPage.classList.add('second-page');
+    secondPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page Two</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page Two</h1>
+        <ion-button class="next">Go to Page Three</ion-button>
+        <ion-nav-pop>
+          <ion-button class="previous">Go Back</ion-button>
+        </ion-nav-pop>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(secondPage);
+
+    const nextButton = secondPage.querySelector('ion-button .next');
+    nextButton.addEventListener('click', async () => {
+      await goToPageThree(nav);
+    });
+  }
+
+  async function goToPageThree(nav) {
+    const thirdPage = document.createElement('ion-page');
+    thirdPage.classList.add('third-page');
+    thirdPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Page Three</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page Three</h1>
+        <ion-nav-pop>
+          <ion-button class="previous">Go Back</ion-button>
+        </ion-nav-pop>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(thirdPage);
+  }
+</script>
+</html>

packages/core/src/components/nav/test/simple-nested-navs/index.html

@@ -35,6 +35,7 @@
     navOnePageOne.innerHTML = `
       <ion-header>
         <ion-toolbar>
+          <ion-back-button slot="start"></ion-back-button>
           <ion-title>Nav One Page One</ion-title>
         </ion-toolbar>
       </ion-header>
@@ -59,6 +60,9 @@
     navOnePageTwo.innerHTML = `
       <ion-header>
         <ion-toolbar>
+          <ion-back-button slot="back-button">
+            <span slot="back-button-text">Back</span>
+          </ion-back-button>
           <ion-title>Nav One Page Two</ion-title>
         </ion-toolbar>
       </ion-header>

packages/core/src/index.d.ts

@@ -12,6 +12,7 @@ export {
 } from './components/animation-controller/animation-interface';
 export { App } from './components/app/app';
 export { Avatar } from './components/avatar/avatar';
+export { BackButton } from './components/back-button/back-button';
 export { Backdrop } from './components/backdrop/backdrop';
 export { Badge } from './components/badge/badge';
 export { Button } from './components/button/button';

packages/core/stencil.config.js

@@ -1,4 +1,5 @@
 exports.config = {
+  enableCache: false,
   namespace: 'Ionic',
   generateDistribution: true,
   generateWWW: false,
@@ -25,7 +26,7 @@ exports.config = {
     { components: ['ion-loading', 'ion-loading-controller'] },
     { components: ['ion-menu', 'ion-menu-controller'] },
     { components: ['ion-modal', 'ion-modal-controller'] },
-    { components: ['ion-nav', 'ion-page'] },
+    { components: ['ion-nav', 'ion-page', 'ion-back-button'] },
     { components: ['ion-popover', 'ion-popover-controller'] },
     { components: ['ion-radio', 'ion-radio-group'] },
     { components: ['ion-reorder', 'ion-reorder-group'] },
@@ -43,6 +44,7 @@ exports.config = {
     { components: ['ion-toast', 'ion-toast-controller'] },
     { components: ['ion-tap-click', 'ion-status-tap'] },
     { components: ['ion-cordova-platform'] },
+    { components: ['ion-nav-pop'] },
   ],
   collections: [
     'ionicons'
@@ -52,7 +54,6 @@ exports.config = {
   ],
   preamble: '(C) Ionic http://ionicframework.com - MIT License',
   globalScript: 'src/global/ionic-global.ts',
-  enableCache: false,
   buildStats: true
 };