feat(title): add support for small title (#19215)

Updates title to include `small` size and updates searchbar and UI to match native. closes #18898
2026-03-13 10:22:08 +08:00 · 2019-09-05 17:32:19 -04:00
parent ff2aaadf41
commit e27962dcaf
24 changed files with 657 additions and 314 deletions
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -710,12 +710,11 @@ export declare interface IonSegment extends Components.IonSegment {}
@Component({ selector: 'ion-segment', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'disabled', 'mode', 'scrollable', 'value'] })
 export class IonSegment {
  ionChange!: EventEmitter<CustomEvent>;
-  ionStyle!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    c.detach();
    this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionChange', 'ionStyle']);
+    proxyOutputs(this, this.el, ['ionChange']);
  }
 }
 proxyInputs(IonSegment, ['color', 'disabled', 'mode', 'scrollable', 'value']);
--- a/core/api.txt
+++ b/core/api.txt
@@ -991,7 +991,6 @@ ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
 ion-segment,prop,value,null | string | undefined,undefined,false,false
 ion-segment,event,ionChange,SegmentChangeEventDetail,true
-ion-segment,event,ionStyle,StyleEventDetail,true

 ion-segment-button,shadow
 ion-segment-button,prop,checked,boolean,false,false,false
@@ -1206,7 +1205,7 @@ ion-thumbnail,css-prop,--size

 ion-title,shadow
 ion-title,prop,color,string | undefined,undefined,false,false
-ion-title,prop,size,"large" | undefined,undefined,false,false
+ion-title,prop,size,"large" | "small" | undefined,undefined,false,false
 ion-title,css-prop,--color

 ion-toast,shadow
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2706,9 +2706,9 @@ export namespace Components {
    */
    'color'?: Color;
    /**
-    * The size of the toolbar title. Only applies in `ios` mode.
+    * The size of the toolbar title.
    */
-    'size'?: 'large' | undefined;
+    'size'?: 'large' | 'small';
  }
  interface IonToast {
    /**
@@ -5579,10 +5579,6 @@ declare namespace LocalJSX {
    */
    'onIonChange'?: (event: CustomEvent<SegmentChangeEventDetail>) => void;
    /**
-    * Emitted when the styles change.
-    */
-    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
-    /**
    * If `true`, the segment buttons will overflow and the user can swipe to see them.
    */
    'scrollable'?: boolean;
@@ -6035,9 +6031,9 @@ declare namespace LocalJSX {
    */
    'color'?: Color;
    /**
-    * The size of the toolbar title. Only applies in `ios` mode.
+    * The size of the toolbar title.
    */
-    'size'?: 'large' | undefined;
+    'size'?: 'large' | 'small';
  }
  interface IonToast extends JSXBase.HTMLAttributes<HTMLIonToastElement> {
    /**
--- a/core/src/components/searchbar/searchbar.ios.scss
+++ b/core/src/components/searchbar/searchbar.ios.scss
@@ -30,7 +30,7 @@

 .searchbar-search-icon {
  @include margin-horizontal(calc(50% - 60px), null);
-  @include position(0, null, null, 8px);
+  @include position(0, null, null, 5px);

  position: absolute;

@@ -50,7 +50,7 @@

  height: 100%;

-  font-size: 16px;
+  font-size: 17px;
  font-weight: 400;

  contain: strict;
--- a/core/src/components/searchbar/searchbar.ios.vars.scss
+++ b/core/src/components/searchbar/searchbar.ios.vars.scss
@@ -25,7 +25,7 @@ $searchbar-ios-cancel-button-color:               ion-color(primary, base) !defa
 $searchbar-ios-cancel-button-background-color:    transparent !default;

 /// @prop - Size of the searchbar input search icon
-$searchbar-ios-input-search-icon-size:            16px !default;
+$searchbar-ios-input-search-icon-size:            22px !default;

 /// @prop - Color of the searchbar input search icon
 $searchbar-ios-input-search-icon-color:           $text-color-step-400 !default;
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth

 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { Color, SearchbarChangeEventDetail } from '../../interface';
+import { Color, SearchbarChangeEventDetail, StyleEventDetail } from '../../interface';
 import { debounceEvent } from '../../utils/helpers';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { createColorClasses } from '../../utils/theme';
@@ -158,6 +158,12 @@ export class Searchbar implements ComponentInterface {
   */
  @Event() ionFocus!: EventEmitter<void>;

+  /**
+   * Emitted when the styles change.
+   * @internal
+   */
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
+
  @Watch('value')
  protected valueChanged() {
    const inputEl = this.nativeInput;
@@ -176,6 +182,10 @@ export class Searchbar implements ComponentInterface {
    });
  }

+  connectedCallback() {
+    this.emitStyle();
+  }
+
  componentDidLoad() {
    if (this.showCancelButton === 'false' || this.showCancelButton === false) {
      console.warn('The boolean values of showCancelButton are deprecated. Please use "never" instead of "false".');
@@ -193,6 +203,12 @@ export class Searchbar implements ComponentInterface {
    }, 300);
  }

+  private emitStyle() {
+    this.ionStyle.emit({
+      'searchbar': true
+    });
+  }
+
  /**
   * Sets focus on the specified `ion-searchbar`. Use this method instead of the global
   * `input.focus()`.
--- a/core/src/components/segment/readme.md
+++ b/core/src/components/segment/readme.md
@@ -452,7 +452,6 @@ export const SegmentExample: React.FC = () => (
 | Event       | Description                                  | Type                                    |
 | ----------- | -------------------------------------------- | --------------------------------------- |
 | `ionChange` | Emitted when the value property has changed. | `CustomEvent<SegmentChangeEventDetail>` |
-| `ionStyle`  | Emitted when the styles change.              | `CustomEvent<StyleEventDetail>`         |


 ----------------------------------------------
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -58,6 +58,7 @@ export class Segment implements ComponentInterface {

  /**
   * Emitted when the styles change.
+   * @internal
   */
  @Event() ionStyle!: EventEmitter<StyleEventDetail>;

--- a/core/src/components/title/readme.md
+++ b/core/src/components/title/readme.md
@@ -9,26 +9,73 @@

 ## Usage

-### Javascript
+### Angular / javascript

 ```html
-<ion-header>
+<!-- Default title -->
+<ion-toolbar>
+  <ion-title>Default Title</ion-title>
+</ion-toolbar>

+<!-- Small title above a default title -->
+<ion-toolbar>
+  <ion-title size="small">Small Title above a Default Title</ion-title>
+</ion-toolbar>
+<ion-toolbar>
+  <ion-title>Default Title</ion-title>
+</ion-toolbar>
+```
+
+
+### React
+
+```tsx
+import React from 'react';
+import {
+  IonToolbar,
+  IonTitle
+} from '@ionic/react';
+
+export const ToolbarExample: React.FC = () => (
+  <IonToolbar>
+    <IonTitle>Default Title</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonTitle size="small">Small Title above a Default Title</IonTitle>
+  </IonToolbar>
+  <IonToolbar>
+    <IonTitle>Default Title</IonTitle>
+  </IonToolbar>
+);
+```
+
+
+### Vue
+
+```html
+<template>
  <ion-toolbar>
-    <ion-title>Settings</ion-title>
+    <ion-title>Default Title</ion-title>
  </ion-toolbar>

-</ion-header>
+  <ion-toolbar>
+    <ion-title size="small">Small Title above a Default Title</ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Default Title</ion-title>
+  </ion-toolbar>
+</template>
 ```



 ## Properties

-| Property | Attribute | Description                                                                                                                                                                                                                                                            | Type                   | Default     |
-| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
-| `color`  | `color`   | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`  | `undefined` |
-| `size`   | `size`    | The size of the toolbar title. Only applies in `ios` mode.                                                                                                                                                                                                             | `"large" \| undefined` | `undefined` |
+| Property | Attribute | Description                                                                                                                                                                                                                                                            | Type                              | Default     |
+| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
+| `color`  | `color`   | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`             | `undefined` |
+| `size`   | `size`    | The size of the toolbar title.                                                                                                                                                                                                                                         | `"large" \| "small" \| undefined` | `undefined` |


 ## CSS Custom Properties
--- a/core/src/components/title/test/scenarios/index.html
+++ b/core/src/components/title/test/scenarios/index.html
@@ -79,7 +79,7 @@
    const titles = document.querySelectorAll('ion-title[size]');
    function toggle() {
      for (title of titles) {
-        const size = title.size === 'large' ? 'standard' : 'large';
+        const size = title.size === 'large' ? undefined : 'large';
        title.size = size;
      }
    }
--- a/core/src/components/title/test/sizes/e2e.ts
+++ b/core/src/components/title/test/sizes/e2e.ts
@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('title: sizes', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/title/test/sizes?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
+
+test('title:rtl: sizes', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/title/test/sizes?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
--- a/core/src/components/title/test/sizes/index.html
+++ b/core/src/components/title/test/sizes/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Title - Sizes</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 nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Settings</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Browse</ion-title>
+        <ion-buttons slot="end">
+          <ion-button>Cancel</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+      <ion-toolbar>
+        <ion-searchbar></ion-searchbar>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-header>
+      <ion-toolbar class="hide-md">
+        <ion-title size="small">Choose a contact to add to Favorites</ion-title>
+      </ion-toolbar>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="#"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Title</ion-title>
+        <ion-title class="hide-ios" size="small">Subtitle</ion-title>
+        <ion-buttons slot="end">
+          <ion-button><ion-icon slot="icon-only" name="search"></ion-icon></ion-button>
+          <ion-button><ion-icon slot="icon-only" name="menu"></ion-icon></ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+      <ion-toolbar>
+        <ion-searchbar></ion-searchbar>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title size="small">Choose a contact to add to Favorites</ion-title>
+      </ion-toolbar>
+      <ion-toolbar>
+        <ion-title>Contacts</ion-title>
+        <ion-buttons slot="end">
+          <ion-button>Cancel</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+      <ion-toolbar>
+        <ion-searchbar></ion-searchbar>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-header>
+      <ion-toolbar color="secondary">
+        <ion-title size="small">
+          Choose multiple contacts to add to your Favorites
+          so this just goes on and on and on
+        </ion-title>
+      </ion-toolbar>
+      <ion-toolbar color="secondary">
+        <ion-buttons slot="start">
+          <ion-button>Groups</ion-button>
+        </ion-buttons>
+        <ion-title>Contacts</ion-title>
+        <ion-buttons slot="end">
+          <ion-button>Cancel</ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+      <ion-toolbar color="secondary">
+        <ion-searchbar></ion-searchbar>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content fullscreen>
+
+    </ion-content>
+  </ion-app>
+
+  <style>
+    .md .hide-md {
+      display: none;
+    }
+
+    .ios .hide-ios {
+      display: none;
+    }
+
+    /* testing purposes only
+    ion-header {
+      border-top: 1px solid red;
+    } */
+  </style>
+</body>
+
+</html>
--- a/core/src/components/title/title.scss
+++ b/core/src/components/title/title.scss
@@ -19,7 +19,8 @@
  color: var(--color);
 }

-:host(.title-ios) {
+:host(.title-ios.title-default),
+:host(.title-ios.title-large) {
  @include position(0, null, null, 0);
  @include padding(0, 90px, 0);

@@ -65,10 +66,38 @@
 }


+// Small Title
+// --------------------------------------------------
+
+:host(.title-small) .toolbar-title {
+  white-space: normal;
+}
+
+:host(.title-ios.title-small) {
+  @include padding(6px, 9px, 16px, 9px);
+
+  width: 100%;
+  height: 100%;
+
+  font-size: 13px;
+
+  text-align: center;
+}
+
+:host(.title-md.title-small) {
+  width: 100%;
+  height: 100%;
+
+  font-size: 15px;
+
+  font-weight: normal;
+}
+
+
 // Title: Large
 // --------------------------------------------------

-:host(.title-ios-large) {
+:host(.title-ios.title-large) {
  @include padding(0, 16px);

  bottom: 0;
@@ -78,7 +107,7 @@
  min-width: 100%;

  padding-bottom: 6px;
-  
+
  font-size: 34px;
  font-weight: 700;

--- a/core/src/components/title/title.tsx
+++ b/core/src/components/title/title.tsx
@@ -22,9 +22,8 @@ export class ToolbarTitle implements ComponentInterface {

  /**
   * The size of the toolbar title.
-   * Only applies in `ios` mode.
   */
-  @Prop() size?: 'large' | undefined;
+  @Prop() size?: 'large' | 'small';

  /**
   * Emitted when the styles change.
@@ -42,13 +41,15 @@ export class ToolbarTitle implements ComponentInterface {
  }

  private emitStyle() {
+    const size = this.getSize();
+
    this.ionStyle.emit({
-      [`title-${this.getSize()}`]: true
+      [`title-${size}`]: true
    });
  }

  private getSize() {
-    return (this.size !== undefined) ? this.size : 'standard';
+    return (this.size !== undefined) ? this.size : 'default';
  }

  private getMode() {
@@ -59,12 +60,14 @@ export class ToolbarTitle implements ComponentInterface {

  render() {
    const mode = this.getMode();
+    const size = this.getSize();
+
    return (
      <Host
        class={{
          [mode]: true,
          [`title-${mode}`]: true,
-          [`title-${mode}-${this.getSize()}`]: true,
+          [`title-${size}`]: true,

          ...createColorClasses(this.color),
        }}
--- a/core/src/components/title/usage/angular.md
+++ b/core/src/components/title/usage/angular.md
@@ -0,0 +1,14 @@
+```html
+<!-- Default title -->
+<ion-toolbar>
+  <ion-title>Default Title</ion-title>
+</ion-toolbar>
+
+<!-- Small title above a default title -->
+<ion-toolbar>
+  <ion-title size="small">Small Title above a Default Title</ion-title>
+</ion-toolbar>
+<ion-toolbar>
+  <ion-title>Default Title</ion-title>
+</ion-toolbar>
+```
--- a/core/src/components/title/usage/javascript.md
+++ b/core/src/components/title/usage/javascript.md
@@ -1,9 +1,14 @@
 ```html
-<ion-header>
+<!-- Default title -->
+<ion-toolbar>
+  <ion-title>Default Title</ion-title>
+</ion-toolbar>

-  <ion-toolbar>
-    <ion-title>Settings</ion-title>
-  </ion-toolbar>
-
-</ion-header>
+<!-- Small title above a default title -->
+<ion-toolbar>
+  <ion-title size="small">Small Title above a Default Title</ion-title>
+</ion-toolbar>
+<ion-toolbar>
+  <ion-title>Default Title</ion-title>
+</ion-toolbar>
 ```
--- a/core/src/components/title/usage/react.md
+++ b/core/src/components/title/usage/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import {
+  IonToolbar,
+  IonTitle
+} from '@ionic/react';
+
+export const ToolbarExample: React.FC = () => (
+  <IonToolbar>
+    <IonTitle>Default Title</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar>
+    <IonTitle size="small">Small Title above a Default Title</IonTitle>
+  </IonToolbar>
+  <IonToolbar>
+    <IonTitle>Default Title</IonTitle>
+  </IonToolbar>
+);
+```
--- a/core/src/components/title/usage/vue.md
+++ b/core/src/components/title/usage/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-toolbar>
+    <ion-title>Default Title</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-title size="small">Small Title above a Default Title</ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Default Title</ion-title>
+  </ion-toolbar>
+</template>
+```
--- a/core/src/components/toolbar/readme.md
+++ b/core/src/components/toolbar/readme.md
@@ -40,6 +40,13 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
  <ion-title>Back Button</ion-title>
 </ion-toolbar>

+<ion-toolbar>
+  <ion-title size="small">Small Title above a Default Title</ion-title>
+</ion-toolbar>
+<ion-toolbar>
+  <ion-title>Default Title</ion-title>
+</ion-toolbar>
+
 <ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
@@ -199,6 +206,13 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
  <ion-title>Back Button</ion-title>
 </ion-toolbar>

+<ion-toolbar>
+  <ion-title size="small">Small Title above a Default Title</ion-title>
+</ion-toolbar>
+<ion-toolbar>
+  <ion-title>Default Title</ion-title>
+</ion-toolbar>
+
 <ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
@@ -357,157 +371,161 @@ import {
  IonSearchbar,
  IonSegment,
  IonSegmentButton,
-  IonContent
 } from '@ionic/react';

 export const ToolbarExample: React.FC = () => (
-  <IonButton>
-    <IonToolbar>
-      <IonTitle>Title Only</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonTitle>Title Only</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="start">
-        <IonBackButton defaultHref="/" />
-      </IonButtons>
-      <IonTitle>Back Button</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="start">
+      <IonBackButton defaultHref="/" />
+    </IonButtons>
+    <IonTitle>Back Button</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="secondary">
-        <IonButton>
-          <IonIcon slot="icon-only" name="contact" />
-        </IonButton>
-        <IonButton>
-          <IonIcon slot="icon-only" name="search" />
-        </IonButton>
-      </IonButtons>
-      <IonButtons slot="primary">
-        <IonButton color="secondary">
-          <IonIcon slot="icon-only" name="more" />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Default Buttons</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonTitle size="small">Small Title above a Default Title</IonTitle>
+  </IonToolbar>
+  <IonToolbar>
+    <IonTitle>Default Title</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="secondary">
-        <IonButton fill="solid">
-          <IonIcon slot="start" name="contact" />
-          Contact
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Solid Buttons</IonTitle>
-      <IonButtons slot="primary">
-        <IonButton fill="solid" color="secondary">
-          Help
-          <IonIcon slot="end" name="help-circle" />
-        </IonButton>
-      </IonButtons>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="secondary">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Default Buttons</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="secondary">
-        <IonButton fill="outline">
-          <IonIcon slot="start" name="star" />
-          Star
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Outline Buttons</IonTitle>
-      <IonButtons slot="primary">
-        <IonButton color="danger" fill="outline">
-          Edit
-          <IonIcon slot="end" name="create" />
-        </IonButton>
-      </IonButtons>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton fill="solid">
+        <IonIcon slot="start" name="contact" />
+        Contact
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Solid Buttons</IonTitle>
+    <IonButtons slot="primary">
+      <IonButton fill="solid" color="secondary">
+        Help
+        <IonIcon slot="end" name="help-circle" />
+      </IonButton>
+    </IonButtons>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="secondary">
-        <IonButton>Account</IonButton>
-      </IonButtons>
-      <IonButtons slot="primary">
-        <IonButton color="danger">Edit</IonButton>
-      </IonButtons>
-      <IonTitle>Text Only Buttons</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton fill="outline">
+        <IonIcon slot="start" name="star" />
+        Star
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Outline Buttons</IonTitle>
+    <IonButtons slot="primary">
+      <IonButton color="danger" fill="outline">
+        Edit
+        <IonIcon slot="end" name="create" />
+      </IonButton>
+    </IonButtons>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="start">
-        <IonMenuButton autoHide={false} />
-      </IonButtons>
-      <IonButtons slot="secondary">
-        <IonButton>
-          <IonIcon slot="icon-only" name="star" />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Left side menu toggle</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton>Account</IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="danger">Edit</IonButton>
+    </IonButtons>
+    <IonTitle>Text Only Buttons</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="primary">
-        <IonButton onClick={() => {}}>
-          <IonIcon slot="icon-only" name="star" />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Right side menu toggle</IonTitle>
-      <IonButtons slot="end">
-        <IonMenuButton autoHide={false} />
-      </IonButtons>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="start">
+      <IonMenuButton autoHide={false} />
+    </IonButtons>
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="star" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Left side menu toggle</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="primary">
-        <IonButton onClick={() => {}}>
-          <IonIcon slot="icon-only" name="search" />
-        </IonButton>
-      </IonButtons>
-      <IonSearchbar placeholder="Search Favorites" />
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="primary">
+      <IonButton onClick={() => {}}>
+        <IonIcon slot="icon-only" name="star" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Right side menu toggle</IonTitle>
+    <IonButtons slot="end">
+      <IonMenuButton autoHide={false} />
+    </IonButtons>
+  </IonToolbar>

-    <IonToolbar>
-      <IonSegment>
-        <IonSegmentButton value="all" checked>
-          All
-        </IonSegmentButton>
-        <IonSegmentButton value="favorites">Favorites</IonSegmentButton>
-      </IonSegment>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="primary">
+      <IonButton onClick={() => {}}>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonSearchbar placeholder="Search Favorites" />
+  </IonToolbar>

-    <IonToolbar color="secondary">
-      <IonButtons slot="secondary">
-        <IonButton>
-          <IonIcon slot="icon-only" name="contact" />
-        </IonButton>
-        <IonButton>
-          <IonIcon slot="icon-only" name="search" />
-        </IonButton>
-      </IonButtons>
-      <IonButtons slot="primary">
-        <IonButton color="primary">
-          <IonIcon slot="icon-only" name="more" />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Secondary Toolbar</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonSegment>
+      <IonSegmentButton value="all" checked>
+        All
+      </IonSegmentButton>
+      <IonSegmentButton value="favorites">Favorites</IonSegmentButton>
+    </IonSegment>
+  </IonToolbar>

-    <IonToolbar color="dark">
-      <IonButtons slot="secondary">
-        <IonButton>
-          <IonIcon slot="icon-only" name="contact" />
-        </IonButton>
-        <IonButton>
-          <IonIcon slot="icon-only" name="search" />
-        </IonButton>
-      </IonButtons>
-      <IonButtons slot="primary">
-        <IonButton color="danger">
-          <IonIcon slot="icon-only" name="more" />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Dark Toolbar</IonTitle>
-    </IonToolbar>
-  </IonButton>
+  <IonToolbar color="secondary">
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="primary">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Secondary Toolbar</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar color="dark">
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="danger">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Dark Toolbar</IonTitle>
+  </IonToolbar>
 );
 ```

@@ -527,6 +545,13 @@ export const ToolbarExample: React.FC = () => (
    <ion-title>Back Button</ion-title>
  </ion-toolbar>

+  <ion-toolbar>
+    <ion-title size="small">Small Title above a Default Title</ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Default Title</ion-title>
+  </ion-toolbar>
+
  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button>
--- a/core/src/components/toolbar/toolbar.ios.scss
+++ b/core/src/components/toolbar/toolbar.ios.scss
@@ -34,6 +34,25 @@
 }


+// Toolbar: Searchbar
+// --------------------------------------------------
+
+:host(.toolbar-searchbar) .toolbar-container {
+  @include padding(0);
+}
+
+// TODO - important is needed because searchbar is scoped
+:host(.toolbar-searchbar) ::slotted(ion-searchbar) {
+  /* stylelint-disable */
+  height: 52px !important;
+
+  padding-top: 1px !important;
+  padding-right: 16px !important;
+  padding-bottom: 15px !important;
+  padding-left: 16px !important;
+  /* stylelint-enable */
+}
+
 // iOS Toolbar Slot Placement
 // --------------------------------------------------

--- a/core/src/components/toolbar/usage/angular.md
+++ b/core/src/components/toolbar/usage/angular.md
@@ -10,6 +10,13 @@
  <ion-title>Back Button</ion-title>
 </ion-toolbar>

+<ion-toolbar>
+  <ion-title size="small">Small Title above a Default Title</ion-title>
+</ion-toolbar>
+<ion-toolbar>
+  <ion-title>Default Title</ion-title>
+</ion-toolbar>
+
 <ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
--- a/core/src/components/toolbar/usage/javascript.md
+++ b/core/src/components/toolbar/usage/javascript.md
@@ -10,6 +10,13 @@
  <ion-title>Back Button</ion-title>
 </ion-toolbar>

+<ion-toolbar>
+  <ion-title size="small">Small Title above a Default Title</ion-title>
+</ion-toolbar>
+<ion-toolbar>
+  <ion-title>Default Title</ion-title>
+</ion-toolbar>
+
 <ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
--- a/core/src/components/toolbar/usage/react.md
+++ b/core/src/components/toolbar/usage/react.md
@@ -11,156 +11,160 @@ import {
  IonSearchbar,
  IonSegment,
  IonSegmentButton,
-  IonContent
 } from '@ionic/react';

 export const ToolbarExample: React.FC = () => (
-  <IonButton>
-    <IonToolbar>
-      <IonTitle>Title Only</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonTitle>Title Only</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="start">
-        <IonBackButton defaultHref="/" />
-      </IonButtons>
-      <IonTitle>Back Button</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="start">
+      <IonBackButton defaultHref="/" />
+    </IonButtons>
+    <IonTitle>Back Button</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="secondary">
-        <IonButton>
-          <IonIcon slot="icon-only" name="contact" />
-        </IonButton>
-        <IonButton>
-          <IonIcon slot="icon-only" name="search" />
-        </IonButton>
-      </IonButtons>
-      <IonButtons slot="primary">
-        <IonButton color="secondary">
-          <IonIcon slot="icon-only" name="more" />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Default Buttons</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonTitle size="small">Small Title above a Default Title</IonTitle>
+  </IonToolbar>
+  <IonToolbar>
+    <IonTitle>Default Title</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="secondary">
-        <IonButton fill="solid">
-          <IonIcon slot="start" name="contact" />
-          Contact
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Solid Buttons</IonTitle>
-      <IonButtons slot="primary">
-        <IonButton fill="solid" color="secondary">
-          Help
-          <IonIcon slot="end" name="help-circle" />
-        </IonButton>
-      </IonButtons>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="secondary">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Default Buttons</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="secondary">
-        <IonButton fill="outline">
-          <IonIcon slot="start" name="star" />
-          Star
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Outline Buttons</IonTitle>
-      <IonButtons slot="primary">
-        <IonButton color="danger" fill="outline">
-          Edit
-          <IonIcon slot="end" name="create" />
-        </IonButton>
-      </IonButtons>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton fill="solid">
+        <IonIcon slot="start" name="contact" />
+        Contact
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Solid Buttons</IonTitle>
+    <IonButtons slot="primary">
+      <IonButton fill="solid" color="secondary">
+        Help
+        <IonIcon slot="end" name="help-circle" />
+      </IonButton>
+    </IonButtons>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="secondary">
-        <IonButton>Account</IonButton>
-      </IonButtons>
-      <IonButtons slot="primary">
-        <IonButton color="danger">Edit</IonButton>
-      </IonButtons>
-      <IonTitle>Text Only Buttons</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton fill="outline">
+        <IonIcon slot="start" name="star" />
+        Star
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Outline Buttons</IonTitle>
+    <IonButtons slot="primary">
+      <IonButton color="danger" fill="outline">
+        Edit
+        <IonIcon slot="end" name="create" />
+      </IonButton>
+    </IonButtons>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="start">
-        <IonMenuButton autoHide={false} />
-      </IonButtons>
-      <IonButtons slot="secondary">
-        <IonButton>
-          <IonIcon slot="icon-only" name="star" />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Left side menu toggle</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="secondary">
+      <IonButton>Account</IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="danger">Edit</IonButton>
+    </IonButtons>
+    <IonTitle>Text Only Buttons</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="primary">
-        <IonButton onClick={() => {}}>
-          <IonIcon slot="icon-only" name="star" />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Right side menu toggle</IonTitle>
-      <IonButtons slot="end">
-        <IonMenuButton autoHide={false} />
-      </IonButtons>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="start">
+      <IonMenuButton autoHide={false} />
+    </IonButtons>
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="star" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Left side menu toggle</IonTitle>
+  </IonToolbar>

-    <IonToolbar>
-      <IonButtons slot="primary">
-        <IonButton onClick={() => {}}>
-          <IonIcon slot="icon-only" name="search" />
-        </IonButton>
-      </IonButtons>
-      <IonSearchbar placeholder="Search Favorites" />
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="primary">
+      <IonButton onClick={() => {}}>
+        <IonIcon slot="icon-only" name="star" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Right side menu toggle</IonTitle>
+    <IonButtons slot="end">
+      <IonMenuButton autoHide={false} />
+    </IonButtons>
+  </IonToolbar>

-    <IonToolbar>
-      <IonSegment>
-        <IonSegmentButton value="all" checked>
-          All
-        </IonSegmentButton>
-        <IonSegmentButton value="favorites">Favorites</IonSegmentButton>
-      </IonSegment>
-    </IonToolbar>
+  <IonToolbar>
+    <IonButtons slot="primary">
+      <IonButton onClick={() => {}}>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonSearchbar placeholder="Search Favorites" />
+  </IonToolbar>

-    <IonToolbar color="secondary">
-      <IonButtons slot="secondary">
-        <IonButton>
-          <IonIcon slot="icon-only" name="contact" />
-        </IonButton>
-        <IonButton>
-          <IonIcon slot="icon-only" name="search" />
-        </IonButton>
-      </IonButtons>
-      <IonButtons slot="primary">
-        <IonButton color="primary">
-          <IonIcon slot="icon-only" name="more" />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Secondary Toolbar</IonTitle>
-    </IonToolbar>
+  <IonToolbar>
+    <IonSegment>
+      <IonSegmentButton value="all" checked>
+        All
+      </IonSegmentButton>
+      <IonSegmentButton value="favorites">Favorites</IonSegmentButton>
+    </IonSegment>
+  </IonToolbar>

-    <IonToolbar color="dark">
-      <IonButtons slot="secondary">
-        <IonButton>
-          <IonIcon slot="icon-only" name="contact" />
-        </IonButton>
-        <IonButton>
-          <IonIcon slot="icon-only" name="search" />
-        </IonButton>
-      </IonButtons>
-      <IonButtons slot="primary">
-        <IonButton color="danger">
-          <IonIcon slot="icon-only" name="more" />
-        </IonButton>
-      </IonButtons>
-      <IonTitle>Dark Toolbar</IonTitle>
-    </IonToolbar>
-  </IonButton>
+  <IonToolbar color="secondary">
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="primary">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Secondary Toolbar</IonTitle>
+  </IonToolbar>
+
+  <IonToolbar color="dark">
+    <IonButtons slot="secondary">
+      <IonButton>
+        <IonIcon slot="icon-only" name="contact" />
+      </IonButton>
+      <IonButton>
+        <IonIcon slot="icon-only" name="search" />
+      </IonButton>
+    </IonButtons>
+    <IonButtons slot="primary">
+      <IonButton color="danger">
+        <IonIcon slot="icon-only" name="more" />
+      </IonButton>
+    </IonButtons>
+    <IonTitle>Dark Toolbar</IonTitle>
+  </IonToolbar>
 );
 ```
--- a/core/src/components/toolbar/usage/vue.md
+++ b/core/src/components/toolbar/usage/vue.md
@@ -11,6 +11,13 @@
    <ion-title>Back Button</ion-title>
  </ion-toolbar>

+  <ion-toolbar>
+    <ion-title size="small">Small Title above a Default Title</ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-title>Default Title</ion-title>
+  </ion-toolbar>
+
  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button>