ui: Dropdown/select improvements (#8468)

* ui: Better org of split-button/sort-button ready for design change

* ui: Improve keyboard accessibility of dropdown menu

ui-v2/app/components/aria-menu/index.js

@@ -77,13 +77,17 @@ export default Component.extend({
       // the keypress
       // TODO: We need to use > somehow here so we don't select submenus
       const $items = [...this.dom.elements(MENU_ITEMS, this.$menu)];
-      if (!this.expanded) {
+      if (e.keyCode === ENTER || e.keyCode === SPACE) {
-        if (e.keyCode === ENTER || e.keyCode === SPACE) {
+        // If we are opening, get ready to focus the first item
-          next(() => {
+        // if we are already open don't control focus
-            $items[0].focus();
+        let $focus = !this.expanded ? $items[0] : undefined;
-          });
+        next(() => {
-          return;
+          // if we are now closed, focus the trigger instead
-        }
+          $focus = !this.expanded ? this.$trigger : $focus;
+          if (typeof $focus !== 'undefined') {
+            $focus.focus();
+          }
+        });
       }
       // this will prevent anything happening if you haven't pushed a
       // configurable key

ui-v2/app/styles/base/components/buttons/index.scss

@@ -1,2 +1,5 @@
 @import './skin';
 @import './layout';
+%sort-button {
+  @extend %split-button;
+}

ui-v2/app/styles/base/components/buttons/layout.scss

@@ -54,3 +54,14 @@
   position: relative;
   height: 100%;
 }
+%split-button::after {
+  margin-left: 16px;
+}
+%split-button::before {
+  @extend %as-pseudo;
+  height: 16px;
+}
+%sort-button {
+  @extend %button;
+  height: 35px !important;
+}

ui-v2/app/styles/base/components/buttons/skin.scss

@@ -118,19 +118,19 @@
 %split-button span::after {
   @extend %as-pseudo;
   position: absolute;
-  background-color: $gray-300;
   width: 1px;
   top: 0;
   height: 100%;
   margin-left: 8px;
-}
+  background-color: $gray-300;
-%split-button::before {
-  @extend %as-pseudo;
-  height: 16px;
 }
 %sort-button::before {
-  @extend %with-sort-icon;
+  @extend %with-sort-mask, %as-pseudo;
-  margin-top: 8px;
+  position: relative;
+  top: 4px;
   width: 16px;
   height: 16px;
 }
+%sort-button::after {
+  top: 0 !important;
+}

ui-v2/app/styles/components/filter-bar.scss

@@ -3,6 +3,10 @@
 .filter-bar {
   @extend %filter-bar;
 }
+%filter-bar {
+  position: relative;
+  z-index: 3;
+}
 %filter-bar:not(.with-sort) {
   @extend %filter-bar-reversed;
 }

ui-v2/app/styles/components/filter-bar/layout.scss

@@ -19,6 +19,7 @@
 }
 %filter-bar fieldset:first-child:not(:last-child) {
   flex: 1 1 auto;
+  margin-right: 12px;
 }
 %filter-bar-reversed fieldset:first-child:not(:last-child) {
   flex: 0 1 auto;

ui-v2/app/styles/components/filter-bar/skin.scss

@@ -8,7 +8,7 @@
 }
 // TODO: Move this elsewhere
 @media #{$--horizontal-selects} {
-  %filter-bar label:not(:last-child) {
+  %filter-bar .type-radio:not(:last-child) {
     border-right: $decor-border-100;
   }
 }

ui-v2/app/styles/components/popover-select.scss

@@ -1,22 +1,6 @@
 .popover-select {
   @extend %popover-select;
 }
-%popover-select {
-  @extend %popover-menu;
-}
 %popover-select label > * {
-  @extend %split-button, %sort-button;
+  @extend %sort-button;
-  height: 35px;
-}
-%popover-select label > *::after {
-  top: 0 !important;
-  margin-left: 16px;
-}
-%popover-select {
-  z-index: 3;
-  padding-left: 12px;
-  height: 100%;
-}
-%popover-select label {
-  border-right: none !important;
 }