Skip to content

fix(fab-button): improve ripple effect behavior on click #25413

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
merged 3 commits into from
Jun 8, 2022
Merged

fix(fab-button): improve ripple effect behavior on click #25413

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
65e92c3
fix(fab-button): improve ripple effect behavior on click
liamdebeasi Jun 6, 2022
67cb2d8
Merge branch 'main' into FW-1567
liamdebeasi Jun 7, 2022
ca22241
Merge branch 'main' into FW-1567
liamdebeasi Jun 8, 2022
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: 4 additions & 0 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -847,6 +847,10 @@ export namespace Components {
* Where to align the fab horizontally in the viewport.
*/
"horizontal"?: 'start' | 'end' | 'center';
/**
* Opens/Closes the FAB list container.
*/
"toggle": () => Promise<void>;
/**
* Where to align the fab vertically in the viewport.
*/
Expand Down
16 changes: 16 additions & 0 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 @@ -22,6 +22,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
shadow: true,
})
export class FabButton implements ComponentInterface, AnchorInterface, ButtonInterface {
private fab: HTMLIonFabElement | null = null;

@Element() el!: HTMLElement;

/**
Expand Down Expand Up @@ -119,6 +121,10 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
*/
@Event() ionBlur!: EventEmitter<void>;

connectedCallback() {
this.fab = this.el.closest('ion-fab');
}

private onFocus = () => {
this.ionFocus.emit();
};
Expand All @@ -127,6 +133,15 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
this.ionBlur.emit();
};

private onClick = () => {
const { fab } = this;
if (!fab) {
return;
}

fab.toggle();
};

render() {
const { el, disabled, color, href, activated, show, translucent, size } = this;
const inList = hostContext('ion-fab-list', el);
Expand All @@ -144,6 +159,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt

return (
<Host
onClick={this.onClick}
aria-disabled={disabled ? 'true' : null}
class={createColorClasses(color, {
[mode]: true,
Expand Down
15 changes: 8 additions & 7 deletions core/src/components/fab/fab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,22 +62,23 @@ export class Fab implements ComponentInterface {
return this.el.querySelector('ion-fab-button');
}

private onClick = () => {
/**
* Opens/Closes the FAB list container.
* @internal
*/
@Method()
async toggle() {
const hasList = !!this.el.querySelector('ion-fab-list');
const getButton = this.getFab();
const isButtonDisabled = getButton?.disabled;

if (hasList && !isButtonDisabled) {
if (hasList) {
this.activated = !this.activated;
}
};
}

render() {
const { horizontal, vertical, edge } = this;
const mode = getIonMode(this);
return (
<Host
onClick={this.onClick}
class={{
[mode]: true,
[`fab-horizontal-${horizontal}`]: horizontal !== undefined,
Expand Down