diff --git a/.changelog/12334.txt b/.changelog/12334.txt
new file mode 100644
index 000000000..d691cd909
--- /dev/null
+++ b/.changelog/12334.txt
@@ -0,0 +1,3 @@
+```release-note:enhancement
+ui: Slightly improve usability of main navigation
+```
diff --git a/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs b/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs
index b60b2526d..dd372e95c 100644
--- a/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs
+++ b/ui/packages/consul-acls/app/components/consul/token/selector/index.hbs
@@ -119,32 +119,32 @@
Logout
-
-
+
+
Logout
-
-
- {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
-{{!TODO: It might be nice to use one of our recursive components here}}
-{{#if authDialog.token.AccessorID}}
-
-
-
-
-{{/if}}
-
- {{/let}}
-
-
+ Logout
+
+
+
+
+
diff --git a/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs b/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs
index c3296dff2..3d39896cb 100644
--- a/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs
+++ b/ui/packages/consul-nspaces/app/components/consul/nspace/selector/index.hbs
@@ -1,74 +1,77 @@
{{#if (can "use nspaces")}}
- {{#if (can "choose nspaces")}}
-{{#let
- (or @nspace 'default')
-as |nspace|}}
-
-
-
- {{nspace}}
-
-
- {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
- {{#if (gt @nspaces.length 0)}}
-
- {{else}}
-
- {{/if}}
- {{#each (reject-by 'DeletedAt' @nspaces) as |item|}}
-
- {{/each}}
- {{#if (can 'manage nspaces')}}
-
-
- {{/if}}
- {{/let}}
-
-
-
-{{/let}}
- {{/if}}
+ Manage Namespaces
+
+
+ {{/if}}
+
+
+
+
+ {{/let}}
{{/if}}
-
+{{/if}}
diff --git a/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs b/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs
index 91a9c8845..2855842c1 100644
--- a/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs
+++ b/ui/packages/consul-partitions/app/components/consul/partition/selector/index.hbs
@@ -6,51 +6,56 @@ as |partition|}}
class="partitions"
data-test-partition-menu
>
-
-
- {{partition}}
-
-
- {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
-
+
+
+ {{partition}}
+
+
+
+
{{#each (reject-by 'DeletedAt' @partitions) as |item|}}
-
+
+
{{/each}}
- {{#if (can 'manage partitions')}}
-
-
+
-
+
Manage Partitions
-
-
- {{/if}}
- {{/let}}
-
-
+
+
+ {{/if}}
+
+
+
{{else}}
.popover-menu > label > button {
+%main-nav-vertical-hoisted [aria-label]::before {
+ display: none !important;
+}
+%main-nav-horizontal [aria-haspopup='menu'] ~ * {
+ position: absolute;
+ right: 0;
+ min-width: 192px;
+}
+%main-nav-horizontal [aria-expanded],
+%main-nav-vertical-hoisted [aria-expanded] {
+ @extend %main-nav-horizontal-popover-menu-trigger;
@extend %main-nav-horizontal-action;
- border: none;
}
-%main-nav-vertical-hoisted.is-active > label > * {
+%main-nav-horizontal-popover-menu-trigger {
@extend %main-nav-horizontal-action-active;
}
%footer,
diff --git a/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs b/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs
new file mode 100644
index 000000000..e5b1021e3
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/datacenter/selector/index.hbs
@@ -0,0 +1,49 @@
+
+
+
+ {{@dc.Name}}
+
+
+
+
+ {{#each (sort-by 'Name' @dcs) as |item|}}
+
+
+ {{item.Name}}
+ {{#if item.Primary}}
+ Primary
+ {{/if}}
+ {{#if item.Local}}
+ Local
+ {{/if}}
+
+
+ {{/each}}
+
+
+
+
+
diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/README.mdx b/ui/packages/consul-ui/app/components/disclosure-menu/README.mdx
index be5381c2d..77ef278dd 100644
--- a/ui/packages/consul-ui/app/components/disclosure-menu/README.mdx
+++ b/ui/packages/consul-ui/app/components/disclosure-menu/README.mdx
@@ -19,13 +19,15 @@ common usecase of having a floating menu.
>
{{if disclosure.expanded 'Close' 'Open'}}
-
-
- Item 1
-
-
- Item 2
-
+
+
+
+ Item 1
+
+
+ Item 2
+
+
@@ -46,13 +48,15 @@ common usecase of having a floating menu.
(array 'top' this.height)
(array 'background-color' 'rgb(var(--tone-gray-000))')
}}
- as |menu|>
-
- Item 1
-
-
- Item 2
-
+ as |panel|>
+
+
+ Item 1
+
+
+ Item 2
+
+
diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs b/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs
index 040113e41..ab05bdd8d 100644
--- a/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs
+++ b/ui/packages/consul-ui/app/components/disclosure-menu/index.hbs
@@ -4,12 +4,16 @@
}}
...attributes
>
-
+
{{yield (hash
Action=(component 'disclosure-menu/action' disclosure=disclosure)
Menu=(component 'disclosure-menu/menu' disclosure=disclosure)
disclosure=disclosure
toggle=disclosure.toggle
+ close=disclosure.close
+ open=disclosure.open
expanded=disclosure.expanded
)}}
diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/index.scss b/ui/packages/consul-ui/app/components/disclosure-menu/index.scss
index f9f374c2c..cca70fbf5 100644
--- a/ui/packages/consul-ui/app/components/disclosure-menu/index.scss
+++ b/ui/packages/consul-ui/app/components/disclosure-menu/index.scss
@@ -1,3 +1,6 @@
.disclosure-menu {
position: relative;
}
+.disclosure-menu [aria-expanded] ~ * {
+ @extend %menu-panel;
+}
diff --git a/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs b/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs
index 4287d66b9..a37d86d24 100644
--- a/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs
+++ b/ui/packages/consul-ui/app/components/disclosure-menu/menu/index.hbs
@@ -1,15 +1,11 @@
<@disclosure.Details as |details|>
-
+
+ {{yield (hash
+ Menu=(component 'menu' disclosure=@disclosure)
+ )}}
+
@disclosure.Details>
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
index 108370296..e67251163 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
@@ -87,53 +87,12 @@
<:main-nav>
- -
-
-
- {{@dc.Name}}
-
-
-{{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
-
-{{#each (sort-by 'Name' @dcs) as |item|}}
-
-{{/each}}
-{{/let}}
-
-
-
+
-
-
+
+
Help
-
-
- {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
-
-
- Consul v{{env 'CONSUL_VERSION'}}
-
-
-
-
-
-
- {{/let}}
-
-
+
+
+
+
+
- s
':checked',
'[data-test-nspace-menu] > input[type="checkbox"]'
);
- page.navigation.dcs = collection('[data-test-datacenter-picker]', {
+ page.navigation.dcs = collection('[data-test-datacenter-menu] li', {
name: clickable('a'),
});
return page;
diff --git a/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss b/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss
index a8484febe..bcc7a01b3 100644
--- a/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-horizontal/index.scss
@@ -5,6 +5,7 @@
%main-nav-horizontal > ul > li > a,
%main-nav-horizontal > ul > li > span,
%main-nav-horizontal > ul > li > button,
+%main-nav-horizontal-popover-menu-trigger,
%main-nav-horizontal > ul > li > .popover-menu > label > button {
@extend %main-nav-horizontal-action;
}
diff --git a/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss b/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
index 4f3bc061c..e39505058 100644
--- a/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
@@ -5,6 +5,15 @@
%main-nav-horizontal-action > a {
color: inherit;
}
+%main-nav-horizontal-popover-menu-trigger::after {
+ @extend %with-chevron-down-mask, %as-pseudo;
+ width: 16px;
+ height: 16px;
+ position: relative;
+}
+%main-nav-horizontal-popover-menu-trigger[aria-expanded='true']::after {
+ @extend %with-chevron-up-mask;
+}
/**/
/* reduced size hamburger menu */
%main-nav-horizontal-toggle {
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
index 38880923d..a37b1d83e 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
@@ -30,34 +30,12 @@
%main-nav-vertical > ul > li > label {
@extend %main-nav-vertical-action;
}
-/**/
-
-%main-nav-vertical .popover-menu {
- margin-top: 0.5rem;
-}
-%main-nav-vertical .popover-menu .menu-panel {
- top: 37px !important;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
-}
-%main-nav-vertical .popover-menu > label > button {
- border: var(--decor-border-100);
- border-color: rgb(var(--tone-gray-500));
- color: rgb(var(--tone-gray-999));
- width: calc(100% - 20px);
- z-index: 100;
- text-align: left;
- padding: 10px;
- border-radius: var(--decor-radius-100);
-}
-%main-nav-vertical .popover-menu > label > button::after {
- float: right;
-}
-%main-nav-vertical .popover-menu .menu-panel {
- top: 28px;
- z-index: 100;
-}
/* menu-panels in the main navigation are treated slightly differently */
-%main-nav-vertical label + div {
+%main-nav-vertical-popover-menu .disclosure-menu button + * {
@extend %main-nav-vertical-menu-panel;
}
+/**/
+%main-nav-vertical-popover-menu .disclosure-menu > button {
+ @extend %main-nav-vertical-popover-menu-trigger;
+ @extend %internal-button;
+}
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
index c004bb5e2..b8830c44b 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss
@@ -11,14 +11,13 @@
%main-nav-vertical:not(.in-viewport) {
visibility: hidden;
}
-%main-nav-vertical li.partitions,
%main-nav-vertical li.partition,
+%main-nav-vertical li.partitions,
%main-nav-vertical li.nspaces {
margin-bottom: 25px;
padding: 0 26px;
}
%main-nav-vertical li.dcs {
- margin-bottom: 18px;
padding: 0 18px;
}
// TODO: We no longer have the rule that menu-panel buttons only contain two
@@ -41,9 +40,21 @@
margin-top: 0.7rem;
padding-bottom: 0;
}
-
+%main-nav-vertical-popover-menu .disclosure {
+ position: relative;
+}
+%main-nav-vertical-popover-menu-trigger {
+ width: 100%;
+ text-align: left;
+ padding: 10px;
+}
+%main-nav-vertical-popover-menu-trigger::after {
+ float: right;
+}
%main-nav-vertical-menu-panel {
- min-width: 248px;
+ position: absolute;
+ z-index: 1;
+ width: calc(100% - 2px);
}
%main-nav-vertical-hoisted {
visibility: visible;
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
index 923899dea..e1930d8bf 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
@@ -1,8 +1,8 @@
%main-nav-vertical-action {
+ @extend %p1;
cursor: pointer;
border-right: var(--decor-border-400);
border-color: var(--transparent);
- @extend %p1;
}
%main-nav-vertical-action > a {
color: inherit;
@@ -41,28 +41,38 @@
background-color: rgb(var(--tone-gray-150));
border-color: rgb(var(--tone-gray-999));
}
-%main-nav-vertical li[aria-label]::before,
-%main-nav-vertical .popover-menu[aria-label]::before {
+%main-nav-vertical [aria-label]::before {
color: rgb(var(--tone-gray-700));
content: attr(aria-label);
display: block;
margin-top: -0.5rem;
margin-bottom: 0.5rem;
}
-%main-nav-vertical .is-primary span,
-%main-nav-vertical .is-local span {
- @extend %pill-200;
- color: rgb(var(--tone-gray-000));
- background-color: rgb(var(--tone-gray-500));
-}
-%main-nav-vertical .nspaces .menu-panel > div {
+%main-nav-vertical-popover-menu-trigger {
+ border: var(--decor-border-100);
+ border-color: rgb(var(--tone-gray-500));
+ border-radius: var(--decor-radius-100);
+
+ font-weight: inherit;
+
background-color: rgb(var(--tone-gray-050));
color: rgb(var(--tone-gray-999));
- padding-left: 36px;
}
-%main-nav-vertical .nspaces .menu-panel > div::before {
- @extend %with-info-circle-fill-mask, %as-pseudo;
- color: rgb(var(--tone-blue-500));
- /* sizes the icon not the text */
- font-size: 1.1em;
+%main-nav-vertical-popover-menu-trigger[aria-expanded='true'] {
+ border-bottom-left-radius: var(--decor-radius-000);
+ border-bottom-right-radius: var(--decor-radius-000);
+}
+%main-nav-vertical-popover-menu-trigger::after {
+ @extend %with-chevron-down-mask, %as-pseudo;
+ width: 16px;
+ height: 16px;
+ position: relative;
+}
+%main-nav-vertical-popover-menu-trigger[aria-expanded='true']::after {
+ @extend %with-chevron-up-mask;
+}
+%main-nav-vertical-menu-panel {
+ border-top-left-radius: var(--decor-radius-000);
+ border-top-right-radius: var(--decor-radius-000);
+ border-top: var(--decor-border-000);
}
diff --git a/ui/packages/consul-ui/app/components/menu-panel/README.mdx b/ui/packages/consul-ui/app/components/menu-panel/README.mdx
new file mode 100644
index 000000000..8f492ed41
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/menu-panel/README.mdx
@@ -0,0 +1,169 @@
+# MenuPanel
+
+```hbs preview-template
+
+{{#each
+ (array 'light' 'dark')
+as |theme|}}
+
+
+
+
+
+{{/each}}
+```
diff --git a/ui/packages/consul-ui/app/components/menu-panel/deprecated.scss b/ui/packages/consul-ui/app/components/menu-panel/deprecated.scss
new file mode 100644
index 000000000..c95d6cde5
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/menu-panel/deprecated.scss
@@ -0,0 +1,58 @@
+/* old stuff */
+
+%menu-panel {
+ overflow: hidden;
+}
+%menu-panel-deprecated {
+ position: absolute;
+}
+%menu-panel-deprecated [type='checkbox'] {
+ display: none;
+}
+%menu-panel-deprecated {
+ transition: max-height 150ms;
+}
+%menu-panel-deprecated {
+ transition: min-height 150ms, max-height 150ms;
+ min-height: 0;
+}
+%menu-panel-deprecated:not(.confirmation) [type='checkbox'] ~ * {
+ transition: transform 150ms;
+}
+%menu-panel-deprecated [type='checkbox']:checked ~ * {
+ transform: translateX(calc(-100% - 10px));
+}
+%menu-panel-deprecated.confirmation [role='menu'] {
+ min-height: 205px !important;
+}
+%menu-panel-deprecated [type='checkbox']:checked ~ * {
+ /* this needs to autocalculate */
+ min-height: 143px;
+ max-height: 143px;
+}
+%menu-panel-deprecated [id$='-']:first-child:checked ~ ul label[for$='-'] * [role='menu'],
+%menu-panel-deprecated [id$='-']:first-child:checked ~ ul > li > [role='menu'] {
+ display: block;
+}
+/**/
+%menu-panel-deprecated > ul > li > div[role='menu'] {
+ position: absolute;
+ top: 0;
+ left: calc(100% + 10px);
+}
+%menu-panel-deprecated > ul > li > *:not(div[role='menu']) {
+ position: relative;
+}
+%menu-panel-deprecated:not(.left) {
+ right: 0px !important;
+ left: auto !important;
+}
+%menu-panel-deprecated.left {
+ left: 0px;
+}
+%menu-panel-deprecated:not(.above) {
+ top: 28px;
+}
+%menu-panel-deprecated.above {
+ bottom: 42px;
+}
diff --git a/ui/packages/consul-ui/app/components/menu-panel/index.hbs b/ui/packages/consul-ui/app/components/menu-panel/index.hbs
index b114d3876..15b430059 100644
--- a/ui/packages/consul-ui/app/components/menu-panel/index.hbs
+++ b/ui/packages/consul-ui/app/components/menu-panel/index.hbs
@@ -3,11 +3,12 @@
change=(action "change")
) as |api|}}
diff --git a/ui/packages/consul-ui/app/components/menu-panel/index.scss b/ui/packages/consul-ui/app/components/menu-panel/index.scss
index 3d1a5801b..a96a77dbf 100644
--- a/ui/packages/consul-ui/app/components/menu-panel/index.scss
+++ b/ui/packages/consul-ui/app/components/menu-panel/index.scss
@@ -1,22 +1,50 @@
@import './skin';
@import './layout';
+@import './deprecated';
.menu-panel {
@extend %menu-panel;
}
+.menu-panel-deprecated {
+ @extend %menu-panel-deprecated;
+}
+%menu-panel {
+ @extend %panel;
+}
+%menu-panel-item span {
+ @extend %menu-panel-badge;
+}
%menu-panel [role='separator'] {
+ @extend %panel-separator;
@extend %menu-panel-separator;
}
%menu-panel > div {
@extend %menu-panel-header;
}
-// %menu-panel > ul > li > *:not(div),
-%menu-panel [role='menuitem'] {
+%menu-panel > ul {
+ @extend %menu-panel-body;
+}
+%menu-panel-body > li {
+ @extend %menu-panel-item;
+}
+%menu-panel-body > [role='treeitem'],
+%menu-panel-body > li > [role='menuitem'],
+%menu-panel-body > li > [role='option'] {
+ @extend %menu-panel-button;
+}
+%menu-panel-button + * {
+ @extend %menu-panel-confirmation;
+}
+%menu-panel-item[aria-selected] > *,
+%menu-panel-item[aria-checked] > *,
+%menu-panel-item[aria-current] > *,
+%menu-panel-item.is-active > * {
+ @extend %menu-panel-button-selected;
+}
+%menu-panel-button {
@extend %internal-button;
}
-%menu-panel > ul > li.dangerous > *:not(div) {
+/* first-child is highly likely to be the button/or anchor*/
+%menu-panel-item.dangerous > *:first-child {
@extend %internal-button-dangerous;
}
-%menu-panel .informed-action {
- border: 0 !important;
-}
diff --git a/ui/packages/consul-ui/app/components/menu-panel/layout.scss b/ui/packages/consul-ui/app/components/menu-panel/layout.scss
index ac953aeb8..28737bb57 100644
--- a/ui/packages/consul-ui/app/components/menu-panel/layout.scss
+++ b/ui/packages/consul-ui/app/components/menu-panel/layout.scss
@@ -1,115 +1,7 @@
-%menu-panel {
- position: absolute;
-}
-%menu-panel [type='checkbox'] {
- display: none;
-}
-%menu-panel {
- overflow: hidden;
- transition: min-height 150ms, max-height 150ms;
- min-height: 0;
-}
-%menu-panel:not(.confirmation) [type='checkbox'] ~ * {
- transition: transform 150ms;
-}
-%menu-panel [type='checkbox']:checked ~ * {
- transform: translateX(calc(-100% - 10px));
-}
-%menu-panel.confirmation [role='menu'] {
- min-height: 200px !important;
-}
-%menu-panel [role='menuitem'] {
- display: flex;
- justify-content: space-between;
-}
-%menu-panel [role='menuitem']:after {
- @extend %as-pseudo;
- display: block !important;
- background-position: center right !important;
-}
-%menu-panel-sub-panel {
- position: absolute;
- top: 0;
- left: calc(100% + 10px);
- display: none;
-}
-/* TODO: once everything is using ListCollection */
-/* this can go */
-%menu-panel [type='checkbox']:checked ~ * {
- /* this needs to autocalculate */
- min-height: 143px;
- max-height: 143px;
-}
-%menu-panel [id$='-']:first-child:checked ~ ul label[for$='-'] * [role='menu'],
-%menu-panel [id$='-']:first-child:checked ~ ul > li > [role='menu'] {
- display: block;
-}
-/**/
-%menu-panel > ul > li > div[role='menu'] {
- @extend %menu-panel-sub-panel;
-}
-%menu-panel > ul > li > *:not(div[role='menu']) {
- position: relative;
-}
-%menu-panel:not(.left) {
- right: 0px;
- left: auto;
-}
-%menu-panel.left {
- left: 0px;
-}
-%menu-panel:not(.above) {
- top: 28px;
-}
-%menu-panel.above {
- bottom: 42px;
-}
-%menu-panel > ul {
- margin: 0;
- padding: 4px 0;
-}
-%menu-panel > ul,
-%menu-panel > ul > li,
-%menu-panel > ul > li > * {
- width: 100%;
-}
-%menu-panel > ul > li > * {
- text-align: left !important;
-}
-%menu-panel-separator {
- padding-top: 0.35em;
-}
-%menu-panel-separator:not(:first-child) {
- margin-top: 0.35em;
-}
-%menu-panel-separator:not(:empty) {
- padding-left: 1em;
- padding-right: 1em;
- padding-bottom: 0.1em;
-}
%menu-panel-header {
- padding: 10px;
+ padding: 0.625rem var(--padding-x); /* 10px */
white-space: normal;
}
-/* here the !important is only needed for what seems to be a difference */
-/* with the CSS before and after compression */
-/* i.e. before compression this style is applied */
-/* after compression it is in the source but doesn't seem to get */
-/* applied (unless you add the !important) */
-%menu-panel .is-active {
- position: relative !important;
-}
-%menu-panel .is-active > *::after {
- position: absolute;
- top: 50%;
- margin-top: -8px;
- right: 10px;
-}
-%menu-panel-header::before {
- position: absolute;
- left: 15px;
- top: calc(10px + 0.1em);
-}
%menu-panel-header {
max-width: fit-content;
}
@@ -118,3 +10,63 @@
max-width: 200px;
}
}
+%menu-panel-header::before {
+ position: absolute;
+ left: 15px;
+ top: calc(10px + 0.1em);
+}
+
+%menu-panel-body {
+ margin: 0;
+ padding: calc(var(--padding-y) - 0.625rem) 0; /* 10px */
+}
+%menu-panel-body,
+%menu-panel-item,
+%menu-panel-item > * {
+ width: 100%;
+}
+%menu-panel-item,
+%menu-panel-button {
+ text-align: left;
+}
+%menu-panel-badge {
+ padding: 0 8px;
+ margin-left: 0.5rem; /* 8px */
+}
+%menu-panel-button {
+ display: flex;
+}
+%menu-panel-button::after {
+ margin-left: auto;
+ /* as we are using margin-left for right align */
+ /* we can't use it for an absolute margin-left */
+ /* so cheat with a bit of padding/translate */
+ padding-right: var(--padding-x);
+ transform: translate(calc(var(--padding-x) / 2), 0);
+}
+%menu-panel-separator {
+ padding-top: 0.375rem; /* 6px */
+}
+%menu-panel-separator:not(:first-child) {
+ margin-top: 0.275rem; /* 6px */
+}
+%menu-panel-separator:not(:empty) {
+ padding-left: var(--padding-x);
+ padding-right: var(--padding-x);
+ padding-bottom: 0.125rem; /* 2px */
+}
+
+%menu-panel.menu-panel-confirming {
+ overflow: hidden;
+}
+%menu-panel-confirmation {
+ position: absolute;
+ top: 0;
+ left: calc(100% + 10px);
+}
+%menu-panel-body {
+ transition: transform 150ms;
+}
+%menu-panel.menu-panel-confirming > ul {
+ transform: translateX(calc(-100% - 10px));
+}
diff --git a/ui/packages/consul-ui/app/components/menu-panel/skin.scss b/ui/packages/consul-ui/app/components/menu-panel/skin.scss
index bf759cd40..e1aa90751 100644
--- a/ui/packages/consul-ui/app/components/menu-panel/skin.scss
+++ b/ui/packages/consul-ui/app/components/menu-panel/skin.scss
@@ -1,34 +1,32 @@
-%menu-panel {
- border: var(--decor-border-100);
- border-radius: var(--decor-radius-200);
- box-shadow: var(--decor-elevation-600);
-}
-%menu-panel > ul > li {
- list-style-type: none;
+%menu-panel-button-selected::after {
+ @extend %with-check-plain-mask, %as-pseudo;
}
%menu-panel-header {
@extend %p2;
}
+%menu-panel-header + ul {
+ border-top: var(--decor-border-100);
+ border-color: rgb(var(--tone-border, var(--tone-gray-300)));
+}
+/* if the first item is a separator and it */
+/* contains text don't add a line */
+%menu-panel-separator:first-child:not(:empty) {
+ border: none;
+}
%menu-panel-separator {
@extend %p3;
text-transform: uppercase;
font-weight: var(--typo-weight-medium);
-}
-%menu-panel-header + ul,
-%menu-panel-separator:not(:first-child) {
- border-top: var(--decor-border-100);
-}
-%menu-panel .is-active > *::after {
- @extend %with-check-plain-mask, %as-pseudo;
-}
-%menu-panel {
- border-color: rgb(var(--tone-gray-300));
- background-color: rgb(var(--tone-gray-000));
-}
-%menu-panel-separator {
color: rgb(var(--tone-gray-600));
}
-%menu-panel-header + ul,
-%menu-panel-separator:not(:first-child) {
- border-color: rgb(var(--tone-gray-300));
+%menu-panel-item {
+ list-style-type: none;
+}
+%menu-panel-badge {
+ @extend %pill;
+ color: rgb(var(--tone-gray-000));
+ background-color: rgb(var(--tone-gray-500));
+}
+%menu-panel-body .informed-action {
+ border: 0 !important;
}
diff --git a/ui/packages/consul-ui/app/components/menu/action/index.hbs b/ui/packages/consul-ui/app/components/menu/action/index.hbs
index 1c32e9bd9..efe640963 100644
--- a/ui/packages/consul-ui/app/components/menu/action/index.hbs
+++ b/ui/packages/consul-ui/app/components/menu/action/index.hbs
@@ -1,6 +1,9 @@
{{yield}}
diff --git a/ui/packages/consul-ui/app/components/menu/index.hbs b/ui/packages/consul-ui/app/components/menu/index.hbs
index e86b2079e..c90c09677 100644
--- a/ui/packages/consul-ui/app/components/menu/index.hbs
+++ b/ui/packages/consul-ui/app/components/menu/index.hbs
@@ -9,7 +9,7 @@
}}
>
{{yield (hash
- Action=(component 'menu/action')
+ Action=(component 'menu/action' disclosure=@disclosure)
Item=(component 'menu/item')
Separator=(component 'menu/separator')
)}}
diff --git a/ui/packages/consul-ui/app/components/menu/separator/index.hbs b/ui/packages/consul-ui/app/components/menu/separator/index.hbs
index 386644603..af10731af 100644
--- a/ui/packages/consul-ui/app/components/menu/separator/index.hbs
+++ b/ui/packages/consul-ui/app/components/menu/separator/index.hbs
@@ -1,6 +1,4 @@
-
- {{yield}}
-
+>{{yield}}
diff --git a/ui/packages/consul-ui/app/components/panel/README.mdx b/ui/packages/consul-ui/app/components/panel/README.mdx
new file mode 100644
index 000000000..21f9590ec
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/panel/README.mdx
@@ -0,0 +1,126 @@
+---
+type: css
+---
+# Panel
+
+Very basic 'panel' card-like CSS component currently used for menu-panels.
+
+When building components using `panel` please make use of the CSS custom
+properties available to help maintain consistency within the panel.
+
+**Very important**: Please avoid using style attributes for doing this the
+below is only for illustrative purposes. Please use this CSS component as a
+building block for other CSS instead.
+
+
+```hbs preview-template
+
+
+
+```
+
+
+```css
+.panel {
+ @extend %panel;
+}
+.panel hr {
+ @extend %panel-separator;
+}
+```
+
+## CSS Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `--tone-border` | `color` | --tone-gray-300 | Default color for all borders |
+| `--padding-x` | `length` | 14px | Default x padding to be used for padding values within the component |
+| `--padding-y` | `length` | 14px | Default y padding to be used for padding values within the component |
diff --git a/ui/packages/consul-ui/app/components/panel/debug.scss b/ui/packages/consul-ui/app/components/panel/debug.scss
new file mode 100644
index 000000000..091a52eb5
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/panel/debug.scss
@@ -0,0 +1,8 @@
+#docfy-demo-preview-panel {
+ .panel {
+ @extend %panel;
+ }
+ .panel hr {
+ @extend %panel-separator;
+ }
+}
diff --git a/ui/packages/consul-ui/app/components/panel/index.scss b/ui/packages/consul-ui/app/components/panel/index.scss
new file mode 100644
index 000000000..bc1825219
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/panel/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui/packages/consul-ui/app/components/panel/layout.scss b/ui/packages/consul-ui/app/components/panel/layout.scss
new file mode 100644
index 000000000..bc739de1b
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/panel/layout.scss
@@ -0,0 +1,11 @@
+%panel {
+ --padding-x: 14px;
+ --padding-y: 14px;
+ /* max-height: var(--panel-height, auto); */
+}
+%panel {
+ position: relative;
+}
+%panel-separator {
+ margin: 0;
+}
diff --git a/ui/packages/consul-ui/app/components/panel/skin.scss b/ui/packages/consul-ui/app/components/panel/skin.scss
new file mode 100644
index 000000000..30d859a97
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/panel/skin.scss
@@ -0,0 +1,17 @@
+%panel {
+ --tone-border: var(--tone-gray-300);
+ border: var(--decor-border-100);
+ border-radius: var(--decor-radius-200);
+ box-shadow: var(--decor-elevation-600);
+}
+%panel-separator {
+ border-top: var(--decor-border-100);
+}
+%panel {
+ color: rgb(var(--tone-gray-900));
+ background-color: rgb(var(--tone-gray-000));
+}
+%panel,
+%panel-separator {
+ border-color: rgb(var(--tone-border));
+}
diff --git a/ui/packages/consul-ui/app/components/popover-select/index.scss b/ui/packages/consul-ui/app/components/popover-select/index.scss
index badd21eb4..0f9a1b950 100644
--- a/ui/packages/consul-ui/app/components/popover-select/index.scss
+++ b/ui/packages/consul-ui/app/components/popover-select/index.scss
@@ -1,6 +1,9 @@
.popover-select {
@extend %popover-select;
}
+.popover-menu .menu-panel {
+ position: absolute !important;
+}
%popover-select label {
height: 100%;
}
diff --git a/ui/packages/consul-ui/app/components/state-chart/index.js b/ui/packages/consul-ui/app/components/state-chart/index.js
index 0f6223c87..ea6cf8a7b 100644
--- a/ui/packages/consul-ui/app/components/state-chart/index.js
+++ b/ui/packages/consul-ui/app/components/state-chart/index.js
@@ -67,7 +67,9 @@ export default Component.extend({
actions: {
dispatch: function(eventName, e) {
if (e && e.preventDefault) {
- e.preventDefault();
+ if (typeof e.target.nodeName === 'undefined' || e.target.nodeName.toLowerCase() !== 'a') {
+ e.preventDefault();
+ }
}
this.dispatch(eventName, e);
},
diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss
index d6f33f533..4cf9d1072 100644
--- a/ui/packages/consul-ui/app/styles/components.scss
+++ b/ui/packages/consul-ui/app/styles/components.scss
@@ -26,6 +26,7 @@
@import 'consul-ui/components/more-popover-menu';
@import 'consul-ui/components/oidc-select';
@import 'consul-ui/components/radio-card';
+@import 'consul-ui/components/panel';
@import 'consul-ui/components/pill';
@import 'consul-ui/components/popover-menu';
@import 'consul-ui/components/popover-select';
diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss
index de2026351..fb83217be 100644
--- a/ui/packages/consul-ui/app/styles/debug.scss
+++ b/ui/packages/consul-ui/app/styles/debug.scss
@@ -4,6 +4,7 @@
// temporary component debugging setup
@import 'consul-ui/components/main-nav-vertical/debug';
@import 'consul-ui/components/badge/debug';
+@import 'consul-ui/components/panel/debug';
@import 'consul-ui/components/shadow-template/debug';
@import 'consul-ui/components/csv-list/debug';
@import 'consul-ui/components/horizontal-kv-list/debug';
@@ -11,6 +12,9 @@
@import 'consul-ui/components/inline-alert/debug';
@import 'consul-ui/components/definition-table/debug';
+.theme-dark {
+ @extend %theme-dark;
+}
%debug-grid {
display: flex;
flex-wrap: wrap;
diff --git a/ui/packages/consul-ui/tests/steps/interactions/click.js b/ui/packages/consul-ui/tests/steps/interactions/click.js
index 773a9763f..1de60870a 100644
--- a/ui/packages/consul-ui/tests/steps/interactions/click.js
+++ b/ui/packages/consul-ui/tests/steps/interactions/click.js
@@ -10,10 +10,11 @@ export default function(scenario, find, click) {
'I click $property on the $component',
'I click $property on the $component component',
],
- function(property, component, next) {
+ async function(property, component, next) {
if (typeof component === 'string') {
property = `${component}.${property}`;
}
+ await new Promise(resolve => setTimeout(resolve, 0));
return find(property)();
}
);