Merge branch 'add-gl-link-to-markdown-header' into 'master'

Change markdown header tab anchor links to buttons

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

Author: annabel

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -1,16 +1,16 @@
 <script>
 import $ from 'jquery';
-import tooltip from '../../directives/tooltip';
-import toolbarButton from './toolbar_button.vue';
-import icon from '../icon.vue';
+import Tooltip from '../../directives/tooltip';
+import ToolbarButton from './toolbar_button.vue';
+import Icon from '../icon.vue';
 
 export default {
   directives: {
-    tooltip,
+    Tooltip,
   },
   components: {
-    toolbarButton,
-    icon,
+    ToolbarButton,
+    Icon,
   },
   props: {
     previewMarkdown: {
@@ -68,27 +68,27 @@ export default {
         :class="{ active: !previewMarkdown }"
         class="md-header-tab"
       >
-        <a
+        <button
           class="js-write-link"
-          href="#md-write-holder"
           tabindex="-1"
-          @click.prevent="writeMarkdownTab($event)"
+          type="button"
+          @click="writeMarkdownTab($event)"
         >
           Write
-        </a>
+        </button>
       </li>
       <li
         :class="{ active: previewMarkdown }"
         class="md-header-tab"
       >
-        <a
+        <button
           class="js-preview-link js-md-preview-button"
-          href="#md-preview-holder"
           tabindex="-1"
-          @click.prevent="previewMarkdownTab($event)"
+          type="button"
+          @click="previewMarkdownTab($event)"
         >
           Preview
-        </a>
+        </button>
       </li>
       <li
         :class="{ active: !previewMarkdown }"

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -161,6 +161,7 @@
 
   .nav-links li {
     &.active a,
+    &.md-header-tab.active button,
     a.active {
       border-bottom: 2px solid $active-tab-border;
 

app/assets/stylesheets/framework/markdown_area.scss

@@ -72,6 +72,7 @@
 .md-header-tab {
   @include media-breakpoint-down(xs) {
     flex: 1;
+    flex-direction: column;
     width: 100%;
     border-bottom: 1px solid $border-color;
     text-align: center;

app/assets/stylesheets/framework/secondary_navigation_elements.scss

@@ -8,15 +8,17 @@
   height: auto;
   border-bottom: 1px solid $border-color;
 
-  li {
+  li:not(.md-header-toolbar) {
     display: flex;
 
-    a {
+    a,
+    button {
       padding: $gl-btn-padding;
       padding-bottom: 11px;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;
+      border: 0;
       border-bottom: 2px solid transparent;
       white-space: nowrap;
 
@@ -33,7 +35,12 @@
       }
     }
 
+    button {
+      padding-top: 0;
+    }
+
     &.active a,
+    &.active button,
     a.active {
       color: $black;
       font-weight: $gl-font-weight-bold;
@@ -42,6 +49,10 @@
         color: $black;
       }
     }
+
+    &.md-header-tab button {
+      line-height: 19px;
+    }
   }
 }
 

app/views/projects/_md_preview.html.haml

@@ -11,10 +11,10 @@
   .md-header
     %ul.nav.nav-tabs.nav-links.clearfix
       %li.md-header-tab.active
-        %a.js-md-write-button{ href: "#md-write-holder", tabindex: -1 }
+        %button.js-md-write-button{ tabindex: -1 }
           Write
       %li.md-header-tab
-        %a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 }
+        %button.js-md-preview-button{ tabindex: -1 }
           Preview
 
       %li.md-header-toolbar.active

changelogs/unreleased/add-gl-link-to-markdown-header.yml

@@ -0,0 +1,5 @@
+---
+title: Change markdown header tab anchor links to buttons
+merge_request: 21988
+author: George Tsiolis
+type: other

spec/features/groups/milestone_spec.rb

@@ -23,17 +23,17 @@
 
       description.native.send_keys('')
 
-      click_link('Preview')
+      click_button('Preview')
 
       preview = find('.js-md-preview')
 
       expect(preview).to have_content('Nothing to preview.')
 
-      click_link('Write')
+      click_button('Write')
 
       description.native.send_keys(':+1: Nice')
 
-      click_link('Preview')
+      click_button('Preview')
 
       expect(preview).to have_css('gl-emoji')
       expect(find('#milestone_description', visible: false)).not_to be_visible

spec/features/issues/user_creates_issue_spec.rb

@@ -47,15 +47,15 @@
         textarea = first(".gfm-form textarea")
 
         page.within(form) do
-          click_link("Preview")
+          click_button("Preview")
 
           preview = find(".js-md-preview") # this element is findable only when the "Preview" link is clicked.
 
           expect(preview).to have_content("Nothing to preview.")
 
-          click_link("Write")
+          click_button("Write")
           fill_in("Description", with: "Bug fixed :smile:")
-          click_link("Preview")
+          click_button("Preview")
 
           expect(preview).to have_css("gl-emoji")
           expect(textarea).not_to be_visible

spec/features/issues/user_edits_issue_spec.rb

@@ -17,9 +17,9 @@
 
     page.within(form) do
       fill_in("Description", with: "Bug fixed :smile:")
-      click_link("Preview")
+      click_button("Preview")
     end
 
-    expect(form).to have_link("Write")
+    expect(form).to have_button("Write")
   end
 end

spec/features/merge_request/user_views_open_merge_request_spec.rb

@@ -41,7 +41,7 @@
         find('.gfm-form').fill_in(:merge_request_description, with: '')
 
         page.within('.gfm-form') do
-          click_link('Preview')
+          click_button('Preview')
 
           expect(find('.js-md-preview')).to have_content('Nothing to preview.')
         end
@@ -51,12 +51,12 @@
         find('.gfm-form').fill_in(:merge_request_description, with: ':+1: Nice')
 
         page.within('.gfm-form') do
-          click_link('Preview')
+          click_button('Preview')
 
           expect(find('.js-md-preview')).to have_css('gl-emoji')
         end
 
-        expect(find('.gfm-form')).to have_css('.js-md-preview').and have_link('Write')
+        expect(find('.gfm-form')).to have_css('.js-md-preview').and have_button('Write')
         expect(find('#merge_request_description', visible: false)).not_to be_visible
       end
     end