search

Couchers-org / couchers

The next-generation couch surfing platform. Free forever. Community‑led. Non‑profit. Modern. Chuck us a star :)
https://couchers.org
MIT License
389 stars 79 forks source link

Radio buttons (and others?) have no active state #4192

Open lucaslcode opened 3 years ago

lucaslcode commented 3 years ago

This can be seen on the donate, edit profile, and contribute pages. We use the mui radio component, and their examples do have active state, so I'm not sure why we don't.

darrenvong commented 3 years ago

Yeah the ripples are not displaying like they do in their demos. Have we accidentally overriden something in the theme that cause this?

darrenvong commented 3 years ago

It's because of this 😒 https://github.com/Couchers-org/couchers/blob/d63eca4741aa55d9038b498bbc5e0ac525db975d/app/frontend/src/theme.ts#L92

Why was this disabled in the first place? It's been there since the beginning of the repo...

lucaslcode commented 3 years ago

Most people hate the ripple because it looks too Material-ly. The active state is more important, but it would be good if we could have active state with no ripple...

lucaslcode commented 3 years ago

Actually, looks like there are better props

We could either change it to disableTouchRipple or keep as is but also add focusVisibleClassName. There's also focusRipple but I'm not sure that's what we want.

darrenvong commented 3 years ago

Hmm or only disable it for Button (and replace with a different active state style, like outline around the button) but not ButtonBase? I think ButtonBase is shared with a lot of other components including radio buttons