Use data attributes instead of class

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -83,14 +83,14 @@ class FilteredSearchManager {
     if (this.stateFilters) {
       this.searchStateWrapper = this.searchState.bind(this);
 
-      this.stateFilters.querySelector('.state-opened')
+      this.stateFilters.querySelector('[data-state="opened"]')
         .addEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('.state-closed')
+      this.stateFilters.querySelector('[data-state="closed"]')
         .addEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('.state-all')
+      this.stateFilters.querySelector('[data-state="all"]')
         .addEventListener('click', this.searchStateWrapper);
 
-      this.mergedState = this.stateFilters.querySelector('.state-merged');
+      this.mergedState = this.stateFilters.querySelector('[data-state="merged"]');
       if (this.mergedState) {
         this.mergedState.addEventListener('click', this.searchStateWrapper);
       }
@@ -99,11 +99,11 @@ class FilteredSearchManager {
 
   unbindStateEvents() {
     if (this.stateFilters) {
-      this.stateFilters.querySelector('.state-opened')
+      this.stateFilters.querySelector('[data-state="opened"]')
         .removeEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('.state-closed')
+      this.stateFilters.querySelector('[data-state="closed"]')
         .removeEventListener('click', this.searchStateWrapper);
-      this.stateFilters.querySelector('.state-all')
+      this.stateFilters.querySelector('[data-state="all"]')
         .removeEventListener('click', this.searchStateWrapper);
 
       if (this.mergedState) {
@@ -500,15 +500,12 @@ class FilteredSearchManager {
 
   searchState(e) {
     const target = e.currentTarget;
-
     // remove focus outline after click
     target.blur();
 
-    // return class name that has a prefix of `state-`
-    const stateClassName = [].find.call(target.classList, name => name.match(/(state-)(\w+)/g));
+    const state = target.dataset && target.dataset.state;
 
-    if (stateClassName) {
-      const state = stateClassName.replace('state-', '');
+    if (state) {
       this.search(state);
     }
   }

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

@@ -5,20 +5,20 @@
 
 %ul.nav-links.issues-state-filters
   %li{ class: active_when(params[:state] == 'opened') }>
-    %button.btn.btn-link.state-opened{ id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", type: 'button' }
+    %button.btn.btn-link{ id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", type: 'button', data: { state: 'opened' } }
       #{issuables_state_counter_text(type, :opened)}
 
   - if type == :merge_requests
     %li{ class: active_when(params[:state] == 'merged') }>
-      %button.btn.btn-link.state-merged{ id: 'state-merged', title: 'Filter by merge requests that are currently merged.', type: 'button' }
+      %button.btn.btn-link{ id: 'state-merged', title: 'Filter by merge requests that are currently merged.', type: 'button', data: { state: 'merged' } }
         #{issuables_state_counter_text(type, :merged)}
 
     - closed_title = 'Filter by merge requests that are currently closed and unmerged.'
 
   %li{ class: active_when(params[:state] == 'closed') }>
-    %button.btn.btn-link.state-closed{ id: 'state-closed', title: closed_title, type: 'button' }
+    %button.btn.btn-link{ id: 'state-closed', title: closed_title, type: 'button', data: { state: 'closed' } }
       #{issuables_state_counter_text(type, :closed)}
 
   %li{ class: active_when(params[:state] == 'all') }>
-    %button.btn.btn-link.state-all{ id: 'state-all', title: "Show all #{page_context_word}.", type: 'button' }
+    %button.btn.btn-link{ id: 'state-all', title: "Show all #{page_context_word}.", type: 'button', data: { state: 'all' } }
       #{issuables_state_counter_text(type, :all)}

features/steps/project/issues/issues.rb

@@ -28,7 +28,7 @@ class Spinach::Features::ProjectIssues < Spinach::FeatureSteps
   end
 
   step 'I click link "Closed"' do
-    find('.issues-state-filters .state-closed span', text: 'Closed').click
+    find('.issues-state-filters [data-state="closed"] span', text: 'Closed').click
   end
 
   step 'I click button "Unsubscribe"' do
@@ -44,7 +44,7 @@ class Spinach::Features::ProjectIssues < Spinach::FeatureSteps
   end
 
   step 'I click link "All"' do
-    find('.issues-state-filters .state-all span', text: 'All').click
+    find('.issues-state-filters [data-state="all"] span', text: 'All').click
     # Waits for load
     expect(find('.issues-state-filters > .active')).to have_content 'All'
   end

features/steps/project/merge_requests.rb

@@ -26,7 +26,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
   end
 
   step 'I click link "All"' do
-    find('.issues-state-filters .state-all span', text: 'All').click
+    find('.issues-state-filters [data-state="all"] span', text: 'All').click
     # Waits for load
     expect(find('.issues-state-filters > .active')).to have_content 'All'
   end
@@ -36,7 +36,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
   end
 
   step 'I click link "Closed"' do
-    find('.issues-state-filters .state-closed span', text: 'Closed').click
+    find('.issues-state-filters [data-state="closed"] span', text: 'Closed').click
   end
 
   step 'I should see merge request "Wiki Feature"' do

spec/features/issues/filtered_search/filter_issues_spec.rb

@@ -777,17 +777,17 @@ describe 'Filter issues', js: true, feature: true do
     end
 
     it 'open state' do
-      find('.issues-state-filters .state-closed').click
+      find('.issues-state-filters [data-state="closed"]').click
       wait_for_requests
 
-      find('.issues-state-filters .state-opened').click
+      find('.issues-state-filters [data-state="opened"]').click
       wait_for_requests
 
       expect(page).to have_selector('.issues-list .issue', count: 4)
     end
 
     it 'closed state' do
-      find('.issues-state-filters .state-closed').click
+      find('.issues-state-filters [data-state="closed"]').click
       wait_for_requests
 
       expect(page).to have_selector('.issues-list .issue', count: 1)
@@ -795,7 +795,7 @@ describe 'Filter issues', js: true, feature: true do
     end
 
     it 'all state' do
-      find('.issues-state-filters .state-all').click
+      find('.issues-state-filters [data-state="all"]').click
       wait_for_requests
 
       expect(page).to have_selector('.issues-list .issue', count: 5)

spec/features/merge_requests/filter_merge_requests_spec.rb

@@ -40,13 +40,13 @@ describe 'Filter merge requests', feature: true do
       end
 
       it 'does not change when closed link is clicked' do
-        find('.issues-state-filters .state-closed').click
+        find('.issues-state-filters [data-state="closed"]').click
 
         expect_assignee_visual_tokens()
       end
 
       it 'does not change when all link is clicked' do
-        find('.issues-state-filters .state-all').click
+        find('.issues-state-filters [data-state="all"]').click
 
         expect_assignee_visual_tokens()
       end
@@ -73,13 +73,13 @@ describe 'Filter merge requests', feature: true do
       end
 
       it 'does not change when closed link is clicked' do
-        find('.issues-state-filters .state-closed').click
+        find('.issues-state-filters [data-state="closed"]').click
 
         expect_milestone_visual_tokens()
       end
 
       it 'does not change when all link is clicked' do
-        find('.issues-state-filters .state-all').click
+        find('.issues-state-filters [data-state="all"]').click
 
         expect_milestone_visual_tokens()
       end
@@ -161,13 +161,13 @@ describe 'Filter merge requests', feature: true do
       end
 
       it 'does not change when closed link is clicked' do
-        find('.issues-state-filters .state-closed').click
+        find('.issues-state-filters [data-state="closed"]').click
 
         expect_assignee_label_visual_tokens()
       end
 
       it 'does not change when all link is clicked' do
-        find('.issues-state-filters .state-all').click
+        find('.issues-state-filters [data-state="all"]').click
 
         expect_assignee_label_visual_tokens()
       end

spec/javascripts/filtered_search/filtered_search_manager_spec.js

@@ -106,7 +106,6 @@ describe('Filtered Search Manager', () => {
       const e = {
         currentTarget: {
           blur: () => {},
-          classList: [],
         },
       };
       spyOn(e.currentTarget, 'blur').and.callThrough();
@@ -119,7 +118,6 @@ describe('Filtered Search Manager', () => {
       const e = {
         currentTarget: {
           blur: () => {},
-          classList: [],
         },
       };
 
@@ -131,7 +129,9 @@ describe('Filtered Search Manager', () => {
       const e = {
         currentTarget: {
           blur: () => {},
-          classList: ['class-name', 'state-opened'],
+          dataset: {
+            state: 'opened',
+          },
         },
       };