netlify[bot]
commented
8 months ago Deploy Preview for stacks ready!
| Name | Link |
|---|---|
| Latest commit | 5a00cf223e761573ab556d2fb8f226616400989b |
| Latest deploy log | https://app.netlify.com/sites/stacks/deploys/65bc108b6ea5ef0008f5c684 |
| Deploy Preview | https://deploy-preview-1628--stacks.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
CGuindon
dancormier
Addresses https://stackoverflow.atlassian.net/browse/STACKS-549
This PR updates focus styles for all elements generally included within the topbar component.
Deploy preview
Notes on visual changes
.s-topbar--item,.s-topbar--logoFrom STACKS-549:
To match the mockup, I added a border radius of
var(--br-sm)of items (and of the logo for consistency). @CGuindon let me know if this is ok or if it needs modification.Search
The old focus styles looked out of place and it was easy enough to add a matching focus ring to the search input and select element. @CGuindon is this alright or should I revert/modify?
Ring placement
For the search input and select elements, I opted to render the focus ring outside the element. This stands in contrast with other topbar elements, which all have the focus ring rendered inside the element. I did this because these elements rely on the border being visible to read as an input/select. When I tried adding the ring inside the element, the focus state was kinda tough to distinguish from the unfocused state, especially in high contrast mode.
Notes on technical changes
Code structure
Since this component doesn't yet adhere to our PPCP structure, I decided it was best to keep all of the focus code grouped for easy parsing (and easy porting when we make the switch to PPCP).