Commit 0ebe8e2a authored by Tom Quirk's avatar Tom Quirk

Clean up related issues card styles

- use gitlab-ui classes where possible
- use GlButton, GlIcon and GlLink where possible
- use correct Pajamas-style spacing
- update aria label to be more descriptive
parent acb1522d
<script>
import { GlLink, GlIcon } from '@gitlab/ui';
import Icon from '~/vue_shared/components/icon.vue';
import { GlLink, GlIcon, GlButton } from '@gitlab/ui';
import AddIssuableForm from './add_issuable_form.vue';
import RelatedIssuesList from './related_issues_list.vue';
import {
......@@ -13,8 +12,8 @@ import {
export default {
name: 'RelatedIssuesBlock',
components: {
Icon,
GlLink,
GlButton,
GlIcon,
AddIssuableForm,
RelatedIssuesList,
......@@ -127,42 +126,42 @@ export default {
<div id="related-issues" class="related-issues-block">
<div class="card card-slim gl-overflow-hidden">
<div :class="{ 'panel-empty-heading border-bottom-0': !hasBody }" class="card-header">
<h3 class="card-title mt-0 mb-0 h5 position-relative gl-display-flex gl-align-items-center">
<h3
class="card-title h5 position-relative gl-my-0 gl-display-flex gl-align-items-center gl-h-7"
>
<gl-link
id="user-content-related-issues"
class="anchor position-absolute text-decoration-none"
class="anchor position-absolute gl-text-decoration-none"
href="#related-issues"
aria-hidden="true"
/>
<slot name="headerText">{{ __('Linked issues') }}</slot>
<a v-if="hasHelpPath" :href="helpPath">
<i
class="related-issues-header-help-icon fa fa-question-circle"
:aria-label="__('Read more about related issues')"
></i>
</a>
<div class="d-inline-flex lh-100 align-middle">
<div
class="js-related-issues-header-issue-count related-issues-header-issue-count issue-count-badge gl-display-inline-flex gl-mx-2"
>
<span class="issue-count-badge-count">
<icon :name="issuableTypeIcon" class="mr-1 text-secondary" />
<gl-link
v-if="hasHelpPath"
:href="helpPath"
target="_blank"
class="gl-display-flex gl-align-items-center gl-ml-2 gl-text-gray-700"
:aria-label="__('Read more about related issues')"
>
<gl-icon name="question" :size="12" role="text" />
</gl-link>
<div class="gl-display-inline-flex">
<div class="js-related-issues-header-issue-count gl-display-inline-flex gl-mx-5">
<span class="gl-display-inline-flex gl-align-items-center">
<gl-icon :name="issuableTypeIcon" class="gl-mr-2 gl-text-gray-700" />
{{ badgeLabel }}
</span>
</div>
<button
<gl-button
v-if="canAdmin"
ref="issueCountBadgeAddButton"
type="button"
:class="qaClass"
class="js-issue-count-badge-add-button issue-count-badge-add-button btn btn-sm btn-default"
:aria-label="__('Add an issue')"
data-placement="top"
data-qa-selector="related_issues_plus_button"
icon="plus"
:aria-label="__('Add a related issue')"
:class="qaClass"
class="js-issue-count-badge-add-button"
@click="$emit('toggleAddRelatedIssuesForm', $event)"
>
<gl-icon name="plus" aria-hidden="true" />
</button>
/>
</div>
</h3>
</div>
......
......@@ -9,10 +9,6 @@ $token-spacing-bottom: 0.5em;
color: $gl-text-color-secondary;
}
.related-issues-header-issue-count {
margin-left: 0.5em;
}
.related-issues-token-body {
padding: 0;
......
import { shallowMount, mount } from '@vue/test-utils';
import { GlButton, GlIcon } from '@gitlab/ui';
import RelatedIssuesBlock from 'ee/related_issues/components/related_issues_block.vue';
import {
issuable1,
......@@ -14,6 +15,8 @@ import {
describe('RelatedIssuesBlock', () => {
let wrapper;
const findIssueCountBadgeAddButton = () => wrapper.find(GlButton);
afterEach(() => {
wrapper.destroy();
});
......@@ -33,7 +36,7 @@ describe('RelatedIssuesBlock', () => {
});
it('unable to add new related issues', () => {
expect(wrapper.vm.$refs.issueCountBadgeAddButton).toBeUndefined();
expect(findIssueCountBadgeAddButton().exists()).toBe(false);
});
it('add related issues form is hidden', () => {
......@@ -85,7 +88,7 @@ describe('RelatedIssuesBlock', () => {
});
it('can add new related issues', () => {
expect(wrapper.vm.$refs.issueCountBadgeAddButton).toBeDefined();
expect(findIssueCountBadgeAddButton().exists()).toBe(true);
});
});
......@@ -171,14 +174,16 @@ describe('RelatedIssuesBlock', () => {
},
].forEach(({ issuableType, icon }) => {
it(`issuableType=${issuableType} is passed`, () => {
wrapper = mount(RelatedIssuesBlock, {
wrapper = shallowMount(RelatedIssuesBlock, {
propsData: {
pathIdSeparator: PathIdSeparator.Issue,
issuableType,
},
});
expect(wrapper.contains(`.issue-count-badge-count .ic-${icon}`)).toBe(true);
const iconComponent = wrapper.find(GlIcon);
expect(iconComponent.exists()).toBe(true);
expect(iconComponent.props('name')).toBe(icon);
});
});
});
......
......@@ -1429,6 +1429,9 @@ msgstr ""
msgid "Add a numbered list"
msgstr ""
msgid "Add a related issue"
msgstr ""
msgid "Add a table"
msgstr ""
......@@ -1447,9 +1450,6 @@ msgstr ""
msgid "Add an impersonation token"
msgstr ""
msgid "Add an issue"
msgstr ""
msgid "Add another link"
msgstr ""
......
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