Merge branch '209770-design-comments-text-wrapping-behavior' into 'master'

Resolve "Design comments: Text wrapping behavior"

See merge request gitlab-org/gitlab!40359

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

@@ -102,12 +102,12 @@ export default {
         </a>
         <span class="note-headline-light note-headline-meta">
           <span class="system-note-message"> <slot></slot> </span>
-          <template v-if="note.createdAt">
-            <span class="system-note-separator"></span>
-            <a class="note-timestamp system-note-separator" :href="`#note_${noteAnchorId}`">
-              <time-ago-tooltip :time="note.createdAt" tooltip-placement="bottom" />
-            </a>
-          </template>
+          <a
+            class="note-timestamp system-note-separator gl-display-block gl-mb-2"
+            :href="`#note_${noteAnchorId}`"
+          >
+            <time-ago-tooltip :time="note.createdAt" tooltip-placement="bottom" />
+          </a>
         </span>
       </div>
       <div class="gl-display-flex">

changelogs/unreleased/209770-design-comments-text-wrapping-behavior.yml

+---
+title: 'Resolve Design comments: Text wrapping behavior'
+merge_request: 40359
+author:
+type: fixed

spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap

@@ -46,7 +46,16 @@ exports[`Design note component should match the snapshot 1`] = `
           class="system-note-message"
         />
          
-        <!---->
+        <a
+          class="note-timestamp system-note-separator gl-display-block gl-mb-2"
+          href="#note_123"
+        >
+          <time-ago-tooltip-stub
+            cssclass=""
+            time="2019-07-26T15:02:20Z"
+            tooltipplacement="bottom"
+          />
+        </a>
       </span>
     </div>
      

spec/frontend/design_management/components/design_notes/design_note_spec.js

@@ -15,6 +15,7 @@ const note = {
   userPermissions: {
     adminNote: false,
   },
+  createdAt: '2019-07-26T15:02:20Z',
 };
 HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 
@@ -79,10 +80,7 @@ describe('Design note component', () => {
 
   it('should render a time ago tooltip if note has createdAt property', () => {
     createComponent({
-      note: {
-        ...note,
-        createdAt: '2019-07-26T15:02:20Z',
-      },
+      note,
     });
 
     expect(wrapper.find(TimeAgoTooltip).exists()).toBe(true);