Focus state not wrapping around the whole icon

[pradyuk]

Hi team,

Im trying to use the branding icon, but the focus state doesn't seem to wrap around perfectly. I would appreciate some help.

[serifluous]

Hey @pradyuk ! Is there a prototype or codesandbox you could share with us? It‘ll make debugging this a little easier.

[pradyuk]

Hey @serifluous! Thanks for your quick turnaround. Would a PR to my code work? If you have access, storybook is configured which might help you. Link to PR

[richbachman]

Hi @pradyuk you may need to give your Anchor a display="inline-block" or display="block", depending on your use-case. That should help with the focus state.

[pradyuk]

@richbachman thanks for that, it definitely looks much better. The logo is still not centered though, can you suggest any workaround for that? I pasted the image below.

[richbachman]

@pradyuk would you mind pushing your latest, so I can see the most recent deployment. That will help with debugging. Thanks.

[pradyuk]

@richbachman done.

[pradyuk]

[richbachman]

@pradyuk after taking a closer look, it looks like you might be running an old version of the icons package. I'm seeing the icon with a display: inline-flex style. That throws off the height and along with it the focus state. If you update your icon package, you should see a display: block style instead. That should fix the issue.

Icons also take a display prop so if updating the package is risky, you could also just pass the icon display="block".

You can find the latest Paste package versions here: https://paste.twilio.design/getting-started/engineering#install-paste-system-packages

We're working on a way to make keeping these up to date much easier as well. More on that soon.

[pradyuk]

@richbachman Thanks so much, this was super helpful and worked like a charm!