Pass custom slots from HelpPopover to GlPopover
What does this MR do and why?
This change extends the <help-popover> component by allowing it to take slots as a <gl-popover> would.
I plan to use this update at: !79239 (merged), but this change can stand on it's own.
Screenshots or screen recordings
![]() |
How to set up and validate locally
Use the code above to render the popover using slots
<h3>Current Popover Features:</h3>
<p>
We can add text to the popover via options
<help-popover :options="{ title: 'Plain text', content: 'Text content' }" />
</p>
<p>
This text can even be simple HTML
<help-popover :options="{ title: '<u>HTML</u> text', content: '<u>HTML</u> content' }" />
</p>
<hr />
<h3>New Popover Features:</h3>
<p>
However, now we can add Vue code via slots, such as gl-icon
<help-popover>
<template #title>
<i><gl-icon name="code" /> text</i>
</template>
<gl-sprintf :message="'%{html} content'">
<template #html><gl-icon name="doc-code" /></template>
</gl-sprintf>
</help-popover>
</p>
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Miguel Rincon
