From ce5b47ef998dfbdfa773be681832cdcbe67e6672 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 27 Mar 2018 16:41:30 -0400
Subject: [PATCH] refactor(toolbar): rename the slots to match other component
 behavior

`left` -> `start`
`right` -> `end`
`start` -> `secondary`
`end` -> `primary`
---
 BREAKING.md                                   | 28 ++++----
 .../src/app/popover/popover-page.component.ts |  2 +-
 .../components/button/test/toolbar/index.html | 66 +++++++++----------
 .../components/buttons/test/icon/index.html   |  4 +-
 .../components/datetime/test/basic/index.html |  2 +-
 .../datetime/test/preview/index.html          |  2 +-
 core/src/components/fab/test/basic/index.html |  2 +-
 .../components/fab/test/preview/index.html    |  2 +-
 .../input/test/attributes/index.html          |  2 +-
 .../item-sliding/test/basic/index.html        |  4 +-
 .../item-sliding/test/preview/index.html      |  4 +-
 .../components/item/test/groups/index.html    |  2 +-
 .../components/item/test/inputs/index.html    |  2 +-
 .../components/item/test/reorder/index.html   |  2 +-
 .../components/item/test/sliding/index.html   |  4 +-
 .../components/popover/test/basic/index.html  |  4 +-
 .../popover/test/preview/index.html           |  4 +-
 .../components/reorder/test/basic/index.html  |  2 +-
 .../reorder/test/preview/index.html           |  2 +-
 .../slides/test/app-intro/index.html          |  4 +-
 .../components/toolbar/test/basic/index.html  |  6 +-
 .../toolbar/test/preview/index.html           |  6 +-
 .../toolbar/test/scenarios/index.html         | 42 ++++++------
 core/src/components/toolbar/toolbar.ios.scss  | 18 ++---
 .../components/toolbar/toolbar.ios.vars.scss  |  8 +--
 core/src/components/toolbar/toolbar.md.scss   | 18 ++---
 .../components/toolbar/toolbar.md.vars.scss   |  8 +--
 core/src/components/toolbar/toolbar.tsx       |  6 +-
 .../components/virtual-scroll/test/basic.html |  2 +-
 29 files changed, 129 insertions(+), 129 deletions(-)

diff --git a/BREAKING.md b/BREAKING.md
index 608a454019..9b940bd951 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -958,12 +958,12 @@ Previously to positions buttons inside of a toolbar the following attributes wer
 
 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 Property | New Property       | Property Behavior                                                                                        |
+|--------------|--------------------|----------------------------------------------------------------------------------------------------------|
+| `start`      | `slot="secondary"` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode.  |
+| `end`        | `slot="primary"`   | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode.      |
+| `left`       | `slot="start"`     | Positions to the `left` of the button in LTR, and to the `right` in RTL.                                 |
+| `right`      | `slot="end"`       | Positions to the `right` of the button in LTR, and to the `left` in RTL.                                 |
 
 **Old Usage Example:**
 
@@ -973,7 +973,7 @@ These have been renamed to the following:
     <button ion-button>Left</button>
   </ion-buttons>
   <ion-buttons start>
-    <button ion-button>Start</button>
+    <button ion-button>Secondary</button>
   </ion-buttons>
 
   <ion-title>
@@ -981,7 +981,7 @@ These have been renamed to the following:
   </ion-title>
 
   <ion-buttons end>
-    <button ion-button>End</button>
+    <button ion-button>Primary</button>
   </ion-buttons>
   <ion-buttons right>
     <button ion-button>Right</button>
@@ -993,21 +993,21 @@ These have been renamed to the following:
 
 ```html
 <ion-toolbar>
-  <ion-buttons slot="left">
+  <ion-buttons slot="start">
     <ion-button>Left</ion-button>
   </ion-buttons>
-  <ion-buttons slot="start">
-    <ion-button>Start</ion-button>
+  <ion-buttons slot="secondary">
+    <ion-button>Secondary</ion-button>
   </ion-buttons>
 
   <ion-title>
     Title
   </ion-title>
 
-  <ion-buttons slot="end">
-    <ion-button>End</ion-button>
+  <ion-buttons slot="primary">
+    <ion-button>Primary</ion-button>
   </ion-buttons>
-  <ion-buttons slot="right">
+  <ion-buttons slot="end">
     <ion-button>Right</ion-button>
   </ion-buttons>
 </ion-toolbar>
diff --git a/angular/test/nav/src/app/popover/popover-page.component.ts b/angular/test/nav/src/app/popover/popover-page.component.ts
index 5ef5e7fb9d..d4a11ad6d7 100644
--- a/angular/test/nav/src/app/popover/popover-page.component.ts
+++ b/angular/test/nav/src/app/popover/popover-page.component.ts
@@ -10,7 +10,7 @@ import { PopoverPageToPresent } from './popover-page-to-present';
       <ion-header>
         <ion-toolbar>
           <ion-title>Popover</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button (click)="clickMe()">
               No event passed
             </ion-button>
diff --git a/core/src/components/button/test/toolbar/index.html b/core/src/components/button/test/toolbar/index.html
index e6ae77bfae..1e073377d0 100644
--- a/core/src/components/button/test/toolbar/index.html
+++ b/core/src/components/button/test/toolbar/index.html
@@ -25,7 +25,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button>
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -33,7 +33,7 @@
               <ion-icon slot="icon-only" name="search"></ion-icon>
             </ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button color="secondary">
               <ion-icon slot="icon-only" name="more"></ion-icon>
             </ion-button>
@@ -42,7 +42,7 @@
         </ion-toolbar>
 
         <ion-toolbar color="primary">
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button class="closeButton" fill="clear">
               Close
             </ion-button>
@@ -50,7 +50,7 @@
               <ion-icon slot="icon-only" name="search"></ion-icon>
             </ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button color="secondary">
               <ion-icon slot="icon-only" name="more"></ion-icon>
             </ion-button>
@@ -59,7 +59,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button>
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -67,7 +67,7 @@
               <ion-icon slot="icon-only" name="search"></ion-icon>
             </ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button color="secondary">
               <ion-icon slot="icon-only" name="more"></ion-icon>
             </ion-button>
@@ -76,7 +76,7 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button class="activated">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -84,7 +84,7 @@
               <ion-icon slot="icon-only" name="search"></ion-icon>
             </ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button color="secondary" class="activated">
               <ion-icon slot="icon-only" name="more"></ion-icon>
             </ion-button>
@@ -93,54 +93,54 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button fill="solid">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
             <ion-button fill="solid">
-              <ion-icon name="contact" slot="start"></ion-icon>
+              <ion-icon name="contact" slot="secondary"></ion-icon>
               Solid
             </ion-button>
           </ion-buttons>
           <ion-title>Solid</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button fill="solid" color="secondary">
               Help
-              <ion-icon name="help-circle" slot="end"></ion-icon>
+              <ion-icon name="help-circle" slot="primary"></ion-icon>
             </ion-button>
           </ion-buttons>
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button fill="solid" class="activated">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
             <ion-button fill="solid" class="activated">
-              <ion-icon name="contact" slot="start"></ion-icon>
+              <ion-icon name="contact" slot="secondary"></ion-icon>
               Solid
             </ion-button>
           </ion-buttons>
           <ion-title>Solid Activated</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button fill="solid" color="secondary" class="activated">
               Help
-              <ion-icon name="help-circle" slot="end"></ion-icon>
+              <ion-icon name="help-circle" slot="primary"></ion-icon>
             </ion-button>
           </ion-buttons>
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button fill="outline">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
             <ion-button fill="outline">
-              <ion-icon name="star" slot="start"></ion-icon>
+              <ion-icon name="star" slot="secondary"></ion-icon>
               Star
             </ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button color="secondary" fill="outline">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -149,16 +149,16 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button fill="outline" class="activated">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
             <ion-button fill="outline" class="activated">
-              <ion-icon name="star" slot="start"></ion-icon>
+              <ion-icon name="star" slot="secondary"></ion-icon>
               Star
             </ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button color="secondary" fill="outline" class="activated">
               <ion-icon slot="icon-only" name="contact"></ion-icon>
             </ion-button>
@@ -167,28 +167,28 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button>
-              <ion-icon name="contact" slot="start"></ion-icon>
+              <ion-icon name="contact" slot="secondary"></ion-icon>
               Clear
             </ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button href="#">
               Edit
-              <ion-icon name="create" slot="end"></ion-icon>
+              <ion-icon name="create" slot="primary"></ion-icon>
             </ion-button>
           </ion-buttons>
           <ion-title>Icon/Color Attr</ion-title>
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button>
               Go Back
             </ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button href="#">
               Edit
             </ion-button>
@@ -197,10 +197,10 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-button menuToggle slot="start">
+          <ion-button menuToggle slot="secondary">
             <ion-icon name="menu"></ion-icon>
           </ion-button>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button>
               <ion-icon slot="icon-only" name="star"></ion-icon>
             </ion-button>
@@ -209,19 +209,19 @@
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button>
               <ion-icon slot="icon-only" name="star"></ion-icon>
             </ion-button>
           </ion-buttons>
           <ion-title>Right side menu toggle</ion-title>
-          <ion-button menuToggle slot="end">
+          <ion-button menuToggle slot="primary">
             <ion-icon name="menu"></ion-icon>
           </ion-button>
         </ion-toolbar>
 
         <ion-toolbar>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button>
               <ion-icon slot="icon-only" name="search"></ion-icon>
             </ion-button>
diff --git a/core/src/components/buttons/test/icon/index.html b/core/src/components/buttons/test/icon/index.html
index 7f24610694..53504d1b5e 100644
--- a/core/src/components/buttons/test/icon/index.html
+++ b/core/src/components/buttons/test/icon/index.html
@@ -12,10 +12,10 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Button - Basic</ion-title>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button>start btn</ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button slot="icon-only">
               <ion-icon name="more"></ion-icon>
             </ion-button>
diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html
index f84b09cbe8..e56d40c922 100644
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -12,7 +12,7 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Datetime - Basic</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
             (disabled)
             </ion-button>
diff --git a/core/src/components/datetime/test/preview/index.html b/core/src/components/datetime/test/preview/index.html
index eed774bbd6..b77dbf0b24 100644
--- a/core/src/components/datetime/test/preview/index.html
+++ b/core/src/components/datetime/test/preview/index.html
@@ -12,7 +12,7 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Datetime</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
             (disabled)
             </ion-button>
diff --git a/core/src/components/fab/test/basic/index.html b/core/src/components/fab/test/basic/index.html
index 0a9f1df504..39c12e0a0e 100644
--- a/core/src/components/fab/test/basic/index.html
+++ b/core/src/components/fab/test/basic/index.html
@@ -86,7 +86,7 @@
 
       <ion-footer>
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button onclick="closeLists()">Close</ion-button>
           </ion-buttons>
           <ion-title>Footer</ion-title>
diff --git a/core/src/components/fab/test/preview/index.html b/core/src/components/fab/test/preview/index.html
index a4f62daefa..a76e0efc88 100644
--- a/core/src/components/fab/test/preview/index.html
+++ b/core/src/components/fab/test/preview/index.html
@@ -86,7 +86,7 @@
 
       <ion-footer>
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button onclick="closeLists()">Close</ion-button>
           </ion-buttons>
           <ion-title>Footer</ion-title>
diff --git a/core/src/components/input/test/attributes/index.html b/core/src/components/input/test/attributes/index.html
index 69f51121cb..5af2f9afe9 100644
--- a/core/src/components/input/test/attributes/index.html
+++ b/core/src/components/input/test/attributes/index.html
@@ -12,7 +12,7 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Input - Attributes</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button>
               <ion-icon slot="icon-only" name="menu"></ion-icon>
             </ion-button>
diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html
index e414cbb745..d4811f0650 100644
--- a/core/src/components/item-sliding/test/basic/index.html
+++ b/core/src/components/item-sliding/test/basic/index.html
@@ -12,10 +12,10 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Sliding - Basic</ion-title>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button onclick="changeDynamicText()">Dynamic</ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="reload()">Reload</ion-button>
           </ion-buttons>
         </ion-toolbar>
diff --git a/core/src/components/item-sliding/test/preview/index.html b/core/src/components/item-sliding/test/preview/index.html
index 67108b4375..92cd954e32 100644
--- a/core/src/components/item-sliding/test/preview/index.html
+++ b/core/src/components/item-sliding/test/preview/index.html
@@ -12,10 +12,10 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Sliding</ion-title>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button onclick="changeDynamicText()">Dynamic</ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="reload()">Reload</ion-button>
           </ion-buttons>
         </ion-toolbar>
diff --git a/core/src/components/item/test/groups/index.html b/core/src/components/item/test/groups/index.html
index 9db98fb8c3..22ddea39f1 100644
--- a/core/src/components/item/test/groups/index.html
+++ b/core/src/components/item/test/groups/index.html
@@ -14,7 +14,7 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Groups</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="reload()">
               Reload
             </ion-button>
diff --git a/core/src/components/item/test/inputs/index.html b/core/src/components/item/test/inputs/index.html
index dcd2734d41..001c8f024b 100644
--- a/core/src/components/item/test/inputs/index.html
+++ b/core/src/components/item/test/inputs/index.html
@@ -14,7 +14,7 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Item inputs</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button id="toggleDisabled" class="e2eDisableButton" onClick="toggleDisabled()">
               <span id="toggleDisabledSpan"></span>
             </ion-button>
diff --git a/core/src/components/item/test/reorder/index.html b/core/src/components/item/test/reorder/index.html
index 7f9f2f664d..7b11be2c4c 100644
--- a/core/src/components/item/test/reorder/index.html
+++ b/core/src/components/item/test/reorder/index.html
@@ -14,7 +14,7 @@
       <ion-header>
         <ion-toolbar color="primary">
           <ion-title>Item Reorder</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="toggle()">Edit</ion-button>
           </ion-buttons>
         </ion-toolbar>
diff --git a/core/src/components/item/test/sliding/index.html b/core/src/components/item/test/sliding/index.html
index cf3f092996..f03266a793 100644
--- a/core/src/components/item/test/sliding/index.html
+++ b/core/src/components/item/test/sliding/index.html
@@ -12,10 +12,10 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Sliding - Basic</ion-title>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button onclick="changeDynamicText()">Dynamic</ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="reload()">Reload</ion-button>
           </ion-buttons>
         </ion-toolbar>
diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html
index 48b40febb7..a55909b7fd 100644
--- a/core/src/components/popover/test/basic/index.html
+++ b/core/src/components/popover/test/basic/index.html
@@ -13,7 +13,7 @@
 
       <ion-header>
         <ion-toolbar color="primary">
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
               <ion-icon slot="icon-only" name="person"></ion-icon>
             </ion-button>
@@ -33,7 +33,7 @@
 
       <ion-footer>
         <ion-toolbar color="primary">
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
               <ion-icon slot="icon-only" name="person"></ion-icon>
             </ion-button>
diff --git a/core/src/components/popover/test/preview/index.html b/core/src/components/popover/test/preview/index.html
index 2bdd568502..0364a70b7b 100644
--- a/core/src/components/popover/test/preview/index.html
+++ b/core/src/components/popover/test/preview/index.html
@@ -13,7 +13,7 @@
 
       <ion-header>
         <ion-toolbar color="primary">
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
               <ion-icon slot="icon-only" name="person"></ion-icon>
             </ion-button>
@@ -33,7 +33,7 @@
 
       <ion-footer>
         <ion-toolbar color="primary">
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="presentPopover({component: 'profile-page', ev: event })">
               <ion-icon slot="icon-only" name="person"></ion-icon>
             </ion-button>
diff --git a/core/src/components/reorder/test/basic/index.html b/core/src/components/reorder/test/basic/index.html
index 3ef87ebf79..9f3e7b3745 100644
--- a/core/src/components/reorder/test/basic/index.html
+++ b/core/src/components/reorder/test/basic/index.html
@@ -14,7 +14,7 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Reorder - Basic</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="toggleEdit()">Toggle</ion-button>
           </ion-buttons>
         </ion-toolbar>
diff --git a/core/src/components/reorder/test/preview/index.html b/core/src/components/reorder/test/preview/index.html
index da0643f19e..63ddd8a4b6 100644
--- a/core/src/components/reorder/test/preview/index.html
+++ b/core/src/components/reorder/test/preview/index.html
@@ -14,7 +14,7 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Reorder</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="toggleEdit()">Toggle</ion-button>
           </ion-buttons>
         </ion-toolbar>
diff --git a/core/src/components/slides/test/app-intro/index.html b/core/src/components/slides/test/app-intro/index.html
index 35cc6a538b..86503a9819 100644
--- a/core/src/components/slides/test/app-intro/index.html
+++ b/core/src/components/slides/test/app-intro/index.html
@@ -32,10 +32,10 @@
 
       <ion-header>
         <ion-toolbar>
-          <ion-buttons slot="start">
+          <ion-buttons slot="secondary">
             <ion-button onclick="slidePrev()">Prev</ion-button>
           </ion-buttons>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="slideNext()">Next</ion-button>
           </ion-buttons>
         </ion-toolbar>
diff --git a/core/src/components/toolbar/test/basic/index.html b/core/src/components/toolbar/test/basic/index.html
index 5398bdbc1e..5a5c6ccde6 100644
--- a/core/src/components/toolbar/test/basic/index.html
+++ b/core/src/components/toolbar/test/basic/index.html
@@ -14,7 +14,7 @@
       </ion-toolbar>
 
       <ion-toolbar color="primary">
-        <ion-buttons slot="start">
+        <ion-buttons slot="secondary">
           <ion-button>
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -22,7 +22,7 @@
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
         </ion-buttons>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button color="secondary">
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -96,7 +96,7 @@
 
     <ion-footer>
       <ion-toolbar>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button>
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
diff --git a/core/src/components/toolbar/test/preview/index.html b/core/src/components/toolbar/test/preview/index.html
index 2e3c8c70bc..902f021da3 100644
--- a/core/src/components/toolbar/test/preview/index.html
+++ b/core/src/components/toolbar/test/preview/index.html
@@ -14,7 +14,7 @@
       </ion-toolbar>
 
       <ion-toolbar color="primary">
-        <ion-buttons slot="start">
+        <ion-buttons slot="secondary">
           <ion-button>
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -22,7 +22,7 @@
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
         </ion-buttons>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button color="secondary">
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -96,7 +96,7 @@
 
     <ion-footer>
       <ion-toolbar>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button>
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
diff --git a/core/src/components/toolbar/test/scenarios/index.html b/core/src/components/toolbar/test/scenarios/index.html
index 25ae747266..78bdfed4a0 100644
--- a/core/src/components/toolbar/test/scenarios/index.html
+++ b/core/src/components/toolbar/test/scenarios/index.html
@@ -18,7 +18,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start">
+        <ion-buttons slot="secondary">
           <ion-button>
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -26,7 +26,7 @@
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
         </ion-buttons>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button color="secondary">
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -35,7 +35,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start">
+        <ion-buttons slot="secondary">
           <ion-button>
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -43,7 +43,7 @@
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
         </ion-buttons>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button color="secondary">
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -52,7 +52,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start">
+        <ion-buttons slot="secondary">
           <ion-button class="activated">
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -60,7 +60,7 @@
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
         </ion-buttons>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button color="secondary" class="activated">
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -69,7 +69,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start">
+        <ion-buttons slot="secondary">
           <ion-button fill="solid">
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -79,7 +79,7 @@
           </ion-button>
         </ion-buttons>
         <ion-title>Solid</ion-title>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button fill="solid" color="secondary">
             Help
             <ion-icon slot="end" name="help-circle"></ion-icon>
@@ -88,7 +88,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start">
+        <ion-buttons slot="secondary">
           <ion-button href="#" fill="solid" class="activated">
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -98,7 +98,7 @@
           </ion-button>
         </ion-buttons>
         <ion-title>Solid Activated</ion-title>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button fill="solid" color="secondary" class="activated">
             Help
             <ion-icon slot="end" name="help-circle"></ion-icon>
@@ -107,7 +107,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start">
+        <ion-buttons slot="secondary">
           <ion-button fill="outline">
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -116,7 +116,7 @@
             Star
           </ion-button>
         </ion-buttons>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button color="secondary" 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">
+        <ion-buttons slot="secondary">
           <ion-button fill="outline" class="activated">
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -134,7 +134,7 @@
             Star
           </ion-button>
         </ion-buttons>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button color="secondary" fill="outline" class="activated">
             <ion-icon slot="icon-only" name="contact"></ion-icon>
           </ion-button>
@@ -143,13 +143,13 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start">
+        <ion-buttons slot="secondary">
           <ion-button>
             <ion-icon slot="start" name="contact"></ion-icon>
             Clear
           </ion-button>
         </ion-buttons>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button href="#">
             Edit
             <ion-icon slot="end" name="create"></ion-icon>
@@ -159,12 +159,12 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="start">
+        <ion-buttons slot="secondary">
           <ion-button>
             Go Back
           </ion-button>
         </ion-buttons>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button href="#">
             Edit
           </ion-button>
@@ -180,7 +180,7 @@
             </ion-button>
           </ion-menu-toggle>
         </ion-buttons>
-        <ion-buttons slot="start">
+        <ion-buttons slot="secondary">
           <ion-button>
             <ion-icon slot="icon-only" name="star"></ion-icon>
           </ion-button>
@@ -189,7 +189,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button onclick="buttonClick()">
             <ion-icon slot="icon-only" name="star"></ion-icon>
           </ion-button>
@@ -205,7 +205,7 @@
       </ion-toolbar>
 
       <ion-toolbar>
-        <ion-buttons slot="end">
+        <ion-buttons slot="primary">
           <ion-button onclick="buttonClick()">
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss
index 366654f7c9..b4ac2c2359 100644
--- a/core/src/components/toolbar/toolbar.ios.scss
+++ b/core/src/components/toolbar/toolbar.ios.scss
@@ -122,13 +122,19 @@
 // --------------------------------------------------
 
 .bar-buttons-ios {
-  order: map-get($toolbar-order-ios, buttons-start);
+  order: map-get($toolbar-order-ios, buttons-secondary);
 
   transform: translateZ(0);
 }
 
-.bar-buttons-ios[slot="left"] {
-  order: map-get($toolbar-order-ios, buttons-left);
+.bar-buttons-ios[slot="start"] {
+  order: map-get($toolbar-order-ios, buttons-start);
+}
+
+.bar-buttons-ios[slot="primary"] {
+  @include text-align(end);
+
+  order: map-get($toolbar-order-ios, buttons-primary);
 }
 
 .bar-buttons-ios[slot="end"] {
@@ -137,12 +143,6 @@
   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
diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss
index d5c7e9a932..6dab9c2277 100644
--- a/core/src/components/toolbar/toolbar.ios.vars.scss
+++ b/core/src/components/toolbar/toolbar.ios.vars.scss
@@ -7,11 +7,11 @@
 $toolbar-order-ios: (
   back-button: 0,
   menu-toggle-start: 1,
-  buttons-left: 2,
-  buttons-start: 3,
+  buttons-start: 2,
+  buttons-secondary: 3,
   content: 4,
-  buttons-end: 5,
-  buttons-right: 6,
+  buttons-primary: 5,
+  buttons-end: 6,
   menu-toggle-end: 7,
 );
 
diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss
index a133aa487d..358922f859 100644
--- a/core/src/components/toolbar/toolbar.md.scss
+++ b/core/src/components/toolbar/toolbar.md.scss
@@ -119,13 +119,19 @@
 .bar-buttons-md {
   @include margin(0, 2px);
 
-  order: map-get($toolbar-order-md, buttons-start);
+  order: map-get($toolbar-order-md, buttons-secondary);
 
   transform: translateZ(0);
 }
 
-.bar-buttons-md[slot="left"] {
-  order: map-get($toolbar-order-md, buttons-left);
+.bar-buttons-md[slot="start"] {
+  order: map-get($toolbar-order-md, buttons-start);
+}
+
+.bar-buttons-md[slot="primary"] {
+  @include text-align(end);
+
+  order: map-get($toolbar-order-md, buttons-primary);
 }
 
 .bar-buttons-md[slot="end"] {
@@ -134,12 +140,6 @@
   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
 // --------------------------------------------------
diff --git a/core/src/components/toolbar/toolbar.md.vars.scss b/core/src/components/toolbar/toolbar.md.vars.scss
index a881c756fb..4aa6e84457 100644
--- a/core/src/components/toolbar/toolbar.md.vars.scss
+++ b/core/src/components/toolbar/toolbar.md.vars.scss
@@ -7,11 +7,11 @@
 $toolbar-order-md: (
   back-button: 0,
   menu-toggle-start: 1,
-  buttons-left: 2,
+  buttons-start: 2,
   content: 3,
-  buttons-start: 4,
-  buttons-end: 5,
-  buttons-right: 6,
+  buttons-secondary: 4,
+  buttons-primary: 5,
+  buttons-end: 6,
   menu-toggle-end: 7,
 );
 
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index d793a7bf37..2866cd732c 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -58,13 +58,13 @@ export class Toolbar {
 
     return [
       <div class={backgroundCss}></div>,
-      <slot name='left'></slot>,
       <slot name='start'></slot>,
+      <slot name='secondary'></slot>,
       <div class={contentCss}>
         <slot></slot>
       </div>,
-      <slot name='end'></slot>,
-      <slot name='right'></slot>
+      <slot name='primary'></slot>,
+      <slot name='end'></slot>
     ];
   }
 }
diff --git a/core/src/components/virtual-scroll/test/basic.html b/core/src/components/virtual-scroll/test/basic.html
index 2dc282b14c..b45d84f683 100644
--- a/core/src/components/virtual-scroll/test/basic.html
+++ b/core/src/components/virtual-scroll/test/basic.html
@@ -15,7 +15,7 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Ionic CDN demo</ion-title>
-          <ion-buttons slot="end">
+          <ion-buttons slot="primary">
             <ion-button onclick="addItems()">Add Items</ion-button>
           </ion-buttons>
         </ion-toolbar>