fix(icon-button): remove sticky mdc ripple effects

[anderssonjohan]

fix: #1065

Review:

• Commits are atomic
• Commits have the correct type for the changes made
• Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

• Chrome
• Edge
• Firefox

Linux:

• Chrome
• Firefox

macOS:

• Chrome
• Firefox
• Safari

Mobile:

• Chrome on Android
• iOS

[adrianschmidt]

And of course he's already opened a PR for it too… 😄 This is amazing ❤️

I'll look at it as soon as I can, but that might not be until cooldown.

[anderssonjohan]

@adrianschmidt No rush! Please note that I changed from using @Listen('click') (in my issue) to using add/remove event handler due to our eslint rule. However, I couldn't find the reason for why @Listen should be avoided for vDOM events. I hoped to find some explanations but I could only find this: stenciljs/eslint-plugin#10 (comment)

[adrianschmidt]

@adrianschmidt No rush! Please note that I changed from using @Listen('click') (in my issue) to using add/remove event handler due to our eslint rule. However, I couldn't find the reason for why @Listen should be avoided for vDOM events. I hoped to find some explanations but I could only find this: ionic-team/stencil-eslint#10 (comment)

Yeah, I have no idea… we should perhaps disable that rule?

@jgroth do you have any idea?

[jgroth]

Hmm no I don't know 🤔
However I read your comment in the other thread and would guess that the reason is something like that 🙂
It feels like we could probably disable it if we want

[adrianschmidt]

Since activating the button by pressing enter on a keyboard creates a synthetic click event, this removes the styling even if the user presses enter, instead of clicking. That's not optimal, but I think we can live with it. If the user interacts with the element, they hopefully know "where they are", despite the visual style disappearing.

The actual focus isn't removed, just the styling. (Which, by the way, makes me want to rename removeFocusedStateOnClick to removeFocusedStyleOnClick. I think I'll do that.)

[lime-ci]

🎉 This PR is included in version 30.1.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release
• v30.1.2

Your semantic-release bot 📦🚀