Skip to content

Add tooltips to labels in the label editor dropdown (issuables only)

Chad Lavimoniere requested to merge 333886-label-dropdown-tooltip into master

What does this MR do and why?

Add tooltips to labels that have descriptions when they appear in the label editing dropdown in the sidebar

  • Tooltips only appear on labels that have descriptions
  • Tooltips only appear if the viewport is wider than our xs breakpoint at the time of hover/focus
  • Tooltips appear to the left of the label, leveraging the GlTooltip component's boundary prop to allow overflow outside the dropdown container

What does this MR not do?

This MR explicitly does not address this functionality in work items, as the label editing experience in work items is completely different and updates to the Pajamas collapsible list box will be necessary to implement this functionality there.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Screenshot_2023-12-21_at_14.40.19

the tooltip is present when the viewport width is wider than our xs breakpoint

image

This means the tooltip is not present on a mobile device (or a narrow desktop browser window)

How to set up and validate locally

  1. Check out this MR branch
  2. Turn on the feature flag in your GDK: echo "Feature.enable(:label_dropdown_tooltip)" | gdk rails c
  3. Make sure your browser window is wider than 900px
  4. In a project that has at least one label with a description:
    1. Navigate to an issue within the project and edit the labels. Search for the label in the Labels dropdown. Hovering over the label in the dropdown will cause a tooltip to appear, showing that label's description.
    2. Navigate to an MR within the projectr and edit the labels. Search for the label in the Labels dropdown. Hovering over the label in the dropdown will cause a tooltip to appear, showing that label's description.
    3. Navigate to Issue boards in the project, and click on an issue to open the sidebar. Edit the issue's labels and search for the label in the Labels dropdown. Hovering over the label in the dropdown will cause a tooltip to appear, showing that label's description.
  5. In a group that has at least one label with a description:
    1. Navigate to an issue in the group and edit the labels. Search for the label in the Labels dropdown. Hovering over the label in the dropdown will cause a tooltip to appear, showing that label's description.
    2. Navigate to Issue boards in the group, and click on an issue to open the sidebar. Edit the issue's labels and search for the label in the Labels dropdown. Hovering over the label in the dropdown will cause a tooltip to appear, showing that label's description.

Related to #333886 (closed)

Edited by Chad Lavimoniere

Merge request reports

Loading