Skip to content

Commit 698e526

Browse files
anagstefanagstef
authored
feat(fab-button): add closeIcon property (#19626)
1 parent f34d375 commit 698e526

File tree

5 files changed

+24
-7
lines changed

5 files changed

+24
-7
lines changed

‎angular/src/directives/proxies.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -220,8 +220,8 @@ export class IonFab {
220220
}
221221
export declare interface IonFabButton extends Components.IonFabButton {
222222
}
223-
@ProxyCmp({ inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
224-
@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
223+
@ProxyCmp({ inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
224+
@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
225225
export class IonFabButton {
226226
ionFocus!: EventEmitter<CustomEvent>;
227227
ionBlur!: EventEmitter<CustomEvent>;

‎core/api.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -354,6 +354,7 @@ ion-fab,method,close,close() => Promise<void>
354354

355355
ion-fab-button,shadow
356356
ion-fab-button,prop,activated,boolean,false,false,false
357+
ion-fab-button,prop,closeIcon,string,'close',false,false
357358
ion-fab-button,prop,color,string | undefined,undefined,false,false
358359
ion-fab-button,prop,disabled,boolean,false,false,false
359360
ion-fab-button,prop,download,string | undefined,undefined,false,false

‎core/src/components.d.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -688,6 +688,10 @@ export namespace Components {
688688
* If `true`, the fab button will be show a close icon.
689689
*/
690690
"activated": boolean;
691+
/**
692+
* 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.
693+
*/
694+
"closeIcon": string;
691695
/**
692696
* 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).
693697
*/
@@ -725,7 +729,7 @@ export namespace Components {
725729
*/
726730
"show": boolean;
727731
/**
728-
* The size of the button. Set this to `small` in order to have a mini fab.
732+
* The size of the button. Set this to `small` in order to have a mini fab button.
729733
*/
730734
"size"?: "small";
731735
/**
@@ -3964,6 +3968,10 @@ declare namespace LocalJSX {
39643968
* If `true`, the fab button will be show a close icon.
39653969
*/
39663970
"activated"?: boolean;
3971+
/**
3972+
* 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.
3973+
*/
3974+
"closeIcon"?: string;
39673975
/**
39683976
* 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).
39693977
*/
@@ -4009,7 +4017,7 @@ declare namespace LocalJSX {
40094017
*/
40104018
"show"?: boolean;
40114019
/**
4012-
* The size of the button. Set this to `small` in order to have a mini fab.
4020+
* The size of the button. Set this to `small` in order to have a mini fab button.
40134021
*/
40144022
"size"?: "small";
40154023
/**

‎core/src/components/fab-button/fab-button.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,17 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
9393
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
9494

9595
/**
96-
* The size of the button. Set this to `small` in order to have a mini fab.
96+
* The size of the button. Set this to `small` in order to have a mini fab button.
9797
*/
9898
@Prop() size?: 'small';
9999

100+
/**
101+
* The icon name to use for the close icon. This will appear when the fab button
102+
* is pressed. Only applies if it is the main button inside of a fab containing a
103+
* fab list.
104+
*/
105+
@Prop() closeIcon = 'close';
106+
100107
/**
101108
* Emitted when the button has focus.
102109
*/
@@ -156,7 +163,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
156163
onClick={(ev: Event) => openURL(href, ev, this.routerDirection, this.routerAnimation)}
157164
>
158165
<span class="close-icon">
159-
<ion-icon name="close" lazy={false}></ion-icon>
166+
<ion-icon icon={this.closeIcon} lazy={false}></ion-icon>
160167
</span>
161168
<span class="button-inner">
162169
<slot></slot>

‎core/src/components/fab-button/readme.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ export class FabButtonExample {
140140
| Property | Attribute | Description | Type | Default |
141141
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
142142
| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` |
143+
| `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'` |
143144
| `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` |
144145
| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `boolean` | `false` |
145146
| `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 {
149150
| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
150151
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
151152
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
152-
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
153+
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab button. | `"small" \| undefined` | `undefined` |
153154
| `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` |
154155
| `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` |
155156
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |

0 commit comments

Comments
 (0)
⚡