From fa87e35a058d97f84f5f180e6e7e59d05d64ff26 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 17 May 2019 14:54:21 -0400
Subject: [PATCH] fix(toolbar): update md toolbar button spacing and padding to
 match spec (#17537)

- Removes the padding from the main toolbar and individually style the components inside of it
- Adds a `has-icon-only` class to button, this is used to switch between `unbounded` and `bounded` ripples on buttons in a toolbar. If the button is clear and only has an icon, we use the unbounded "circular" ripple effect, otherwise still use the bounded one. This matches the MD spec, without making the other buttons look off.
- Using the class above, style the button differently to match the MD spec
- Updates the back button and menu button to use the proper size / icon size
- Removes the opacity on an activated back button, it should use the ripple for activated
- Moves the margin to the slots in a toolbar by grabbing the "first" and "last" slot and applying a class to them
- Makes the segment in a toolbar use the min height from the toolbar
- Updates the back button so that it matches the MD spec
- Updates the header box shadow to use the old v3 datauri

fixes #16950 fixes #14444
---
 .../back-button/back-button.ios.scss          |   7 +
 .../back-button/back-button.md.scss           |  21 +-
 .../components/back-button/back-button.scss   |   4 -
 .../components/back-button/back-button.tsx    |   5 +-
 core/src/components/button/button.tsx         |  29 ++-
 core/src/components/buttons/buttons.ios.scss  |   6 +-
 core/src/components/buttons/buttons.md.scss   |  19 ++
 core/src/components/buttons/buttons.scss      |   5 -
 core/src/components/header/header.md.scss     |   4 +-
 .../src/components/header/header.md.vars.scss |   2 +-
 .../menu-button/menu-button.md.scss           |   7 +-
 .../components/menu-button/menu-button.scss   |   1 +
 .../components/menu-button/menu-button.tsx    |   2 +
 .../components/searchbar/searchbar.md.scss    |   2 +-
 core/src/components/title/title.scss          |   4 +-
 .../components/toolbar/test/components/e2e.ts |  10 +
 .../toolbar/test/components/index.html        | 136 ++++++++++
 .../toolbar/test/scenarios/index.html         |  56 +---
 .../components/toolbar/test/spec/index.html   | 240 ++++++++++++++++--
 core/src/components/toolbar/toolbar.ios.scss  |   9 +
 core/src/components/toolbar/toolbar.md.scss   |  35 ++-
 core/src/components/toolbar/toolbar.scss      |  19 +-
 core/src/components/toolbar/toolbar.tsx       |  20 ++
 23 files changed, 511 insertions(+), 132 deletions(-)
 create mode 100644 core/src/components/toolbar/test/components/e2e.ts
 create mode 100644 core/src/components/toolbar/test/components/index.html

diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss
index b99a6deee57..28328b03344 100644
--- a/core/src/components/back-button/back-button.ios.scss
+++ b/core/src/components/back-button/back-button.ios.scss
@@ -35,3 +35,10 @@
   overflow: visible;
   z-index: $back-button-ios-button-z-index;
 }
+
+// Back Button States
+// --------------------------------------------------
+
+:host(.activated) .button-native {
+  opacity: .4;
+}
\ No newline at end of file
diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss
index 61e3be6998c..6e1adbde25c 100644
--- a/core/src/components/back-button/back-button.md.scss
+++ b/core/src/components/back-button/back-button.md.scss
@@ -6,22 +6,24 @@
 
 :host {
   --color: #{$back-button-md-color};
-  --margin-top: 1px;
-  --margin-end: 6px;
+  --margin-top: 0;
+  --margin-end: 0;
   --margin-bottom: 0;
   --margin-start: 0;
   --padding-top: 0;
-  --padding-end: 5px;
+  --padding-end: 0;
   --padding-bottom: 0;
-  --padding-start: 5px;
+  --padding-start: 0;
   --min-height: 32px;
   --min-width: 44px;
-  --icon-padding-end: .3em;
-  --icon-padding-start: .3em;
+  --icon-padding-top: 0;
+  --icon-padding-end: 0;
+  --icon-padding-start: 0;
+  --icon-padding-bottom: 0;
   --icon-margin-top: 0;
-  --icon-margin-end: 6px;
+  --icon-margin-end: 0;
   --icon-margin-bottom: 0;
-  --icon-margin-start: 6px;
+  --icon-margin-start: 0;
   --icon-font-size: 24px;
   --icon-font-weight: normal;
 
@@ -32,6 +34,9 @@
 }
 
 .button-native {
+  width: 48px;
+  height: 48px;
+
   box-shadow: none;
 }
 
diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss
index 47aba075f30..2c1ca5c9202 100644
--- a/core/src/components/back-button/back-button.scss
+++ b/core/src/components/back-button/back-button.scss
@@ -77,10 +77,6 @@
 // Back Button States
 // --------------------------------------------------
 
-:host(.activated) .button-native {
-  opacity: .4;
-}
-
 :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 811e46055c8..704497c5989 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -77,10 +77,7 @@ export class BackButton implements ComponentInterface {
     const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
 
     return (
-      <button
-        type="button"
-        class="button-native"
-      >
+      <button type="button" class="button-native">
         <span class="button-inner">
           {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
           {backButtonText && <span class="button-text">{backButtonText}</span>}
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 5618293b9fe..0d3166bde7b 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -130,6 +130,30 @@ export class Button implements ComponentInterface {
     }
   }
 
+  private get hasLabel() {
+    return this.el.textContent !== null && this.el.textContent.trim() !== '';
+  }
+
+  private get hasIcon() {
+    return !!this.el.querySelector('ion-icon');
+  }
+
+  private get hasIconOnly() {
+    return this.hasIcon && !this.hasLabel;
+  }
+
+  private get rippleType() {
+    const hasClearFill = this.fill === undefined || this.fill === 'clear';
+
+    // If the button is in a toolbar, has a clear fill (which is the default)
+    // and only has an icon we use the unbounded "circular" ripple effect
+    if (hasClearFill && this.hasIconOnly && this.inToolbar) {
+      return 'unbounded';
+    }
+
+    return 'bounded';
+  }
+
   private onFocus = () => {
     this.ionFocus.emit();
   }
@@ -139,7 +163,7 @@ export class Button implements ComponentInterface {
   }
 
   hostData() {
-    const { buttonType, disabled, color, expand, shape, size, strong } = this;
+    const { buttonType, disabled, color, expand, hasIconOnly, shape, size, strong } = this;
     let fill = this.fill;
     if (fill === undefined) {
       fill = this.inToolbar ? 'clear' : 'solid';
@@ -156,6 +180,7 @@ export class Button implements ComponentInterface {
         [`${buttonType}-${fill}`]: true,
         [`${buttonType}-strong`]: strong,
 
+        'button-has-icon-only': hasIconOnly,
         'button-disabled': disabled,
         'ion-activatable': true,
         'ion-focusable': true,
@@ -183,7 +208,7 @@ export class Button implements ComponentInterface {
           <slot></slot>
           <slot name="end"></slot>
         </span>
-        {this.mode === 'md' && <ion-ripple-effect type={this.inToolbar ? 'unbounded' : 'bounded'}></ion-ripple-effect>}
+        {this.mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
       </TagType>
     );
   }
diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index 37b6613fb99..c64b5209bcc 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/core/src/components/buttons/buttons.ios.scss
@@ -6,17 +6,19 @@
 // --------------------------------------------------
 
 ::slotted(*) ion-button {
-  --padding-top: 0;
-  --padding-bottom: 0;
   --padding-start: 5px;
   --padding-end: 5px;
 
+  @include margin-horizontal(2px, 2px);
+
   height: 32px;
 
   font-size: #{$toolbar-ios-button-font-size};
   font-weight: 400;
 }
 
+
+
 ::slotted(*) ion-button:not(.button-round) {
   --border-radius: #{$toolbar-ios-button-border-radius};
 }
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
index 16ef4479529..4adceb3f60f 100644
--- a/core/src/components/buttons/buttons.md.scss
+++ b/core/src/components/buttons/buttons.md.scss
@@ -11,6 +11,8 @@
   --padding-end: 8px;
   --box-shadow: none;
 
+  @include margin-horizontal(2px, 2px);
+
   height: 32px;
 
   font-size: #{$toolbar-md-button-font-size};
@@ -54,6 +56,23 @@
 }
 
 
+// Material Design Toolbar Icon Only Clear Button
+// --------------------------------------------------
+
+::slotted(*) .button-has-icon-only.button-clear {
+  --padding-top: 12px;
+  --padding-end: 12px;
+  --padding-bottom: 12px;
+  --padding-start: 12px;
+  --border-radius: 50%;
+
+  @include margin(0);
+
+  width: 48px;
+  height: 48px;
+}
+
+
 // Material Design Toolbar Solid Button
 // --------------------------------------------------
 
diff --git a/core/src/components/buttons/buttons.scss b/core/src/components/buttons/buttons.scss
index b12ee359737..d0e30a4587a 100644
--- a/core/src/components/buttons/buttons.scss
+++ b/core/src/components/buttons/buttons.scss
@@ -16,11 +16,6 @@
 ::slotted(*) ion-button {
   --padding-top: 0;
   --padding-bottom: 0;
-  --padding-start: 0;
-  --padding-end: 0;
-  --box-shadow: none;
-  --overflow: visible;
 
   @include margin(0);
-  @include margin-horizontal(2px, 2px);
 }
diff --git a/core/src/components/header/header.md.scss b/core/src/components/header/header.md.scss
index 50195718a1e..300f8b6abf9 100644
--- a/core/src/components/header/header.md.scss
+++ b/core/src/components/header/header.md.scss
@@ -9,14 +9,14 @@
   // performance rather than using a box-shadow. There is a
   // noticeable performance difference on older Android devices.
   @include position(null, null, -$header-md-box-shadow-height, 0);
-  @include background-position(start, 0, top, 0);
+  @include background-position(start, 0, top, -2px);
 
   position: absolute;
 
   width: 100%;
   height: $header-md-box-shadow-height;
 
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAIBAMAAAACWGKkAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAAB3RSTlMFTEIzJBcOYhQUIwAAAB9JREFUCNdjEIQCBiUoYDCGAgYXKGAIhQKGNChgwAAAorMLKSCkL40AAAAASUVORK5CYII=");
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);
   background-repeat: repeat-x;
 
   content: "";
diff --git a/core/src/components/header/header.md.vars.scss b/core/src/components/header/header.md.vars.scss
index e3ea3cf1520..3592b843a2c 100644
--- a/core/src/components/header/header.md.vars.scss
+++ b/core/src/components/header/header.md.vars.scss
@@ -4,4 +4,4 @@
 // --------------------------------------------------
 
 /// @prop - Height of the header box shadow
-$header-md-box-shadow-height:                    8px !default;
+$header-md-box-shadow-height:                    5px !default;
diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss
index 735d1f55240..6e59c470269 100644
--- a/core/src/components/menu-button/menu-button.md.scss
+++ b/core/src/components/menu-button/menu-button.md.scss
@@ -9,6 +9,11 @@
   --padding-end: 8px;
 }
 
+button {
+  width: 48px;
+  height: 48px;
+}
+
 ion-icon {
-  font-size: 26px;
+  font-size: 24px;
 }
diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss
index b647ea2bad2..fb7cbf45e98 100644
--- a/core/src/components/menu-button/menu-button.scss
+++ b/core/src/components/menu-button/menu-button.scss
@@ -67,6 +67,7 @@ ion-icon {
 // Menu Button with Color
 // --------------------------------------------------
 
+// TODO this is not used
 :host(.ion-color) .button-native {
   color: current-color(base);
 }
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index f229c1fbf47..928b73cce68 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -40,8 +40,10 @@ export class MenuButton implements ComponentInterface {
     return {
       class: {
         [`${this.mode}`]: true,
+
         'button': true,  // ion-buttons target .button
         'ion-activatable': true,
+        'ion-focusable': true
       }
     };
   }
diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss
index 0d28bb33b55..03940951e56 100644
--- a/core/src/components/searchbar/searchbar.md.scss
+++ b/core/src/components/searchbar/searchbar.md.scss
@@ -118,5 +118,5 @@
 // -----------------------------------------
 
 :host-context(ion-toolbar) {
-  @include padding(3px);
+  @include padding(3px, 7px);
 }
diff --git a/core/src/components/title/title.scss b/core/src/components/title/title.scss
index 16f6c949cc8..f54f65a7880 100644
--- a/core/src/components/title/title.scss
+++ b/core/src/components/title/title.scss
@@ -41,10 +41,12 @@
 }
 
 :host(.title-md) {
-  @include padding(0, 12px);
+  @include padding(0, 20px);
 
   font-size: 20px;
   font-weight: 500;
+
+  letter-spacing: .0125em;
 }
 
 :host(.ion-color) {
diff --git a/core/src/components/toolbar/test/components/e2e.ts b/core/src/components/toolbar/test/components/e2e.ts
new file mode 100644
index 00000000000..aeba8783048
--- /dev/null
+++ b/core/src/components/toolbar/test/components/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('toolbar: scenarios', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toolbar/test/scenarios'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/toolbar/test/components/index.html b/core/src/components/toolbar/test/components/index.html
new file mode 100644
index 00000000000..b6ba92fac3a
--- /dev/null
+++ b/core/src/components/toolbar/test/components/index.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Toolbar - Components</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content id="content">
+      <!-- Left Side Menu Toggle Components -->
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Left Side Menu Toggle</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-segment color="secondary" value="second">
+          <ion-segment-button value="first">
+            Segment
+          </ion-segment-button>
+          <ion-segment-button value="second">
+            Component
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-searchbar placeholder="Searchbar..."></ion-searchbar>
+      </ion-toolbar>
+
+      <!-- Right Side Menu Toggle Components -->
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button onclick="buttonClick()">
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Right Side Menu Toggle</ion-title>
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-segment color="secondary" value="component">
+          <ion-segment-button value="segment">
+            Segment
+          </ion-segment-button>
+          <ion-segment-button value="component">
+            Component
+          </ion-segment-button>
+        </ion-segment>
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-searchbar placeholder="Searchbar..."></ion-searchbar>
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar color="light">
+        <ion-segment value="third">
+          <ion-segment-button value="first">
+            Light
+          </ion-segment-button>
+          <ion-segment-button value="second">
+            Bar
+          </ion-segment-button>
+          <ion-segment-button value="third">
+            Segment
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar color="light">
+        <ion-segment color="primary" value="first">
+          <ion-segment-button value="first">
+            Light
+          </ion-segment-button>
+          <ion-segment-button value="second">
+            Bar
+          </ion-segment-button>
+          <ion-segment-button value="third">
+            Primary
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/core/src/components/toolbar/test/scenarios/index.html b/core/src/components/toolbar/test/scenarios/index.html
index e20ecb72706..5f311c829a9 100644
--- a/core/src/components/toolbar/test/scenarios/index.html
+++ b/core/src/components/toolbar/test/scenarios/index.html
@@ -177,62 +177,12 @@
         <ion-title>Text Only</ion-title>
       </ion-toolbar>
 
-      <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-menu-button auto-hide="false"></ion-menu-button>
-        </ion-buttons>
-        <ion-buttons slot="secondary">
-          <ion-button>
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Left side menu toggle</ion-title>
-      </ion-toolbar>
-
-      <ion-toolbar>
-        <ion-buttons slot="primary">
-          <ion-button onclick="buttonClick()">
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Right side menu toggle</ion-title>
-        <ion-buttons slot="end">
-          <ion-menu-button auto-hide="false"></ion-menu-button>
-        </ion-buttons>
-      </ion-toolbar>
-
-      <ion-toolbar>
-        <ion-buttons slot="primary">
-          <ion-button onclick="buttonClick()">
-            <ion-icon slot="icon-only" name="search"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-segment color="secondary">
-          <ion-segment-button value="something">
-            Something
-          </ion-segment-button>
-          <ion-segment-button value="else">
-            Else
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-
-      <ion-toolbar>
-        <ion-segment>
-          <ion-segment-button value="light">
-            Light
-          </ion-segment-button>
-          <ion-segment-button value="toolbar">
-            Toolbar
-          </ion-segment-button>
-          <ion-segment-button value="default">
-            Default Segment
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
+      <!-- iOS Toolbar -->
       <ion-toolbar mode="ios">
         <ion-title>This is an iOS toolbar</ion-title>
       </ion-toolbar>
+
+      <!-- Material Design Toolbar -->
       <ion-toolbar mode="md">
         <ion-title>This is an MD toolbar</ion-title>
       </ion-toolbar>
diff --git a/core/src/components/toolbar/test/spec/index.html b/core/src/components/toolbar/test/spec/index.html
index 511b2958c26..439b5b8dd97 100644
--- a/core/src/components/toolbar/test/spec/index.html
+++ b/core/src/components/toolbar/test/spec/index.html
@@ -1,4 +1,3 @@
-@@ -0,0 +1,59 @@
 <!DOCTYPE html>
 <html dir="ltr">
 
@@ -14,12 +13,12 @@
 
 <body>
   <ion-app>
-    <ion-header>
+    <ion-content>
       <ion-toolbar color="tertiary">
         <ion-buttons slot="start">
           <ion-menu-button auto-hide="false"></ion-menu-button>
         </ion-buttons>
-        <ion-buttons slot="secondary">
+        <ion-buttons slot="primary">
           <ion-button>
             <ion-icon slot="icon-only" name="download"></ion-icon>
           </ion-button>
@@ -33,28 +32,221 @@
 
         <ion-title>Standard</ion-title>
       </ion-toolbar>
-    </ion-header>
-
-    <ion-content id="content">
-      <div>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-      </div>
+
+      <ion-header>
+        <ion-toolbar color="tertiary">
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="heart"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="more"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+
+          <ion-title>Page title</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-button>
+            Clearing
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            Done
+          </ion-button>
+        </ion-buttons>
+
+        <ion-title>Text</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-button>
+            Start
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            Pri
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button>
+            End
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            Sec
+          </ion-button>
+        </ion-buttons>
+
+        <ion-title>Slots</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+
+        <ion-title>Slots</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon name="call"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+
+        <ion-title>Slots</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon name="call"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+
+        <ion-title>Slots</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-back-button default-href="#"></ion-back-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-title>Text</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-segment>
+          <ion-segment-button checked>All</ion-segment-button>
+          <ion-segment-button>Favorites</ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-segment>
+          <ion-segment-button checked>All</ion-segment-button>
+          <ion-segment-button>Favorites</ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+
+        <ion-segment>
+          <ion-segment-button checked>All</ion-segment-button>
+          <ion-segment-button>Favorites</ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+
+        <ion-segment>
+          <ion-segment-button checked>All</ion-segment-button>
+          <ion-segment-button>Favorites</ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-searchbar></ion-searchbar>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-progress-bar value=".4"></ion-progress-bar>
+      </ion-toolbar>
+
     </ion-content>
+
+    <style>
+      ion-toolbar {
+        margin-bottom: 10px;
+      }
+    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss
index a184f588cdf..e428ee99d18 100644
--- a/core/src/components/toolbar/toolbar.ios.scss
+++ b/core/src/components/toolbar/toolbar.ios.scss
@@ -25,6 +25,15 @@
   min-width: 0;
 }
 
+
+// Toolbar: Segment
+// --------------------------------------------------
+
+:host(.toolbar-segment) {
+  --min-height: auto;
+}
+
+
 // iOS Toolbar Slot Placement
 // --------------------------------------------------
 
diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss
index 441b46f64e9..1f5f5281045 100644
--- a/core/src/components/toolbar/toolbar.md.scss
+++ b/core/src/components/toolbar/toolbar.md.scss
@@ -8,10 +8,10 @@
   --background: #{$toolbar-md-background};
   --color: #{$toolbar-md-color};
   --border-color: #{$toolbar-md-border-color};
-  --padding-top: 4px;
-  --padding-bottom: 4px;
-  --padding-start: 4px;
-  --padding-end: 4px;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+  --padding-end: 0;
   --min-height: 56px;
 }
 
@@ -27,16 +27,33 @@
   max-width: 100%;
 }
 
+
 // Toolbar: Segment
 // --------------------------------------------------
 
-:host(.toolbar-segment) {
-  --padding-top: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  --padding-end: 0;
+::slotted(ion-segment) {
+  min-height: var(--min-height);
 }
 
+
+// Material Design Toolbar Buttons
+// --------------------------------------------------
+
+// Style the first slot with additional margin start
+// this only ever gets added to the first start slot buttons
+::slotted(.buttons-first-slot) {
+  @include margin-horizontal(4px, null);
+}
+
+// Style the last slot with additional margin end
+// this is added to the end, primary, or secondary slot
+// whichever it finds first, and the first one it finds
+// if multiple of the same name are found
+::slotted(.buttons-last-slot) {
+  @include margin-horizontal(null, 4px);
+}
+
+
 // Material Design Toolbar Slot Placement
 // --------------------------------------------------
 
diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss
index 2cbc5afc6ad..2d304d90811 100644
--- a/core/src/components/toolbar/toolbar.scss
+++ b/core/src/components/toolbar/toolbar.scss
@@ -22,10 +22,7 @@
   --opacity: 1;
 
   @include font-smoothing();
-  @include padding-horizontal(
-    var(--ion-safe-area-left),
-    var(--ion-safe-area-right)
-  );
+  @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
 
   display: block;
 
@@ -52,12 +49,8 @@
 }
 
 .toolbar-container {
-  @include padding(
-    var(--padding-top),
-    var(--padding-end),
-    var(--padding-bottom),
-    var(--padding-start)
-  );
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
   display: flex;
   position: relative;
 
@@ -99,13 +92,9 @@
 }
 
 
-// Toolbar: Segment
+// Toolbar: Progress Bar
 // --------------------------------------------------
 
-:host(.toolbar-segment) {
-  --min-height: auto;
-}
-
 ::slotted(ion-progress-bar) {
   @include position(null, 0, 0, 0);
 
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index c38a33760d7..32ab373d8af 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -37,6 +37,26 @@ export class Toolbar implements ComponentInterface {
    */
   @Prop() mode!: Mode;
 
+  componentWillLoad() {
+    const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
+
+    const firstButtons = buttons.find(button => {
+      return button.slot === 'start';
+    });
+    if (firstButtons) {
+      firstButtons.classList.add('buttons-first-slot');
+    }
+
+    const buttonsReversed = buttons.reverse();
+    const lastButtons =
+      buttonsReversed.find(button => button.slot === 'end') ||
+      buttonsReversed.find(button => button.slot === 'primary') ||
+      buttonsReversed.find(button => button.slot === 'secondary');
+    if (lastButtons) {
+      lastButtons.classList.add('buttons-last-slot');
+    }
+  }
+
   @Listen('ionStyle')
   childrenStyle(ev: CustomEvent<StyleEventDetail>) {
     ev.stopPropagation();