SideNav: adding box-shadow under focus pseudo selector (#1219) #1227
Conversation
🦋 Changeset detectedLatest commit: 4b21749 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/primer/primer-components/Hp1DEzKhY2WKP3GUBBVQ1Bfn7Csj |
| @@ -97,6 +103,13 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => { | |||
|
|
|||
| &:first-child { | |||
| border-top: 0; | |||
| border-top-right-radius: ${get('radii.2')}; | |||
| border-top-left-radius: ${get('radii.2')}; | |||
There was a problem hiding this comment.
I've moved this down from lines 82 - 91 due do to the following:
for the lightweight version of the component, the previous version was adding a border-radius to both the top and the bottom, which becomes very noticeable when using the box-shadow property. If the border-radius is still desired for the lightweight version I can revert this specific change, I just thought that it looks a little odd for the lightweight version but happy to discuss 🙂
Describe your changes here.
Closes #1219 -
SideNavfocus state is hard to see, the purpose of this PR is to bring the component closer to the Primer CSS proposal to usestate-focus-shadowto add a bluebox-shadowinstead of the subtle background color. For more details on the merged proposal please see primer/css#1391Screenshots
Before:
Screen.Recording.2021-05-14.at.11.23.44.AM.mov
After:
Screen.Recording.2021-05-14.at.11.25.32.AM.mov
Merge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.