Adjust design implementation for the field types

FWIW, The focus state that I'm seeing (latest Chrome) shows a focus state similar to what you're looking for (although the radio button also has an outline). What browser are you testing?

The entire box reacts to both hovers, and clicks. Although, it doesn't have cursor: pointer on, as it probably should.

Are you seeing the same behavior as me?

@mherchel I tested it on Firefox. I think I saw the hover for the radio itself was independent from the one in the whole wrapper. So not sure if it's a browser thing or not?

Re: #4 Discovered that :has() in css which was responsible for adding the state-specific styling doesn't work in Firefox. I removed the :has() and replaced it with JS so it should work now.

There's two small styling differences from the designs because its pre-existing Drupal element css. One being the radio button also having a green outline and the second the error state making the field label red too. I figured those were minor enough to keep but happy to update if it's an issue.

Gonna improve lots of things now

MR updated, it needs review now.

1. Did rebase
2. Did clean-up of all new svg icons (got rid of stroke based svg icons, also combined multiple svg objects into one object)
3. Fixed all styles (now much more aligned with Figma and pretty modern CSS)
4. Wrote some extra js to get focus state on those "boolean cards"

MR appeared to have some test failures.

I went through the modifications across all the different states, and the designs now sync perfectly with what we wanted making the whole field card region look clickable. The icons and field cards are also as expected in terms of size. Gave it a whirl on Chrome, Firefox, and Safari, and everything looks perfectly fine on all these browsers.

+1 to RTBC this.

Just one small note that would ideally be taken care in a follow-up: since the styles rely on the JS-generated class .focus, if the focus is created by dev tools for example it’ll break the styles for hover&selected. Basically, the border of the “card” is thinner than expected and it’s confusing. But not a big deal for 99,99% of cases since you need to use dev tools to reproduce it.

Discovered one bug when testing this. Reported on the MR.

Created follow up 🐛 Dev tools added focus breaks styles for hover and focus on field cards Active for #14

All the feedbacks are addressed and changes look good to me. Marking it RTBC.

Posted review on the MR

All the feedbacks are addressed.Marking this as RTBC.

lauriii → closed merge request !4518

Committed 37117ca and pushed to 11.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.