Skip to content

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

2022-01-27_11.58.22

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.

Edited by Miguel Rincon

Merge request reports

Loading