Allow GlTooltip delay to be customized through localStorage
Background
As part of https://gitlab.com/gitlab-org/design.gitlab.com/issues/235, the UX team would like the ability to make a global change to the tooltip delay on GitLab for testing purposes. This will allow them to fine tune the show and hide delay of tooltips without a lot of back-and-forth with the development team.
@pedroms had the great idea of allowing the tooltip delay to be customized through the browser console: https://gitlab.com/gitlab-org/design.gitlab.com/issues/235#note_175246869. This MR adds this ability to @gitlab/ui
. This ability is intended to be temporary and will be removed once the UX folks have had a chance to play around with different delay amounts on GitLab.com.
What does this MR do?
- Allows the tooltip delay to be customized globally by setting a
localStorage
property with the keygl-tooltip-delay
. This property is read when thetooltip
directive is imported from@gitlab/ui
. - Adds a (dev) dependency on
jest-localstorage-mock
in order to allow Jest tests to run properly with the newlocalStorage
code.
gl-tooltip-delay
If this localStorage
key is not found, no tooltip delay is configured. (The current behavior of our tooltip directive.)
To use this feature, a user can run any of the following commands in their browser console (which can be opened by pressing F12):
Make tooltips wait 1000ms before being shown:
localStorage.setItem('gl-tooltip-delay', JSON.stringify({ show: 1000 }))
Make tooltips wait 1000ms before being hidden:
localStorage.setItem('gl-tooltip-delay', JSON.stringify({ hide: 1000 }))
Make tooltips wait 500ms before being shown and 600ms before being hidden:
localStorage.setItem('gl-tooltip-delay', JSON.stringify({ show: 500, hide: 600 }))
Make tooltips wait 1000ms before being shown and 1000ms before being hidden:
localStorage.setItem('gl-tooltip-delay', JSON.stringify(1000))
To go back to the default delay, a user can remove the localStorage
key:
localStorage.removeItem('gl-tooltip-delay')
Going forward
After UX has a chance to play around with the tooltip delay on GitLab.com and determines a good standard delay to be implemented, this customization feature will be removed. This optimal delay amount will then be set as the default for all tooltips within GitLab.
Notes
This MR only affects GlTooltip
s, i.e. tooltips that are part of a Vue template. This same change has been made for non-Vue (vanilla JS) tooltips here: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/30196