Use new radio buttons and checkboxes from GOV.UK elements #249
Conversation
The reveal panel has a class of “inline” even though the options should be stacked. This is because each of the text in the options is long enough to force the next option to the next line. Removing the class will cause them to naturally stack regardless of the text. Author: @robinwhittleton
This reverts back to the existing elements styling. Author: @robinwhittleton
There’s a bug that removes the field border when focused in Safari and Chrome. This update to govuk_template fixes it to include the border as well as the focus ring.
This updates GOV.UK Elements to 2.2.0 which includes the new GOV.UK-wide radios and checkboxes. It also contains some minor style fixes around the integration. In the new scheme the native radios and checkboxes are hidden with opacity:0; which breaks Capybara’s `choose` function. We can click on the label instead, but that required an update to Capybara. There are deprecation warnings, but can be fixed in a future commit.
One trivial change from have_css to have_link to match the rest of the suite. The other was around Capybara no longer needing the capybara-puma gem any more (raggi/capybara-puma#6).
|
Forgot to mention, this also potentially removes some CSP over-reporting by removing the |
A fix for the role=“button” JS shim: alphagov/govuk_frontend_toolkit#347
robinwhittleton
force-pushed
the
new-custom-radios
branch
from
8551ea0 to
88291a0
Compare
The default radio button colour matches the text colour and background that it sits in. On Verify’s start page this is a bit of a change compared to the existing style. This block of style overrides the colours to make it look more like existing Verify. It would be interesting to A/B test these Verify styles against the elements defaults, as they have benefits for users who want to pick their own colours.
These are dynamically inserted, but adding them statically makes for a better perf story – the custom inputs can render immediately instead of waiting for the JS to kick in.
robinwhittleton
force-pushed
the
new-custom-radios
branch
from
88291a0 to
825e2b8
Compare
|
These now match the old visual design on the start page:
We should A/B test this and the elements default version soon. The style overrides are in a small block of code in 6d0488f |
|
This all looks good from a design point of view |
|
|
|
Minor nit, seems slightly oval shaped? Plus occasionally seems like there's a bit of lag, but was that the thing discussed here: alphagov/govuk_elements#363 ? But, looks good to me |
Latest elements fixes a potential performance issue on mobile
|
Lag should have been fixed by 825e2b8, so if you’re seeing it still I’d be interested in finding out where. If that turns out to be nothing I’m happy for this to ship now. |
|
Re oval, I think that’s your eyes. There’s an open googly eyes bug but that doesn’t seem to be the case here 👀 |
|
@willp-bl 's image looks squashed to me too, but I can't reproduce the issue in any of the browsers on my machine at any zoom level. Maybe it's an optical illusion? |
|
Chrome says it's 38x38, but it still seems elongated/oval shaped. Might help to see it if you turn the screen 90 degrees? Perhaps it is just an artefact of how it is being drawn? |
|
Just to be a bit more scientific, I've modified the screenshot from @willp-bl: There does appear to be a pixel missing from the left and right sides of the unselected radio button. Doesn't seem to happen in my browser though. |
|
Huh. I'm off today but maybe you could file a bug against govuk_elements? Will look at it next week. |
|
Seeing as we’re having difficult replicating this problem and it’s a minor visual bug can I suggest we merge this PR anyway? I’ll leave the elements issue open and keep on investigating. |
This removes the existing Verify radio buttons and checkboxes implementation and replaces it with the now standard GOV.UK version. We’d previously not done this as we found our version tested better than the old implementation, but the new one is based on the same original designs as Verify and has had considerably more compatibility work put in.
Overall the buttons match the current visual style, albeit slightly larger. In the original elements design there was a grey background and padding away from the edge. This padding remained in the original Verify implementation, but now isn’t needed so some of the spacing has been decreased.
The most major change is on the start page. We’ve built the new elements inputs to work regardless of user choices of background and colour (see Marian Foley’s blog post). We decided that the best way to do this was to purely use the text colour to define the colours of the input and to leave the background transparent. This is a reasonably big change for Verify and it might need some user testing before we’re satisfied that it’s the right thing to do.
Fixes #213