Skip to content

Add focus background and margin-bottom to super sidebar nav items

Scott de Jonge requested to merge super-sidebar-nav-item-focus-background into master

What does this MR do and why?

Add focus background and margin-bottom to super sidebar nav items

  • Update @gitlab/ui to v59.1.0 for gl-focus-bg-t-gray-a-08 class
  • Add gl-mb-1 and gl-focus-bg-t-gray-a-08 classes
  • Add gl-focus-bg-t-gray-a-08 class to context-switcher and pin toggle

Screenshots or screen recordings

Before After
CleanShot_2023-04-05_at_15.41.19 CleanShot_2023-04-05_at_15.41.51
127.0.0.1_3000_flightjs_Flight_-tree_master__2 127.0.0.1_3000_flightjs_Flight_-tree_master__1
  • Hover: "Code"
  • Active: "Repository"
  • Focus: "Branches"

Video comparison between before and after

CleanShot_2023-04-05_at_15.16.46

How to set up and validate locally

  1. Enable super sidebar (if not currently on)
    1. In rails c enable feature flag Feature.enable(:super_sidebar_nav)
    2. Toggle on "new navigation" in user menu
  2. Compare :hover/:focus and current page styles

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Scott de Jonge

Merge request reports