From aa85d49353f50aa947d63f34a437f6064461bba6 Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Mon, 10 Jan 2022 17:36:30 +0000
Subject: [PATCH] Remove issuable-tag-valign and user-can-drag classes
Remove unnecessary classes to reduce our global css a bit
---
app/assets/javascripts/boards/components/board_card.vue | 2 +-
.../javascripts/boards/components/board_list_header.vue | 2 +-
.../related_issues/components/related_issues_list.vue | 2 +-
app/assets/stylesheets/page_bundles/boards.scss | 4 ----
app/assets/stylesheets/page_bundles/issues_list.scss | 4 ----
app/helpers/issues_helper.rb | 2 +-
.../related_items_tree/components/tree_item_body.vue | 4 ++--
ee/app/assets/stylesheets/pages/issuable.scss | 4 ----
spec/features/boards/boards_spec.rb | 2 +-
spec/features/groups/issues_spec.rb | 4 ++--
spec/frontend/boards/components/board_card_spec.js | 4 ++--
spec/frontend/boards/components/board_list_header_spec.js | 8 ++++----
12 files changed, 15 insertions(+), 27 deletions(-)
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 563bed6a6b850..dc821cb9f58d0 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -72,7 +72,7 @@ export default {
data-qa-selector="board_card"
:class="{
'multi-select': multiSelectVisible,
- 'user-can-drag': isDraggable,
+ 'gl-cursor-grab': isDraggable,
'is-disabled': isDisabled,
'is-active': isActive,
'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading,
diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue
index 19004518edf33..6835d83a66c84 100644
--- a/app/assets/javascripts/boards/components/board_list_header.vue
+++ b/app/assets/javascripts/boards/components/board_list_header.vue
@@ -263,7 +263,7 @@ export default {
>
<h3
:class="{
- 'user-can-drag': userCanDrag,
+ 'gl-cursor-grab': userCanDrag,
'gl-py-3 gl-h-full': list.collapsed && !isSwimlanesHeader,
'gl-border-b-0': list.collapsed || isSwimlanesHeader,
'gl-py-2': list.collapsed && isSwimlanesHeader,
diff --git a/app/assets/javascripts/related_issues/components/related_issues_list.vue b/app/assets/javascripts/related_issues/components/related_issues_list.vue
index 5813865524197..8b39851405edd 100644
--- a/app/assets/javascripts/related_issues/components/related_issues_list.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_list.vue
@@ -110,7 +110,7 @@ export default {
v-for="issue in relatedIssues"
:key="issue.id"
:class="{
- 'user-can-drag': canReorder,
+ 'gl-cursor-grab': canReorder,
'sortable-row': canReorder,
'card card-slim': canReorder,
}"
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index d4c59a6ab0c01..f91ca489bdf18 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -1,9 +1,5 @@
@import 'mixins_and_variables_and_functions';
-.user-can-drag {
- cursor: grab;
-}
-
.is-ghost {
opacity: 0.3;
pointer-events: none;
diff --git a/app/assets/stylesheets/page_bundles/issues_list.scss b/app/assets/stylesheets/page_bundles/issues_list.scss
index 8a958bdf0c575..41515a98e0a6e 100644
--- a/app/assets/stylesheets/page_bundles/issues_list.scss
+++ b/app/assets/stylesheets/page_bundles/issues_list.scss
@@ -35,10 +35,6 @@
}
}
-.user-can-drag {
- cursor: grab;
-}
-
.is-ghost {
opacity: 0.3;
pointer-events: none;
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index b1a5e4068cc35..5aa2aca37f330 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -7,7 +7,7 @@ def issue_css_classes(issue)
classes = ["issue"]
classes << "closed" if issue.closed?
classes << "today" if issue.new?
- classes << "user-can-drag" if @sort == 'relative_position'
+ classes << "gl-cursor-grab" if @sort == 'relative_position'
classes.join(' ')
end
diff --git a/ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue b/ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue
index b3259332e7b2f..eb964231581ed 100644
--- a/ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue
+++ b/ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue
@@ -320,13 +320,13 @@ export default {
v-if="showEpicHealthStatus"
:health-status="item.healthStatus"
data-testid="epic-health-status"
- class="issuable-tag-valign gl-mr-5 gl-mb-3"
+ class="gl-mr-5 gl-mb-3"
/>
<issue-health-status
v-if="showIssueHealthStatus"
:health-status="item.healthStatus"
data-testid="issue-health-status"
- class="issuable-tag-valign gl-mr-5 gl-mb-3"
+ class="gl-mr-5 gl-mb-3"
/>
<template v-if="showLabels">
diff --git a/ee/app/assets/stylesheets/pages/issuable.scss b/ee/app/assets/stylesheets/pages/issuable.scss
index ff77705e80ca2..0e3f6ce761bd0 100644
--- a/ee/app/assets/stylesheets/pages/issuable.scss
+++ b/ee/app/assets/stylesheets/pages/issuable.scss
@@ -73,10 +73,6 @@
}
}
-.issuable-tag-valign {
- vertical-align: 1px;
-}
-
.issuable-assignees {
a:not(.btn) {
color: inherit;
diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb
index 2f21961d1fca9..d25cddea9028f 100644
--- a/spec/features/boards/boards_spec.rb
+++ b/spec/features/boards/boards_spec.rb
@@ -528,7 +528,7 @@
end
it 'does not allow dragging' do
- expect(page).not_to have_selector('.user-can-drag')
+ expect(page).not_to have_selector('.gl-cursor-grab')
end
end
diff --git a/spec/features/groups/issues_spec.rb b/spec/features/groups/issues_spec.rb
index 1bac1bcdf5ad8..3fc1484826c4d 100644
--- a/spec/features/groups/issues_spec.rb
+++ b/spec/features/groups/issues_spec.rb
@@ -156,10 +156,10 @@
expect(page).to have_selector('.manual-ordering')
end
- it 'each issue item has a user-can-drag css applied' do
+ it 'each issue item has a gl-cursor-grab css applied' do
visit issues_group_path(group, sort: 'relative_position')
- expect(page).to have_selector('.issue.user-can-drag', count: 3)
+ expect(page).to have_selector('.issue.gl-cursor-grab', count: 3)
end
it 'issues should be draggable and persist order' do
diff --git a/spec/frontend/boards/components/board_card_spec.js b/spec/frontend/boards/components/board_card_spec.js
index 5742dfdc5d2cd..3af173aa18c1a 100644
--- a/spec/frontend/boards/components/board_card_spec.js
+++ b/spec/frontend/boards/components/board_card_spec.js
@@ -167,7 +167,7 @@ describe('Board card', () => {
mountComponent({ item: { ...mockIssue, isLoading: true } });
expect(wrapper.classes()).toContain('is-disabled');
- expect(wrapper.classes()).not.toContain('user-can-drag');
+ expect(wrapper.classes()).not.toContain('gl-cursor-grab');
});
});
@@ -177,7 +177,7 @@ describe('Board card', () => {
mountComponent();
expect(wrapper.classes()).not.toContain('is-disabled');
- expect(wrapper.classes()).toContain('user-can-drag');
+ expect(wrapper.classes()).toContain('gl-cursor-grab');
});
});
});
diff --git a/spec/frontend/boards/components/board_list_header_spec.js b/spec/frontend/boards/components/board_list_header_spec.js
index 148d0c5684de2..8cc0ad5f30cfa 100644
--- a/spec/frontend/boards/components/board_list_header_spec.js
+++ b/spec/frontend/boards/components/board_list_header_spec.js
@@ -180,18 +180,18 @@ describe('Board List Header Component', () => {
const canDragList = [ListType.label, ListType.milestone, ListType.iteration, ListType.assignee];
it.each(cannotDragList)(
- 'does not have user-can-drag-class so user cannot drag list',
+ 'does not have gl-cursor-grab class so user cannot drag list',
(listType) => {
createComponent({ listType });
- expect(findTitle().classes()).not.toContain('user-can-drag');
+ expect(findTitle().classes()).not.toContain('gl-cursor-grab');
},
);
- it.each(canDragList)('has user-can-drag-class so user can drag list', (listType) => {
+ it.each(canDragList)('has gl-cursor-grab class so user can drag list', (listType) => {
createComponent({ listType });
- expect(findTitle().classes()).toContain('user-can-drag');
+ expect(findTitle().classes()).toContain('gl-cursor-grab');
});
});
});
--
GitLab