Loading
Reveal sidebar category chevrons only on hover or focus
What does this MR do and why?
With hide_unpinned_sidebar_items on, every auto-grouped category header in the super sidebar shows a chevron, which adds a lot of visual noise. This MR hides that chevron until the header is hovered or focused with the keyboard.
- The rule only applies under
@media (hover: hover). Touch devices can't hover, so they always show the chevron. - It uses
:focus-visible, so clicking a header with the mouse doesn't leave the chevron showing. PinnedSectionpasses a newMenuSectionprop,revealChevronOnHover, only for category groups. That prop adds asuper-sidebar-category-toggleclass, and the SCSS targets that class. Regular menu sections, the flat "Pinned" section, icon-only mode, the "Full" categories fallback and the sidebar with the flag off are not affected.aria-expandedon the header button is unchanged, so screen readers still get the expanded state.
Known limitation: (hover: hover) checks the primary input. On a touchscreen laptop whose primary input is a trackpad, touching the screen doesn't show the chevron until the header is tapped and focused.
References
- Feature issue: #601398 (closed)
- Rollout issue: #604888
Screenshots or screen recordings
| Before | After |
|---|---|
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
- In the Rails console, enable the feature flag:
Feature.enable(:hide_unpinned_sidebar_items) - Open a project and pin enough items from one category (for example, several Code items) for them to form a category group in the sidebar.
- On a desktop browser, check that the category chevron is hidden at rest. It should show when you hover the header or press Tab to reach it, whether the group is expanded or collapsed. Clicking a header should not leave the chevron showing once the pointer moves away.
- In Chrome DevTools device mode (touch emulation), check that the chevron is always visible.
- Check that icon-only mode, the "Full" categories fallback and the sidebar with the flag off look the same as before.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Austin Regnery



