search

Decathlon / vitamin-compose

Decathlon Design System UI components for Compose applications
https://www.decathlon.design
Apache License 2.0
267 stars 29 forks source link

The ripple effect does not match the design #56

Closed ravenfeld closed 1 year ago

ravenfeld commented 1 year ago

Describe the bug I have the impression that ripples effect are not good since beta 2 before I was on alpha I did not test your develop branch and maybe it is already fixed.

https://user-images.githubusercontent.com/3765114/206702262-514f5138-335a-49fd-a374-25a56b743360.mp4

GerardPaligot commented 1 year ago

I just checked base colors and mapping from base colors to semantics colors and everything seems ok.

Can you tell us what is the configuration of your device or emulator? Device name and Android version. For older versions, there is an hack in the ripple effect which are used by Vitamin but by Compose too:

/**
 * On API 21-27 the ripple animation is split into two sections - an overlay and an
 * animation on top. Due to this split, we need to divide by 2 the original alpha.
 */
private fun getAlpha(alpha: Float = 1f): Float =
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.P) alpha / 2f else alpha

Complete code available here from Material Compose artifact with calculateRippleColor function: https://androidx.tech/artifacts/compose.material/material-ripple/1.1.1-source/androidx/compose/material/ripple/RippleHostView.android.kt.html

If you are using an Android version under 27, you can have small variations on the alpha of the ripple color.

GerardPaligot commented 1 year ago

We made some tests on different devices with different Android versions but with the same code for the ripple effect and the result isn't the same. Each Android version (and even more with API 33 which rework the ripple effect) have its own UI for the same code.

The design team need to take a decision about this fact but I think we'll keep a difference between the implementation and the design for platform OS reasons. We need to document this.

ravenfeld commented 1 year ago

This is a pixel 4a in 31 but the same problem on a one plus 7 in 29 It's during a design review that my designer told me the problem he didn't have on the beta 2

FDELAHA24 commented 1 year ago

@Decathlon/design-system-core-team-design

lauthieb commented 1 year ago

Decision after grooming session:

SimonLeclercq commented 1 year ago

@ManonPolle will generate all the usecase in the vitamin-sample after what color + Figma styles will be add to "native color" into vitamin core theme

SimonLeclercq commented 1 year ago

Discussed with @ManonPolle, Design library will be an XLM representation of Vitamin, and Compose will be entrusted to material automation. Documentation will be update with a short message on this topic.