Create `GlIconWithTooltip` component
### Description <!--Add a short description of the component addition or update. Consider adding a checklist of variations, states, and breakpoints to the description so that reviewers can be sure to cross reference everything that has been completed.--> In our [Pajamas guidelines](https://design.gitlab.com/components/tooltip/#accessibility), 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`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-tooltip--docs) and [`GlIcon`](https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-icon--docs) attributes. #### Proposed source code of the component 1. HTML template: ```html <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> ``` 2. Props ```js 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. [x] 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. [ ] :tada: Congrats, you made it! You can now close this issue.
issue