Material-components-ios: [Cards] Disable ink and elevation animations on touch

[jimmy-robert]

Hello,

I can't find the way to have MDCCard without ink and elevation animations.

I tried card.isEnabled = false but then buttons in the card are also disabled which is not expected. I just want to disable the click on the card and not on its subviews.

Thank you

[material-automation[bot]]

Your title label prefix has been renamed from [Card] to [Cards].

[jverkoey]

Hi @JimmyRobz, thanks for filing an issue!

Can you share a bit more about the context that's driving your need to disable ink on the overall card?

cc/ @yarneo who is the owner of this component.

[jimmy-robert]

Hello @jverkoey !

I want to present a login form within a Material Card, but the card itself does not respond to any action, so it should not animate elevation and ripple.

As a quick workaround I can force the ink color to transparent and set the elevation to the same value for each state but I don't think that's the right way to achieve this behavior.

[jverkoey]

I see, that context is helpful — thank you! I'll let @yarneo answer from here.

[yarneo]

Hi @JimmyRobz , thanks for writing in! A Material Card as per the design guidelines is supposed to be an entity you interact and tap on it. With that in mind, a tap on the card would create an ink ripple and an elevation change as you had already noticed.

Fortunately, if you do want to use the card for different uses, the way to remove the ink is as you said, make its color clear, or card.inkView.hidden = YES.

As for the elevation, you would indeed have to set its elevation for the highlighted state to remove the elevation change on tap:
[card setShadowElevation:1.f forState:UIControlStateHighlighted];

[timusus]

Hi @yarneo

The material guidelines state:

The primary action area of a card is typically the card itself. Often cards are one large touch target to a detail screen on a subject.

The use of 'often' and 'typically' imply that this isn't _always_ the case. There are times where I've used a card which has one or two actions, but doesn't have a 'primary' action, or any 'detail' view for the user to proceed to. In this case, I disable the InkView and set the shadow elevation as you've described above.

I don't think this is at all critical, since there's an easy way around this. But I think it's worth considering adding a function or variable to toggle whether a card responds to touches with Ink and Elevation.

---

Also, I'm curious as to why MDCShadowElevationCardResting has a value of 2.f, but MDCCardCollectionCell uses a shadow elevation of 1.f. Is this something I should report under a separate issue?

[yarneo]

Thanks @timusus.

I felt similarly to you, and hence synced up with design to get more clear guidance. We have concluded that it is in fact a card if there are other touch targets within it.
As an example, a card itself doesn't need to be one large touch target if there is a button inside of it. However, it isn't a card if it is solely used as a visual container and doesn't consist of any interactability.

Therefore, I have recently pushed out a PR that allows to toggle the interactibility. You can find it here: https://github.com/material-components/material-components-ios/pull/4404
You can now get a card without ink and elevation when setting its property interactable as NO. This is available for both an MDCCard and an MDCCardCollectionCell.

I hope this helps resolve your issue.

As for MDCShadowElevationCardResting, it looks like it is an old value that isn't used in the card implementation. Feel free to open an issue regarding that, as we should probably remove it or at the very least rename it.

[jverkoey]

Marking as closed. Please re-open though if the above thread did not answer your question.