Skip to content

feat(fab-button): add close button icon property #19626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brandyscarney merged 7 commits into from
Jun 8, 2020
Merged

feat(fab-button): add close button icon property #19626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
266843a
feat(fab-button): add close button icon property
anagstef Oct 11, 2019
5d745e8
Merge branch 'master' into pr/19626
brandyscarney Jun 8, 2020
6e9467d
chore: build
brandyscarney Jun 8, 2020
081fd84
refactor(fab-button): rename closeIcon
brandyscarney Jun 8, 2020
75a6362
docs(fab-button): verbiage
brandyscarney Jun 8, 2020
05304d6
Merge branch 'master' into pr/19626
brandyscarney Jun 8, 2020
ced8428
chore: build
brandyscarney Jun 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions angular/src/directives/proxies.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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