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 theclose
icon. The GitLab implementation relies on a<span class="gl-display-inline-block" aria-hidden="true">×</span>
to render theX
, 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.
Edited by Paul Gascou-Vaillancourt