Auto merge of #2287 - Turbo87:dropdown, r=locks

bors · bors · commit e2321ad18f95 · 2020-03-21T15:20:06.000Z
Simplify dropdown styling and fix dropdown trigger semantics Some of our dropdowns were using `<a>` tags to open the dropdown, but that is semantically invalid HTML because `<a>` tags should only be used when **linking** to another page. Instead the dropdowns are now using `button` elements for their triggers. r? @locks
diff --git a/app/components/dropdown/content.js b/app/components/dropdown/content.js
@@ -1,6 +1,5 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-  classNames: ['rl-dropdown'],
   classNameBindings: ['isExpanded:open'],
 });
diff --git a/app/components/dropdown/trigger.js b/app/components/dropdown/trigger.js
@@ -2,8 +2,6 @@ import Component from '@ember/component';
 import { computed } from '@ember/object';
 
 export default Component.extend({
-  classNames: ['rl-dropdown-toggle'],
-
   tagName: 'button',
 
   attributeBindings: ['type', 'role', 'disabled'],
diff --git a/app/styles/crate.scss b/app/styles/crate.scss
@@ -83,10 +83,11 @@
     .cur, .total { color: $main-color; font-weight: bold; }
 
     .dropdown-container { font-size: 85%; }
-    a.dropdown {
+    .dropdown-button {
         background-color: $main-bg-dark;
         padding: 10px;
         display: inline-block;
+        border: none;
         border-radius: 5px;
     }
 }
diff --git a/app/templates/categories.hbs b/app/templates/categories.hbs
@@ -17,7 +17,7 @@
   <div class='sort' data-test-categories-sort>
     <span class='small'>Sort by</span>
     <Dropdown class="dropdown-container" as |dd|>
-      <dd.Trigger @tagName="a" class="dropdown" data-test-current-order>
+      <dd.Trigger class="dropdown dropdown-button" data-test-current-order>
         {{svg-jar "sort"}}
         {{ this.currentSortBy }}
         <span class='arrow'></span>
diff --git a/app/templates/category/index.hbs b/app/templates/category/index.hbs
@@ -50,7 +50,7 @@
   <div class='sort' data-test-category-sort>
     <span class='small'>Sort by</span>
     <Dropdown class="dropdown-container" as |dd|>
-      <dd.Trigger @tagName="a" class="dropdown" data-test-current-order>
+      <dd.Trigger class="dropdown dropdown-button" data-test-current-order>
         {{svg-jar "sort"}}
         {{ this.currentSortBy }}
         <span class='arrow'></span>
diff --git a/app/templates/crates.hbs b/app/templates/crates.hbs
@@ -38,7 +38,7 @@
     <span class='small'>Sort by</span>
 
     <Dropdown class="dropdown-container" as |dd|>
-      <dd.Trigger @tagName="a" class="dropdown" data-test-current-order>
+      <dd.Trigger class="dropdown dropdown-button" data-test-current-order>
         {{svg-jar "sort"}}
         {{ this.currentSortBy }}
         <span class='arrow'></span>
diff --git a/app/templates/keyword/index.hbs b/app/templates/keyword/index.hbs
@@ -18,7 +18,7 @@
   <div class='sort' data-test-keyword-sort>
     <span class='small'>Sort by</span>
     <Dropdown class="dropdown-container" as |dd|>
-      <dd.Trigger @tagName="a" class="dropdown" data-test-current-order>
+      <dd.Trigger class="dropdown dropdown-button" data-test-current-order>
         {{svg-jar "sort"}}
         {{ this.currentSortBy }}
         <span class='arrow'></span>
diff --git a/app/templates/keywords.hbs b/app/templates/keywords.hbs
@@ -17,7 +17,7 @@
   <div class='sort' data-test-keywords-sort>
     <span class='small'>Sort by</span>
     <Dropdown class="dropdown-container" as |dd|>
-      <dd.Trigger @tagName="a" class="dropdown" data-test-current-order>
+      <dd.Trigger class="dropdown dropdown-button" data-test-current-order>
         {{svg-jar "sort"}}
         {{ this.currentSortBy }}
         <span class='arrow'></span>
diff --git a/app/templates/me/crates.hbs b/app/templates/me/crates.hbs
@@ -19,7 +19,7 @@
   <div class='sort'>
     <span class='small'>Sort by</span>
     <Dropdown class="dropdown-container" as |dd|>
-      <dd.Trigger @tagName="a" class="dropdown">
+      <dd.Trigger class="dropdown dropdown-button">
         {{svg-jar "sort"}}
         {{ this.currentSortBy }}
         <span class='arrow'></span>
diff --git a/app/templates/me/following.hbs b/app/templates/me/following.hbs
@@ -17,7 +17,7 @@
   <div class='sort'>
     <span class='small'>Sort by</span>
     <Dropdown class="dropdown-container" as |dd|>
-      <dd.Trigger @tagName="a" class="dropdown">
+      <dd.Trigger class="dropdown dropdown-button">
         {{svg-jar "sort"}}
         {{ this.currentSortBy }}
         <span class='arrow'></span>
diff --git a/app/templates/search.hbs b/app/templates/search.hbs
@@ -30,7 +30,7 @@
       <span class='small'>Sort by </span>
 
       <Dropdown class="dropdown-container" as |dd|>
-        <dd.Trigger @tagName="a" class="dropdown" data-test-current-order>
+        <dd.Trigger class="dropdown dropdown-button" data-test-current-order>
           {{svg-jar "sort"}}
           {{ this.currentSortBy }}
           <span class='arrow'></span>
diff --git a/app/templates/team.hbs b/app/templates/team.hbs
@@ -33,7 +33,7 @@
       <div class='sort'>
         <span class='small'>Sort by</span>
         <Dropdown class="dropdown-container" as |dd|>
-          <dd.Trigger @tagName="a" class="dropdown">
+          <dd.Trigger class="dropdown dropdown-button">
             {{svg-jar "sort"}}
             {{ this.currentSortBy }}
             <span class='arrow'></span>
diff --git a/app/templates/user.hbs b/app/templates/user.hbs
@@ -24,7 +24,7 @@
       <div class='sort'>
         <span class='small'>Sort by</span>
         <Dropdown class="dropdown-container" as |dd|>
-          <dd.Trigger @tagName="a" class="dropdown">
+          <dd.Trigger class="dropdown dropdown-button">
             {{svg-jar "sort"}}
             {{ this.currentSortBy }}
             <span class='arrow'></span>

Original file line number	Diff line number	Diff line change
`@@ -83,10 +83,11 @@`
`83`	`83`	`.cur, .total { color: $main-color; font-weight: bold; }`
`84`	`84`
`85`	`85`	`.dropdown-container { font-size: 85%; }`
`86`		`- a.dropdown {`
	`86`	`+ .dropdown-button {`
`87`	`87`	`background-color: $main-bg-dark;`
`88`	`88`	`padding: 10px;`
`89`	`89`	`display: inline-block;`
	`90`	`+ border: none;`
`90`	`91`	`border-radius: 5px;`
`91`	`92`	`}`
`92`	`93`	`}`