feat(back-button): adds defaultHref

packages/core/src/components.d.ts

@@ -310,6 +310,8 @@ declare global {
   }
   namespace JSXElements {
     export interface IonBackButtonAttributes extends HTMLAttributes {
+      defaultHref?: string;
+      icon?: string;
       mode?: 'ios' | 'md';
       text?: string|undefined;
     }

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

@@ -6,7 +6,7 @@
 
 .back-button-ios .back-button-inner {
   @include padding(0);
-  @include margin(0);
+  @include margin(2px, 0, 0, 0);
 
   z-index: $back-button-ios-button-z-index;
   overflow: visible;

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

@@ -3,7 +3,7 @@
 // MD Back Button
 // --------------------------------------------------
 .back-button-md .back-button-inner {
-  @include margin(0, 6px, 0, 0);
+  @include margin(2px, 6px, 0, 0);
   @include padding(0, 5px);
 
   min-width: 44px;

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

@@ -7,6 +7,7 @@
   display: none;
 }
 
+.back-button.can-back-back,
 .back-button.show-back-button {
   display: inline-block;
 }
@@ -40,6 +41,14 @@
 
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
+
+  display: flex;
+
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
 }
 
 .back-button .button-inner {

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

@@ -1,5 +1,6 @@
 import { Component, Element, Prop } from '@stencil/core';
 import { Config } from '../../index';
+import { openURL } from '../../utils/theme';
 
 @Component({
   tag: 'ion-back-button',
@@ -13,8 +14,6 @@ import { Config } from '../../index';
 })
 export class BackButton {
 
-  private custom = true;
-
   /**
    * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
@@ -28,37 +27,45 @@ export class BackButton {
    */
   @Prop() text: string|undefined;
 
+  @Prop() icon: string;
+
+  @Prop() defaultHref: string;
+
   @Prop({ context: 'config' }) config: Config;
 
   @Element() el: HTMLElement;
 
-  componentWillLoad() {
-    this.custom = this.el.childElementCount > 0;
+
+  hostData() {
+    return {
+      class: {
+        'show-back-button': !!this.defaultHref
+      }
+    };
+  }
+
+  private onClick(ev: Event) {
+    const nav = this.el.closest('ion-nav');
+    if (nav && nav.canGoBack()) {
+      ev.preventDefault();
+      nav.pop();
+    } else if (this.defaultHref) {
+      openURL(this.defaultHref, ev);
+    }
   }
 
   render() {
-    const backButtonIcon = this.config.get('backButtonIcon', 'arrow-back');
-    const defaultBackButtonText = this.config.get('backButtonText', this.mode === 'ios' ? 'Back' : '');
-    const backButtonText = this.text || defaultBackButtonText;
+    const backButtonIcon = this.icon || this.config.get('backButtonIcon', 'arrow-back');
+    const backButtonText = this.text || this.config.get('backButtonText', this.mode === 'ios' ? 'Back' : '');
 
-    if (this.custom) {
-      return (
-        <ion-nav-pop>
-          <slot />
-        </ion-nav-pop>
-      );
-    } else {
-      return (
-        <ion-nav-pop>
-          <button class='back-button-inner'>
-            <span class='button-inner'>
-              <ion-icon name={backButtonIcon} slot='start' />
-              <span class='button-text'>{backButtonText}</span>
-            </span>
-            { this.mode === 'md' && <ion-ripple-effect/> }
-          </button>
-        </ion-nav-pop>
-      );
-    }
+    return (
+      <button
+        class='back-button-inner'
+        onClick={(ev) => this.onClick(ev)}>
+        { backButtonIcon && <ion-icon name={backButtonIcon}/> }
+        { backButtonText && <span class='button-text'>{backButtonText}</span> }
+        { this.mode === 'md' && <ion-ripple-effect/> }
+      </button>
+    );
   }
 }

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

@@ -15,18 +15,14 @@ add a back button to your view, all you need is:
 
 The back button component is smart enough to know what to render and what content to show.
 
-If, however, you want more control over what is shown in the back button, you can pass your own button markup.
+If, however, you want more control over what is shown in the back button, you use the
+`text` and `icon` properties.
 
 ```html
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-back-button>
-        <ion-button>
-            Button Text
-          <ion-icon name="add" slot="start"></ion-icon>
-        </ion-button>
-      </ion-back-button>
+      <ion-back-button text="Volver" icon="add"></ion-back-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
@@ -39,11 +35,7 @@ Or no button text at all:
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-back-button>
-        <ion-button>
-          <ion-icon name="add" slot="icon-only"></ion-icon>
-        </ion-button>
-      </ion-back-button>
+      <ion-back-button text="" icon="add"></ion-back-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
@@ -55,6 +47,16 @@ Or no button text at all:
 
 ## Properties
 
+#### defaultHref
+
+string
+
+
+#### icon
+
+string
+
+
 #### mode
 
 
@@ -74,6 +76,16 @@ default look-and-feel
 
 ## Attributes
 
+#### default-href
+
+string
+
+
+#### icon
+
+string
+
+
 #### mode
 
 

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

@@ -44,7 +44,7 @@
   }
 
   async function goToPageTwo(nav) {
-    const firstPage = document.createElement('div');
+    const secondPage = document.createElement('div');
     secondPage.classList.add('second-page');
     secondPage.innerHTML = `
       <ion-header>
@@ -78,12 +78,7 @@
       <ion-header>
         <ion-toolbar>
           <ion-buttons slot="start">
-            <ion-back-button>
-            <ion-button color="danger">
-              <ion-icon name="add" slot="start"></ion-icon>
-              Text!
-            </ion-button>
-            </ion-back-button>
+            <ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
           </ion-buttons>
           <ion-title>Page Three</ion-title>
         </ion-toolbar>

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

@@ -5,11 +5,11 @@ import { Component, Element, Listen } from '@stencil/core';
 })
 export class NavPop {
 
-  @Element() element: HTMLElement;
+  @Element() el: HTMLElement;
 
   @Listen('child:click')
   pop(): Promise<any> {
-    const nav = this.element.closest('ion-nav') as HTMLIonNavElement;
+    const nav = this.el.closest('ion-nav');
     if (nav) {
       return nav.pop();
     }

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

@@ -6,14 +6,14 @@ import { Component, Element, Listen, Prop } from '@stencil/core';
 })
 export class NavPush {
 
-  @Element() element: HTMLElement;
+  @Element() el: HTMLElement;
   @Prop() component: any;
   @Prop() url: string;
   @Prop() data: any;
 
   @Listen('child:click')
   push(): Promise<any> {
-    const nav = this.element.closest('ion-nav') as HTMLIonNavElement;
+    const nav = this.el.closest('ion-nav');
     if (nav) {
       const toPush = this.url || this.component;
       return nav.push(toPush, this.data);

packages/core/src/components/nav-set-root/nav-set-root.tsx

@@ -5,14 +5,14 @@ import { Component, Element, Listen, Prop } from '@stencil/core';
 })
 export class NavSetRoot {
 
-  @Element() element: HTMLElement;
+  @Element() el: HTMLElement;
   @Prop() component: any;
   @Prop() url: string;
   @Prop() data: any;
 
   @Listen('child:click')
   push(): Promise<any> {
-    const nav = this.element.closest('ion-nav');
+    const nav = this.el.closest('ion-nav');
     if (nav) {
       const toPush = this.url || this.component;
       return nav.setRoot(toPush, this.data);

packages/core/src/components/nav/animations/ios.transition.ts

@@ -8,7 +8,7 @@ const TRANSFORM = 'transform';
 const TRANSLATEX = 'translateX';
 const CENTER = '0%';
 const OFF_OPACITY = 0.8;
-const SHOW_BACK_BTN_CSS = 'show-back-button';
+const SHOW_BACK_BTN_CSS = 'can-back-back';
 
 export default function iosTransitionAnimation(Animation: Animation, _: HTMLElement, opts: AnimationOptions): Promise<Animation> {
 
@@ -76,7 +76,7 @@ export default function iosTransitionAnimation(Animation: Animation, _: HTMLElem
       enteringToolBarBg.addElement(enteringToolBarEle.querySelector('.toolbar-background'));
 
       const enteringBackButton = new Animation();
-      enteringBackButton.addElement(enteringToolBarEle.querySelector('.back-button'));
+      enteringBackButton.addElement(enteringToolBarEle.querySelector('ion-back-button'));
 
       enteringToolBar
         .add(enteringTitle)

packages/core/src/components/nav/animations/md.transition.ts

@@ -4,7 +4,7 @@ import { isDef } from '../../../utils/helpers';
 const TRANSLATEY = 'translateY';
 const OFF_BOTTOM = '40px';
 const CENTER = '0px';
-const SHOW_BACK_BTN_CSS = 'show-back-button';
+const SHOW_BACK_BTN_CSS = 'can-back-back';
 
 export default function mdTransitionAnimation(Animation: Animation, _: HTMLElement, opts: AnimationOptions): Promise<Animation> {
 
@@ -39,7 +39,7 @@ export default function mdTransitionAnimation(Animation: Animation, _: HTMLEleme
       rootTransition.add(enteringToolBar);
 
       const enteringBackButton = new Animation();
-      enteringBackButton.addElement(enteringToolbarEle.querySelector('.back-button'));
+      enteringBackButton.addElement(enteringToolbarEle.querySelector('ion-back-button'));
       rootTransition.add(enteringBackButton);
       if (opts.enteringView.enableBack()) {
         enteringBackButton.beforeAddClass(SHOW_BACK_BTN_CSS);