ui: Extract and organize popover-menu and related from main-nav (#8272)

ui-v2/app/components/popover-menu/index.hbs

@@ -1,4 +1,5 @@
 {{yield}}
+<div class="popover-menu" ...attributes>
 <AriaMenu @keyboardAccess={{keyboardAccess}} as |change keypress ariaLabelledBy ariaControls ariaExpanded keypressClick|>
   <ToggleButton
     @checked={{if keyboardAccess ariaExpanded expanded}}
@@ -40,3 +41,4 @@
     </BlockSlot>
   </MenuPanel>
 </AriaMenu>
+</div>

ui-v2/app/components/popover-select/pageobject.js

@@ -0,0 +1,9 @@
+export default (clickable, collection) => (scope = '.popover-select') => {
+  return {
+    scope: scope,
+    selected: clickable('button'),
+    options: collection('li[role="none"]', {
+      button: clickable('button'),
+    }),
+  };
+};

ui-v2/app/components/popover-sort/pageobject.js

@@ -1,8 +0,0 @@
-import { clickable, collection } from 'ember-cli-page-object';
-export default {
-  scope: '[data-popover-select]',
-  selected: clickable('button'),
-  options: collection('li[role="none"]', {
-    button: clickable('button'),
-  }),
-};

ui-v2/app/styles/base/components/popover-menu/index.scss

@@ -1,15 +1,18 @@
 @import './skin';
 @import './layout';
-%with-popover-menu > [type='checkbox'] {
+.popover-menu {
   @extend %popover-menu;
 }
-%popover-menu {
+%popover-menu > [type='checkbox'] {
+  @extend %popover-menu-toggle;
+}
+%popover-menu-toggle {
   @extend %display-toggle-siblings;
 }
-%popover-menu + label > * {
+%popover-menu-toggle + label {
-  @extend %toggle-button;
+  @extend %popover-menu-trigger;
 }
-%popover-menu + label + div {
+%popover-menu-trigger + div {
   @extend %popover-menu-panel;
 }
 %popover-menu-panel {

ui-v2/app/styles/base/components/popover-menu/layout.scss

@@ -1,6 +1,9 @@
-%with-popover-menu {
+%popover-menu {
   position: relative;
 }
+%popover-menu-trigger {
+  display: block;
+}
 %popover-menu-panel {
   width: 192px;
 }

ui-v2/app/styles/base/components/popover-menu/skin.scss

@@ -1,6 +1,13 @@
-%popover-menu + label > *::after {
+%popover-menu-trigger > * {
-  @extend %with-chevron-down-icon, %as-pseudo;
+  cursor: pointer;
+}
+%popover-menu-trigger > *::after {
+  @extend %with-chevron-down-mask, %as-pseudo;
   width: 16px;
   height: 16px;
-  margin-left: 16px;
+  position: relative;
+  top: 2px;
+}
+%popover-menu-toggle:checked + label > *::after {
+  @extend %with-chevron-up-mask;
 }

ui-v2/app/styles/base/reset/system.scss

@@ -21,6 +21,9 @@ html {
 hr {
   background-color: $gray-500;
 }
+button {
+  background-color: $transparent;
+}
 html {
   font-size: $typo-size-000;
 }

ui-v2/app/styles/components/empty-state/index.scss

@@ -13,9 +13,6 @@
 %empty-state > ul > li > label > button {
   @extend %empty-state-anchor;
 }
-%empty-state > ul > li {
-  @extend %with-popover-menu;
-}
 %empty-state label {
   @extend %primary-button;
 }

ui-v2/app/styles/components/main-header-horizontal.scss

@@ -2,29 +2,6 @@
 [role='banner'] {
   @extend %main-header-horizontal;
 }
-%main-nav-horizontal .docs-link a::after {
-  @extend %with-docs-icon, %as-pseudo;
-}
-%main-nav-horizontal .learn-link a::after {
-  @extend %with-learn-icon, %as-pseudo;
-}
-%main-nav-horizontal .feedback-link a::after {
-  @extend %with-logo-github-monochrome-mask, %as-pseudo;
-}
 %main-header-horizontal::before {
   background-color: var(--swatch-brand-600, $black);
 }
-%main-nav-horizontal-action,
-%main-nav-horizontal-toggle-button {
-  color: var(--typo-brand-050, $black);
-}
-@media #{$--lt-horizontal-nav} {
-  %main-nav-horizontal-panel {
-    background-color: var(--swatch-brand-600, $black);
-  }
-}
-@media #{$--horizontal-nav} {
-  %main-nav-horizontal-action-active {
-    background-color: var(--swatch-brand-800, $black);
-  }
-}

ui-v2/app/styles/components/main-nav-horizontal.scss

@@ -1,5 +1,20 @@
 @import './main-nav-horizontal/index';
 
+%main-nav-horizontal-action,
+%main-nav-horizontal-toggle-button {
+  color: var(--typo-brand-050, $black);
+}
+
+%main-nav-horizontal .docs-link a::after {
+  @extend %with-docs-icon, %as-pseudo;
+}
+%main-nav-horizontal .learn-link a::after {
+  @extend %with-learn-icon, %as-pseudo;
+}
+%main-nav-horizontal .feedback-link a::after {
+  @extend %with-logo-github-monochrome-mask, %as-pseudo;
+}
+
 %main-header-horizontal nav:first-of-type {
   @extend %primary-nav;
 }
@@ -10,6 +25,7 @@
 %secondary-nav {
   @extend %main-nav-horizontal;
 }
+
 %primary-nav .nspaces .menu-panel > div {
   background-color: $gray-050;
   padding-left: 36px;
@@ -17,6 +33,7 @@
 %primary-nav .nspaces .menu-panel > div::before {
   @extend %with-info-circle-fill-mask, %as-pseudo;
   color: $blue-500;
+  /* sizes the icon not the text */
   font-size: 1.1em;
 }
 
@@ -30,6 +47,9 @@
   @extend %main-nav-horizontal-toggle;
 }
 @media #{$--lt-horizontal-nav} {
+  %main-nav-horizontal-panel {
+    background-color: var(--swatch-brand-600, $black);
+  }
   %primary-nav {
     margin-top: 65px;
   }
@@ -40,3 +60,8 @@
     font-weight: $typo-weight-bold;
   }
 }
+@media #{$--horizontal-nav} {
+  %main-nav-horizontal-action-active {
+    background-color: var(--swatch-brand-800, $black);
+  }
+}

ui-v2/app/styles/components/main-nav-horizontal/index.scss

@@ -1,33 +1,31 @@
 @import './skin';
 @import './layout';
+
+/* things that should look like nav buttons */
 %main-nav-horizontal > ul > li > a,
 %main-nav-horizontal > ul > li > span,
-%main-nav-horizontal > ul > li > label > * {
+%main-nav-horizontal > ul > li > label,
+%main-nav-horizontal > ul > li > .popover-menu > label > button {
   @extend %main-nav-horizontal-action;
 }
-%main-nav-horizontal-action:not(span):hover,
+%main-nav-horizontal .popover-menu [type='checkbox']:checked + label > *,
-%main-nav-horizontal-action:not(span):focus {
-  @extend %main-nav-horizontal-action-intent;
-}
-/* Whilst we want spans to look the same as actions */
-/* we don't want them to act the same */
-%main-nav-horizontal > ul > li > span {
-  cursor: default;
-}
-%main-nav-horizontal > ul > li > label {
-  display: block;
-}
-/* ^ why not in layout? because we want these */
-/* overwrites to be close to where we extend? */
-%main-nav-horizontal [type='checkbox']:checked + label > *,
 %main-nav-horizontal > ul > li > a:active,
 %main-nav-horizontal > ul > li.is-active > a,
 %main-nav-horizontal > ul > li.is-active > label > * {
   @extend %main-nav-horizontal-action-active;
 }
+/* Whilst we want spans to look the same as actions */
+/* we don't want them to act the same */
+%main-nav-horizontal-action:not(span):hover,
+%main-nav-horizontal-action:not(span):focus {
+  @extend %main-nav-horizontal-action-intent;
+}
+%main-nav-horizontal > ul > li > span {
+  cursor: default;
+}
+/**/
+
+/* menu-panels in the main navigation are treated slightly differently */
 %main-nav-horizontal label + div {
-  @extend %main-nav-horizontal-drop-nav;
+  @extend %main-nav-horizontal-menu-panel;
-}
-%main-nav-horizontal-drop-nav {
-  @extend %menu-panel;
 }

ui-v2/app/styles/components/main-nav-horizontal/layout.scss

@@ -1,50 +1,73 @@
-%main-nav-horizontal > ul > li > [type='checkbox'] ~ div {
+%main-nav-horizontal .popover-menu > label > * {
-  display: none;
-}
-%main-nav-horizontal > ul > li > [type='checkbox']:checked ~ div {
-  display: block;
-}
-%main-nav-horizontal [type='checkbox'] + label > * {
   /* less space as the chevron adds space */
   padding-right: 4px !important;
 }
-%main-nav-horizontal > ul > li {
-  position: relative;
-}
 %main-nav-horizontal-action {
   display: block;
   padding: 5px 12px;
   white-space: nowrap;
 }
-%main-nav-horizontal-drop-nav {
+%main-nav-horizontal-menu-panel {
   z-index: 400;
   /* TODO: We should probably make menu-panel default to left hand side*/
   left: 0;
   right: auto;
+  top: 28px !important;
+}
+@media #{$--horizontal-nav} {
+  %main-nav-horizontal > ul,
+  %main-nav-horizontal-panel {
+    display: flex;
+  }
+  %main-nav-horizontal-panel {
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+  %main-nav-horizontal-menu-panel {
+    min-width: 266px;
+  }
+  %main-nav-horizontal-toggle-button {
+    display: none;
+  }
+  %main-nav-horizontal .popover-menu > label {
+    /* Usually there is no space between buttons which is */
+    /* fine as the button only highlights when its selected */
+    /* therefore no two siblings are highlighted at the same time */
+    /* which means you don't notice there is no space between the */
+    /* buttons. popover-menu triggers on the other hand can be */
+    /* at the same time as a sibling, therefore they need a little */
+    /* space between it and its sibling - this is a poroperty of */
+    /* the main nav not the popover-menu */
+    padding-right: 5px;
+  }
 }
 @media #{$--lt-horizontal-nav} {
-  %main-nav-horizontal-panel label span {
-    visibility: visible !important;
-    display: inline-block;
-    padding-right: 47px;
-    padding-top: 13px;
-  }
-  %main-nav-horizontal button {
-    width: 100%;
-  }
-  %main-nav-horizontal-panel {
-    transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9);
-    transition-duration: 0.2s;
-    transition-property: width right;
-  }
-  %main-nav-horizontal-panel {
-    box-sizing: border-box;
-    padding: 15px 35px;
-    z-index: 499;
-  }
   %main-nav-horizontal-action {
+    padding-top: 15px;
+    padding-bottom: 15px;
     text-align: right;
   }
+  %main-nav-horizontal .popover-menu > label {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+  %main-nav-horizontal-menu-panel {
+    width: 180px;
+    top: 38px !important;
+  }
+
+  %main-nav-horizontal-toggle:checked ~ div {
+    width: 250px;
+    right: 0;
+    padding: 15px 35px;
+    padding-top: 0;
+  }
+  %main-nav-horizontal-toggle:checked + label {
+    width: 100vw;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
   %main-nav-horizontal-toggle-button {
     position: absolute;
     z-index: 200;
@@ -59,67 +82,26 @@
     margin-top: -0.6em;
   }
   %main-nav-horizontal-panel {
+    box-sizing: border-box;
     overflow: auto;
     position: absolute;
     z-index: 300;
-    width: 0;
-    height: 100%;
     top: 0;
     right: -100%;
+    width: 0;
+    height: 100%;
     padding: 0;
     padding-top: 15px;
   }
-  %main-nav-horizontal-toggle:checked ~ div {
+  %main-nav-horizontal-panel {
-    width: 250px;
+    transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9);
-    right: 0;
+    transition-duration: 0.2s;
-    padding: 15px 35px;
+    transition-property: width right;
-    padding-top: 0;
   }
-  %main-nav-horizontal-toggle:checked + label {
+  %main-nav-horizontal-panel label span {
-    width: 100vw;
+    visibility: visible !important;
-    height: 100%;
+    display: inline-block;
-    left: 0;
+    padding-right: 47px;
-    top: 0;
+    padding-top: 13px;
-  }
-  %main-nav-horizontal-drop-nav {
-    width: 180px;
-    top: 38px !important;
-  }
-  %main-nav-horizontal input + label > * {
-    right: -15px;
-    position: relative;
-  }
-  %main-nav-horizontal-action {
-    padding-top: 15px;
-    padding-bottom: 15px;
-  }
-}
-@media #{$--horizontal-nav} {
-  %main-nav-horizontal-panel {
-    display: flex;
-  }
-  %main-nav-horizontal-panel {
-    justify-content: space-between;
-    flex-grow: 1;
-  }
-  %main-nav-horizontal-toggle-button {
-    display: none;
-  }
-  %main-nav-horizontal > ul {
-    display: flex;
-  }
-  %main-nav-horizontal-drop-nav {
-    min-width: 266px;
-  }
-  %main-nav-horizontal input + label {
-    /* Usually there is no space between buttons which is */
-    /* fine as the button only highlights when its selected */
-    /* therefore no two siblings are highlighted at the same time */
-    /* which means you don't notice there is no space between the */
-    /* buttons. popover-menu triggers on the other hand can be */
-    /* at the same time as a sibling, therefore they need a little */
-    /* space between it and its sibling - this is a poroperty of */
-    /* the main nav not the popover-menu */
-    padding-right: 5px;
   }
 }

ui-v2/app/styles/components/main-nav-horizontal/skin.scss

@@ -1,23 +1,6 @@
-%main-nav-horizontal-toggle-button {
+/* nav buttons */
-  text-indent: -9000px;
-}
-%main-nav-horizontal-toggle-button::before {
-  @extend %with-more-vertical-mask, %as-pseudo;
-  background-color: $white;
-
-  font-size: 1.2em;
-}
-
-%main-nav-horizontal label > button {
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-  background-color: transparent;
-}
 %main-nav-horizontal-action {
   border-radius: $decor-radius-200;
-}
-%main-nav-horizontal-action {
   cursor: pointer;
 }
 %main-nav-horizontal-action,
@@ -28,19 +11,18 @@
 %main-nav-horizontal-action > a {
   color: inherit;
 }
-%main-nav-horizontal-toggle,
+/**/
-%main-nav-horizontal input[type='checkbox'] {
+/* reduced size hamburger menu */
+%main-nav-horizontal-toggle {
   display: none;
 }
-%main-nav-horizontal [type='checkbox'] + label > *::after {
+%main-nav-horizontal-toggle-button {
-  @extend %as-pseudo;
+  text-indent: -9000px;
-  @extend %with-chevron-down-mask;
-  position: relative;
-  top: 2px;
-  background-color: $white;
 }
-%main-nav-horizontal [type='checkbox']:checked + label > *::after {
+%main-nav-horizontal-toggle-button::before {
-  @extend %with-chevron-up-mask;
+  @extend %with-more-vertical-mask, %as-pseudo;
+  background-color: $white;
+  font-size: 1.2em;
 }
 %main-nav-horizontal-toggle-button span {
   visibility: hidden;

ui-v2/app/styles/components/more-popover-menu.scss

@@ -2,23 +2,39 @@
   @extend %more-popover-menu;
 }
 %more-popover-menu {
-  @extend %with-popover-menu;
+  @extend %popover-menu;
 }
-%more-popover-menu > [type='checkbox'] + label {
+/* using the inut in the selector here means it won't */
+/* take on the default :checked chevron icon */
+%more-popover-menu .popover-menu > [type='checkbox'] + label {
   @extend %more-popover-menu-trigger;
 }
 /* This gives the trigger a slightly larger invisible hit area */
 %more-popover-menu-trigger {
   padding: 7px;
-  display: block;
 }
 %more-popover-menu-trigger > * {
-  font-size: 0;
   background-color: $transparent;
-  padding: 0;
+  border-radius: $decor-radius-100;
+  width: 30px;
+  height: 30px;
+  font-size: 0;
 }
 %more-popover-menu-trigger > *::after {
   @extend %with-more-horizontal-mask, %as-pseudo;
   background-color: $gray-900;
-  margin: 0;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -8px;
+  margin-left: -8px;
+}
+%more-popover-menu-trigger > *:active {
+  background-color: $gray-100;
+}
+%more-popover-menu-trigger > *:hover,
+%more-popover-menu-trigger > *:focus {
+  background-color: $gray-050;
 }

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

@@ -2,10 +2,15 @@
   @extend %popover-select;
 }
 %popover-select {
-  @extend %with-popover-menu;
+  @extend %popover-menu;
 }
 %popover-select label > * {
   @extend %split-button, %sort-button;
+  height: 35px;
+}
+%popover-select label > *::after {
+  top: 0 !important;
+  margin-left: 16px;
 }
 %popover-select {
   z-index: 3;

ui-v2/tests/pages.js

@@ -23,7 +23,6 @@ import pageFactory from 'consul-ui/components/hashicorp-consul/pageobject';
 
 import radiogroup from 'consul-ui/components/radio-group/pageobject';
 import tabgroup from 'consul-ui/components/tab-nav/pageobject';
-import popoverSort from 'consul-ui/components/popover-sort/pageobject';
 import authFormFactory from 'consul-ui/components/auth-form/pageobject';
 import freetextFilterFactory from 'consul-ui/components/freetext-filter/pageobject';
 
@@ -34,6 +33,7 @@ import policySelectorFactory from 'consul-ui/components/policy-selector/pageobje
 import roleFormFactory from 'consul-ui/components/role-form/pageobject';
 import roleSelectorFactory from 'consul-ui/components/role-selector/pageobject';
 
+import popoverSelectFactory from 'consul-ui/components/popover-select/pageobject';
 import morePopoverMenuFactory from 'consul-ui/components/more-popover-menu/pageobject';
 
 import tokenListFactory from 'consul-ui/components/token-list/pageobject';
@@ -93,6 +93,7 @@ const roleForm = roleFormFactory(submitable, cancelable, policySelector);
 const roleSelector = roleSelectorFactory(clickable, deletable, collection, alias, roleForm);
 
 const morePopoverMenu = morePopoverMenuFactory(clickable);
+const popoverSelect = popoverSelectFactory(clickable, collection);
 
 const consulIntentionList = consulIntentionListFactory(collection, clickable, attribute, deletable);
 const consulTokenList = consulTokenListFactory(
@@ -131,7 +132,16 @@ export default {
   index: create(index(visitable, collection)),
   dcs: create(dcs(visitable, clickable, attribute, collection)),
   services: create(
-    services(visitable, clickable, text, attribute, isPresent, collection, popoverSort, radiogroup)
+    services(
+      visitable,
+      clickable,
+      text,
+      attribute,
+      isPresent,
+      collection,
+      popoverSelect,
+      radiogroup
+    )
   ),
   service: create(
     service(visitable, attribute, collection, text, consulIntentionList, catalogToolbar, tabgroup)

ui-v2/tests/pages/dc/services/index.js

@@ -1,4 +1,4 @@
-export default function(visitable, clickable, text, attribute, present, collection, popoverSort) {
+export default function(visitable, clickable, text, attribute, present, collection, popoverSelect) {
   const service = {
     name: text('[data-test-service-name]'),
     service: clickable('a'),
@@ -13,6 +13,6 @@ export default function(visitable, clickable, text, attribute, present, collecti
       name: clickable('a'),
     }),
     home: clickable('[data-test-home]'),
-    sort: popoverSort,
+    sort: popoverSelect(),
   };
 }