Skip to content

Draft: Add tooltips to labels in the label editor dropdown

Chad Lavimoniere requested to merge 20240222-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.
  6. Now make sure your window is narrow enough to be within our xs breakpoint. You should find that for each label editing interaction, you do not see a tooltip on hover over the label that has a description.

Related to #333886

Edited by Chad Lavimoniere

Merge request reports