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
smallbutton using thecloseicon. 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.vuein favor of using the built-in feature.
Edited by Paul Gascou-Vaillancourt