dnbexperience / eufemia

DNB Design System
https://eufemia.dnb.no
Other
49 stars 30 forks source link

Selected radio button hover state not represented correctly #3825

Open mallsoft opened 1 month ago

mallsoft commented 1 month ago

🐛 Bug Report

As title suggests, the hovering of the radio button semi hides the state of the radio button image When hovering image

To Reproduce

Steps to reproduce the behavior:

Click radio, hover the selected value, and you should observe an "not selected" state. https://codesandbox.io/p/sandbox/late-wildflower-f7l22h?file=%2Fsrc%2FApp.tsx%3A15%2C15

Expected behavior

The selected radio button should retain the green dot in the middle when being hovered / pointer is above the element.

langz commented 1 week ago

@joakbjerk, if I remember correctly, you and Arne discussed this in a meeting earlier this week. What was the conclusion?

joakbjerk commented 1 week ago

@langz We came to the conclusion that the green dot in the should dot inside should change color and become lighter, so the second image shows the correct hover state 👍

langz commented 1 week ago

Great, thanks for the update 👍 The reason for me asking, was because I also got an inquiry from whom was unsure if it was the correct styling when hovering an active radio button as well, but I guess it is then 👍

stenburger1 commented 1 week ago

@joakbjerk To be honest, I was confused by this. One could argue it'll be confusing for end users too. Was this tested on end users or do you have a process to uncover if the change has side effects (on end users)? I agree that hovering an active dot can have effects, but if it leads to an actual struggle to see that the button below is checked, this might, in my opinion, be a little bit much. Maybe all that is needed is some tweaking?

joakbjerk commented 1 week ago

@stenburger1 I see your points, and agree on how it can be confusing for the users. I just had a short chat with Arne yesterday about this, so I'm not really sure the reasoning behind this, or if it has been tested at all. All I know at this point is that this is how the hover effect will look in the new Eufemia Foundation design thingy they are working on. But I could ask Arne again to get some clarification 🙏

joakbjerk commented 1 week ago

@stenburger1 So I've had Arne clarify it for me again 😄 So the with the current design, the background color of the selected radio button should change to a lighter background color. But with the new Eufemia Foundation, the background color should not change, and instead retain the dark green color. So the bug in this issue is actually correctly described when the new designs are in place 😄🙏

stenburger1 commented 1 week ago

@joakbjerk Thanks for the quick feedback. Glad to hear. Is there a place us developers can follow these processes / changes to UX in Eufemia? Seeing as not everyone might agree with changes such as this, and it hits our end users, I feel like transparency is a minimum requirement (among others). I realise that in practice that can be very hard to maintain, but alas.

joakbjerk commented 5 days ago

Hmm, I'm not really sure that we have an arena for that, unfortunately 🤔