javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 17:42:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ionicons): update to ionicons v5 (#19670)

Browse Source 
* refactor(ionicons): update to ionicons v5

* refactor(back-button): update back button icon to v5 ionicons

* refactor(item): update default detail icon to chevron-forward

* refactor(reorder): update reorder icon for ionicons v5

* refactor(searchbar): use search-sharp

* refactor(searchIcon): update v5 ionicon

* refactor(clearIcon): update searchbar clear icon

* refactor(cancelButton): update to arrow-back-sharp

* refactor(menuIcon): update to v5 ionicons

* api readme updates

* update react and vue ionicons

* add ionicons to react deps

* add ionicons to ionic/vue deps

* add icon to react test

* updates

* fix back button regression for no icon

* update tests

* fix more tests

* fix more icons

* update ionicons version

* fix circle icons

* add correct ellipsis
This commit is contained in:
Adam Bradley
2019-11-20 08:53:32 -06:00
committed by Liam DeBeasi
parent 5bbb95fae1
commit 69e10de718
34 changed files with 1652 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/api.txt
View File

@ -465,7 +465,7 @@ ion-item,shadow
ion-item,prop,button,boolean,false,false,false ion-item,prop,button,boolean,false,false,false
ion-item,prop,color,string | undefined,undefined,false,false ion-item,prop,color,string | undefined,undefined,false,false
ion-item,prop,detail,boolean | undefined,undefined,false,false ion-item,prop,detail,boolean | undefined,undefined,false,false
ion-item,prop,detailIcon,string,'ios-arrow-forward',false,false ion-item,prop,detailIcon,string,'chevron-forward',false,false
ion-item,prop,disabled,boolean,false,false,false ion-item,prop,disabled,boolean,false,false,false
ion-item,prop,download,string | undefined,undefined,false,false ion-item,prop,download,string | undefined,undefined,false,false
ion-item,prop,href,string | undefined,undefined,false,false ion-item,prop,href,string | undefined,undefined,false,false
@ -947,7 +947,7 @@ ion-searchbar,scoped
ion-searchbar,prop,animated,boolean,false,false,false ion-searchbar,prop,animated,boolean,false,false,false
ion-searchbar,prop,autocomplete,"off" | "on",'off',false,false ion-searchbar,prop,autocomplete,"off" | "on",'off',false,false
ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'md-arrow-back') as string,false,false ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'arrow-back-sharp') as string,false,false
ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
ion-searchbar,prop,color,string | undefined,undefined,false,false ion-searchbar,prop,color,string | undefined,undefined,false,false
@ -956,7 +956,7 @@ ion-searchbar,prop,disabled,boolean,false,false,false
ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url",'search',false,false ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url",'search',false,false
ion-searchbar,prop,mode,"ios" | "md",undefined,false,false ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
ion-searchbar,prop,placeholder,string,'Search',false,false ion-searchbar,prop,placeholder,string,'Search',false,false
ion-searchbar,prop,searchIcon,string,'search',false,false ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false
ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
ion-searchbar,prop,spellcheck,boolean,false,false,false ion-searchbar,prop,spellcheck,boolean,false,false,false
ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false

2
core/package.json
View File

@ -30,7 +30,7 @@
"loader/" "loader/"
], ],
"dependencies": { "dependencies": {
"ionicons": "^4.6.3", "ionicons": "^5.0.0-12",
"tslib": "^1.10.0" "tslib": "^1.10.0"
}, },
"devDependencies": { "devDependencies": {

14
core/src/components.d.ts vendored
View File

@ -2141,7 +2141,7 @@ export namespace Components {
*/ */
'autocorrect': 'on' | 'off'; 'autocorrect': 'on' | 'off';
/** /**
* Set the cancel button icon. Only applies to `md` mode. * Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`.
*/ */
'cancelButtonIcon': string; 'cancelButtonIcon': string;
/** /**
@ -2149,7 +2149,7 @@ export namespace Components {
*/ */
'cancelButtonText': string; 'cancelButtonText': string;
/** /**
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`.
*/ */
'clearIcon'?: string; 'clearIcon'?: string;
/** /**
@ -2181,9 +2181,9 @@ export namespace Components {
*/ */
'placeholder': string; 'placeholder': string;
/** /**
* The icon to use as the search icon. * The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode.
*/ */
'searchIcon': string; 'searchIcon'?: string;
/** /**
* Sets focus on the specified `ion-searchbar`. Use this method instead of the global `input.focus()`. * Sets focus on the specified `ion-searchbar`. Use this method instead of the global `input.focus()`.
*/ */
@ -5370,7 +5370,7 @@ declare namespace LocalJSX {
*/ */
'autocorrect'?: 'on' | 'off'; 'autocorrect'?: 'on' | 'off';
/** /**
* Set the cancel button icon. Only applies to `md` mode. * Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`.
*/ */
'cancelButtonIcon'?: string; 'cancelButtonIcon'?: string;
/** /**
@ -5378,7 +5378,7 @@ declare namespace LocalJSX {
*/ */
'cancelButtonText'?: string; 'cancelButtonText'?: string;
/** /**
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`.
*/ */
'clearIcon'?: string; 'clearIcon'?: string;
/** /**
@ -5430,7 +5430,7 @@ declare namespace LocalJSX {
*/ */
'placeholder'?: string; 'placeholder'?: string;
/** /**
* The icon to use as the search icon. * The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode.
*/ */
'searchIcon'?: string; 'searchIcon'?: string;
/** /**

4
core/src/components/action-sheet/test/basic/index.html
View File

@ -79,7 +79,7 @@
} }
}, { }, {
text: 'Play (open modal)', text: 'Play (open modal)',
icon: 'arrow-dropright-circle', icon: 'chevron-forward-circle',
handler: () => { handler: () => {
console.log('Play clicked'); console.log('Play clicked');
} }
@ -221,7 +221,7 @@
} }
}, { }, {
text: 'Play (open modal)', text: 'Play (open modal)',
icon: 'arrow-dropright-circle', icon: 'chevron-forward-circle',
handler: () => { handler: () => {
console.log('Play clicked'); console.log('Play clicked');
} }

4
core/src/components/action-sheet/test/standalone/index.html
View File

@ -55,7 +55,7 @@
} }
}, { }, {
text: 'Play (open modal)', text: 'Play (open modal)',
icon: 'arrow-dropright-circle', icon: 'chevron-forward-circle',
handler: () => { handler: () => {
console.log('Play clicked'); console.log('Play clicked');
} }
@ -98,7 +98,7 @@
} }
}, { }, {
text: 'Play (open modal)', text: 'Play (open modal)',
icon: 'arrow-dropright-circle', icon: 'chevron-forward-circle',
handler: () => { handler: () => {
console.log('Play clicked'); console.log('Play clicked');
} }

2
core/src/components/action-sheet/test/translucent/index.html
View File

@ -68,7 +68,7 @@
} }
}, { }, {
text: 'Play (open modal)', text: 'Play (open modal)',
icon: 'arrow-dropright-circle', icon: 'chevron-forward-circle',
handler: () => { handler: () => {
console.log('Play clicked'); console.log('Play clicked');
} }

24
core/src/components/back-button/back-button.tsx
View File

@ -19,7 +19,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
}) })
export class BackButton implements ComponentInterface, ButtonInterface { export class BackButton implements ComponentInterface, ButtonInterface {
private mode = getIonMode(this); mode = getIonMode(this);
@Element() el!: HTMLElement; @Element() el!: HTMLElement;
/** /**
@ -54,20 +54,32 @@ export class BackButton implements ComponentInterface, ButtonInterface {
*/ */
@Prop() type: 'submit' | 'reset' | 'button' = 'button'; @Prop() type: 'submit' | 'reset' | 'button' = 'button';
private get backButtonIcon() { get backButtonIcon() {
return this.icon != null ? this.icon : config.get('backButtonIcon', 'arrow-back'); const icon = this.icon;
if (icon != null) {
// icon is set on the component or by the config
return icon;
} }
private get backButtonText() { if (this.mode === 'ios') {
// default ios back button icon
return config.get('backButtonIcon', 'chevron-back');
}
// default md back button icon
return config.get('backButtonIcon', 'arrow-back-sharp');
}
get backButtonText() {
const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null; const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText); return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
} }
private get hasIconOnly() { get hasIconOnly() {
return this.backButtonIcon && !this.backButtonText; return this.backButtonIcon && !this.backButtonText;
} }
private get rippleType() { get rippleType() {
// If the button only has an icon we use the unbounded // If the button only has an icon we use the unbounded
// "circular" ripple effect // "circular" ripple effect
if (this.hasIconOnly) { if (this.hasIconOnly) {

59
core/src/components/back-button/test/back-button.spec.ts Normal file
View File

@ -0,0 +1,59 @@
import { BackButton } from "../back-button";
import { config } from "../../../global/config";
describe('back button', () => {
let bb: BackButton;
beforeEach(() => {
config.reset({});
bb = new BackButton();
});
describe('backButtonIcon', () => {
it('set custom icon on the instance, override config', () => {
bb.icon = 'custom-icon-instance';
config.reset({
backButtonIcon: 'custom-icon-config'
});
expect(bb.backButtonIcon).toBe('custom-icon-instance');
});
it('set custom icon in the config', () => {
config.reset({
backButtonIcon: 'custom-icon-config'
});
expect(bb.backButtonIcon).toBe('custom-icon-config');
});
it('set custom icon on the instance', () => {
bb.icon = 'custom-icon-instance';
expect(bb.backButtonIcon).toBe('custom-icon-instance');
});
it('default icon for ios mode', () => {
bb.mode = 'ios';
expect(bb.backButtonIcon).toBe('chevron-back');
});
it('default icon', () => {
expect(bb.backButtonIcon).toBe('arrow-back-sharp');
});
});
describe('backButtonText', () => {
it('default text for ios mode', () => {
bb.mode = 'ios';
expect(bb.backButtonText).toBe('Back');
});
it('default text', () => {
expect(bb.backButtonText).toBe(null);
});
});
});

24
core/src/components/button/test/toolbar/index.html
View File

@ -32,7 +32,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -83,7 +83,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -100,7 +100,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button class="activated"> <ion-button class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button class="activated"> <ion-button class="activated">
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -117,10 +117,10 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="solid"> <ion-button fill="solid">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button fill="solid"> <ion-button fill="solid">
<ion-icon name="contact" slot="start"></ion-icon> <ion-icon name="person-circle" slot="start"></ion-icon>
Solid Solid
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -136,10 +136,10 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="solid" class="activated"> <ion-button fill="solid" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button fill="solid" class="activated"> <ion-button fill="solid" class="activated">
<ion-icon name="contact" slot="start"></ion-icon> <ion-icon name="person-circle" slot="start"></ion-icon>
Solid Solid
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -155,7 +155,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="outline"> <ion-button fill="outline">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button fill="outline"> <ion-button fill="outline">
<ion-icon name="star" slot="start"></ion-icon> <ion-icon name="star" slot="start"></ion-icon>
@ -164,7 +164,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary" fill="outline"> <ion-button color="secondary" fill="outline">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Outline</ion-title> <ion-title>Outline</ion-title>
@ -173,7 +173,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="outline" class="activated"> <ion-button fill="outline" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button fill="outline" class="activated"> <ion-button fill="outline" class="activated">
<ion-icon name="star" slot="start"></ion-icon> <ion-icon name="star" slot="start"></ion-icon>
@ -182,7 +182,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary" fill="outline" class="activated"> <ion-button color="secondary" fill="outline" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Outline.activated</ion-title> <ion-title>Outline.activated</ion-title>
@ -191,7 +191,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <ion-button>
<ion-icon name="contact" slot="start"></ion-icon> <ion-icon name="person-circle" slot="start"></ion-icon>
Clear Clear
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>

8
core/src/components/fab/test/basic/index.html
View File

@ -50,7 +50,7 @@
<ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed"> <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight" disabled> <ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight" disabled>
<ion-icon name="arrow-dropleft"></ion-icon> <ion-icon name="arrow-back-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
<ion-fab-list side="start"> <ion-fab-list side="start">
<ion-fab-button onclick="openSocial('facebook', 'fab2')"> <ion-fab-button onclick="openSocial('facebook', 'fab2')">
@ -70,7 +70,7 @@
<ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed"> <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"> <ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft">
<ion-icon name="arrow-dropright"></ion-icon> <ion-icon name="arrow-forward-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
<ion-fab-list side="end"> <ion-fab-list side="end">
<ion-fab-button onclick="openSocial('facebook', 'fab3')"> <ion-fab-button onclick="openSocial('facebook', 'fab3')">
@ -90,7 +90,7 @@
<ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed"> <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"> <ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft">
<ion-icon name="arrow-dropup"></ion-icon> <ion-icon name="arrow-up-circle"></ion-icon>
</ion-fab-button> </ion-fab-button>
<ion-fab-list side="top"> <ion-fab-list side="top">
<ion-fab-button onclick="openSocial('facebook', 'fab4')"> <ion-fab-button onclick="openSocial('facebook', 'fab4')">
@ -110,7 +110,7 @@
<ion-fab vertical="center" horizontal="center" id="fab5" slot="fixed"> <ion-fab vertical="center" horizontal="center" id="fab5" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab5')" class="e2eFabCenter"> <ion-fab-button onclick="clickMainFAB('fab5')" class="e2eFabCenter">
<ion-icon name="md-share"></ion-icon> <ion-icon name="share"></ion-icon>
</ion-fab-button> </ion-fab-button>
<ion-fab-list side="top"> <ion-fab-list side="top">
<ion-fab-button onclick="openSocial('vimeo', 'fab5')" color="primary"> <ion-fab-button onclick="openSocial('vimeo', 'fab5')" color="primary">

8
core/src/components/fab/test/translucent/index.html
View File

@ -48,7 +48,7 @@
</ion-fab> </ion-fab>
<ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed"> <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
<ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button> <ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-back-circle"></ion-icon></ion-fab-button>
<ion-fab-list side="start"> <ion-fab-list side="start">
<ion-fab-button translucent onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button> <ion-fab-button translucent onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button> <ion-fab-button translucent onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
@ -58,7 +58,7 @@
</ion-fab> </ion-fab>
<ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed"> <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
<ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button> <ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-forward-circle"></ion-icon></ion-fab-button>
<ion-fab-list side="end"> <ion-fab-list side="end">
<ion-fab-button translucent onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button> <ion-fab-button translucent onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button> <ion-fab-button translucent onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
@ -68,7 +68,7 @@
</ion-fab> </ion-fab>
<ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed"> <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
<ion-fab-button translucent onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button> <ion-fab-button translucent onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-up-circle"></ion-icon></ion-fab-button>
<ion-fab-list side="top"> <ion-fab-list side="top">
<ion-fab-button translucent onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button> <ion-fab-button translucent onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button translucent onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button> <ion-fab-button translucent onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
@ -78,7 +78,7 @@
</ion-fab> </ion-fab>
<ion-fab horizontal="center" vertical="center" id="fab5" slot="fixed"> <ion-fab horizontal="center" vertical="center" id="fab5" slot="fixed">
<ion-fab-button translucent onclick="clickMainFAB('fab5')" class="e2eFabCenter"><ion-icon name="md-share"></ion-icon></ion-fab-button> <ion-fab-button translucent onclick="clickMainFAB('fab5')" class="e2eFabCenter"><ion-icon name="share"></ion-icon></ion-fab-button>
<ion-fab-list side="top"> <ion-fab-list side="top">
<ion-fab-button translucent onclick="openSocial('vimeo', 'fab5')" color="primary"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button> <ion-fab-button translucent onclick="openSocial('vimeo', 'fab5')" color="primary"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
</ion-fab-list> </ion-fab-list>

10
core/src/components/icon/readme.md
View File

@ -4,9 +4,15 @@
Icons can be used on their own as a standalone component, or inside of another component. Icons can be used on their own as a standalone component, or inside of another component.
Ionicons provide platform continuity out of the box in Ionic by rendering a different icon based on the device the app is running on. For example, by setting the icon `name` to `alarm` the icon will automatically use the `ios-alarm` on an iOS device, and the `md-alarm` for any device running Material Design. This allows the developer to write the markup once while Ionic handles displaying the appropriate icon based on the mode. By default, Ionicons will use the same icon for each platform (iOS or Material Design). In previous versions of Ionicons, icons would automatically update based on the platform. As of Ionicons 5.0, apps will have to handle this on a per-icon basis, if needed.
For a full list of available icons and more usage explanations, check out the [Ionicons documentation](https://ionicons.com/). To use different icons depending on platform, set the `ios` and `md` properties or attributes. In the example below, when the app has the `ios` mode applied, it'll show the `logo-apple` icon. When using `md`, it'll show the `logo-android` icon.
```
<ion-icon ios="logo-apple" md="logo-android"></ion-icon>
```
For a full list of available icons and more usage explanations, please check out the [Ionicons documentation](https://ionicons.com/).
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

62
core/src/components/icon/test/basic/index.html
View File

@ -50,55 +50,19 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-icon name="md-home" slot="start"></ion-icon> <ion-icon name="STAR" slot="end"></ion-icon>
<ion-label> <ion-label>
<code> <code>
name="md-home" name="STAR"
</code> </code>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-icon name="ios-home" slot="start"></ion-icon> <ion-icon icon="home" color="primary" slot="start"></ion-icon>
<ion-label> <ion-label>
<code> <code>
name="ios-home" icon="home"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="ios-home" slot="end"></ion-icon>
<ion-label>
<code>
name="ios-home"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="ios-star-outline" slot="start"></ion-icon>
<ion-label>
<code>
name="ios-star-outline"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="IOS-STAR-OUTLINE" slot="end"></ion-icon>
<ion-label>
<code>
name="IOS-STAR-OUTLINE"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="md-home" color="primary" slot="start"></ion-icon>
<ion-label>
<code>
name="md-home"
</code> </code>
</ion-label> </ion-label>
</ion-item> </ion-item>
@ -130,24 +94,6 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item>
<ion-icon ios="ios-color-filter" md="md-color-filter" slot="start"></ion-icon>
<ion-label>
<code>
ios="ios-color-filter" md="md-color-filter"
</code>
</ion-label>
</ion-item>
<ion-item>
<ion-icon ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER" slot="start"></ion-icon>
<ion-label>
<code>
ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER"
</code>
</ion-label>
</ion-item>
<ion-item> <ion-item>
<ion-icon slot="start"></ion-icon> <ion-icon slot="start"></ion-icon>
<ion-label> <ion-label>

16
core/src/components/icon/test/dir/index.html
View File

@ -51,25 +51,17 @@
<ion-grid> <ion-grid>
<ion-row class="ion-align-items-center"> <ion-row class="ion-align-items-center">
<ion-col size="auto"><code>null</code></ion-col> <ion-col size="auto"><code>null</code></ion-col>
<ion-col><ion-icon name="arrow-dropright"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropright-circle"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-round-forward"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-forward-circle"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropleft"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropleft-circle"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-round-back"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-back-circle"></ion-icon></ion-col>
</ion-row> </ion-row>
<ion-row class="ion-align-items-center"> <ion-row class="ion-align-items-center">
<ion-col size="auto"><code>false</code></ion-col> <ion-col size="auto"><code>false</code></ion-col>
<ion-col><ion-icon name="arrow-dropright" flip-rtl="false"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropright-circle" flip-rtl="false"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-forward" flip-rtl="false"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-forward" flip-rtl="false"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-round-forward" flip-rtl="false"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-forward-circle" flip-rtl="false"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropleft" flip-rtl="false"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropleft-circle" flip-rtl="false"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-back" flip-rtl="false"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-back" flip-rtl="false"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-round-back" flip-rtl="false"></ion-icon></ion-col> <ion-col><ion-icon name="arrow-back-circle" flip-rtl="false"></ion-icon></ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>

33
core/src/components/icon/test/items/index.html
View File

@ -56,30 +56,16 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-icon name="md-home" is-active="true" slot="start"></ion-icon> <ion-icon name="home" is-active="true" slot="start"></ion-icon>
<code> <code>
name="md-home" is-active="true" name="home" is-active="true"
</code> </code>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-icon name="ios-home" is-active="true" slot="start"></ion-icon> <ion-icon name="home" color="primary" slot="start"></ion-icon>
<code> <code>
name="ios-home" is-active="true" name="home"
</code>
</ion-item>
<ion-item>
<ion-icon name="ios-home" slot="start"></ion-icon>
<code>
name="ios-home"
</code>
</ion-item>
<ion-item>
<ion-icon name="md-home" color="primary" slot="start"></ion-icon>
<code>
name="md-home"
</code> </code>
</ion-item> </ion-item>
@ -98,16 +84,9 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-icon ios="md-color-filter" md="ios-color-filter" slot="start"></ion-icon> <ion-icon ios="logo-apple" md="logo-android" slot="start" id-active="false"></ion-icon>
<code> <code>
ios="md-color-filter" md="ios-color-filter" ios="logo-apple" md="logo-android" is-active="false"
</code>
</ion-item>
<ion-item>
<ion-icon ios="md-color-filter" md="ios-color-filter" is-active="false" slot="start"></ion-icon>
<code>
ios="md-color-filter" md="ios-color-filter" is-active="false"
</code> </code>
</ion-item> </ion-item>

11
core/src/components/icon/test/standalone/index.html
View File

@ -20,12 +20,12 @@
<ion-icon name="happy" color="warning"></ion-icon> <ion-icon name="happy" color="warning"></ion-icon>
<ion-icon name="people"></ion-icon> <ion-icon name="people"></ion-icon>
<ion-icon name="person" color="tertiary"></ion-icon> <ion-icon name="person" color="tertiary"></ion-icon>
<ion-icon name="contact"></ion-icon> <ion-icon name="person-circle"></ion-icon>
<ion-icon name="apps"></ion-icon> <ion-icon name="apps"></ion-icon>
<ion-icon name="lock"></ion-icon> <ion-icon name="lock-closed"></ion-icon>
<ion-icon name="key" color="success"></ion-icon> <ion-icon name="key" color="success"></ion-icon>
<ion-icon name="unlock"></ion-icon> <ion-icon name="lock-open"></ion-icon>
<ion-icon name="map" color="secondary"></ion-icon> <ion-icon name="map" color="secondary"></ion-icon>
<ion-icon name="navigate"></ion-icon> <ion-icon name="navigate"></ion-icon>
@ -35,7 +35,6 @@
<ion-icon name="mic"></ion-icon> <ion-icon name="mic"></ion-icon>
<ion-icon name="musical-notes" color="warning"></ion-icon> <ion-icon name="musical-notes" color="warning"></ion-icon>
<ion-icon name="volume-high"></ion-icon> <ion-icon name="volume-high"></ion-icon>
<ion-icon name="microphone" color="tertiary"></ion-icon>
<ion-icon name="cafe" color="success"></ion-icon> <ion-icon name="cafe" color="success"></ion-icon>
<ion-icon name="calculator"></ion-icon> <ion-icon name="calculator"></ion-icon>
@ -47,9 +46,9 @@
<ion-icon name="star" color="success"></ion-icon> <ion-icon name="star" color="success"></ion-icon>
<ion-icon name="pin"></ion-icon> <ion-icon name="pin"></ion-icon>
<ion-icon name="arrow-dropup-circle" color="warning"></ion-icon> <ion-icon name="arrow-up-circle" color="warning"></ion-icon>
<ion-icon name="arrow-back"></ion-icon> <ion-icon name="arrow-back"></ion-icon>
<ion-icon name="arrow-dropdown"></ion-icon> <ion-icon name="arrow-down-circle"></ion-icon>
<ion-icon name="arrow-forward"></ion-icon> <ion-icon name="arrow-forward"></ion-icon>
<ion-icon name="cloud"></ion-icon> <ion-icon name="cloud"></ion-icon>

8
core/src/components/item-sliding/test/standalone/index.html
View File

@ -86,7 +86,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <ion-item-option color="primary">
<ion-icon slot="start" name="more"></ion-icon> <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
More More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -105,7 +105,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <ion-item-option color="primary">
<ion-icon slot="end" name="more"></ion-icon> <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
More More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -124,7 +124,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <ion-item-option color="primary">
<ion-icon slot="top" name="more"></ion-icon> <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
More More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">
@ -143,7 +143,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<ion-item-option color="primary"> <ion-item-option color="primary">
<ion-icon slot="bottom" name="more"></ion-icon> <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
More More
</ion-item-option> </ion-item-option>
<ion-item-option color="secondary"> <ion-item-option color="secondary">

2
core/src/components/item/item.tsx
View File

@ -49,7 +49,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
/** /**
* The icon to use when `detail` is set to `true`. * The icon to use when `detail` is set to `true`.
*/ */
@Prop() detailIcon = 'ios-arrow-forward'; @Prop() detailIcon = 'chevron-forward';
/** /**
* If `true`, the user cannot interact with the item. * If `true`, the user cannot interact with the item.

4
core/src/components/item/readme.md
View File

@ -1365,11 +1365,11 @@ Item Inputs
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------- | | ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------------- |
| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. | `boolean` | `false` | | `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. | `boolean` | `false` |
| `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` | | `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` |
| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present. | `boolean \| undefined` | `undefined` | | `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present. | `boolean \| undefined` | `undefined` |
| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. | `string` | `'ios-arrow-forward'` | | `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. | `string` | `'chevron-forward'` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item. | `boolean` | `false` | | `disabled` | `disabled` | If `true`, the user cannot interact with the item. | `boolean` | `false` |
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` | | `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | | `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |

2
core/src/components/menu-button/menu-button.tsx
View File

@ -64,7 +64,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
render() { render() {
const { color, disabled } = this; const { color, disabled } = this;
const mode = getIonMode(this); const mode = getIonMode(this);
const menuIcon = config.get('menuIcon', 'menu'); const menuIcon = config.get('menuIcon', mode === 'ios' ? 'menu-outline' : 'menu-sharp');
const hidden = this.autoHide && !this.visible; const hidden = this.autoHide && !this.visible;
const attrs = { const attrs = {

6
core/src/components/reorder/reorder.tsx
View File

@ -19,10 +19,12 @@ export class Reorder implements ComponentInterface {
} }
render() { render() {
const mode = getIonMode(this);
const reorderIcon = mode === 'ios' ? 'reorder-three-outline' : 'reorder-two-sharp';
return ( return (
<Host class={getIonMode(this)}> <Host class={mode}>
<slot> <slot>
<ion-icon name="reorder" lazy={false} class="reorder-icon" /> <ion-icon name={reorderIcon} lazy={false} class="reorder-icon" />
</slot> </slot>
</Host> </Host>
); );

8
core/src/components/searchbar/readme.md
View File

@ -220,20 +220,20 @@ export const SearchbarExample: React.FC = () => (
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------- | | ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` | | `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` |
| `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on"` | `'off'` | | `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on"` | `'off'` |
| `autocorrect` | `autocorrect` | Set the input's autocorrect property. | `"off" \| "on"` | `'off'` | | `autocorrect` | `autocorrect` | Set the input's autocorrect property. | `"off" \| "on"` | `'off'` |
| `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. | `string` | `config.get('backButtonIcon', 'md-arrow-back') as string` | | `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`. | `string` | `config.get('backButtonIcon', 'arrow-back-sharp') as string` |
| `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. | `string` | `'Cancel'` | | `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. | `string` | `'Cancel'` |
| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. | `string \| undefined` | `undefined` | | `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`. | `string \| undefined` | `undefined` |
| `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` | | `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` |
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` | | `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` | | `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `'search'` | | `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` | | `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` |
| `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` | | `searchIcon` | `search-icon` | The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode. | `string \| undefined` | `undefined` |
| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `"always" \| "focus" \| "never"` | `'never'` | | `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `"always" \| "focus" \| "never"` | `'never'` |
| `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` | | `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` |
| `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` | | `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |

14
core/src/components/searchbar/searchbar.tsx
View File

@ -53,8 +53,9 @@ export class Searchbar implements ComponentInterface {
/** /**
* Set the cancel button icon. Only applies to `md` mode. * Set the cancel button icon. Only applies to `md` mode.
* Defaults to `"arrow-back-sharp"`.
*/ */
@Prop() cancelButtonIcon = config.get('backButtonIcon', 'md-arrow-back') as string; @Prop() cancelButtonIcon = config.get('backButtonIcon', 'arrow-back-sharp') as string;
/** /**
* Set the the cancel button text. Only applies to `ios` mode. * Set the the cancel button text. Only applies to `ios` mode.
@ -62,7 +63,7 @@ export class Searchbar implements ComponentInterface {
@Prop() cancelButtonText = 'Cancel'; @Prop() cancelButtonText = 'Cancel';
/** /**
* Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`.
*/ */
@Prop() clearIcon?: string; @Prop() clearIcon?: string;
@ -100,9 +101,10 @@ export class Searchbar implements ComponentInterface {
@Prop() placeholder = 'Search'; @Prop() placeholder = 'Search';
/** /**
* The icon to use as the search icon. * The icon to use as the search icon. Defaults to `"search-outline"` in
* `ios` mode and `"search-sharp"` in `md` mode.
*/ */
@Prop() searchIcon = 'search'; @Prop() searchIcon?: string;
/** /**
* Sets the behavior for the cancel button. Defaults to `"never"`. * Sets the behavior for the cancel button. Defaults to `"never"`.
@ -412,8 +414,8 @@ export class Searchbar implements ComponentInterface {
render() { render() {
const animated = this.animated && config.getBoolean('animated', true); const animated = this.animated && config.getBoolean('animated', true);
const mode = getIonMode(this); const mode = getIonMode(this);
const clearIcon = this.clearIcon || (mode === 'ios' ? 'ios-close-circle' : 'md-close'); const clearIcon = this.clearIcon || (mode === 'ios' ? 'close-circle' : 'close-sharp');
const searchIcon = this.searchIcon; const searchIcon = this.searchIcon || (mode === 'ios' ? 'search-outline' : 'search-sharp');
const cancelButton = (this.showCancelButton !== 'never') && ( const cancelButton = (this.showCancelButton !== 'never') && (
<button <button

14
core/src/components/tab-bar/test/custom/index.html
View File

@ -18,12 +18,12 @@
<ion-tab-bar selected-tab="1"> <ion-tab-bar selected-tab="1">
<ion-tab-button tab="1" disabled> <ion-tab-button tab="1" disabled>
<ion-icon name="clock"></ion-icon> <ion-icon name="book"></ion-icon>
<ion-label>Recents</ion-label> <ion-label>Recents</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="1"> <ion-tab-button tab="1">
<ion-icon name="clock"></ion-icon> <ion-icon name="book"></ion-icon>
<ion-label>Recents</ion-label> <ion-label>Recents</ion-label>
</ion-tab-button> </ion-tab-button>
@ -42,7 +42,7 @@
<!-- Custom Class --> <!-- Custom Class -->
<ion-tab-bar selected-tab="11" class="custom-tab-bar-color"> <ion-tab-bar selected-tab="11" class="custom-tab-bar-color">
<ion-tab-button tab="11"> <ion-tab-button tab="11">
<ion-icon name="clock"></ion-icon> <ion-icon name="book"></ion-icon>
<ion-label>Recents</ion-label> <ion-label>Recents</ion-label>
</ion-tab-button> </ion-tab-button>
@ -61,7 +61,7 @@
<!-- Color & Custom Class --> <!-- Color & Custom Class -->
<ion-tab-bar selected-tab="111" color="danger" class="custom-tab-bar-color"> <ion-tab-bar selected-tab="111" color="danger" class="custom-tab-bar-color">
<ion-tab-button tab="111"> <ion-tab-button tab="111">
<ion-icon name="clock"></ion-icon> <ion-icon name="book"></ion-icon>
<ion-label>Recents</ion-label> <ion-label>Recents</ion-label>
</ion-tab-button> </ion-tab-button>
@ -80,7 +80,7 @@
<!-- Custom Background Buttons --> <!-- Custom Background Buttons -->
<ion-tab-bar selected-tab="1111" class="custom-tab-button-bar"> <ion-tab-bar selected-tab="1111" class="custom-tab-button-bar">
<ion-tab-button tab="1111" class="custom-tab-button-background-red"> <ion-tab-button tab="1111" class="custom-tab-button-background-red">
<ion-icon name="clock"></ion-icon> <ion-icon name="book"></ion-icon>
<ion-label>Recents</ion-label> <ion-label>Recents</ion-label>
</ion-tab-button> </ion-tab-button>
@ -99,7 +99,7 @@
<!-- Custom Color Buttons --> <!-- Custom Color Buttons -->
<ion-tab-bar selected-tab="1111"> <ion-tab-bar selected-tab="1111">
<ion-tab-button tab="1111" class="custom-tab-button-color-red"> <ion-tab-button tab="1111" class="custom-tab-button-color-red">
<ion-icon name="clock"></ion-icon> <ion-icon name="book"></ion-icon>
<ion-label>Recents</ion-label> <ion-label>Recents</ion-label>
</ion-tab-button> </ion-tab-button>
@ -118,7 +118,7 @@
<!-- Custom All --> <!-- Custom All -->
<ion-tab-bar selected-tab="11111" class="custom-all"> <ion-tab-bar selected-tab="11111" class="custom-all">
<ion-tab-button tab="11111"> <ion-tab-button tab="11111">
<ion-icon name="clock"></ion-icon> <ion-icon name="book"></ion-icon>
<ion-label>Recents</ion-label> <ion-label>Recents</ion-label>
</ion-tab-button> </ion-tab-button>

8
core/src/components/tab-bar/test/scenarios/index.html
View File

@ -50,7 +50,7 @@
<ion-tab-bar color="secondary" selected-tab="1"> <ion-tab-bar color="secondary" selected-tab="1">
<ion-tab-button tab="1"> <ion-tab-button tab="1">
<ion-label>Location</ion-label> <ion-label>Location</ion-label>
<ion-icon name="navigate"></ion-icon> <ion-icon name="navigate-circle"></ion-icon>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="2"> <ion-tab-button tab="2">
@ -154,7 +154,7 @@
<ion-tab-bar color="secondary" selected-tab="1"> <ion-tab-bar color="secondary" selected-tab="1">
<ion-tab-button tab="1" layout="label-hide"> <ion-tab-button tab="1" layout="label-hide">
<ion-label>Recents</ion-label> <ion-label>Recents</ion-label>
<ion-icon name="navigate"></ion-icon> <ion-icon name="navigate-circle"></ion-icon>
<ion-badge>6</ion-badge> <ion-badge>6</ion-badge>
</ion-tab-button> </ion-tab-button>
@ -190,7 +190,7 @@
<ion-tab-bar selected-tab="1" class="custom-tabbar"> <ion-tab-bar selected-tab="1" class="custom-tabbar">
<ion-tab-button tab="1"> <ion-tab-button tab="1">
<ion-label>Location</ion-label> <ion-label>Location</ion-label>
<ion-icon name="navigate"></ion-icon> <ion-icon name="navigate-circle"></ion-icon>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="2" class="main-tab"> <ion-tab-button tab="2" class="main-tab">
@ -208,7 +208,7 @@
<ion-tab-bar selected-tab="1" class="custom-tabbar-color"> <ion-tab-bar selected-tab="1" class="custom-tabbar-color">
<ion-tab-button tab="1"> <ion-tab-button tab="1">
<ion-label>Location</ion-label> <ion-label>Location</ion-label>
<ion-icon name="navigate"></ion-icon> <ion-icon name="navigate-circle"></ion-icon>
</ion-tab-button> </ion-tab-button>
<ion-tab-button tab="2"> <ion-tab-button tab="2">

2
core/src/components/tabs/test/basic/index.html
View File

@ -95,7 +95,7 @@
<ion-tab-button tab="tab-four" class="e2eTabFourButton"> <ion-tab-button tab="tab-four" class="e2eTabFourButton">
<ion-label>Tab Four</ion-label> <ion-label>Tab Four</ion-label>
<ion-icon name="chatboxes"></ion-icon> <ion-icon name="chatbox"></ion-icon>
</ion-tab-button> </ion-tab-button>
</ion-tab-bar> </ion-tab-bar>

2
core/src/components/toolbar/test/basic/index.html
View File

@ -21,7 +21,7 @@
<ion-toolbar color="primary"> <ion-toolbar color="primary">
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>

24
core/src/components/toolbar/test/scenarios/index.html
View File

@ -25,7 +25,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -42,7 +42,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button> <ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -59,7 +59,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button class="activated"> <ion-button class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button class="activated"> <ion-button class="activated">
<ion-icon slot="icon-only" name="search"></ion-icon> <ion-icon slot="icon-only" name="search"></ion-icon>
@ -76,10 +76,10 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="solid"> <ion-button fill="solid">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button fill="solid"> <ion-button fill="solid">
<ion-icon slot="start" name="contact"></ion-icon> <ion-icon slot="start" name="person-circle"></ion-icon>
Solid Solid
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -95,10 +95,10 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button href="#" fill="solid" class="activated"> <ion-button href="#" fill="solid" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button fill="solid" class="activated"> <ion-button fill="solid" class="activated">
<ion-icon slot="start" name="contact"></ion-icon> <ion-icon slot="start" name="person-circle"></ion-icon>
Solid Solid
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -114,7 +114,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="outline"> <ion-button fill="outline">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button fill="outline"> <ion-button fill="outline">
<ion-icon slot="start" name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
@ -123,7 +123,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary" fill="outline"> <ion-button color="secondary" fill="outline">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Outline</ion-title> <ion-title>Outline</ion-title>
@ -132,7 +132,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button fill="outline" class="activated"> <ion-button fill="outline" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
<ion-button fill="outline" class="activated"> <ion-button fill="outline" class="activated">
<ion-icon slot="start" name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
@ -141,7 +141,7 @@
</ion-buttons> </ion-buttons>
<ion-buttons slot="primary"> <ion-buttons slot="primary">
<ion-button color="secondary" fill="outline" class="activated"> <ion-button color="secondary" fill="outline" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon> <ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Outline.activated</ion-title> <ion-title>Outline.activated</ion-title>
@ -150,7 +150,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="secondary"> <ion-buttons slot="secondary">
<ion-button> <ion-button>
<ion-icon slot="start" name="contact"></ion-icon> <ion-icon slot="start" name="person-circle"></ion-icon>
Clear Clear
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>

1
packages/react/package.json
View File

@ -40,6 +40,7 @@
], ],
"dependencies": { "dependencies": {
"@ionic/core": "5.0.0-beta.0", "@ionic/core": "5.0.0-beta.0",
"ionicons": "^5.0.0-11",
"tslib": "*" "tslib": "*"
}, },
"peerDependencies": { "peerDependencies": {

29
packages/react/src/components/index.ts
View File

@ -1,7 +1,7 @@
import { defineCustomElements } from '@ionic/core/loader'; import { defineCustomElements } from '@ionic/core/loader';
import { addIcons } from 'ionicons'; import { addIcons } from 'ionicons';
import { arrowBack, arrowDown, arrowForward, close, closeCircle, menu, reorder, search } from 'ionicons/icons'; import { arrowBackSharp, chevronBack, chevronForward, closeCircle, closeSharp, menuOutline, menuSharp, reorderThreeOutline, reorderTwoSharp, searchOutline, searchSharp } from 'ionicons/icons';
export { AlertButton, AlertInput, setupConfig } from '@ionic/core'; export { AlertButton, AlertInput, setupConfig } from '@ionic/core';
export * from './proxies'; export * from './proxies';
@ -29,22 +29,17 @@ export { RouterDirection } from './hrefprops';
// Icons that are used by internal components // Icons that are used by internal components
addIcons({ addIcons({
'ios-close': close.ios, 'arrow-back-sharp': arrowBackSharp,
'md-close': close.md, 'chevron-back': chevronBack,
'ios-reorder': reorder.ios, 'chevron-forward': chevronForward,
'md-reorder': reorder.md, 'close-circle': closeCircle,
'ios-menu': menu.ios, 'close-sharp': closeSharp,
'md-menu': menu.md, 'menu-outline': menuOutline,
'ios-arrow-forward': arrowForward.ios, 'menu-sharp': menuSharp,
'md-arrow-forward': arrowForward.md, 'reorder-two-sharp': reorderTwoSharp,
'ios-arrow-back': arrowBack.ios, 'reorder-three-outline': reorderThreeOutline,
'md-arrow-back': arrowBack.md, 'search-outline': searchOutline,
'ios-arrow-down': arrowDown.ios, 'search-sharp': searchSharp,
'md-arrow-down': arrowDown.md,
'ios-search': search.ios,
'md-search': search.md,
'ios-close-circle': closeCircle.ios,
'md-close-circle': closeCircle.md,
}); });
// TODO: defineCustomElements() is asyncronous // TODO: defineCustomElements() is asyncronous

4
packages/react/test/test-app/src/App.tsx
View File

@ -1,4 +1,5 @@
import { IonApp, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/react'; import { IonApp, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/react';
import { logoIonic } from 'ionicons/icons';
import React from 'react'; import React from 'react';
const App: React.FC = () => { const App: React.FC = () => {
@ -12,6 +13,7 @@ const App: React.FC = () => {
<IonContent> <IonContent>
<IonList> <IonList>
<IonItem button> <IonItem button>
<IonIcon icon={logoIonic} slot="start"></IonIcon>
<IonLabel> <IonLabel>
Test something Test something
</IonLabel> </IonLabel>

1402
vue/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

7
vue/package.json
View File

@ -44,6 +44,10 @@
"lint.fix": "tslint --project . --fix", "lint.fix": "tslint --project . --fix",
"test": "jest --coverage --verbose" "test": "jest --coverage --verbose"
}, },
"dependencies": {
"@ionic/core": "^4.6.0",
"ionicons": "^5.0.0-11"
},
"devDependencies": { "devDependencies": {
"rollup": "^0.62.0", "rollup": "^0.62.0",
"rollup-plugin-terser": "^1.0.1", "rollup-plugin-terser": "^1.0.1",
@ -57,9 +61,6 @@
"vue-template-compiler": "^2.5.17", "vue-template-compiler": "^2.5.17",
"vue-router": "^3.0.1" "vue-router": "^3.0.1"
}, },
"dependencies": {
"@ionic/core": "^4.6.0"
},
"peerDependencies": { "peerDependencies": {
"vue": "^2.5.17", "vue": "^2.5.17",
"vue-router": "^3.0.1" "vue-router": "^3.0.1"

29
vue/src/app-initialize.ts
View File

@ -4,7 +4,7 @@ import { IonicConfig } from '@ionic/core';
// Webpack import for ionicons // Webpack import for ionicons
import { addIcons } from 'ionicons'; import { addIcons } from 'ionicons';
import { arrowBack, arrowDown, arrowForward, close, closeCircle, menu, reorder, search } from 'ionicons/icons'; import { arrowBackSharp, chevronBack, chevronForward, closeCircle, closeSharp, menuOutline, menuSharp, reorderThreeOutline, reorderTwoSharp, searchOutline, searchSharp } from 'ionicons/icons';
// import '@ionic/core/css/ionic.bundle.css'; // import '@ionic/core/css/ionic.bundle.css';
// import 'ionicons/dist/collection/icon/icon.css'; // import 'ionicons/dist/collection/icon/icon.css';
@ -21,21 +21,16 @@ export function appInitialize(config?: IonicConfig) {
// Icons that are used by internal components // Icons that are used by internal components
addIcons({ addIcons({
'ios-close': close.ios, 'arrow-back-sharp': arrowBackSharp,
'md-close': close.md, 'chevron-back': chevronBack,
'ios-reorder': reorder.ios, 'chevron-forward': chevronForward,
'md-reorder': reorder.md, 'close-circle': closeCircle,
'ios-menu': menu.ios, 'close-sharp': closeSharp,
'md-menu': menu.md, 'menu-outline': menuOutline,
'ios-arrow-forward': arrowForward.ios, 'menu-sharp': menuSharp,
'md-arrow-forward': arrowForward.md, 'reorder-two-sharp': reorderTwoSharp,
'ios-arrow-back': arrowBack.ios, 'reorder-three-outline': reorderThreeOutline,
'md-arrow-back': arrowBack.md, 'search-outline': searchOutline,
'ios-arrow-down': arrowDown.ios, 'search-sharp': searchSharp,
'md-arrow-down': arrowDown.md,
'ios-search': search.ios,
'md-search': search.md,
'ios-close-circle': closeCircle.ios,
'md-close-circle': closeCircle.md,
}); });
} }