Commit 6b70b772 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

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
parents cdfc2378 1af6ddff
<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 }"
......
......@@ -161,6 +161,7 @@
.nav-links li {
&.active a,
&.md-header-tab.active button,
a.active {
border-bottom: 2px solid $active-tab-border;
......
......@@ -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;
......
......@@ -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;
}
}
}
......
......@@ -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
......
---
title: Change markdown header tab anchor links to buttons
merge_request: 21988
author: George Tsiolis
type: other
......@@ -23,17 +23,17 @@ describe 'Group milestones' do
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
......
......@@ -47,15 +47,15 @@ describe "User creates issue" do
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
......
......@@ -17,9 +17,9 @@ describe "User edits issue", :js do
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
......@@ -41,7 +41,7 @@ describe 'User views an open merge request' do
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 @@ describe 'User views an open merge request' do
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
......
......@@ -28,19 +28,19 @@ describe "User adds a comment on a commit", :js do
fill_in("note[note]", with: "#{comment_text} #{emoji}")
# Check on `Preview` tab
click_link("Preview")
click_button("Preview")
expect(find(".js-md-preview")).to have_content(comment_text).and have_css("gl-emoji")
expect(page).not_to have_css(".js-note-text")
# Check on the `Write` tab
click_link("Write")
click_button("Write")
expect(page).to have_field("note[note]", with: "#{comment_text} #{emoji}")
# Submit comment from the `Preview` tab to get rid of a separate `it` block
# which would specially tests if everything gets cleared from the note form.
click_link("Preview")
click_button("Preview")
click_button("Comment")
end
......@@ -88,13 +88,13 @@ describe "User adds a comment on a commit", :js do
# Test Preview feature for both forms.
page.within("form[data-line-code='#{sample_commit.line_code}']") do
click_link("Preview")
click_button("Preview")
end
page.within("form[data-line-code='#{sample_commit.del_line_code}']") do
fill_in("note[note]", with: another_comment_text)
click_link("Preview")
click_button("Preview")
end
expect(page).to have_css(".js-md-preview", visible: true, count: 2)
......
......@@ -25,19 +25,19 @@ describe "User comments on commit", :js do
fill_in("note[note]", with: "#{comment_text} #{emoji_code}")
# Check on `Preview` tab
click_link("Preview")
click_button("Preview")
expect(find(".js-md-preview")).to have_content(comment_text).and have_css("gl-emoji")
expect(page).not_to have_css(".js-note-text")
# Check on `Write` tab
click_link("Write")
click_button("Write")
expect(page).to have_field("note[note]", with: "#{comment_text} #{emoji_code}")
# Submit comment from the `Preview` tab to get rid of a separate `it` block
# which would specially tests if everything gets cleared from the note form.
click_link("Preview")
click_button("Preview")
click_button("Comment")
end
......
......@@ -76,7 +76,7 @@ describe('Markdown field header component', () => {
});
it('blurs preview link after click', done => {
const link = vm.$el.querySelector('li:nth-child(2) a');
const link = vm.$el.querySelector('li:nth-child(2) button');
spyOn(HTMLElement.prototype, 'blur');
link.click();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment