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>
     );
   }

core/src/components/buttons/buttons.ios.scss

@@ -5,7 +5,7 @@
 // iOS Toolbar Default Button
 // --------------------------------------------------
 
-::slotted(*) .button {
+::slotted(*) ion-button {
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 5px;
@@ -29,14 +29,6 @@
 }
 
 
-// iOS Toolbar Clear Button
-// --------------------------------------------------
-
-::slotted(*) .button-clear.activated {
-  color: $toolbar-ios-button-color;
-}
-
-
 // iOS Toolbar Button Solid
 // --------------------------------------------------
 
@@ -56,7 +48,6 @@
   font-size: 24px;
 
   line-height: .67;
-  pointer-events: none;
 }
 
 ::slotted(*) ion-icon[slot="end"] {
@@ -66,7 +57,6 @@
   font-size: 24px;
 
   line-height: .67;
-  pointer-events: none;
 }
 
 ::slotted(*) ion-icon[slot="icon-only"] {
@@ -76,7 +66,6 @@
   font-size: 31px;
 
   line-height: .67;
-  pointer-events: none;
 }
 
 

core/src/components/buttons/buttons.md.scss

@@ -4,7 +4,7 @@
 // Material Design Toolbar Default Button
 // --------------------------------------------------
 
-::slotted(*) .button {
+::slotted(*) ion-button {
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 8px;
@@ -70,7 +70,6 @@
   @include margin-horizontal(null, .3em);
 
   font-size: 1.4em;
-  pointer-events: none;
 }
 
 ::slotted(*) ion-icon[slot="end"] {
@@ -78,7 +77,6 @@
   @include margin-horizontal(.4em, null);
 
   font-size: 1.4em;
-  pointer-events: none;
 }
 
 ::slotted(*) ion-icon[slot="icon-only"] {
@@ -86,7 +84,6 @@
   @include margin(0);
 
   font-size: 1.8em;
-  pointer-events: none;
 }
 
 

core/src/components/buttons/buttons.scss

@@ -8,7 +8,6 @@
   transform: translateZ(0);
 
   z-index: $z-index-toolbar-buttons;
-  pointer-events: none;
 }
 
 // Toolbar Buttons
@@ -26,6 +25,4 @@
   --box-shadow: none;
 
   @include margin-horizontal(2px, 2px);
-
 }
-

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

@@ -8,6 +8,10 @@
   color: #{ion-color(primary, base)};
 }
 
+:host(.activated) {
+  opacity: 0.4;
+}
+
 button {
   @include padding(0, 5px);
 }

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

@@ -39,7 +39,9 @@ export class MenuButton implements ComponentInterface {
 
   hostData() {
     return {
+      'ion-activatable': true,
       class: {
+        // ion-buttons target .button
         'button': true
       }
     };
@@ -53,6 +55,7 @@ export class MenuButton implements ComponentInterface {
           <slot>
             <ion-icon icon={menuIcon} mode={this.mode} color={this.color} lazy={false} />
           </slot>
+          {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
         </button>
       </ion-menu-toggle>
     );

core/src/components/split-pane/test/basic/index.html

@@ -86,9 +86,9 @@
       console.log('Push page');
     }
 
-    function menu() {
+    async function menu() {
       console.log('Disable/enable menu');
-      menuCtrl.enable(!menuCtrl.isEnabled());
+      menuCtrl.enable(!await menuCtrl.isEnabled());
     }
   </script>