Skip to content

Commit

Permalink
feat(fab-button): add closeIcon property (#19626)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anagstef
anagstef authored Jun 8, 2020
1 parent f34d375 commit 698e526
Show file tree
Hide file tree
Showing 5 changed files with 24 additions and 7 deletions.
4 changes: 2 additions & 2 deletions angular/src/directives/proxies.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: "<ng-content></ng-content>", 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: "<ng-content></ng-content>", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
export class IonFabButton {
ionFocus!: EventEmitter<CustomEvent>;
ionBlur!: EventEmitter<CustomEvent>;
Expand Down
1 change: 1 addition & 0 deletions core/api.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,7 @@ ion-fab,method,close,close() => Promise<void>

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
Expand Down
12 changes: 10 additions & 2 deletions core/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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).
*/
Expand Down Expand Up @@ -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";
/**
Expand Down Expand Up @@ -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).
*/
Expand Down Expand Up @@ -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";
/**
Expand Down
11 changes: 9 additions & 2 deletions core/src/components/fab-button/fab-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -156,7 +163,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
onClick={(ev: Event) => openURL(href, ev, this.routerDirection, this.routerAnimation)}
>
<span class="close-icon">
<ion-icon name="close" lazy={false}></ion-icon>
<ion-icon icon={this.closeIcon} lazy={false}></ion-icon>
</span>
<span class="button-inner">
<slot></slot>
Expand Down
3 changes: 2 additions & 1 deletion core/src/components/fab-button/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand All @@ -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'` |
Expand Down

0 comments on commit 698e526

Please sign in to comment.