From 0d40d3f3b72aac7932ac71e6573d8bbb65a01515 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@users.noreply.github.com>
Date: Thu, 14 Nov 2019 13:39:35 -0600
Subject: [PATCH] refactor(back-button): convert to shadow component (#19411)

references #18899
---
 core/api.txt                                     | 2 +-
 core/src/components/back-button/back-button.scss | 1 -
 core/src/components/back-button/back-button.tsx  | 8 ++++----
 core/src/css/core.scss                           | 5 +++++
 core/src/utils/transition/ios.transition.ts      | 4 ++--
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index c2692cff7c..a43cfaf73f 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -77,7 +77,7 @@ ion-app,none
 ion-avatar,shadow
 ion-avatar,css-prop,--border-radius
 
-ion-back-button,scoped
+ion-back-button,shadow
 ion-back-button,prop,color,string | undefined,undefined,false,false
 ion-back-button,prop,defaultHref,string | undefined,undefined,false,false
 ion-back-button,prop,disabled,boolean,false,false,true
diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss
index f240d51ead..1d76ae2858 100644
--- a/core/src/components/back-button/back-button.scss
+++ b/core/src/components/back-button/back-button.scss
@@ -102,7 +102,6 @@
 // Back Button States
 // --------------------------------------------------
 
-:host-context(.can-go-back > ion-header),
 :host(.show-back-button) {
   display: block;
 }
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index cc11529436..13c395f701 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -15,7 +15,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
     ios: 'back-button.ios.scss',
     md: 'back-button.md.scss'
   },
-  scoped: true
+  shadow: true
 })
 export class BackButton implements ComponentInterface, ButtonInterface {
 
@@ -106,10 +106,10 @@ export class BackButton implements ComponentInterface, ButtonInterface {
           'show-back-button': showBackButton
         }}
       >
-        <button type={type} disabled={disabled} class="button-native">
+        <button type={type} disabled={disabled} class="button-native" part="button">
           <span class="button-inner">
-            {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
-            {backButtonText && <span class="button-text">{backButtonText}</span>}
+            {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false} part="icon"></ion-icon>}
+            {backButtonText && <span class="button-text" part="text">{backButtonText}</span>}
           </span>
           {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
         </button>
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index c5e46b02f1..6519b93da9 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -103,6 +103,11 @@ ion-toast-controller,
   opacity: 0;
 }
 
+.can-go-back > ion-header ion-back-button {
+  display: block;
+}
+
+
 // Ionic Safe Margins
 // --------------------------------------------------
 
diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts
index 5c22e547c7..2f0a73d62b 100644
--- a/core/src/utils/transition/ios.transition.ts
+++ b/core/src/utils/transition/ios.transition.ts
@@ -99,8 +99,8 @@ const animateBackButton = (rootAnimation: Animation, rtl: boolean, backDirection
 
   const clonedBackButtonEl = getClonedElement('ion-back-button');
 
-  const backButtonTextEl = clonedBackButtonEl.querySelector('.button-text');
-  const backButtonIconEl = clonedBackButtonEl.querySelector('ion-icon');
+  const backButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text');
+  const backButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
 
   clonedBackButtonEl.text = backButtonEl.text;
   clonedBackButtonEl.mode = backButtonEl.mode;