diff --git a/core/api.txt b/core/api.txt index 78850d3f28..fa5dfdeb3d 100644 --- a/core/api.txt +++ b/core/api.txt @@ -3,7 +3,7 @@ ion-accordion,shadow ion-accordion,prop,disabled,boolean,false,false,false ion-accordion,prop,mode,"ios" | "md",undefined,false,false ion-accordion,prop,readonly,boolean,false,false,false -ion-accordion,prop,toggleIcon,string,'chevron-down',false,false +ion-accordion,prop,toggleIcon,string,chevronDown,false,false ion-accordion,prop,toggleIconSlot,"end" | "start",'end',false,false ion-accordion,prop,value,string,`ion-accordion-${accordionIds++}`,false,false ion-accordion,part,content @@ -416,7 +416,7 @@ ion-fab,method,close,close() => Promise ion-fab-button,shadow ion-fab-button,prop,activated,boolean,false,false,false -ion-fab-button,prop,closeIcon,string,'close',false,false +ion-fab-button,prop,closeIcon,string,close,false,false ion-fab-button,prop,color,string | undefined,undefined,false,true ion-fab-button,prop,disabled,boolean,false,false,false ion-fab-button,prop,download,string | undefined,undefined,false,false @@ -557,7 +557,7 @@ ion-item,prop,button,boolean,false,false,false ion-item,prop,color,string | undefined,undefined,false,true ion-item,prop,counter,boolean,false,false,false ion-item,prop,detail,boolean | undefined,undefined,false,false -ion-item,prop,detailIcon,string,'chevron-forward',false,false +ion-item,prop,detailIcon,string,chevronForward,false,false ion-item,prop,disabled,boolean,false,false,false ion-item,prop,download,string | undefined,undefined,false,false ion-item,prop,fill,"outline" | "solid" | undefined,undefined,false,false @@ -1070,7 +1070,7 @@ ion-searchbar,scoped ion-searchbar,prop,animated,boolean,false,false,false ion-searchbar,prop,autocomplete,"off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo",'off',false,false ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false -ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'arrow-back-sharp') as string,false,false +ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false ion-searchbar,prop,color,string | undefined,undefined,false,true diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 1cbc638898..3b505ee34f 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2272,7 +2272,7 @@ export namespace Components { */ "autocorrect": 'on' | 'off'; /** - * Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`. + * Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`. */ "cancelButtonIcon": string; /** @@ -2280,7 +2280,7 @@ export namespace Components { */ "cancelButtonText": string; /** - * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`. + * Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`. */ "clearIcon"?: string; /** @@ -2316,7 +2316,7 @@ export namespace Components { */ "placeholder": string; /** - * The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode. + * The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode. */ "searchIcon"?: string; /** @@ -5943,7 +5943,7 @@ declare namespace LocalJSX { */ "autocorrect"?: 'on' | 'off'; /** - * Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`. + * Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`. */ "cancelButtonIcon"?: string; /** @@ -5951,7 +5951,7 @@ declare namespace LocalJSX { */ "cancelButtonText"?: string; /** - * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`. + * Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`. */ "clearIcon"?: string; /** @@ -6011,7 +6011,7 @@ declare namespace LocalJSX { */ "placeholder"?: string; /** - * The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode. + * The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode. */ "searchIcon"?: string; /** diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx index e0466d960d..69b5bcf3d0 100644 --- a/core/src/components/accordion/accordion.tsx +++ b/core/src/components/accordion/accordion.tsx @@ -1,4 +1,5 @@ import { Component, ComponentInterface, Element, Host, Prop, State, h } from '@stencil/core'; +import { chevronDown } from 'ionicons/icons'; import { config } from '../../global/config'; import { getIonMode } from '../../global/ionic-global'; @@ -71,7 +72,7 @@ export class Accordion implements ComponentInterface { * rotated when the accordion is expanded * or collapsed. */ - @Prop() toggleIcon = 'chevron-down'; + @Prop() toggleIcon = chevronDown; /** * The slot inside of `ion-item` to diff --git a/core/src/components/accordion/readme.md b/core/src/components/accordion/readme.md index 5c90eff0c3..1ae2ed7b35 100644 --- a/core/src/components/accordion/readme.md +++ b/core/src/components/accordion/readme.md @@ -1626,7 +1626,7 @@ export const AccordionExample { | `disabled` | `disabled` | If `true`, the accordion cannot be interacted with. | `boolean` | `false` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `readonly` | `readonly` | If `true`, the accordion cannot be interacted with, but does not alter the opacity. | `boolean` | `false` | -| `toggleIcon` | `toggle-icon` | The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed. | `string` | `'chevron-down'` | +| `toggleIcon` | `toggle-icon` | The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed. | `string` | `chevronDown` | | `toggleIconSlot` | `toggle-icon-slot` | The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`. | `"end" \| "start"` | `'end'` | | `value` | `value` | The value of the accordion. Defaults to an autogenerated value. | `string` | ``ion-accordion-${accordionIds++}`` | diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 3942241b2c..043ea04594 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -1,4 +1,5 @@ import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core'; +import { arrowBackSharp, chevronBack } from 'ionicons/icons'; import { config } from '../../global/config'; import { getIonMode } from '../../global/ionic-global'; @@ -83,11 +84,11 @@ export class BackButton implements ComponentInterface, ButtonInterface { if (getIonMode(this) === 'ios') { // default ios back button icon - return config.get('backButtonIcon', 'chevron-back'); + return config.get('backButtonIcon', chevronBack); } // default md back button icon - return config.get('backButtonIcon', 'arrow-back-sharp'); + return config.get('backButtonIcon', arrowBackSharp); } get backButtonText() { diff --git a/core/src/components/back-button/test/back-button.spec.ts b/core/src/components/back-button/test/back-button.spec.ts index ff7d68a3ad..787a92f9e3 100644 --- a/core/src/components/back-button/test/back-button.spec.ts +++ b/core/src/components/back-button/test/back-button.spec.ts @@ -1,3 +1,5 @@ +import { arrowBackSharp, chevronBack } from 'ionicons/icons'; + import { newSpecPage } from '@stencil/core/testing'; import { BackButton } from "../back-button"; import { config } from "../../../global/config"; @@ -46,12 +48,12 @@ describe('back button', () => { it('default icon for ios mode', async () => { const bb = await newBackButton('ios'); - expect(bb.backButtonIcon).toBe('chevron-back'); + expect(bb.backButtonIcon).toBe(chevronBack); }); it('default icon', async () => { const bb = await newBackButton(); - expect(bb.backButtonIcon).toBe('arrow-back-sharp'); + expect(bb.backButtonIcon).toBe(arrowBackSharp); }); }); diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index aba863ccfd..afec809090 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/core/src/components/fab-button/fab-button.tsx @@ -1,4 +1,5 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core'; +import { close } from 'ionicons/icons'; import { getIonMode } from '../../global/ionic-global'; import { AnimationBuilder, Color, RouterDirection } from '../../interface'; @@ -105,7 +106,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt * is pressed. Only applies if it is the main button inside of a fab containing a * fab list. */ - @Prop() closeIcon = 'close'; + @Prop() closeIcon = close; /** * Emitted when the button has focus. diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md index 9ad8439636..1cc9c821fe 100644 --- a/core/src/components/fab-button/readme.md +++ b/core/src/components/fab-button/readme.md @@ -149,7 +149,7 @@ export default defineComponent({ | Property | Attribute | Description | Type | Default | | ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | | `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` | -| `closeIcon` | `close-icon` | The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list. | `string` | `'close'` | +| `closeIcon` | `close-icon` | The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list. | `string` | `close` | | `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` | | `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `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` | diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index f4643e2d30..345ebb54da 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -1,4 +1,5 @@ import { Component, ComponentInterface, Element, Host, Listen, Prop, State, forceUpdate, h } from '@stencil/core'; +import { chevronForward } from 'ionicons/icons'; import { getIonMode } from '../../global/ionic-global'; import { AnimationBuilder, Color, CssClassMap, RouterDirection, StyleEventDetail } from '../../interface'; @@ -61,7 +62,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac /** * The icon to use when `detail` is set to `true`. */ - @Prop() detailIcon = 'chevron-forward'; + @Prop() detailIcon = chevronForward; /** * If `true`, the user cannot interact with the item. diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md index 40ae268cf3..2e34d538ef 100644 --- a/core/src/components/item/readme.md +++ b/core/src/components/item/readme.md @@ -1929,25 +1929,25 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------- | -| `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` | -| `counter` | `counter` | If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`. | `boolean` | `false` | -| `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` | `'chevron-forward'` | -| `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` | -| `fill` | `fill` | The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode. | `"outline" \| "solid" \| 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` | -| `lines` | `lines` | How the bottom border should be displayed on the item. | `"full" \| "inset" \| "none" \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` | -| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | -| `shape` | `shape` | The shape of the item. If "round" it will have increased border radius. | `"round" \| undefined` | `undefined` | -| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | -| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ---------------- | +| `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` | +| `counter` | `counter` | If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`. | `boolean` | `false` | +| `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` | `chevronForward` | +| `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` | +| `fill` | `fill` | The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode. | `"outline" \| "solid" \| 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` | +| `lines` | `lines` | How the bottom border should be displayed on the item. | `"full" \| "inset" \| "none" \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` | +| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | +| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | +| `shape` | `shape` | The shape of the item. If "round" it will have increased border radius. | `"round" \| undefined` | `undefined` | +| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | +| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` | ## Slots diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx index 5e2af949f9..33944e4486 100644 --- a/core/src/components/menu-button/menu-button.tsx +++ b/core/src/components/menu-button/menu-button.tsx @@ -1,4 +1,5 @@ import { Component, ComponentInterface, Element, Host, Listen, Prop, State, h } from '@stencil/core'; +import { menuOutline, menuSharp } from 'ionicons/icons'; import { config } from '../../global/config'; import { getIonMode } from '../../global/ionic-global'; @@ -78,7 +79,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface { render() { const { color, disabled, inheritedAttributes } = this; const mode = getIonMode(this); - const menuIcon = config.get('menuIcon', mode === 'ios' ? 'menu-outline' : 'menu-sharp'); + const menuIcon = config.get('menuIcon', mode === 'ios' ? menuOutline : menuSharp); const hidden = this.autoHide && !this.visible; const attrs = { diff --git a/core/src/components/reorder/reorder.tsx b/core/src/components/reorder/reorder.tsx index a013f20aa5..01c2df8c19 100644 --- a/core/src/components/reorder/reorder.tsx +++ b/core/src/components/reorder/reorder.tsx @@ -1,4 +1,5 @@ import { Component, ComponentInterface, Element, Host, Listen, h } from '@stencil/core'; +import { reorderThreeOutline, reorderTwoSharp } from 'ionicons/icons'; import { getIonMode } from '../../global/ionic-global'; @@ -31,11 +32,11 @@ export class Reorder implements ComponentInterface { render() { const mode = getIonMode(this); - const reorderIcon = mode === 'ios' ? 'reorder-three-outline' : 'reorder-two-sharp'; + const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp; return ( - + ); diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md index 551a5f59ee..9192a4300f 100644 --- a/core/src/components/searchbar/readme.md +++ b/core/src/components/searchbar/readme.md @@ -331,27 +331,27 @@ export default defineComponent({ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | -| `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` | -| `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `'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. 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'` | -| `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` | -| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `250` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` | -| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` | -| `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" \| undefined` | `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 `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `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'` | -| `showClearButton` | `show-clear-button` | Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty. | `"always" \| "focus" \| "never"` | `'always'` | -| `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'` | -| `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` | +| Property | Attribute | Description | Type | Default | +| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | +| `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` | +| `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `'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. Defaults to `arrow-back-sharp`. | `string` | `config.get('backButtonIcon', arrowBackSharp) as string` | +| `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-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` | +| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `250` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` | +| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` | +| `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" \| undefined` | `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 `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `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'` | +| `showClearButton` | `show-clear-button` | Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty. | `"always" \| "focus" \| "never"` | `'always'` | +| `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'` | +| `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` | ## Events diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index fcf1f31c07..5220bda3d8 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -1,4 +1,5 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core'; +import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from 'ionicons/icons'; import { config } from '../../global/config'; import { getIonMode } from '../../global/ionic-global'; @@ -53,9 +54,9 @@ export class Searchbar implements ComponentInterface { /** * Set the cancel button icon. Only applies to `md` mode. - * Defaults to `"arrow-back-sharp"`. + * Defaults to `arrow-back-sharp`. */ - @Prop() cancelButtonIcon = config.get('backButtonIcon', 'arrow-back-sharp') as string; + @Prop() cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp) as string; /** * Set the the cancel button text. Only applies to `ios` mode. @@ -63,7 +64,7 @@ export class Searchbar implements ComponentInterface { @Prop() cancelButtonText = 'Cancel'; /** - * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`. + * Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`. */ @Prop() clearIcon?: string; @@ -108,8 +109,8 @@ export class Searchbar implements ComponentInterface { @Prop() placeholder = 'Search'; /** - * The icon to use as the search icon. Defaults to `"search-outline"` in - * `ios` mode and `"search-sharp"` in `md` mode. + * The icon to use as the search icon. Defaults to `search-outline` in + * `ios` mode and `search-sharp` in `md` mode. */ @Prop() searchIcon?: string; @@ -458,8 +459,8 @@ export class Searchbar implements ComponentInterface { const { cancelButtonText } = this; const animated = this.animated && config.getBoolean('animated', true); const mode = getIonMode(this); - const clearIcon = this.clearIcon || (mode === 'ios' ? 'close-circle' : 'close-sharp'); - const searchIcon = this.searchIcon || (mode === 'ios' ? 'search-outline' : 'search-sharp'); + const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp); + const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp); const shouldShowCancelButton = this.shouldShowCancelButton(); const cancelButton = (this.showCancelButton !== 'never') && ( diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 5f88dc0ce2..edf717cf89 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -1,21 +1,4 @@ import { IonicConfig, initialize } from '@ionic/core/components'; -import { addIcons } from 'ionicons'; -import { - arrowBackSharp, - caretBackSharp, - chevronBack, - chevronDown, - chevronForward, - close, - closeCircle, - closeSharp, - menuOutline, - menuSharp, - reorderThreeOutline, - reorderTwoSharp, - searchOutline, - searchSharp, -} from 'ionicons/icons'; export { // UTILS @@ -171,24 +154,6 @@ export { useIonPopover, UseIonPopoverResult } from '../hooks/useIonPopover'; export { useIonPicker, UseIonPickerResult } from '../hooks/useIonPicker'; export { useIonLoading, UseIonLoadingResult } from '../hooks/useIonLoading'; -// Icons that are used by internal components -addIcons({ - 'arrow-back-sharp': arrowBackSharp, - 'caret-back-sharp': caretBackSharp, - 'chevron-back': chevronBack, - 'chevron-down': chevronDown, - 'chevron-forward': chevronForward, - close, - 'close-circle': closeCircle, - 'close-sharp': closeSharp, - 'menu-outline': menuOutline, - 'menu-sharp': menuSharp, - 'reorder-two-sharp': reorderTwoSharp, - 'reorder-three-outline': reorderThreeOutline, - 'search-outline': searchOutline, - 'search-sharp': searchSharp, -}); - export const setupIonicReact = (config: IonicConfig = {}) => { /** * By default Ionic Framework hides elements that diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 8da12411a2..838ee1ddb3 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -1,6 +1,3 @@ -import { addIcons } from 'ionicons'; -import { arrowBackSharp, caretBackSharp, chevronBack, chevronDown, chevronForward, close, closeCircle, closeSharp, menuOutline, menuSharp, reorderThreeOutline, reorderTwoSharp, searchOutline, searchSharp } from 'ionicons/icons'; - export * from './proxies'; export { UseBackButtonResult, useBackButton } from './hooks/back-button'; @@ -149,21 +146,3 @@ export { ToggleChangeEventDetail, ToggleCustomEvent, } from '@ionic/core/components'; - -// Icons that are used by internal components -addIcons({ - 'arrow-back-sharp': arrowBackSharp, - 'caret-back-sharp': caretBackSharp, - 'chevron-back': chevronBack, - 'chevron-forward': chevronForward, - 'chevron-down': chevronDown, - 'close': close, - 'close-circle': closeCircle, - 'close-sharp': closeSharp, - 'menu-outline': menuOutline, - 'menu-sharp': menuSharp, - 'reorder-two-sharp': reorderTwoSharp, - 'reorder-three-outline': reorderThreeOutline, - 'search-outline': searchOutline, - 'search-sharp': searchSharp, -});