Skip to content

GlPopover: Add support for a close button

In gitlab!64540 (merged), we implemented a popover that appears on page load and that can be closed with a close button displayed in its header:

The implementation was done entirely in GitLab by adding some style overrides there, as well as rendering the close button via the #title slot.

As part of #1465 (closed), we later moved the style overrides to GitLab UI, but the close button itself is still being implemented in GitLab.

Proposal

Having style overrides for a close button that does not exist in GitLab feels a bit odd. Let's add out-of-the-box support for a close button in GlPopover.

Here are a few things to consider:

  • The close button should be a small button using the close icon. The GitLab implementation relies on a <span class="gl-display-inline-block" aria-hidden="true">&times;</span> to render the X, which doesn't align with the design specs.
  • Re-adjust the spacing to account for the change above.
  • The close button's visibility should be controlled by a prop (eg. has-close-button).
  • Once the close button is implemented, remove all custom code from ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue in favor of using the built-in feature.

cc @dreedy @kcomoli

Edited by Paul Gascou-Vaillancourt