Custom checkbox

[lkleuver]

Change checkbox so it has custom styling to allow for error state.

part of #263

[jorisleker]

• The border-color of the unchecked unfocused (not in error state) checkbox is too dark (Figma)
• Please use the focus (border+glow) we also use for buttons for the focus state of checkboxes (See components in Figma)
• When the warning is shown, the checkbox should have a error/600 red border. Currently it doesn't. (Figma)
• The checkmark in design is a bit heavier then the current implementation (Figma)
• The label element should have a top and border padding or margin of 1.5rem, so it is properly spaced to the alert and the submit button.
• On small viewports, the checkbox's width is reduced, and the checkbox isn't square anymore.

[praseodym]

Could you remove the commits to main that are duplicated in this branch?

[lkleuver]

• The border-color of the unchecked unfocused (not in error state) checkbox is too dark (Figma)
• Please use the focus (border+glow) we also use for buttons for the focus state of checkboxes (See components in Figma)
• When the warning is shown, the checkbox should have a error/600 red border. Currently it doesn't. (Figma)
• The checkmark in design is a bit heavier then the current implementation (Figma)
• The label element should have a top and border padding or margin of 1.5rem, so it is properly spaced to the alert and the submit button.
• On small viewports, the checkbox's width is reduced, and the checkbox isn't square anymore.

I've think I've addressed all issues, except the not showing the red border, I can't reproduce this.
If you can, could you check if the custom checkbox div has a class "has-error" ?

[lkleuver]

Could you remove the commits to main that are duplicated in this branch?

🤦

[jschuurk-kr]

@lkleuver I don't get the red checkbox on the Voters and Votes page, only on the Differences page.

[lkleuver]

• it is present in the document
• it does not have its css property display set to none
• it does not have its css property visibility set to either hidden or collapse
• it does not have its css property opacity set to 0
• its parent element is also visible (and so on up to the top of the DOM tree)
• it does not have the hidden attribute
• if <details /> it has the open attribute

To summarize, styles aren't loaded by our testing library currently, we can either load them or focus RTL tests on checking for the correct classes/attributes.

Currently I've added the hidden attribute to the section that hides the checkbox. This works and circumvents loading styles. We could also check for the presence of "hidden" on the section, but this couples it a lot to the html structure.

[jorisleker]

There is still the 'checkbox remains checked' bug.

Reproduction steps:

• On voters and votes enter some numbers that will result in a warning (ie A100, D100, E90, F10, H100)
• press volgende
• check the 'accept warnings' checkbox, don't press volgende
• change your input to something that will trigger a warning (ie change E94, F6)
• the checkbox disappears
• press volgende.
• you get a warning, the checkbox reappears and is checked (should be unchecked)

Styling + other behavior look good to me

[jorisleker]

see last comment

[lkleuver]

onChange didn't fire, changed it.
Might be a controlled input in the future.

[jorisleker]

retested the bug I found earlier, has been resolved!

resolved by using click