Skip to content

Commit e27962d

Browse files
brandyscarneybrandyscarney
authored
feat(title): add support for small title (ionic-team#19215)
Updates title to include `small` size and updates searchbar and UI to match native. closes ionic-team#18898
1 parent ff2aaad commit e27962d

File tree

24 files changed

+668
-325
lines changed

24 files changed

+668
-325
lines changed

‎angular/src/directives/proxies.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -710,12 +710,11 @@ export declare interface IonSegment extends Components.IonSegment {}
710710
@Component({ selector: 'ion-segment', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'disabled', 'mode', 'scrollable', 'value'] })
711711
export class IonSegment {
712712
ionChange!: EventEmitter<CustomEvent>;
713-
ionStyle!: EventEmitter<CustomEvent>;
714713
protected el: HTMLElement;
715714
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
716715
c.detach();
717716
this.el = r.nativeElement;
718-
proxyOutputs(this, this.el, ['ionChange', 'ionStyle']);
717+
proxyOutputs(this, this.el, ['ionChange']);
719718
}
720719
}
721720
proxyInputs(IonSegment, ['color', 'disabled', 'mode', 'scrollable', 'value']);

‎core/api.txt‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -991,7 +991,6 @@ ion-segment,prop,mode,"ios" | "md",undefined,false,false
991991
ion-segment,prop,scrollable,boolean,false,false,false
992992
ion-segment,prop,value,null | string | undefined,undefined,false,false
993993
ion-segment,event,ionChange,SegmentChangeEventDetail,true
994-
ion-segment,event,ionStyle,StyleEventDetail,true
995994

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

12071206
ion-title,shadow
12081207
ion-title,prop,color,string | undefined,undefined,false,false
1209-
ion-title,prop,size,"large" | undefined,undefined,false,false
1208+
ion-title,prop,size,"large" | "small" | undefined,undefined,false,false
12101209
ion-title,css-prop,--color
12111210

12121211
ion-toast,shadow

‎core/src/components.d.ts‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2706,9 +2706,9 @@ export namespace Components {
27062706
*/
27072707
'color'?: Color;
27082708
/**
2709-
* The size of the toolbar title. Only applies in `ios` mode.
2709+
* The size of the toolbar title.
27102710
*/
2711-
'size'?: 'large' | undefined;
2711+
'size'?: 'large' | 'small';
27122712
}
27132713
interface IonToast {
27142714
/**
@@ -5579,10 +5579,6 @@ declare namespace LocalJSX {
55795579
*/
55805580
'onIonChange'?: (event: CustomEvent<SegmentChangeEventDetail>) => void;
55815581
/**
5582-
* Emitted when the styles change.
5583-
*/
5584-
'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
5585-
/**
55865582
* If `true`, the segment buttons will overflow and the user can swipe to see them.
55875583
*/
55885584
'scrollable'?: boolean;
@@ -6035,9 +6031,9 @@ declare namespace LocalJSX {
60356031
*/
60366032
'color'?: Color;
60376033
/**
6038-
* The size of the toolbar title. Only applies in `ios` mode.
6034+
* The size of the toolbar title.
60396035
*/
6040-
'size'?: 'large' | undefined;
6036+
'size'?: 'large' | 'small';
60416037
}
60426038
interface IonToast extends JSXBase.HTMLAttributes<HTMLIonToastElement> {
60436039
/**

‎core/src/components/searchbar/searchbar.ios.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

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

3535
position: absolute;
3636

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

5151
height: 100%;
5252

53-
font-size: 16px;
53+
font-size: 17px;
5454
font-weight: 400;
5555

5656
contain: strict;

‎core/src/components/searchbar/searchbar.ios.vars.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ $searchbar-ios-cancel-button-color: ion-color(primary, base) !defa
2525
$searchbar-ios-cancel-button-background-color: transparent !default;
2626

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

3030
/// @prop - Color of the searchbar input search icon
3131
$searchbar-ios-input-search-icon-color: $text-color-step-400 !default;

‎core/src/components/searchbar/searchbar.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
22

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

161+
/**
162+
* Emitted when the styles change.
163+
* @internal
164+
*/
165+
@Event() ionStyle!: EventEmitter<StyleEventDetail>;
166+
161167
@Watch('value')
162168
protected valueChanged() {
163169
const inputEl = this.nativeInput;
@@ -176,6 +182,10 @@ export class Searchbar implements ComponentInterface {
176182
});
177183
}
178184

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

206+
private emitStyle() {
207+
this.ionStyle.emit({
208+
'searchbar': true
209+
});
210+
}
211+
196212
/**
197213
* Sets focus on the specified `ion-searchbar`. Use this method instead of the global
198214
* `input.focus()`.

‎core/src/components/segment/readme.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -452,7 +452,6 @@ export const SegmentExample: React.FC = () => (
452452
| Event | Description | Type |
453453
| ----------- | -------------------------------------------- | --------------------------------------- |
454454
| `ionChange` | Emitted when the value property has changed. | `CustomEvent<SegmentChangeEventDetail>` |
455-
| `ionStyle` | Emitted when the styles change. | `CustomEvent<StyleEventDetail>` |
456455

457456

458457
----------------------------------------------

‎core/src/components/segment/segment.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export class Segment implements ComponentInterface {
5858

5959
/**
6060
* Emitted when the styles change.
61+
* @internal
6162
*/
6263
@Event() ionStyle!: EventEmitter<StyleEventDetail>;
6364

‎core/src/components/title/readme.md‎

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,73 @@
99

1010
## Usage
1111

12-
### Javascript
12+
### Angular / javascript
1313

1414
```html
15-
<ion-header>
15+
<!-- Default title -->
16+
<ion-toolbar>
17+
<ion-title>Default Title</ion-title>
18+
</ion-toolbar>
19+
20+
<!-- Small title above a default title -->
21+
<ion-toolbar>
22+
<ion-title size="small">Small Title above a Default Title</ion-title>
23+
</ion-toolbar>
24+
<ion-toolbar>
25+
<ion-title>Default Title</ion-title>
26+
</ion-toolbar>
27+
```
28+
29+
30+
### React
31+
32+
```tsx
33+
import React from 'react';
34+
import {
35+
IonToolbar,
36+
IonTitle
37+
} from '@ionic/react';
38+
39+
export const ToolbarExample: React.FC = () => (
40+
<IonToolbar>
41+
<IonTitle>Default Title</IonTitle>
42+
</IonToolbar>
43+
44+
<IonToolbar>
45+
<IonTitle size="small">Small Title above a Default Title</IonTitle>
46+
</IonToolbar>
47+
<IonToolbar>
48+
<IonTitle>Default Title</IonTitle>
49+
</IonToolbar>
50+
);
51+
```
1652

53+
54+
### Vue
55+
56+
```html
57+
<template>
1758
<ion-toolbar>
18-
<ion-title>Settings</ion-title>
59+
<ion-title>Default Title</ion-title>
1960
</ion-toolbar>
2061

21-
</ion-header>
62+
<ion-toolbar>
63+
<ion-title size="small">Small Title above a Default Title</ion-title>
64+
</ion-toolbar>
65+
<ion-toolbar>
66+
<ion-title>Default Title</ion-title>
67+
</ion-toolbar>
68+
</template>
2269
```
2370

2471

2572

2673
## Properties
2774

28-
| Property | Attribute | Description | Type | Default |
29-
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
30-
| `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` |
31-
| `size` | `size` | The size of the toolbar title. Only applies in `ios` mode. | `"large" \| undefined` | `undefined` |
75+
| Property | Attribute | Description | Type | Default |
76+
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
77+
| `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` |
78+
| `size` | `size` | The size of the toolbar title. | `"large" \| "small" \| undefined` | `undefined` |
3279

3380

3481
## CSS Custom Properties

‎core/src/components/title/test/scenarios/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
const titles = document.querySelectorAll('ion-title[size]');
8080
function toggle() {
8181
for (title of titles) {
82-
const size = title.size === 'large' ? 'standard' : 'large';
82+
const size = title.size === 'large' ? undefined : 'large';
8383
title.size = size;
8484
}
8585
}

0 commit comments

Comments
 (0)