Create GlPin component

There is a need for a GlPin (or similar) component.

Current usage

• Design View within Design Management - indicates where a comment has been placed
• Comments on image diffs (commits, MRs)
• ... more?

Why?

Primarily because we are currently maintaining two (possibly more) versions of the same component. In %13.4 we will be implementing a redesign of the pin used in Design Management (gitlab#219951 (closed)), and these changes haven't been scheduled for pins on image diffs; after %13.4 we will have two different styles for pins on images 😢.

Therefore, it seems like a good opportunity to create a component in GitLab UI (with the new design from gitlab#219951 (closed)), and eventually reuse this for image diffs (and potentially other places).

Relevant files

When implementing this component in gitlab-ui, the following files can be used as a guide and/or reused somewhat:

• app/assets/stylesheets/components/design_management/design.scss
• app/assets/javascripts/design_management/components/design_note_pin.vue
• spec/frontend/design_management/components/design_note_pin_spec.js

Component name

Open to suggestions (please edit this description to add your idea)! Ideally the name will communicate that the pin will not grow with the text content (i.e. will remain a circle).

• GlPin
• GlCirclePin
• GlFixedPin

Relevant discussions

• gitlab-org/gitlab discussion: gitlab!39797 (comment 423382682)