refactor(button): add ripple effect to ionic theme (#29754)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Maria Hutt
2024-08-12 14:30:31 -07:00
committed by GitHub
parent 210f724ae7
commit 32fb17cf6e
112 changed files with 199 additions and 322 deletions

View File

@ -6,7 +6,7 @@ import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
import { printIonWarning } from '@utils/logging';
import { createColorClasses, hostContext, openURL } from '@utils/theme';
import { getIonTheme } from '../../global/ionic-global';
import { getIonTheme, getIonMode } from '../../global/ionic-global';
import type { AnimationBuilder, Color } from '../../interface';
import type { RouterDirection } from '../router/utils/interface';
@ -353,6 +353,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
this;
const theme = getIonTheme(this);
const mode = getIonMode(this);
const size = this.getSize();
const shape = this.getShape();
const TagType = href === undefined ? 'button' : ('a' as any);
@ -421,7 +422,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
<slot></slot>
<slot name="end"></slot>
</span>
{theme === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
{mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
</TagType>
</Host>
);