Feature: add focus ring for blocks

[glaubersilva]

Description

This PR adds a focus ring for the blocks when they are selected. This feature is helpful because provides UI feedback about which block is selected.

Affects

The form builder

Visuals

Testing Instructions

Click on any block in the form builder and you should see a blue focus ring indicating that the block is selected, check the attached screenshot for reference.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1204927308757475

[glaubersilva]

@jonwaldstein Thanks for the explanations, now I better understand your concerns in regard to this. I did implement your suggestion with a slight difference, let me know if there is anything else.

[jonwaldstein]

@glaubersilva thanks! looks good to me but i'm also not the designer. I'm thinking since this will affect all block selections we should do a quick screen share with @jdghinson to get his thoughts. I think in his earlier designs he had a selected ring but there was no padding - so we'll want to see how this interacts with different block types.

[glaubersilva]

@jonwaldstein Thanks! I already create a new zip with these last changes and send it to @jdghinson via Slack for a re-review.

[glaubersilva]

@jonwaldstein After @jdghinson reviewed it, we implemented a couple of cosmetic changes, but one specific required a bit of JS. So, I recorded a video to better explain why it was necessary, let me know your thoughts on it. Thanks!

Video: https://www.loom.com/share/6031260278924155b4289a856a0417d1

[glaubersilva]

@jonwaldstein This is ready for re-review.

[jonwaldstein]

@glaubersilva great job man!