Create `GlIconWithTooltip` component

Description

In our Pajamas guidelines, there is an example of an accessible icon with a tooltip that encloses the icon with a button to better support the activation of the tooltip for keyboard and assistive technology users. Given that this has become an increasingly common pattern in the gitlab-org/gitlab project, let's create a new GlIconWithTooltip component that is accessible out-of-the-box. It should support all GlTooltip and GlIcon attributes.

Proposed source code of the component

  1. HTML template:
<button
  v-gl-tooltip
  class="gl-border-0 gl-bg-transparent gl-p-0 gl-leading-0"
  :title="tooltipText"
  :aria-label="tooltipText"
>
  <gl-icon name="iconName" />
</button>
  1. Props
tooltipText: {
  type: String,
  required: true,
},
iconName: {
  type: String,
  required: true,
},
iconSize: {
  type: String,
  required: false,
},
iconVariant: {
  type: String,
  required: false,
},

One of the props of GlIcon is ariaLabel, but since we will be ensuring accessibility with new tooltipText prop, I'd recommend omitting it to avoid confusion.

Checklist

Make sure the following are completed before closing the issue:

  1. Assign the correct component label to this issue.
  2. Create an MR with the additions or updates needed.
  3. Be sure to get your MR reviewed by a [FE/UX Foundations designer][foundations-team].
  4. When applicable, create an [MR in Pajamas][pajamas-mr] to update the demos. If you do not have capacity to complete the demos, [create an issue in Pajamas][pajamas-issue] and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
  5. When applicable, [create an MR in Pajamas][pajamas-mr] to update the component status.
  6. When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Component Documentation"][pajamas-component-documentation-template] issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  7. When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Figma update"][pajamas-figma-update-template] issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
  8. When introducing a major or breaking change, communicate the changes within the [Engineering Week in Review][eng-week-in-review-doc].
  9. 🎉 Congrats, you made it! You can now close this issue.
Edited by Paulina Sedlak-Jakubowska