Fix issues on issue board cards with new "Show labels" button

- Reuse SCSS variables
- Create new breakpoint for boards search bar layout between 768 to 992

app/assets/stylesheets/framework/filters.scss

@@ -357,7 +357,8 @@
     }
   }
 
-  .filter-dropdown-container > div {
+  .filter-dropdown-container {
+    > div {
       margin: 0;
 
       > .btn {
@@ -366,6 +367,11 @@
       }
     }
 
+    .board-labels-toggle-wrapper {
+      margin-bottom: $gl-input-padding;
+    }
+  }
+
   .boards-add-list > .btn {
     text-align: left;
 

app/assets/stylesheets/pages/boards.scss

@@ -497,7 +497,7 @@
 .add-issues-footer-to-list {
   padding-left: $gl-vert-padding;
   padding-right: $gl-vert-padding;
-  line-height: 34px;
+  line-height: $input-height;
 }
 
 .issue-card-selected {
@@ -551,9 +551,5 @@
    * Make the wrapper the same height as a button so it aligns properly when the
    * filtered-search-box input element increases in size on Linux smaller breakpoints
    */
-  height: 34px;
-
-  @include media-breakpoint-down(sm) {
-    margin-bottom: 10px;
-  }
+  height: $input-height;
 }

app/views/shared/issuable/_search_bar.html.haml

@@ -5,7 +5,8 @@
 - user_can_admin_list = board && can?(current_user, :admin_list, board.resource_parent)
 
 .issues-filters{ class: ("w-100" if type == :boards_modal) }
-  .issues-details-filters.filtered-search-block.d-flex.flex-column.flex-md-row{ class: block_css_class, "v-pre" => type == :boards_modal }
+  .issues-details-filters.filtered-search-block.d-flex.flex-column.flex-lg-row{ class: block_css_class, "v-pre" => type == :boards_modal }
+    .d-flex.flex-column.flex-md-row.flex-grow-1.mb-lg-0.mb-md-2.mb-sm-0
       - if type == :boards
         = render "shared/boards/switcher", board: board
       = form_tag page_filter_path, method: :get, class: 'filter-form js-filter-form w-100' do
@@ -160,8 +161,8 @@
 
             %button.clear-search.hidden{ type: 'button' }
               = icon('times')
-        #js-board-labels-toggle
     .filter-dropdown-container.d-flex.flex-column.flex-md-row
+      #js-board-labels-toggle
       - if type == :boards
         .js-board-config{ data: { can_admin_list: user_can_admin_list, has_scope: board.scoped? } }
         - if user_can_admin_list

ee/app/assets/javascripts/boards/toggle_labels.js

@@ -37,7 +37,7 @@ export default () =>
     },
     template: `
       <div class="board-labels-toggle-wrapper d-flex align-items-center prepend-left-10">
-        <span id="board-labels-toggle-text">
+        <span id="board-labels-toggle-text" class="text-nowrap">
           {{ __('Show labels') }}
         </span>
         <gl-toggle

ee/changelogs/unreleased/9838-hide-labels-from-issue-board-cards-bugfix.yml

+---
+title: Hide labels from issue board cards
+merge_request: 20072
+author:
+type: fixed

spec/features/issuables/sorting_list_spec.rb

@@ -57,7 +57,7 @@ describe 'Sort Issuable List' do
         it 'is "last updated"' do
           visit_merge_requests_with_state(project, 'merged')
 
-          expect(find('.issues-other-filters')).to have_content('Last updated')
+          expect(find('.filter-dropdown-container')).to have_content('Last updated')
           expect(first_merge_request).to include(last_updated_issuable.title)
           expect(last_merge_request).to include(first_updated_issuable.title)
         end
@@ -69,7 +69,7 @@ describe 'Sort Issuable List' do
         it 'is "last updated"' do
           visit_merge_requests_with_state(project, 'closed')
 
-          expect(find('.issues-other-filters')).to have_content('Last updated')
+          expect(find('.filter-dropdown-container')).to have_content('Last updated')
           expect(first_merge_request).to include(last_updated_issuable.title)
           expect(last_merge_request).to include(first_updated_issuable.title)
         end
@@ -81,7 +81,7 @@ describe 'Sort Issuable List' do
         it 'is "created date"' do
           visit_merge_requests_with_state(project, 'all')
 
-          expect(find('.issues-other-filters')).to have_content('Created date')
+          expect(find('.filter-dropdown-container')).to have_content('Created date')
           expect(first_merge_request).to include(last_created_issuable.title)
           expect(last_merge_request).to include(first_created_issuable.title)
         end
@@ -94,7 +94,7 @@ describe 'Sort Issuable List' do
       it 'supports sorting in asc and desc order' do
         visit_merge_requests_with_state(project, 'open')
 
-        page.within('.issues-other-filters') do
+        page.within('.filter-dropdown-container') do
           click_button('Created date')
           click_link('Last updated')
         end
@@ -102,7 +102,7 @@ describe 'Sort Issuable List' do
         expect(first_merge_request).to include(last_updated_issuable.title)
         expect(last_merge_request).to include(first_updated_issuable.title)
 
-        find('.issues-other-filters .filter-dropdown-container .rspec-reverse-sort').click
+        find('.filter-dropdown-container .rspec-reverse-sort').click
 
         expect(first_merge_request).to include(first_updated_issuable.title)
         expect(last_merge_request).to include(last_updated_issuable.title)
@@ -133,7 +133,7 @@ describe 'Sort Issuable List' do
         it 'is "created date"' do
           visit_issues project
 
-          expect(find('.issues-other-filters')).to have_content('Created date')
+          expect(find('.filter-dropdown-container')).to have_content('Created date')
           expect(first_issue).to include(last_created_issuable.title)
           expect(last_issue).to include(first_created_issuable.title)
         end
@@ -145,7 +145,7 @@ describe 'Sort Issuable List' do
         it 'is "created date"' do
           visit_issues_with_state(project, 'open')
 
-          expect(find('.issues-other-filters')).to have_content('Created date')
+          expect(find('.filter-dropdown-container')).to have_content('Created date')
           expect(first_issue).to include(last_created_issuable.title)
           expect(last_issue).to include(first_created_issuable.title)
         end
@@ -157,7 +157,7 @@ describe 'Sort Issuable List' do
         it 'is "last updated"' do
           visit_issues_with_state(project, 'closed')
 
-          expect(find('.issues-other-filters')).to have_content('Last updated')
+          expect(find('.filter-dropdown-container')).to have_content('Last updated')
           expect(first_issue).to include(last_updated_issuable.title)
           expect(last_issue).to include(first_updated_issuable.title)
         end
@@ -169,7 +169,7 @@ describe 'Sort Issuable List' do
         it 'is "created date"' do
           visit_issues_with_state(project, 'all')
 
-          expect(find('.issues-other-filters')).to have_content('Created date')
+          expect(find('.filter-dropdown-container')).to have_content('Created date')
           expect(first_issue).to include(last_created_issuable.title)
           expect(last_issue).to include(first_created_issuable.title)
         end
@@ -183,7 +183,7 @@ describe 'Sort Issuable List' do
         end
 
         it 'shows the sort order as created date' do
-          expect(find('.issues-other-filters')).to have_content('Created date')
+          expect(find('.filter-dropdown-container')).to have_content('Created date')
           expect(first_issue).to include(last_created_issuable.title)
           expect(last_issue).to include(first_created_issuable.title)
         end
@@ -196,7 +196,7 @@ describe 'Sort Issuable List' do
       it 'supports sorting in asc and desc order' do
         visit_issues_with_state(project, 'open')
 
-        page.within('.issues-other-filters') do
+        page.within('.filter-dropdown-container') do
           click_button('Created date')
           click_link('Last updated')
         end
@@ -204,7 +204,7 @@ describe 'Sort Issuable List' do
         expect(first_issue).to include(last_updated_issuable.title)
         expect(last_issue).to include(first_updated_issuable.title)
 
-        find('.issues-other-filters .filter-dropdown-container .rspec-reverse-sort').click
+        find('.filter-dropdown-container .rspec-reverse-sort').click
 
         expect(first_issue).to include(first_updated_issuable.title)
         expect(last_issue).to include(last_updated_issuable.title)