refactor(components): update to use shadow DOM and work with css variables

- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>

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

@@ -4,9 +4,13 @@
 // iOS Back Button
 // --------------------------------------------------
 
-.back-button-ios {
+:host {
+  --ion-color-base: #{$back-button-ios-color};
+}
+
+.back-button-native {
   @include padding(0);
-  @include margin(0, 0, 0, 0);
+  @include margin(0);
 
   z-index: $back-button-ios-button-z-index;
   overflow: visible;
@@ -17,7 +21,6 @@
   font-size: 17px;
   line-height: 1;
 
-  color: $back-button-ios-color;
   background-color: transparent;
 
   transform: translateZ(0);
@@ -27,7 +30,7 @@
   }
 }
 
-.back-button-ios ion-icon {
+ion-icon {
   @include padding(0);
   @include margin(0, -5px, 0, -4px);
 
@@ -37,15 +40,3 @@
 
   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.ios.vars.scss

@@ -7,4 +7,4 @@
 $back-button-ios-button-z-index:      $z-index-toolbar-buttons !default;
 
 /// @prop - Text color of the back button
-$back-button-ios-color:               ion-color($colors-ios, primary, base, ios) !default;
+$back-button-ios-color:               ion-color(primary, base) !default;

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

@@ -4,7 +4,11 @@
 // MD Back Button
 // --------------------------------------------------
 
-.back-button-md {
+:host {
+  --ion-color-base: currentColor;
+}
+
+.back-button-native {
   @include margin(1px, 6px, 0, 0);
   @include padding(0, 5px);
 
@@ -16,7 +20,6 @@
   font-weight: 500;
   text-transform: uppercase;
 
-  color: $back-button-md-color;
   background-color: transparent;
 
   box-shadow: none;
@@ -26,27 +29,16 @@
   }
 }
 
-.back-button-md ion-icon {
+ion-icon {
   @include padding-horizontal(null, .3em);
   @include margin(0);
-  @include padding(0, 6px);
-  @include text-align(start);
+  @include margin(0, 6px);
 
   font-size: 24px;
   font-weight: normal;
   line-height: .67;
 
-  pointer-events: none;
-}
-
+  text-align: start;
 
-// 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;
-  }
+  pointer-events: none;
 }

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

@@ -3,29 +3,25 @@
 // Back Button
 // --------------------------------------------------
 
-.back-button {
+:host {
   display: none;
+
+  color: #{current-color(base)};
+
+  pointer-events: all;
 }
 
-.can-go-back > ion-header .back-button,
-.back-button.show-back-button {
-  display: inline-block;
+:host-context(.can-go-back > ion-header),
+:host(.show-back-button) {
+  display: block;
 }
 
-.back-button button {
+.back-button-native {
   @include font-smoothing();
-  @include text-align(center);
-  @include appearance(none);
 
   position: relative;
   z-index: 0;
-  display: inline-flex;
-
-  flex-flow: row nowrap;
-  flex-shrink: 0;
-
-  align-items: center;
-  justify-content: center;
+  display: block;
 
   border: 0;
   outline: none;
@@ -35,17 +31,18 @@
   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
+  color: inherit;
+  cursor: pointer;
 
   transition: background-color, opacity 100ms linear;
 
+  text-align: center;
   user-select: none;
   font-kerning: none;
+
+  appearance: none;
 }
 
 .back-button-inner {

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

@@ -1,6 +1,6 @@
 import { Component, Element, Prop } from '@stencil/core';
 import { Color, Config, Mode } from '../../interface';
-import { createThemedClasses, getElementClassMap, openURL } from '../../utils/theme';
+import { createColorClasses, openURL } from '../../utils/theme';
 
 @Component({
   tag: 'ion-back-button',
@@ -8,9 +8,7 @@ import { createThemedClasses, getElementClassMap, openURL } from '../../utils/th
     ios: 'back-button.ios.scss',
     md: 'back-button.md.scss'
   },
-  host: {
-    theme: 'back-button'
-  }
+  scoped: true
 })
 export class BackButton {
 
@@ -46,42 +44,43 @@ export class BackButton {
   @Prop() text?: string;
 
 
-  private onClick(ev: Event) {
+  private async onClick(ev: Event) {
     const nav = this.el.closest('ion-nav');
     if (nav && nav.canGoBack()) {
       ev.preventDefault();
-      nav.pop();
+      if (!nav.isAnimating()) {
+        nav.pop();
+      }
     } else if (this.defaultHref) {
       openURL(this.win, this.defaultHref, ev, 'back');
     }
   }
 
   hostData() {
+    const showBackButton = !!this.defaultHref;
+
     return {
       class: {
-        'show-back-button': !!this.defaultHref
-      }
+        ...createColorClasses(this.color),
+        'button': true,
+        'show-back-button': showBackButton
+      },
+      'tappable': true,
     };
   }
 
   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={backButtonClasses}
+        class="back-button-native"
         onClick={(ev) => this.onClick(ev)}>
         <span class="back-button-inner">
           { backButtonIcon && <ion-icon icon={backButtonIcon}/> }
           { this.mode === 'ios' && backButtonText && <span class="button-text">{backButtonText}</span> }
-          { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
+          { this.mode === 'md' && <ion-ripple-effect tapClick={true} parent={this.el}/> }
         </span>
       </button>
     );

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

@@ -1,11 +1,14 @@
 <!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>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 </head>
+
 <body onload="loadFirstPage()">
   <ion-app>
     <ion-nav></ion-nav>
@@ -122,4 +125,5 @@
     await nav.push(fourthPage);
   }
 </script>
+
 </html>

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

@@ -1,10 +1,12 @@
 <!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>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
   <script>
     class PageOne extends HTMLElement {
       connectedCallback() {
@@ -102,6 +104,7 @@
 
   </script>
 </head>
+
 <body>
   <ion-app>
     <ion-nav root="page-one"></ion-nav>

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

@@ -1,11 +1,14 @@
 <!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>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 </head>
+
 <body onload="loadFirstPage()">
   <ion-app>
     <ion-nav></ion-nav>
@@ -122,4 +125,5 @@
     await nav.push(fourthPage);
   }
 </script>
+
 </html>

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

@@ -6,6 +6,7 @@
   <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>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 </head>
 
 <body>