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.

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

feat(radio): change focus ring to match round input #316

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

lunarfusion
Copy link

@lunarfusion lunarfusion commented Oct 23, 2022

Description

This uses a drop-shadow filter and clip path to create a round focus indicator on radio inputs.
Issue #278

Method

  • A box-shadow can only apply square shadows to an element, resulting in a mismatched focus indicator. Screenshot of the original focus state:

Screen Shot 2022-10-24 at 8 25 59 AM

  • Instead of box-shadow, I used a drop-shadow filter. Drop-shadow filter does not yet support the spread variable that box-shadow has, so we cannot create the unblurred solid 2px shadow that box-shadow allows. Instead, I used 4 layered shadow filters which cover a wide enough area to build the focus indicator. Screenshot of the four layered shadow filters:

Screen Shot 2022-10-24 at 8 32 05 AM

  • The shadow is then limited to closely match the original 2 pixel solid box shadow spread by creating a circular clip path which slightly overshoots the edge of the component to allow approximately 2 pixels of shadow to show through:

Screen Shot 2022-10-24 at 8 25 20 AM

How and where has this been tested?

  • Chrome 106 for macOS
  • Firefox 106 for macOS
  • Safari 16 for macOS

Screenshots

Screen Shot 2022-10-23 at 3 09 34 PM

Browser Compatibility

Although this is compatible with Safari, it is worth noting that an existing issue with the display of radio inputs in Safari results in cropping of the input. This was a pre-existing issue due to the width, height, and font size on the input. I recommend that this be resolved in a separate issue.

Safari screenshot:
water-safari-radio-issue

Please let me know if any changes are needed and I would be glad to take care of it.

@changeset-bot
Copy link

changeset-bot bot commented Oct 23, 2022

🦋 Changeset detected

Latest commit: e6a5ad6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
water.css Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant