Empty state reduced-motion is not working correctly about clay HOT 6 CLOSED

@marcoscv-work in that example, the empty state image has the class c-prefers-reduced-motion on c-empty-state. This is Clay's manual override to force reduced motion even if the system setting prefers motion. The system setting shouldn't affect this. If you remove the class c-prefers-reduced-motion, it should display the animated image and when you toggle reduced motion it should show the unanimated image. Let me know if I'm not interpreting this correctly.

Edit: We can add an example in the docs without the c-prefers-reduced-motion class.

from clay.

I think with the example and knowing how to apply it to portal will be perfect

from clay.

Related to: #5477

from clay.

Hey guys, can we update the example to add the c-prefers-reduced-motion class to container, since it would normally be applied by adding this class to the body, not directly to specific elements? Also it looks like we are missing the https://clayui.com/images/success_state_reduced_motion.gif image. Can we fix that?

Additionally, is there any work that will be needed to apply this to DXP or will it only require releasing a new version of Clay?

from clay.

The image in Liferay repo:
https://github.com/liferay/liferay-portal/blob/master/modules/apps/frontend-theme/frontend-theme-unstyled/src/main/resources/META-INF/resources/_unstyled/images/states/success_state_reduced_motion.gif

I think the easiest way to apply this would be if we don't need to update anything in DXP, just make it work directly.
There are a lot of empty states and it would be difficult to update them all, and of course, if we don't currently provide an static alternative image, it's okay if we don't display the image.

from clay.

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-187558

from clay.