🤩fy card & info-tile

[Kiarokh]

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

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3311/

[adrianschmidt]

Must respect prefers-reduced-motion.

[Kiarokh]

if your interactive element is the host itself:

The interactive element can be the host, but its parent must have these styles:

@mixin parent-of-the-3d-element {
    isolation: isolate;
    transform-style: preserve-3d;

    perspective: 1000px;
    @media (prefers-reduced-motion) {
        perspective: 2000px;
    }
}

For the 3D effect to appear properly. For components like Card or Info tile, the only way is to use a nested element, and use it as the interactive element. Not sure if it's enough that we mention which mixins they should use, or if we should document this further.

[adrianschmidt]

Ah! OK. That's maybe related to why it didn't work to move the glow-element either then…?

If the consumer needs to do stuff, we should absolutely document it. (But it's even better if we can do the stuff automatically 😊)

[adrianschmidt]

I realised I've been wanting to gold plate this way too much, and haven't managed to pull it off in a reasonable time. So I've pushed the not-yet-finished gold plated version on the branch card-3d-gold-plate, and reverted this to the state I had saved on card-3d-bak, and then squashed the chore(util): complete the tiltFollowingTheCursor utility function commit into the chore(util): add a utility function to create an interactive 3D effect commit.

Let's get this merged! 😊

[adrianschmidt]

I realised that to make this quite right, this shouldn't actually be getting event handlers for this.host, but for the interactive element. But then it can't be called from componentWillLoad. This works for now, and I've dragged this PR out for too long already, so I say we merge like this, and then maybe I'll come back and gold plate during a hackday or something.

[Kiarokh]

🙏

[lime-opensource]

🎉 This PR is included in version 37.72.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[Kiarokh]

I realised I've been wanting to gold plate this way too much, and haven't managed to pull it off in a reasonable time. So I've pushed the not-yet-finished gold plated version on the branch card-3d-gold-plate, and reverted this to the state I had saved on card-3d-bak, and then squashed the chore(util): complete the tiltFollowingTheCursor utility function commit into the chore(util): add a utility function to create an interactive 3D effect commit.

Let's get this merged! 😊

Fair enough! 🙏

I made a new PR #3330 from a part of that card-3d-gold-plate to simplify this process even more, and make that other PR a bit smaller