fix(back-button): get the back button color working

refactors the structure / classes of back button to match the default
button more

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

@@ -4,7 +4,7 @@
 // iOS Back Button
 // --------------------------------------------------
 
-.back-button-ios .back-button-inner {
+.back-button-ios {
   @include padding(0);
   @include margin(2px, 0, 0, 0);
 
@@ -37,3 +37,15 @@
 
   pointer-events: none;
 }
+
+
+// Generate iOS Back Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+  $base-color: ion-color($colors-ios, $color-name, base, ios);
+
+  .back-button-ios-#{$color-name} {
+    color: $base-color;
+  }
+}

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

@@ -4,7 +4,7 @@
 // MD Back Button
 // --------------------------------------------------
 
-.back-button-md .back-button-inner {
+.back-button-md {
   @include margin(2px, 6px, 0, 0);
   @include padding(0, 5px);
 
@@ -38,3 +38,15 @@
 
   pointer-events: none;
 }
+
+
+// Generate Material Design Back Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+  $base-color: ion-color($colors-md, $color-name, base, md);
+
+  .back-button-md-#{$color-name} {
+    color: $base-color;
+  }
+}

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

@@ -48,7 +48,7 @@
   font-kerning: none;
 }
 
-.back-button .button-inner {
+.back-button-inner {
   display: flex;
 
   flex-flow: row nowrap;

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

@@ -1,6 +1,6 @@
 import { Component, Element, Prop } from '@stencil/core';
 import { Config } from '../../index';
-import { openURL } from '../../utils/theme';
+import { createThemedClasses, getElementClassMap, openURL } from '../../utils/theme';
 
 @Component({
   tag: 'ion-back-button',
@@ -14,6 +14,17 @@ import { openURL } from '../../utils/theme';
 })
 export class BackButton {
 
+  @Element() el: HTMLElement;
+
+  @Prop({ context: 'config' }) config: Config;
+
+  /**
+   * The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
   /**
    * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
@@ -22,18 +33,20 @@ export class BackButton {
   @Prop() mode: 'ios' | 'md';
 
   /**
-   * The text property is used to provide custom text for the back button while using the
+   * The url to navigate back to by default when there is no history.
-   * default look-and-feel.
    */
-  @Prop() text: string|undefined;
-
-  @Prop() icon: string;
-
   @Prop() defaultHref: string;
 
-  @Prop({ context: 'config' }) config: Config;
+  /**
+   * The icon name to use for the back button.
+   */
+  @Prop() icon: string;
+
+  /**
+   * The text to display in the back button.
+   */
+  @Prop() text: string | undefined;
 
-  @Element() el: HTMLElement;
 
   private onClick(ev: Event) {
     const nav = this.el.closest('ion-nav');
@@ -56,14 +69,22 @@ export class BackButton {
   render() {
     const backButtonIcon = this.icon || this.config.get('backButtonIcon', 'arrow-back');
     const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', 'Back');
+    const themedClasses = createThemedClasses(this.mode, this.color, 'back-button');
+
+    const backButtonClasses = {
+      ...themedClasses,
+      ...getElementClassMap(this.el.classList),
+    };
 
     return (
       <button
-        class='back-button-inner'
+        class={backButtonClasses}
         onClick={(ev) => this.onClick(ev)}>
-        { backButtonIcon && <ion-icon name={backButtonIcon}/> }
+        <span class='back-button-inner'>
-        { this.mode === 'ios' && backButtonText && <span class='button-text'>{backButtonText}</span> }
+          { backButtonIcon && <ion-icon name={backButtonIcon}/> }
-        { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
+          { this.mode === 'ios' && backButtonText && <span class='button-text'>{backButtonText}</span> }
+          { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
+        </span>
       </button>
     );
   }

core/src/components/back-button/test/preview/index.html

@@ -78,7 +78,7 @@
       <ion-header>
         <ion-toolbar>
           <ion-buttons slot="start">
-            <ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
+            <ion-back-button text="Text!" icon="add"></ion-back-button>
           </ion-buttons>
           <ion-title>Page Three</ion-title>
         </ion-toolbar>
@@ -86,11 +86,40 @@
       <ion-content padding>
         <h1>Page Three</h1>
         <p>Custom back button</p>
+        <ion-button class="next">Go to Page Four</ion-button>
       </ion-content>
     `;
 
     // okay cool, we're in the DOM now
     await nav.push(thirdPage);
+
+    const nextButton = thirdPage.querySelector('ion-button .next');
+    nextButton.addEventListener('click', async () => {
+      await goToPageFour(nav);
+    });
+  }
+
+  async function goToPageFour(nav) {
+    const fourthPage = document.createElement('div');
+    fourthPage.classList.add('fourth-page');
+    fourthPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+            <ion-back-button color="danger"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page Four</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page Four</h1>
+        <p>Back button and menu button</p>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(fourthPage);
   }
 </script>
 </html>