Skip to content
Permalink
Browse files

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

Updates title to include `small` size and updates searchbar and UI to match native.

closes #18898
  • Loading branch information...
brandyscarney committed Sep 5, 2019
1 parent ff2aaad commit e27962dcaf98bfb1f4c026df5a8c525ee3773261
@@ -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']);
@@ -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
@@ -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> {
/**
@@ -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;
@@ -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;
@@ -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()`.
@@ -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>` |


----------------------------------------------
@@ -58,6 +58,7 @@ export class Segment implements ComponentInterface {

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

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

0 comments on commit e27962d

Please sign in to comment.
You can’t perform that action at this time.