Make design note pin compliant with Pajamas

Refactor and stop using badge for design note pin

Changelog: other

app/assets/javascripts/design_management/components/design_notes/design_discussion.vue

 <script>
-import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink, GlBadge } from '@gitlab/ui';
+import { GlTooltipDirective, GlIcon, GlLoadingIcon, GlLink } from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import { updateGlobalTodoCount } from '~/vue_shared/components/sidebar/todo_toggle/utils';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../../constants';
 import createNoteMutation from '../../graphql/mutations/create_note.mutation.graphql';
 import toggleResolveDiscussionMutation from '../../graphql/mutations/toggle_resolve_discussion.mutation.graphql';
@@ -30,7 +31,7 @@ export default {
     GlLink,
     ToggleRepliesWidget,
     TimeAgoTooltip,
-    GlBadge,
+    DesignNotePin,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -213,12 +214,7 @@ export default {
 
 <template>
   <div class="design-discussion-wrapper">
-    <gl-badge
-      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-cursor-pointer"
-      :class="{ resolved: discussion.resolved }"
-    >
-      {{ discussion.index }}
-    </gl-badge>
+    <design-note-pin :is-resolved="discussion.resolved" :label="discussion.index" />
     <ul
       class="design-discussion bordered-box gl-relative gl-p-0 gl-list-style-none"
       data-qa-selector="design_discussion_content"

app/assets/javascripts/design_management/components/design_overlay.vue

 <script>
 import { __ } from '~/locale';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../constants';
 import updateActiveDiscussionMutation from '../graphql/mutations/update_active_discussion.mutation.graphql';
 import activeDiscussionQuery from '../graphql/queries/active_discussion.query.graphql';
-import DesignNotePin from './design_note_pin.vue';
 
 export default {
   name: 'DesignOverlay',
@@ -251,9 +251,6 @@ export default {
         !discussionNotes.some(({ id }) => id === this.activeDiscussion.id)
       );
     },
-    designPinClass(note) {
-      return { inactive: this.isNoteInactive(note), resolved: note.resolved };
-    },
   },
   i18n: {
     newCommentButtonLabel: __('Add comment to design'),
@@ -287,7 +284,8 @@ export default {
           ? getNotePositionStyle(movingNoteNewPosition)
           : getNotePositionStyle(note.position)
       "
-      :class="designPinClass(note)"
+      :is-inactive="isNoteInactive(note)"
+      :is-resolved="note.resolved"
       @mousedown.stop="onNoteMousedown($event, note)"
       @mouseup.stop="onNoteMouseup(note)"
     />

app/assets/javascripts/design_management/components/design_note_pin.vue → app/assets/javascripts/vue_shared/components/design_management/design_note_pin.vue

@@ -10,13 +10,24 @@ export default {
   props: {
     position: {
       type: Object,
-      required: true,
+      required: false,
+      default: null,
     },
     label: {
       type: Number,
       required: false,
       default: null,
     },
+    isResolved: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isInactive: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     isNewNote() {
@@ -36,10 +47,13 @@ export default {
     :style="position"
     :aria-label="pinLabel"
     :class="{
-      'btn-transparent comment-indicator gl-p-0': isNewNote,
-      'js-image-badge badge badge-pill': !isNewNote,
+      'btn-transparent comment-indicator': isNewNote,
+      'js-image-badge design-note-pin': !isNewNote,
+      resolved: isResolved,
+      inactive: isInactive,
+      'gl-absolute': position,
     }"
-    class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0!"
+    class="gl-display-flex gl-align-items-center gl-justify-content-center gl-font-sm"
     type="button"
     @mousedown="$emit('mousedown', $event)"
     @mouseup="$emit('mouseup', $event)"

app/assets/stylesheets/components/design_management/design.scss

@@ -12,7 +12,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
     top: 35px;
   }
 
-  .badge.badge-pill {
+  .design-note-pin {
     display: flex;
     height: $design-pin-diameter;
     width: $design-pin-diameter;
@@ -23,6 +23,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
     border-radius: 50%;
     z-index: 1;
     padding: 0;
+    border: 0;
 
     &.resolved {
       background-color: $gray-500;
@@ -34,7 +35,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   }
 
   .comment-indicator,
-  .frame .badge.badge-pill {
+  .frame .design-note-pin {
     &:active {
       cursor: grabbing;
     }
@@ -43,7 +44,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   /**
    * Design pin that overlays the design
    */
-  .frame .badge.badge-pill {
+  .frame .design-note-pin {
     box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
     border: $white 2px solid;
     will-change: transform, box-shadow, opacity;
@@ -114,7 +115,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
     }
   }
 
-  .badge.badge-pill {
+  .design-note-pin {
     margin-left: $gl-padding;
   }
 

spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap → spec/frontend/vue_shared/components/design_management/__snapshots__/design_note_pin_spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Design note pin component should match the snapshot of note with index 1`] = `
 <button
   aria-label="Comment '1' position"
-  class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0! js-image-badge badge badge-pill"
+  class="gl-display-flex gl-align-items-center gl-justify-content-center gl-font-sm js-image-badge design-note-pin gl-absolute"
   style="left: 10px; top: 10px;"
   type="button"
 >
@@ -16,7 +16,7 @@ exports[`Design note pin component should match the snapshot of note with index
 exports[`Design note pin component should match the snapshot of note without index 1`] = `
 <button
   aria-label="Comment form position"
-  class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0! btn-transparent comment-indicator gl-p-0"
+  class="gl-display-flex gl-align-items-center gl-justify-content-center gl-font-sm btn-transparent comment-indicator gl-absolute"
   style="left: 10px; top: 10px;"
   type="button"
 >
@@ -26,3 +26,30 @@ exports[`Design note pin component should match the snapshot of note without ind
   />
 </button>
 `;
+
+exports[`Design note pin component should match the snapshot when pin is resolved 1`] = `
+<button
+  aria-label="Comment form position"
+  class="gl-display-flex gl-align-items-center gl-justify-content-center gl-font-sm btn-transparent comment-indicator resolved gl-absolute"
+  style="left: 10px; top: 10px;"
+  type="button"
+>
+  <gl-icon-stub
+    name="image-comment-dark"
+    size="24"
+  />
+</button>
+`;
+
+exports[`Design note pin component should match the snapshot when position is absent 1`] = `
+<button
+  aria-label="Comment form position"
+  class="gl-display-flex gl-align-items-center gl-justify-content-center gl-font-sm btn-transparent comment-indicator"
+  type="button"
+>
+  <gl-icon-stub
+    name="image-comment-dark"
+    size="24"
+  />
+</button>
+`;

spec/frontend/design_management/components/design_note_pin_spec.js → spec/frontend/vue_shared/components/design_management/design_note_pin_spec.js

 import { shallowMount } from '@vue/test-utils';
-import DesignNotePin from '~/design_management/components/design_note_pin.vue';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 
 describe('Design note pin component', () => {
   let wrapper;
@@ -29,4 +29,14 @@ describe('Design note pin component', () => {
     createComponent({ label: 1 });
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  it('should match the snapshot when pin is resolved', () => {
+    createComponent({ isResolved: true });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should match the snapshot when position is absent', () => {
+    createComponent({ position: null });
+    expect(wrapper.element).toMatchSnapshot();
+  });
 });