fix(buttons): fix activated, position, animation

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

@@ -15,6 +15,7 @@
   --padding-bottom: 0;
   --padding-start: 0;
   --min-height: 32px;
+  --min-width: auto;
   --icon-padding-top: 0;
   --icon-padding-end: 0;
   --icon-padding-bottom: 0;
@@ -28,7 +29,7 @@
   font-size: 17px;
 }
 
-.back-button-native {
+.button-native {
   transform: translateZ(0);
 
   overflow: visible;

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

@@ -14,7 +14,7 @@
   --padding-end: 5px;
   --padding-bottom: 0;
   --padding-start: 5px;
-  --height: 32px;
+  --min-height: 32px;
   --min-width: 44px;
   --icon-padding-end: .3em;
   --icon-padding-start: .3em;
@@ -31,7 +31,7 @@
   text-transform: uppercase;
 }
 
-.back-button-native {
+.button-native {
   box-shadow: none;
 }
 

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

@@ -9,9 +9,6 @@
    *
    * @prop --color: Text color of the button
    *
-   * @prop --width: Width of the button
-   * @prop --height: Height of the button
-   *
    * @prop --min-width: Minimum width of the button
    * @prop --min-height: Minimum height of the button
    *
@@ -53,6 +50,8 @@
 
   display: none;
 
+  color: var(--color);
+
   font-family: $font-family-base;
 
   text-align: center;
@@ -70,7 +69,7 @@
 // Back Button with Color
 // --------------------------------------------------
 
-:host(.ion-color) .back-button-native {
+:host(.ion-color) .button-native {
   color: current-color(base);
 }
 
@@ -78,7 +77,7 @@
 // Back Button States
 // --------------------------------------------------
 
-:host(.activated) .back-button-native {
+:host(.activated) .button-native {
   opacity: .4;
 }
 
@@ -91,7 +90,7 @@
 // Native Back Button
 // --------------------------------------------------
 
-.back-button-native {
+.button-native {
   @include border-radius(var(--border-radius));
   @include font-smoothing();
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
@@ -101,10 +100,7 @@
   display: block;
   position: relative;
 
-  width: var(--width);
   min-width: var(--min-width);
-
-  height: var(--height);
   min-height: var(--min-height);
 
   transition: var(--transition);
@@ -114,7 +110,6 @@
   outline: none;
 
   background: var(--background);
-  color: var(--color);
 
   line-height: 1;
 
@@ -126,7 +121,7 @@
   appearance: none;
 }
 
-.back-button-inner {
+.button-inner {
   display: flex;
 
   flex-flow: row nowrap;

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

@@ -77,14 +77,15 @@ export class BackButton implements ComponentInterface {
     return (
       <button
         type="button"
-        class="back-button-native"
+        class="button-native"
         onClick={ev => this.onClick(ev)}
       >
-        <span class="back-button-inner">
+        <span class="button-inner">
           {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
-          {backButtonText && <span class="back-button-text">{backButtonText}</span>}
+          {backButtonText && <span class="button-text">{backButtonText}</span>}
           {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
         </span>
+        {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
       </button>
     );
   }