feat(title): add support for small title

angular/src/directives/proxies.ts

@@ -709,12 +709,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']);
@@ -895,15 +894,15 @@ export class IonThumbnail {
 }
 
 export declare interface IonTitle extends Components.IonTitle {}
-@Component({ selector: 'ion-title', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color'] })
+@Component({ selector: 'ion-title', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'size'] })
 export class IonTitle {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
   }
 }
-proxyInputs(IonTitle, ['color']);
+proxyInputs(IonTitle, ['color', 'size']);
 
 export declare interface IonToggle extends Components.IonToggle {}
 @Component({ selector: 'ion-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value'] })

core/api.txt

@@ -989,7 +989,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
@@ -1204,6 +1203,7 @@ ion-thumbnail,css-prop,--size
 
 ion-title,shadow
 ion-title,prop,color,string | undefined,undefined,false,false
+ion-title,prop,size,"large" | "small" | undefined,undefined,false,false
 ion-title,css-prop,--color
 
 ion-toast,shadow

core/src/components.d.ts

@@ -2696,6 +2696,10 @@ export namespace Components {
     * 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).
     */
     'color'?: Color;
+    /**
+    * The size of the toolbar title.
+    */
+    'size'?: 'large' | 'small';
   }
   interface IonToast {
     /**
@@ -5557,10 +5561,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;
@@ -6012,6 +6012,10 @@ declare namespace LocalJSX {
     * 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).
     */
     'color'?: Color;
+    /**
+    * The size of the toolbar title.
+    */
+    'size'?: 'large' | 'small';
   }
   interface IonToast extends JSXBase.HTMLAttributes<HTMLIonToastElement> {
     /**

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: 14px;
+  font-size: 17px;
   font-weight: 400;
 
   contain: strict;

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;

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()`.

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

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

core/src/components/title/readme.md

@@ -25,9 +25,10 @@
 
 ## 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` |
+| 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

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

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>

core/src/components/title/title.scss

@@ -19,7 +19,7 @@
   color: var(--color);
 }
 
-:host(.title-ios) {
+:host(.title-ios.title-default) {
   @include position(0, null, null, 0);
   @include padding(0, 90px, 0);
 
@@ -33,8 +33,6 @@
   font-size: 17px;
   font-weight: 600;
 
-  letter-spacing: -.03em;
-
   text-align: center;
   box-sizing: border-box;
   pointer-events: none;
@@ -64,4 +62,38 @@
 
   overflow: hidden;
   pointer-events: auto;
+}
+
+// Small Title
+// --------------------------------------------------
+
+:host(.title-small) .toolbar-title {
+  white-space: normal;
+}
+
+// iOS Small Title
+// --------------------------------------------------
+
+:host(.title-ios.title-small) {
+  @include padding(6px, 9px, 16px, 9px);
+
+  width: 100%;
+  height: 100%;
+
+  font-size: 13px;
+
+  text-align: center;
+}
+
+
+// Material Design Small Title
+// --------------------------------------------------
+
+:host(.title-md.title-small) {
+  width: 100%;
+  height: 100%;
+
+  font-size: 15px;
+
+  font-weight: normal;
 }