Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update focus state for radios and checkboxes #1316

Merged
merged 4 commits into from
May 10, 2019
Merged

Update focus state for radios and checkboxes #1316

merged 4 commits into from
May 10, 2019

Conversation

36degrees
Copy link
Contributor

@36degrees 36degrees commented May 3, 2019 •
edited
Loading

Affected components

  • Radios
  • Checkboxes

Changes

  • When focussed, double the border width to 4px
  • Reduce the size of the 'bullet' in small radios by 2px
  • Remove transparent outline used when users have overridden colours in their browser

👉 Preview
🖥 Browserstack screenshots

Before

before

After

after

Before (compatibility mode)

Screenshot_2019-05-03 GOV UK Frontend(2)

After (compatibility mode)

Screenshot_2019-05-03 GOV UK Frontend(3)

Before (colours overridden, Firefox 66)

before-cc

After (colours overridden, Firefox 66)

after-cc

Browser testing

  • Internet Explorer 8 (Windows 7)
  • Internet Explorer 9 (Windows 7)
  • Internet Explorer 10 (Windows 8)
  • Internet Explorer 11 (Windows 10)
  • Edge 18 (Windows 10)
  • Edge 17 (Windows 10)
  • Google Chrome 74 (Windows 10)
  • Mozilla Firefox 66 (Windows 10)
  • Safari 12 (macOS Mojave)
  • Google Chrome 74 (macOS Mojave)
  • Mozilla Firefox 66 (macOS Mojave)
  • Safari (iOS 12.2)
  • Google Chrome (iOS 12.2)
  • Google Chrome (Android 9)
  • Samsung Internet (Android 8)

Closes #1304

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1316 May 3, 2019 11:14 Inactive
@36degrees 36degrees force-pushed the radio-checkbox-focus-state branch from 4816df8 to 24ce5d3 Compare May 3, 2019 14:23
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1316 May 3, 2019 14:24 Inactive
@NickColley NickColley added this to the v3.0.0 milestone May 8, 2019
@36degrees 36degrees marked this pull request as ready for review May 9, 2019 12:39
NickColley
NickColley approved these changes May 9, 2019
View reviewed changes
Copy link
Contributor

@NickColley NickColley left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought this would be more complex honestly ha, nice!

Needs a CHANGELOG entry.

Good to merge when tested... and ready

@36degrees
Increase border width on focused radios/checkboxes
2e83e14
@36degrees
Reduce size of small radio ‘bullets’
859efd1 
This provides more space between the outline and the bullet when focused, and makes them visually more similar to the full-sized radios and checkboxes.
@36degrees
Remove transparent outline
d90d50b 
Now that there is a visible state change (the border-width increasing by 2px) when colours are overridden, the additional outline which was only used in that context can be removed.
@36degrees
Document in CHANGELOG
9187a3e
@36degrees 36degrees merged commit 544f269 into v3 May 10, 2019
@36degrees 36degrees deleted the radio-checkbox-focus-state branch May 10, 2019 08:42
@snyk-bot snyk-bot mentioned this pull request Feb 25, 2020
Closed
@36degrees 36degrees mentioned this pull request Jun 24, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@NickColley NickColley NickColley approved these changes

Assignees
No one assigned
Labels
None yet
Projects
GOV.UK Design System cycle board
Archived in project
Milestone
v3.0.0
Development

Successfully merging this pull request may close these issues.
3 participants
@36degrees @NickColley @govuk-design-system-ci