From 698e526b9f882e98efc4bf160999182c645b772c Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Mon, 8 Jun 2020 23:46:03 +0300 Subject: [PATCH] feat(fab-button): add closeIcon property (#19626) --- angular/src/directives/proxies.ts | 4 ++-- core/api.txt | 1 + core/src/components.d.ts | 12 ++++++++++-- core/src/components/fab-button/fab-button.tsx | 11 +++++++++-- core/src/components/fab-button/readme.md | 3 ++- 5 files changed, 24 insertions(+), 7 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index dd2a60a8311..df0b6884873 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -220,8 +220,8 @@ export class IonFab { } export declare interface IonFabButton extends Components.IonFabButton { } -@ProxyCmp({ inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }) -@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }) +@ProxyCmp({ inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }) +@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }) export class IonFabButton { ionFocus!: EventEmitter; ionBlur!: EventEmitter; diff --git a/core/api.txt b/core/api.txt index 0feb35cf611..9d4ad6a236c 100644 --- a/core/api.txt +++ b/core/api.txt @@ -354,6 +354,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,color,string | undefined,undefined,false,false ion-fab-button,prop,disabled,boolean,false,false,false ion-fab-button,prop,download,string | undefined,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index d1d3d3e874a..27e506e1892 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -688,6 +688,10 @@ export namespace Components { * If `true`, the fab button will be show a close icon. */ "activated": boolean; + /** + * 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. + */ + "closeIcon": string; /** * 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). */ @@ -725,7 +729,7 @@ export namespace Components { */ "show": boolean; /** - * The size of the button. Set this to `small` in order to have a mini fab. + * The size of the button. Set this to `small` in order to have a mini fab button. */ "size"?: "small"; /** @@ -3964,6 +3968,10 @@ declare namespace LocalJSX { * If `true`, the fab button will be show a close icon. */ "activated"?: boolean; + /** + * 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. + */ + "closeIcon"?: string; /** * 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). */ @@ -4009,7 +4017,7 @@ declare namespace LocalJSX { */ "show"?: boolean; /** - * The size of the button. Set this to `small` in order to have a mini fab. + * The size of the button. Set this to `small` in order to have a mini fab button. */ "size"?: "small"; /** diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index bc904d08507..5a906a3a6a1 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/core/src/components/fab-button/fab-button.tsx @@ -93,10 +93,17 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt @Prop() type: 'submit' | 'reset' | 'button' = 'button'; /** - * The size of the button. Set this to `small` in order to have a mini fab. + * The size of the button. Set this to `small` in order to have a mini fab button. */ @Prop() size?: 'small'; + /** + * 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. + */ + @Prop() closeIcon = 'close'; + /** * Emitted when the button has focus. */ @@ -156,7 +163,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt onClick={(ev: Event) => openURL(href, ev, this.routerDirection, this.routerAnimation)} > - + diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md index 991205e8f84..e0d8232f9bb 100644 --- a/core/src/components/fab-button/readme.md +++ b/core/src/components/fab-button/readme.md @@ -140,6 +140,7 @@ export class FabButtonExample { | 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'` | | `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` | @@ -149,7 +150,7 @@ export class FabButtonExample { | `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'` | | `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` | -| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` | +| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab button. | `"small" \| 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` | | `translucent` | `translucent` | If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | | `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |