From 574c346d4580893dc75294d1e0eba780ac1aeb32 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 22 Mar 2018 17:03:03 -0400
Subject: [PATCH] revert(toolbar): revert to use old button attributes

references #14172
---
 BREAKING.md                                   | 64 ++++++++-----------
 .../components/button/test/toolbar/index.html | 38 ++++-------
 .../components/toolbar/test/basic/index.html  | 16 +----
 .../toolbar/test/preview/index.html           | 16 +----
 .../toolbar/test/scenarios/index.html         | 46 +++++--------
 core/src/components/toolbar/toolbar.ios.scss  | 18 ++++--
 .../components/toolbar/toolbar.ios.vars.scss  | 10 +--
 core/src/components/toolbar/toolbar.md.scss   | 28 ++++----
 .../components/toolbar/toolbar.md.vars.scss   |  8 ++-
 core/src/components/toolbar/toolbar.tsx       |  4 +-
 10 files changed, 96 insertions(+), 152 deletions(-)

diff --git a/BREAKING.md b/BREAKING.md
index 28ffed4f4b..608a454019 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -941,7 +941,7 @@ Previously if a `menuToggle` directive was added to an Ionic `button` in a toolb
 
 ```html
 <ion-toolbar>
-  <ion-buttons slot="start">
+  <ion-buttons slot="left">
     <ion-menu-toggle>
       <ion-button>
         <ion-icon slot="icon-only" name="menu"></ion-icon>
@@ -954,39 +954,37 @@ Previously if a `menuToggle` directive was added to an Ionic `button` in a toolb
 
 ### Attributes Renamed
 
-The attributes to position an `ion-buttons` element inside of a toolbar have been either removed or renamed, as well as the behavior of the attributes. We noticed there was some confusion behind the behavior of the `start` and `end` attributes, and with the new support for RTL we wanted to make these match RTL. In order to do this we have removed the old functionality behind the `start`/`end` attributes and renamed the `left`/`right` attributes.
+Previously to positions buttons inside of a toolbar the following attributes were used: `start`, `left`, `right`, `end`.
 
-**Old Properties:**
-
-| Old Property | Old Behavior                                                                                                     |
-|--------------|------------------------------------------------------------------------------------------------------------------|
-| `start`      | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` and `wp` mode. |
-| `end`        | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` and `wp` mode.     |
-| `left`       | Positions element to the `left` of all other elements.                                                           |
-| `right`      | Positions element to the `right` of all other elements.                                                          |
-
-**New Properties:**
-
-| New Property     | New Behavior                                                                                                 |
-|------------------|--------------------------------------------------------------------------------------------------------------|
-| `slot="start"`   | Positions element to the `left` of all other elements in `LTR`, and to the `right` in `RTL`.                 |
-| `slot="end"`     | Positions element to the `right` of all other elements in `LTR`, and to the `left` in `RTL`.                 |
+These have been renamed to the following:
 
+| Old Property | New Property   | Property Behavior                                                                                                |
+|--------------|----------------|------------------------------------------------------------------------------------------------------------------|
+| `start`      | `slot="start"` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` and `wp` mode. |
+| `end`        | `slot="end"`   | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` and `wp` mode.     |
+| `left`       | `slot="left"`  | Positions element to the `left` of all other elements.                                                           |
+| `right`      | `slot="right"` | Positions element to the `right` of all other elements.                                                          |
 
 **Old Usage Example:**
 
 ```html
 <ion-toolbar>
   <ion-buttons left>
-    <button ion-button>Cancel</button>
+    <button ion-button>Left</button>
+  </ion-buttons>
+  <ion-buttons start>
+    <button ion-button>Start</button>
   </ion-buttons>
 
   <ion-title>
-    Filter Sessions
+    Title
   </ion-title>
 
+  <ion-buttons end>
+    <button ion-button>End</button>
+  </ion-buttons>
   <ion-buttons right>
-    <button ion-button>Done</button>
+    <button ion-button>Right</button>
   </ion-buttons>
 </ion-toolbar>
 ```
@@ -995,30 +993,22 @@ The attributes to position an `ion-buttons` element inside of a toolbar have bee
 
 ```html
 <ion-toolbar>
+  <ion-buttons slot="left">
+    <ion-button>Left</ion-button>
+  </ion-buttons>
   <ion-buttons slot="start">
-    <ion-button>Cancel</ion-button>
+    <ion-button>Start</ion-button>
   </ion-buttons>
 
   <ion-title>
-    Filter Sessions
+    Title
   </ion-title>
 
   <ion-buttons slot="end">
-    <ion-button>Done</ion-button>
+    <ion-button>End</ion-button>
+  </ion-buttons>
+  <ion-buttons slot="right">
+    <ion-button>Right</ion-button>
   </ion-buttons>
 </ion-toolbar>
 ```
-
-If you need to position buttons based on the mode, we recommend something like the following:
-
-```html
-<ion-toolbar>
-  <ion-buttons [slot]="mode === 'md' ? 'end' : 'start'">
-    <ion-button>Cancel</ion-button>
-  </ion-buttons>
-
-  <ion-title>
-    Filter Sessions
-  </ion-title>
-</ion-toolbar>
-```
diff --git a/core/src/components/button/test/toolbar/index.html b/core/src/components/button/test/toolbar/index.html
index c0475527dd..e6ae77bfae 100644
--- a/core/src/components/button/test/toolbar/index.html
+++ b/core/src/components/button/test/toolbar/index.html
@@ -6,7 +6,7 @@
   <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>
 </head>
-<body onload="initialize()">
+<body>
   <ion-app>
 
       <ion-header>
@@ -25,7 +25,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start" class="dynamic-slot">
+          <ion-buttons slot="start">
             <ion-button>
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -42,7 +42,7 @@
         </ion-toolbar>
 
         <ion-toolbar color="primary">
-          <ion-buttons slot="start" class="dynamic-slot">
+          <ion-buttons slot="start">
             <ion-button class="closeButton" fill="clear">
               Close
             </ion-button>
@@ -59,7 +59,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start" class="dynamic-slot">
+          <ion-buttons slot="start">
             <ion-button>
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -76,7 +76,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start" class="dynamic-slot">
+          <ion-buttons slot="start">
             <ion-button class="activated">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -93,7 +93,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start" class="dynamic-slot">
+          <ion-buttons slot="start">
             <ion-button fill="solid">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -112,7 +112,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start" class="dynamic-slot">
+          <ion-buttons slot="start">
             <ion-button fill="solid" class="activated">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -131,7 +131,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start" class="dynamic-slot">
+          <ion-buttons slot="start">
             <ion-button fill="outline">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -149,7 +149,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start" class="dynamic-slot">
+          <ion-buttons slot="start">
             <ion-button fill="outline" class="activated">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -167,7 +167,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start" class="dynamic-slot">
+          <ion-buttons slot="start">
             <ion-button>
               <ion-icon name="contact" slot="start"></ion-icon>
               Clear
@@ -183,7 +183,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start" class="dynamic-slot">
+          <ion-buttons slot="start">
             <ion-button>
               Go Back
             </ion-button>
@@ -200,7 +200,7 @@
           <ion-button menuToggle slot="start">
             <ion-icon name="menu"></ion-icon>
           </ion-button>
-          <ion-buttons slot="start" class="dynamic-slot">
+          <ion-buttons slot="start">
             <ion-button>
               <ion-icon slot="icon-only" name="star"></ion-icon>
             </ion-button>
@@ -253,19 +253,5 @@
 
   </ion-app>
 
-  <script>
-    function initialize() {
-      var mode = Ionic.mode;
-
-      if (mode === 'md') {
-        var buttons = document.querySelectorAll('.dynamic-slot');
-
-        for (var i = 0; i < buttons.length; i++) {
-          buttons[i].setAttribute('slot', 'end');
-        }
-      }
-    }
-
-  </script>
 </body>
 </html>
diff --git a/core/src/components/toolbar/test/basic/index.html b/core/src/components/toolbar/test/basic/index.html
index 7511a166f3..5398bdbc1e 100644
--- a/core/src/components/toolbar/test/basic/index.html
+++ b/core/src/components/toolbar/test/basic/index.html
@@ -6,7 +6,7 @@
   <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>
 </head>
-<body onload="initialize()">
+<body>
   <ion-app>
     <ion-header>
       <ion-toolbar color="primary">
@@ -14,7 +14,7 @@
       </ion-toolbar>
 
       <ion-toolbar color="primary">
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button>
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -120,18 +120,6 @@
   </style>
 
   <script>
-    function initialize() {
-      var mode = Ionic.mode;
-
-      if (mode === 'md') {
-        var buttons = document.querySelectorAll('.dynamic-slot');
-
-        for (var i = 0; i < buttons.length; i++) {
-          buttons[i].setAttribute('slot', 'end');
-        }
-      }
-    }
-
     let items = [];
     for (var i = 0; i < 30; i++) {
       items.push( i+1 );
diff --git a/core/src/components/toolbar/test/preview/index.html b/core/src/components/toolbar/test/preview/index.html
index 4adfac194a..2e3c8c70bc 100644
--- a/core/src/components/toolbar/test/preview/index.html
+++ b/core/src/components/toolbar/test/preview/index.html
@@ -6,7 +6,7 @@
   <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>
 </head>
-<body onload="initialize()">
+<body>
   <ion-app>
     <ion-header>
       <ion-toolbar color="primary">
@@ -14,7 +14,7 @@
       </ion-toolbar>
 
       <ion-toolbar color="primary">
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button>
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -120,18 +120,6 @@
   </style>
 
   <script>
-    function initialize() {
-      var mode = Ionic.mode;
-
-      if (mode === 'md') {
-        var buttons = document.querySelectorAll('.dynamic-slot');
-
-        for (var i = 0; i < buttons.length; i++) {
-          buttons[i].setAttribute('slot', 'end');
-        }
-      }
-    }
-
     let items = [];
     for (var i = 0; i < 30; i++) {
       items.push( i+1 );
diff --git a/core/src/components/toolbar/test/scenarios/index.html b/core/src/components/toolbar/test/scenarios/index.html
index a1b1678101..25ae747266 100644
--- a/core/src/components/toolbar/test/scenarios/index.html
+++ b/core/src/components/toolbar/test/scenarios/index.html
@@ -6,7 +6,7 @@
   <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>
 </head>
-<body onload="initialize()">
+<body>
   <ion-app>
     <ion-content id="content">
       <ion-toolbar no-padding>
@@ -18,7 +18,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button>
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -35,7 +35,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button>
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -52,7 +52,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button class="activated">
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -69,7 +69,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button fill="solid">
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -88,7 +88,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button href="#" fill="solid" class="activated">
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -107,7 +107,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button fill="outline">
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -125,7 +125,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button fill="outline" class="activated">
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -143,7 +143,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button>
             <ion-icon slot="start" name="contact"></ion-icon>
             Clear
@@ -159,7 +159,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button>
             Go Back
           </ion-button>
@@ -173,14 +173,14 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start" class="dynamic-slot">
-          <ion-menu-toggle>
+        <ion-buttons slot="left">
+          <ion-menu-toggle autoHide="false">
             <ion-button>
-              <ion-icon name="menu"></ion-icon>
+              <ion-icon slot="icon-only" name="menu"></ion-icon>
             </ion-button>
           </ion-menu-toggle>
         </ion-buttons>
-        <ion-buttons slot="start" class="dynamic-slot">
+        <ion-buttons slot="start">
           <ion-button>
             <ion-icon slot="icon-only" name="star"></ion-icon>
           </ion-button>
@@ -195,10 +195,10 @@
           </ion-button>
         </ion-buttons>
         <ion-title>Right side menu toggle</ion-title>
-        <ion-buttons slot="end">
-          <ion-menu-toggle>
+        <ion-buttons slot="right">
+          <ion-menu-toggle autoHide="false">
             <ion-button>
-              <ion-icon name="menu"></ion-icon>
+              <ion-icon slot="icon-only" name="menu"></ion-icon>
             </ion-button>
           </ion-menu-toggle>
         </ion-buttons>
@@ -237,18 +237,6 @@
   </ion-app>
 
   <script>
-    function initialize() {
-      var mode = Ionic.mode;
-
-      if (mode === 'md') {
-        var buttons = document.querySelectorAll('.dynamic-slot');
-
-        for (var i = 0; i < buttons.length; i++) {
-          buttons[i].setAttribute('slot', 'end');
-        }
-      }
-    }
-
     function buttonClick(ev) {
       console.log('clicked button', ev);
     }
diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss
index 733f5c4646..366654f7c9 100644
--- a/core/src/components/toolbar/toolbar.ios.scss
+++ b/core/src/components/toolbar/toolbar.ios.scss
@@ -122,19 +122,28 @@
 // --------------------------------------------------
 
 .bar-buttons-ios {
-  @include text-align(start);
-
   order: map-get($toolbar-order-ios, buttons-start);
 
   transform: translateZ(0);
 }
 
+.bar-buttons-ios[slot="left"] {
+  order: map-get($toolbar-order-ios, buttons-left);
+}
+
 .bar-buttons-ios[slot="end"] {
   @include text-align(end);
 
   order: map-get($toolbar-order-ios, buttons-end);
 }
 
+.bar-buttons-ios[slot="right"] {
+  @include text-align(right);
+
+  order: map-get($toolbar-order-ios, buttons-right);
+}
+
+
 
 // iOS Toolbar Button Default
 // --------------------------------------------------
@@ -307,11 +316,6 @@
   }
 }
 
-.bar-button-menutoggle-ios[slot="mode-end"],
-.bar-button-menutoggle-ios[slot="end"] {
-  order: map-get($toolbar-order-ios, menu-toggle-end);
-}
-
 
 // iOS Toolbar Color Generation
 // --------------------------------------------------
diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss
index 9b0d7b751b..d5c7e9a932 100644
--- a/core/src/components/toolbar/toolbar.ios.vars.scss
+++ b/core/src/components/toolbar/toolbar.ios.vars.scss
@@ -7,10 +7,12 @@
 $toolbar-order-ios: (
   back-button: 0,
   menu-toggle-start: 1,
-  buttons-start: 2,
-  content: 3,
-  buttons-end: 4,
-  menu-toggle-end: 5,
+  buttons-left: 2,
+  buttons-start: 3,
+  content: 4,
+  buttons-end: 5,
+  buttons-right: 6,
+  menu-toggle-end: 7,
 );
 
 /// @prop - Font family of the toolbar
diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss
index 2f99c5ad8c..a133aa487d 100644
--- a/core/src/components/toolbar/toolbar.md.scss
+++ b/core/src/components/toolbar/toolbar.md.scss
@@ -117,25 +117,34 @@
 // --------------------------------------------------
 
 .bar-buttons-md {
-  @include text-align(start);
+  @include margin(0, 2px);
 
   order: map-get($toolbar-order-md, buttons-start);
 
   transform: translateZ(0);
 }
 
+.bar-buttons-md[slot="left"] {
+  order: map-get($toolbar-order-md, buttons-left);
+}
+
 .bar-buttons-md[slot="end"] {
   @include text-align(end);
 
   order: map-get($toolbar-order-md, buttons-end);
 }
 
+.bar-buttons-md[slot="right"] {
+  @include text-align(right);
+
+  order: map-get($toolbar-order-md, buttons-right);
+}
+
 
 // Material Design Toolbar Button Default
 // --------------------------------------------------
 
 .bar-button-md {
-  @include margin(0, 2px, 0, 2px);
   @include padding(0, 5px);
   @include border-radius($toolbar-md-button-border-radius);
 
@@ -263,7 +272,6 @@
   @include padding-horizontal(null, .3em);
 
   font-size: 1.4em;
-  line-height: .67;
 
   pointer-events: none;
 }
@@ -272,7 +280,6 @@
   @include padding-horizontal(.4em, null);
 
   font-size: 1.4em;
-  line-height: .67;
 
   pointer-events: none;
 }
@@ -280,10 +287,7 @@
 .bar-button-md ion-icon[slot="icon-only"] {
   @include padding(0);
 
-  min-width: 28px;
-
   font-size: 1.8em;
-  line-height: .67;
 
   pointer-events: none;
 }
@@ -293,7 +297,6 @@
 // --------------------------------------------------
 
 .bar-button-menutoggle-md {
-  @include margin(0, 6px);
   @include padding(0, 2px);
 
   order: map-get($toolbar-order-md, menu-toggle-start);
@@ -307,15 +310,6 @@
   font-size: 24px;
 }
 
-.bar-button-menutoggle-md[slot="mode-end"],
-.bar-button-menutoggle-md[slot="end"] {
-  @include margin(0, 2px);
-
-  order: map-get($toolbar-order-md, menu-toggle-end);
-
-  min-width: 28px;
-}
-
 
 // Material Design Toolbar Color Generation
 // --------------------------------------------------
diff --git a/core/src/components/toolbar/toolbar.md.vars.scss b/core/src/components/toolbar/toolbar.md.vars.scss
index 2dcfb9971a..a881c756fb 100644
--- a/core/src/components/toolbar/toolbar.md.vars.scss
+++ b/core/src/components/toolbar/toolbar.md.vars.scss
@@ -7,10 +7,12 @@
 $toolbar-order-md: (
   back-button: 0,
   menu-toggle-start: 1,
-  buttons-start: 2,
+  buttons-left: 2,
   content: 3,
-  buttons-end: 4,
-  menu-toggle-end: 5,
+  buttons-start: 4,
+  buttons-end: 5,
+  buttons-right: 6,
+  menu-toggle-end: 7,
 );
 
 /// @prop - Font family of the toolbar
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index b244c2b8df..e2a5877c53 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -66,11 +66,13 @@ export class Toolbar {
 
     return [
       <div class={backgroundCss}></div>,
+      <slot name='left'></slot>,
       <slot name='start'></slot>,
       <div class={contentCss}>
         <slot></slot>
       </div>,
-      <slot name='end'></slot>
+      <slot name='end'></slot>,
+      <slot name='right'></slot>
     ];
   }
 }