Merge branch 'winh-markdown-preview-lists' into 'master'

Remove unnecessary div from MarkdownField to apply list styles correctly

Closes #55190

See merge request gitlab-org/gitlab-ce!23733

(cherry picked from commit 2155395025422d106968964ea59b109caa142ba4)

1285fe68 Remove unnecessary div from MarkdownField to apply list styles correctly

4 files changed, 18 insertions, 7 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 21d6519191f..43def2673eb 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { s__ } from '~/locale';
+import { __ } from '~/locale';
 import Flash from '../../../flash';
 import GLForm from '../../../gl_form';
 import markdownHeader from './header.vue';
@@ -99,11 +99,12 @@ export default {
 
       if (text) {
         this.markdownPreviewLoading = true;
+        this.markdownPreview = __('Loading…');
         this.$http
           .post(this.versionedPreviewPath(), { text })
           .then(resp => resp.json())
           .then(data => this.renderMarkdown(data))
-          .catch(() => new Flash(s__('Error loading markdown preview')));
+          .catch(() => new Flash(__('Error loading markdown preview')));
       } else {
         this.renderMarkdown();
       }
@@ -162,10 +163,12 @@ export default {
         />
       </div>
     </div>
-    <div v-show="previewMarkdown" class="md md-preview-holder md-preview js-vue-md-preview">
-      <div ref="markdown-preview" v-html="markdownPreview"></div>
-      <span v-if="markdownPreviewLoading"> Loading... </span>
-    </div>
+    <div
+      v-show="previewMarkdown"
+      ref="markdown-preview"
+      class="md-preview js-vue-md-preview md md-preview-holder"
+      v-html="markdownPreview"
+    ></div>
     <template v-if="previewMarkdown && !markdownPreviewLoading">
       <div v-if="referencedCommands" class="referenced-commands" v-html="referencedCommands"></div>
       <div v-if="shouldShowReferencedUsers" class="referenced-users">
diff --git a/changelogs/unreleased/winh-markdown-preview-lists.yml b/changelogs/unreleased/winh-markdown-preview-lists.yml
new file mode 100644
index 00000000000..6e47726283d
--- /dev/null
+++ b/changelogs/unreleased/winh-markdown-preview-lists.yml
@@ -0,0 +1,5 @@
+---
+title: Remove unnecessary div from MarkdownField to apply list styles correctly
+merge_request: 23733
+author:
+type: fixed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2aeb015ed09..4f55eac44ab 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3913,6 +3913,9 @@ msgstr ""
 msgid "Loading..."
 msgstr ""
 
+msgid "Loading…"
+msgstr ""
+
 msgid "Lock"
 msgstr ""
 
diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js
index abb17440c0e..79e0e756a7a 100644
--- a/spec/javascripts/vue_shared/components/markdown/field_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js
@@ -80,7 +80,7 @@ describe('Markdown field component', () => {
         previewLink.click();
 
         Vue.nextTick(() => {
-          expect(vm.$el.querySelector('.md-preview').textContent.trim()).toContain('Loading...');
+          expect(vm.$el.querySelector('.md-preview').textContent.trim()).toContain('Loading…');
 
           done();
         });