Skip to content

Remove plus button and fix outline

Administrator requested to merge ps/update-saved-search-button-group into main

Created by: philipp-spiess

Currently, the action buttons shown in the saved searches panel on the home pages shows an outline for when one button is selected:

image

This is an issue in multiple ways:

  • It steals attention even though there's nothing to work on
  • It makes the site less accessible since it can be confused with the active element.

This has also been raised internally: https://sourcegraph.slack.com/archives/CHEKCRWKV/p1645538194224819

To fix this and also pave the way for making this panel a tab component for the user invitations work (https://github.com/sourcegraph/sourcegraph/issues/31214), we're making two small changes here as also discussed in this Figma:

  • We remove the plus sign since it looks really odd and people clashes with the null page that also has an "add" CTA. Additionally, if a user already has saved searches, they can add one by following the link at the bottom of this panel.
  • Instead of showing an active outline, we toggle between the outline properties of the button to make it appear "grayed out"

Note: as part of the above work we will also make this button group collapsable if there's not enough space to avoid it overlapping the tab elements. This will happen later in https://github.com/sourcegraph/sourcegraph/pull/31406.

Test plan

  • Start SG in on-prem mode (sg start) and go to the home page.
  • You will see the changes on the bottom right: Screenshot 2022-02-23 at 15 23 30

Merge request reports

Loading