Skip to content
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.

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

[Bug Report][3.2.4] The ripple effect of a button with only an icon should come from the center #17376

Closed
PurpleTape opened this issue May 14, 2023 · 1 comment · Fixed by #19577
Assignees
Labels
C: VBtn VBtn D: ripple T: bug Functionality that does not work as intended/expected
Milestone

Comments

@PurpleTape
Copy link

Environment

Vuetify Version: 3.2.4
Vue Version: 3.3.2
Browsers: Firefox 112.0
OS: Mac OS 10.15

Steps to reproduce

Go to the playground and click on buttons

Expected Behavior

The ripple effect of a button containing only an icon comes from the center

Actual Behavior

The ripple effect comes from the place of the click

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

According to the source code:

v-ripple={[
!isDisabled.value && props.ripple,
null,
props.icon ? ['center'] : null,
]}

the ripple effect for a button with only an icon should come from the center of the button.

At the moment, the ripple effect comes from the place of the click, as with ordinary buttons

@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected upstream Problem with a third party library that we may have to work around labels May 15, 2023
@KaelWD KaelWD self-assigned this May 15, 2023
@KaelWD KaelWD added this to the v3.x.x milestone May 15, 2023
@KaelWD
Copy link
Member

KaelWD commented May 15, 2023

The JSX compiler only seems to take a static array:
works
doesn't work
doesn't work
doesn't work


ok that kinda makes sense because in templates you can only have dynamic arguments, not modifiers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment