Additional Shadow Focus Inset Token

[nayanadasgupta]

Hi, I'm currently creating a keyboard navigable side navigation component which is set directly against the left edge of the page (see image). To avoid changing the dimensions of the button, I need to use an inset shadow focus. However, the $shadow-focus-inset token that is currently available has width 2px which does not match the non-inset shadow focus for buttons used elsewhere in the UI.

Could a new token (associated with this statement inset 0 0 0 4px rgba(2, 99, 224, 0.7)) be created to fill the gap for an inset shadow focus with the same thickness as the non-inset shadow focus meant for interactive elements?

[gloriliale]

Hi @nayanadasgupta! Can you elaborate a little more on why Button's focus state isn't working for you here? The focus state does use a box-shadow, which shouldn't affect the width of the button itself. If you send over a codesandbox replica, that would also help (feel free to use this one as a starter).

[nayanadasgupta]

HI @gloriliale Thanks for your reply - I've created a code sandbox replica as requested which is accessible [redacted]

As you can see the the edges of the focus indicator are cut off when the non-inset box shadow is used.

And If you use shadowFocusInset the thickness of the focus-indicator does not match the thickness of the other focus indicators for interactive elements.

[loreina]

Hi @nayanadasgupta, I've shared this with the team and we'll follow up shortly. Thanks!

[kelseycavitt]

Hi @nayanadasgupta ,
Our team is currently working on a design for creating a Navigation UI Kit, where we're considering the needs of the navigations across our products. This issue you're experiencing may be solved by Q2 of this year, as that's when we'll complete building the kit in code.

As a quick fix, we think that using shadowfocusinset can work for now. The difference in thickness shouldn't cause too great of an issue, as the content is still accessible, and we'll be aligning them with the navigation ui kit work, along with the design language updates work. To learn more about the updates, check out our guide.

Let us know if you have any questions or concerns.