fix(toolbar): update md toolbar button spacing and padding to match s…

…pec (#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

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

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

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;

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

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

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

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
 // --------------------------------------------------
 

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

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: "";

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;

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

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

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

core/src/components/searchbar/searchbar.md.scss

@@ -118,5 +118,5 @@
 // -----------------------------------------
 
 :host-context(ion-toolbar) {
-  @include padding(3px);
+  @include padding(3px, 7px);
 }

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) {

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