Commit 21446129 authored by Eric Eastwood's avatar Eric Eastwood

Remove focus styles from dropdown empty link

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/37023
parent d68ff7f5
...@@ -175,7 +175,7 @@ GitLabDropdownFilter = (function() { ...@@ -175,7 +175,7 @@ GitLabDropdownFilter = (function() {
elements.show().removeClass('option-hidden'); elements.show().removeClass('option-hidden');
} }
elements.parent().find('.dropdown-menu-empty-link').toggleClass('hidden', elements.is(':visible')); elements.parent().find('.dropdown-menu-empty-item').toggleClass('hidden', elements.is(':visible'));
} }
}; };
...@@ -247,7 +247,7 @@ GitLabDropdown = (function() { ...@@ -247,7 +247,7 @@ GitLabDropdown = (function() {
currentIndex = -1; currentIndex = -1;
NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'; NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-item';
SELECTABLE_CLASSES = ".dropdown-content li:not(" + NON_SELECTABLE_CLASSES + ", .option-hidden)"; SELECTABLE_CLASSES = ".dropdown-content li:not(" + NON_SELECTABLE_CLASSES + ", .option-hidden)";
...@@ -702,7 +702,7 @@ GitLabDropdown = (function() { ...@@ -702,7 +702,7 @@ GitLabDropdown = (function() {
GitLabDropdown.prototype.noResults = function() { GitLabDropdown.prototype.noResults = function() {
var html; var html;
return html = '<li class="dropdown-menu-empty-link"><a href="#" class="is-focused">No matching results</a></li>'; return '<li class="dropdown-menu-empty-item"><a>No matching results</a></li>';
}; };
GitLabDropdown.prototype.rowClicked = function(el) { GitLabDropdown.prototype.rowClicked = function(el) {
......
...@@ -363,7 +363,7 @@ ...@@ -363,7 +363,7 @@
restoreMenu() { restoreMenu() {
var html; var html;
html = "<ul> <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li> </ul>"; html = '<ul><li class="dropdown-menu-empty-item"><a>Loading...</a></li></ul>';
return this.dropdownContent.html(html); return this.dropdownContent.html(html);
} }
......
...@@ -163,12 +163,6 @@ ...@@ -163,12 +163,6 @@
} }
} }
&.dropdown-menu-empty-link {
&.is-focused {
background-color: $dropdown-empty-row-bg;
}
}
&.dropdown-menu-user-link { &.dropdown-menu-user-link {
line-height: 16px; line-height: 16px;
} }
...@@ -256,6 +250,13 @@ ...@@ -256,6 +250,13 @@
@include dropdown-link; @include dropdown-link;
} }
.dropdown-menu-empty-item a {
&:hover,
&:focus {
background-color: transparent;
}
}
.dropdown-header { .dropdown-header {
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
font-size: 13px; font-size: 13px;
...@@ -800,6 +801,13 @@ ...@@ -800,6 +801,13 @@
} }
} }
} }
&.dropdown-menu-empty-item a {
&:hover,
&:focus {
background-color: transparent;
}
}
} }
&.dropdown-menu-selectable { &.dropdown-menu-selectable {
......
...@@ -17,8 +17,8 @@ ...@@ -17,8 +17,8 @@
.dropdown-menu.dropdown-select .dropdown-menu.dropdown-select
= dropdown_content do = dropdown_content do
%ul %ul
%li %li.dropdown-menu-empty-item
%a.is-focused.dropdown-menu-empty-link %a
Loading... Loading...
= dropdown_loading = dropdown_loading
%i.search-icon %i.search-icon
......
...@@ -29,6 +29,6 @@ ...@@ -29,6 +29,6 @@
+#{diff_file.added_lines} +#{diff_file.added_lines}
%span.cred< %span.cred<
\-#{diff_file.removed_lines} \-#{diff_file.removed_lines}
%li.dropdown-menu-empty-link.hidden %li.dropdown-menu-empty-item.hidden
%a{ href: "#" } %a
No files found. No files found.
---
title: Remove focus styles from dropdown empty links
merge_request:
author:
type: fixed
...@@ -8,7 +8,7 @@ describe('glDropdown', function describeDropdown() { ...@@ -8,7 +8,7 @@ describe('glDropdown', function describeDropdown() {
preloadFixtures('static/gl_dropdown.html.raw'); preloadFixtures('static/gl_dropdown.html.raw');
loadJSONFixtures('projects.json'); loadJSONFixtures('projects.json');
const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link'; const NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-item';
const SEARCH_INPUT_SELECTOR = '.dropdown-input-field'; const SEARCH_INPUT_SELECTOR = '.dropdown-input-field';
const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`; const ITEM_SELECTOR = `.dropdown-content li:not(${NON_SELECTABLE_CLASSES})`;
const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`; const FOCUSED_ITEM_SELECTOR = `${ITEM_SELECTOR} a.is-focused`;
......
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