From ab39638e072881f71eb6f8f21be68022760bbf62 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 30 Jul 2020 15:12:52 -0400
Subject: [PATCH 01/18] chore: Add "manage" button to user edit page

---
 .../scopes/scope/users/user/index.hbs         | 21 +++++++++++--------
 ui/core/translations/en-us.yaml               |  1 +
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/ui/core/app/templates/scopes/scope/users/user/index.hbs b/ui/core/app/templates/scopes/scope/users/user/index.hbs
index d80978336..c50c14754 100644
--- a/ui/core/app/templates/scopes/scope/users/user/index.hbs
+++ b/ui/core/app/templates/scopes/scope/users/user/index.hbs
@@ -8,6 +8,17 @@
     <h2>{{t "resources.user"}}</h2>
   </page.header>
 
+  <page.actions>
+    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @alignRight={{true}} as |dropdown|>
+      <dropdown.button
+        @disabled={{@model.canSave}}
+        {{on "click" (route-action "delete" @model)}}
+      >
+        {{t 'actions.delete'}}
+      </dropdown.button>
+    </Rose::Dropdown>
+  </page.actions>
+
   <page.navigation>
     <Rose::Nav::Tabs as |nav|>
       <nav.link @route='scopes.scope.users.user'>
@@ -17,19 +28,11 @@
   </page.navigation>
 
   <page.body>
-    <Form::Project
+    <Form::User
       @model={{@model}}
       @submit={{route-action "save" @model}}
       @cancel={{route-action "cancel" @model}}
     />
-    <Rose::Separator />
-    <Rose::Button
-      @style="warning"
-      @disabled={{@model.canSave}}
-      {{on "click" (route-action "delete" @model)}}
-    >
-      {{t 'actions.delete'}}
-    </Rose::Button>
   </page.body>
 
 </Rose::Layout::Page>
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 4075aa92a..08a14ff5b 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -65,6 +65,7 @@ form:
     type: Type
     identification: Username
     password: Password
+    manage: Manage
 errors:
   titles:
     unauthenticated-error: You are not signed in

From 369ea937f5c0526f1b833433d2507cd4001f95f9 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 31 Jul 2020 10:37:23 -0400
Subject: [PATCH 02/18] chore: Use rose/dropdown comp in header
 utilities/dropdown

---
 .../styles/rose/components/_dropdown.scss     | 16 +++-
 .../rose/components/header/_dropdown.scss     | 81 ++-----------------
 .../styles/rose/utilities/_dropdown.scss      |  4 +-
 .../templates/components/rose/dropdown.hbs    |  2 +-
 .../components/rose/header/utilities.hbs      |  2 +-
 5 files changed, 23 insertions(+), 82 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/_dropdown.scss
index bd87f3acb..d4fb27f03 100644
--- a/addons/rose/addon/styles/rose/components/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/_dropdown.scss
@@ -12,12 +12,22 @@
     overflow: hidden;
     display: flex;
     align-items: center;
-    margin-right: sizing.rems(s);
     padding: 0 sizing.rems(xl) 0 sizing.rems(l);
     $lineHeight: 36 / 13;
     line-height: $lineHeight;
 
-    //color: var(--subtle);
+    // Hide default twistie triangle
+    // Webkit / Chromium
+    &::-webkit-details-marker {
+      display: none;
+    }
+    // Firefox
+    list-style-type: none;
+    &::marker {
+      display: none;
+    }
+
+    // color: var(--subtle);
     background: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>")
       no-repeat right sizing.rems(s) center;
     background-size: sizing.rems(m);
@@ -84,7 +94,7 @@
 
   .rose-dropdown-link,
   .rose-button-dropdown {
-    @include type.type(m, normal);
+    @include type.type(s, normal);
     display: block;
     // Targeting min-width of 200
     min-width: (sizing.rems(m) + sizing.rems(xxs)) * 10;
diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
index 5436c1b57..8e1c8766a 100644
--- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
@@ -18,44 +18,17 @@
   )
 );
 
-.rose-header-dropdown {
-  position: relative;
-  display: inline-block;
+.rose-header-utilities {
+  margin-right: sizing.rems(s);
 
-  .rose-header-dropdown-trigger {
-    cursor: default;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
+  .rose-dropdown-trigger {
     background-size: sizing.rems(m);
-    margin-right: sizing.rems(s);
     padding-right: sizing.rems(l) - sizing.rems(xxs);
     $lineHeight: 48 / 16;
     line-height: $lineHeight;
 
-    &.icon-only {
-      padding-right: sizing.rems(m);
-
-      .rose-header-dropdown-trigger-text {
-        // TODO: factor out into visually-hidden mixin utility
-        position: absolute;
-        left: -1000px;
-        top: -1000px;
-        width: 1px;
-        height: 1px;
-        opacity: 0;
-      }
-    }
-
-    // Hide default twistie triangle
-    // Webkit / Chromium
-    &::-webkit-details-marker {
-      display: none;
-    }
-    // Firefox
-    list-style-type: none;
-    &::marker {
-      display: none;
+    .rose-icon {
+      --size: #{sizing.rems(l)};
     }
 
     .rose-icon {
@@ -66,51 +39,9 @@
         vertical-align: top;
       }
     }
-  }
-
-  .rose-header-dropdown-content {
-    $xs: sizing.rems(xs); // 8
-    $xxs: sizing.rems(xxs); // 4
-    position: absolute;
-    padding: $xxs 0;
-    border: 1px solid var(--ui-gray-subtler-2);
-    border-radius: sizing.rems(xxxs);
-    background: var(--subtle);
-    box-shadow: 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3)),
-      0 $xxs $xs rgba(var(--stark-components), var(--opacity-4));
-    z-index: 99;
-  }
-
-  &.dropdown-right {
-    .rose-header-dropdown-content {
-      right: 0;
-    }
-  }
-
-  .rose-header-dropdown-link,
-  .rose-button-header-dropdown {
-    @include type.type(m, normal);
-    display: block;
-    // Targeting min-width of 200
-    min-width: (sizing.rems(m) + sizing.rems(xxs)) * 10;
-    padding: 0 sizing.rems(s);
-    margin: 0;
-    border: 0;
-    color: var(--stark);
-    background-color: transparent;
-    // target line height is 36, which is not a standard line height for this
-    // font size
-    $lineHeight: 36 / 16;
-    line-height: $lineHeight;
-    text-align: left;
-    text-decoration: none;
 
     &:hover {
-      background-color: var(--ui-gray-subtler-4);
+      background-color: unset;
     }
   }
-
-  .rose-button-header-dropdown {
-    width: 100%;
-  }
 }
diff --git a/addons/rose/addon/styles/rose/utilities/_dropdown.scss b/addons/rose/addon/styles/rose/utilities/_dropdown.scss
index 059d2d56d..8368a9366 100644
--- a/addons/rose/addon/styles/rose/utilities/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/utilities/_dropdown.scss
@@ -8,8 +8,8 @@ $dropdown-chevron: (
 );
 
 @mixin dropdown-style($name, $default) {
-  .rose-header-dropdown-#{$name} {
-    .rose-header-dropdown-trigger {
+  .rose-dropdown-#{$name} {
+    .rose-dropdown-trigger {
       color: map.get($default, color);
       background: url(map.get($dropdown-chevron, map.get($default, chevron)))
         no-repeat right center;
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index c65c640ba..7de02c1b7 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -1,6 +1,6 @@
 <details
   ...attributes
-  class="rose-dropdown"
+  class="rose-dropdown {{if @alignRight " dropdown-right"}} {{if  @style (concat "rose-dropdown-" @style)}}"
   {{on-click-outside this.close}}
 >
 
diff --git a/addons/rose/addon/templates/components/rose/header/utilities.hbs b/addons/rose/addon/templates/components/rose/header/utilities.hbs
index 6ee49e33f..cd0705a52 100644
--- a/addons/rose/addon/templates/components/rose/header/utilities.hbs
+++ b/addons/rose/addon/templates/components/rose/header/utilities.hbs
@@ -1,5 +1,5 @@
 <div class="rose-header-utilities">
   {{yield (hash
-    dropdown=(component 'rose/header/dropdown' alignRight=true)
+    dropdown=(component 'rose/dropdown' alignRight=true style="light")
   )}}
 </div>

From 28c30d3244ed881699bf2502d16ef67a90ad3c18 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 31 Jul 2020 10:39:50 -0400
Subject: [PATCH 03/18] chore: Remove utilities/header/dropdown component in
 rose

---
 .../addon/components/rose/header/dropdown.js  | 16 ----
 .../components/rose/header/dropdown.hbs       | 32 --------
 .../app/components/rose/header/dropdown.js    |  1 -
 .../components/rose/header/dropdown-test.js   | 80 -------------------
 4 files changed, 129 deletions(-)
 delete mode 100644 addons/rose/addon/components/rose/header/dropdown.js
 delete mode 100644 addons/rose/addon/templates/components/rose/header/dropdown.hbs
 delete mode 100644 addons/rose/app/components/rose/header/dropdown.js
 delete mode 100644 addons/rose/tests/integration/components/rose/header/dropdown-test.js

diff --git a/addons/rose/addon/components/rose/header/dropdown.js b/addons/rose/addon/components/rose/header/dropdown.js
deleted file mode 100644
index 4a5897084..000000000
--- a/addons/rose/addon/components/rose/header/dropdown.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/header/dropdown';
-import { action } from '@ember/object';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-
-  // Uses details widget state to close dropdown
-  @action
-  close(element) {
-    if (element.open) {
-      element.open = false;
-    }
-  },
-});
diff --git a/addons/rose/addon/templates/components/rose/header/dropdown.hbs b/addons/rose/addon/templates/components/rose/header/dropdown.hbs
deleted file mode 100644
index cc874c284..000000000
--- a/addons/rose/addon/templates/components/rose/header/dropdown.hbs
+++ /dev/null
@@ -1,32 +0,0 @@
-<details
-  ...attributes
-  class="rose-header-dropdown{{if @alignRight " dropdown-right"}} {{if  @style (concat "rose-header-dropdown-" @style) "rose-header-dropdown-light"}}"
-  {{on-click-outside this.close}}
->
-
-  <summary
-    class="rose-header-dropdown-trigger{{if @iconOnly " icon-only"}}"
-    title={{@text}}
-  >
-
-    {{#if @icon}}
-      <Rose::Icon
-        @name={{@icon}}
-        @size="large"
-      />
-    {{/if}}
-
-    <span class="rose-header-dropdown-trigger-text">
-      {{@text}}
-    </span>
-
-  </summary>
-
-  <div class="rose-header-dropdown-content">
-    {{yield (hash
-      link=(component "link-to" class="rose-header-dropdown-link")
-      button=(component "rose/button" style="header-dropdown")
-    )}}
-  </div>
-
-</details>
diff --git a/addons/rose/app/components/rose/header/dropdown.js b/addons/rose/app/components/rose/header/dropdown.js
deleted file mode 100644
index 16d89ac10..000000000
--- a/addons/rose/app/components/rose/header/dropdown.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/header/dropdown';
diff --git a/addons/rose/tests/integration/components/rose/header/dropdown-test.js b/addons/rose/tests/integration/components/rose/header/dropdown-test.js
deleted file mode 100644
index 96806b98b..000000000
--- a/addons/rose/tests/integration/components/rose/header/dropdown-test.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, click, find, findAll } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | rose/header/dropdown', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`<Rose::Header::Dropdown />`);
-    assert.ok(find('.rose-header-dropdown'));
-  });
-
-  test('it renders with html attributes', async function (assert) {
-    await render(
-      hbs`<Rose::Header::Dropdown id="custom-id" class="custom-class"/>`
-    );
-    assert.ok(find('#custom-id'));
-    assert.ok(find('.custom-class'));
-  });
-
-  test('it renders with trigger', async function (assert) {
-    await render(hbs`<Rose::Header::Dropdown @text="Click me" />`);
-    assert.equal(
-      find('.rose-header-dropdown-trigger').textContent.trim(),
-      'Click me'
-    );
-  });
-
-  test('it supports an icon', async function (assert) {
-    await render(hbs`<Rose::Header::Dropdown @icon="user-square-fill" />`);
-    assert.ok(find('svg'));
-  });
-
-  test('it supports icon-only display', async function (assert) {
-    await render(hbs`<Rose::Header::Dropdown @iconOnly={{true}} />`);
-    assert.ok(find('.icon-only'));
-  });
-
-  test('it supports right-aligned content', async function (assert) {
-    await render(hbs`<Rose::Header::Dropdown @alignRight={{true}} />`);
-    assert.ok(find('.dropdown-right'));
-  });
-
-  test('it renders with content', async function (assert) {
-    await render(hbs`<Rose::Header::Dropdown @text="Click me" as |dropdown|>
-      <dropdown.link @route="about"/>
-      <dropdown.link @route="about"/>
-      <dropdown.button />
-      <dropdown.button />
-      <dropdown.button />
-    </Rose::Header::Dropdown>`);
-    assert.ok(find('.rose-header-dropdown-content'));
-    assert.equal(findAll('a').length, 2);
-    assert.equal(findAll('button').length, 3);
-  });
-
-  test('it is toggled on click on trigger content', async function (assert) {
-    await render(hbs`<Rose::Header::Dropdown id="dropdown" />`);
-
-    assert.notOk(find('#dropdown').open);
-    await click('summary');
-    assert.ok(find('#dropdown').open);
-    await click('summary');
-    assert.notOk(find('#dropdown').open);
-  });
-
-  test('it is closed with outside click is triggered', async function (assert) {
-    await render(hbs`
-      <div id="wrapper">
-        <Rose::Header::Dropdown id="dropdown" />
-      </div>
-    `);
-
-    await click('summary');
-    assert.ok(find('#dropdown').open);
-    await click('#wrapper');
-    assert.notOk(find('#dropdown').open);
-  });
-});

From 8836611b08544603e7c49190629cc682d60a55d3 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 31 Jul 2020 15:49:07 -0400
Subject: [PATCH 04/18] chore: Use rose/dropdown comp in header nav comp

---
 .../rose/components/header/_dropdown.scss     |  2 +-
 .../templates/components/rose/header/nav.hbs  |  2 +-
 .../rose/tests/dummy/app/templates/index.hbs  | 32 +++++++++++++++----
 .../components/rose/header-test.js            |  2 +-
 .../components/rose/header/nav-test.js        |  2 +-
 .../components/rose/header/utilities-test.js  |  2 +-
 6 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
index 8e1c8766a..5ffa927d3 100644
--- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
@@ -18,7 +18,7 @@
   )
 );
 
-.rose-header-utilities {
+.rose-header-utilities, .rose-header-nav {
   margin-right: sizing.rems(s);
 
   .rose-dropdown-trigger {
diff --git a/addons/rose/addon/templates/components/rose/header/nav.hbs b/addons/rose/addon/templates/components/rose/header/nav.hbs
index 2b2978e00..18458e10c 100644
--- a/addons/rose/addon/templates/components/rose/header/nav.hbs
+++ b/addons/rose/addon/templates/components/rose/header/nav.hbs
@@ -1,6 +1,6 @@
 <nav class="rose-header-nav">
   {{yield (hash
     link=(component 'link-to' class="rose-header-nav-link")
-    dropdown=(component 'rose/header/dropdown')
+    dropdown=(component 'rose/dropdown' style="light")
   )}}
 </nav>
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 2974ba49c..dba08ec08 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,6 +1,26 @@
-<Rose::List::KeyValue as |list|>
-  <list.item as |item|>
-    <item.cell>Key</item.cell>
-    <item.cell>Value</item.cell>
-  </list.item>
-</Rose::List::KeyValue>
+<Rose::Header as |header|>
+  <header.brand @logo="logo" @text="Product Name" />
+
+  <header.nav as |nav|>
+    <nav.dropdown @text="org-name" as |dropdown|>
+      <dropdown.link @route="index">Menu item</dropdown.link>
+      <dropdown.link @route="about">Menu item</dropdown.link>
+      <dropdown.button>Button menu item</dropdown.button>
+    </nav.dropdown>
+    <nav.link @route="index">Section</nav.link>
+    <nav.link @route="about">Section</nav.link>
+  </header.nav>
+
+  <header.utilities as |utilities|>
+    <utilities.dropdown
+      @text="user@example.net"
+      @iconOnly={{true}}
+      @icon="user-square-fill" as |dropdown|
+    >
+      <dropdown.link @route="index">Menu item</dropdown.link>
+      <dropdown.link @route="about">Menu item</dropdown.link>
+      <dropdown.button>Button menu item</dropdown.button>
+    </utilities.dropdown>
+  </header.utilities>
+</Rose::Header>
+
diff --git a/addons/rose/tests/integration/components/rose/header-test.js b/addons/rose/tests/integration/components/rose/header-test.js
index 7e0f57da7..2feb23438 100644
--- a/addons/rose/tests/integration/components/rose/header-test.js
+++ b/addons/rose/tests/integration/components/rose/header-test.js
@@ -53,6 +53,6 @@ module('Integration | Component | rose/header', function (hooks) {
         <utility.dropdown />
       </header.utilities>
     </Rose::Header>`);
-    assert.ok(find('.rose-header-dropdown'));
+    assert.ok(find('.rose-dropdown'));
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/header/nav-test.js b/addons/rose/tests/integration/components/rose/header/nav-test.js
index d1c5a688d..fd713c0db 100644
--- a/addons/rose/tests/integration/components/rose/header/nav-test.js
+++ b/addons/rose/tests/integration/components/rose/header/nav-test.js
@@ -24,6 +24,6 @@ module('Integration | Component | rose/header/nav', function (hooks) {
       <nav.dropdown />
       <nav.dropdown />
     </Rose::Header::nav>`);
-    assert.equal(findAll('.rose-header-dropdown').length, 2);
+    assert.equal(findAll('.rose-dropdown').length, 2);
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/header/utilities-test.js b/addons/rose/tests/integration/components/rose/header/utilities-test.js
index 884266d8f..ba8de3f93 100644
--- a/addons/rose/tests/integration/components/rose/header/utilities-test.js
+++ b/addons/rose/tests/integration/components/rose/header/utilities-test.js
@@ -16,6 +16,6 @@ module('Integration | Component | rose/header/utilities', function (hooks) {
       <nav.dropdown />
       <nav.dropdown />
     </Rose::Header::Utilities>`);
-    assert.equal(findAll('.rose-header-dropdown').length, 2);
+    assert.equal(findAll('.rose-dropdown').length, 2);
   });
 });

From ed69d66939741c56a85d4ff4c8726e8c3bae6fab Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Mon, 10 Aug 2020 15:42:51 -0400
Subject: [PATCH 05/18] chore: Add button styles to dropdown button

---
 .../components/rose/dropdown.stories.mdx      | 24 ++++++++++++++++++-
 .../styles/rose/components/_dropdown.scss     | 10 +++++---
 .../templates/components/rose/button.hbs      |  2 +-
 .../templates/components/rose/dropdown.hbs    |  2 +-
 .../rose/tests/dummy/app/templates/index.hbs  | 15 +++++++++++-
 5 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx
index 87c50f1f1..25a441767 100644
--- a/addons/rose/addon/components/rose/dropdown.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown.stories.mdx
@@ -7,7 +7,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 # Dropdown
 
-A simple dropdown component with support for links and buttons.
+A simple dropdown component with support for links and buttons. Dropdown buttons support pre-defined styles of `Rose::Button`.
 
 <Preview>
   <Story name="Basic Dropdown" height="5rem">{{
@@ -43,3 +43,25 @@ A simple dropdown component with support for links and buttons.
     <dropdown.button>Button menu item</dropdown.button>
   </Rose::Dropdown>
 ```
+
+Dropdown content can be aligned to right edge of the component instead of the default left edge. The following example floats the component to right edge of the page inorder to provide enough space to display right aligned dropdown content.
+
+```htmlbars
+  <Rose::Dropdown @text="Choose One&hellip;" style="float: right" @alignRight={{true}} as |dropdown|>
+    <dropdown.link @route="index">Menu item</dropdown.link>
+    <dropdown.link @route="about">Menu item</dropdown.link>
+    <dropdown.button>Button menu item</dropdown.button>
+  </Rose::Dropdown>
+```
+
+Dropdown button styles can be supplied through a `style` attribute.
+
+```htmlbars
+<Rose::Dropdown @text="Dropdown" as |dropdown|>
+  <dropdown.button>Button menu item</dropdown.button>
+  <dropdown.button @style="warning">Button - warning</dropdown.button>
+  <dropdown.button @style="primary">Button - primary</dropdown.button>
+  <dropdown.button @style="secondary">Button - secondary</dropdown.button>
+  <dropdown.button @style="ghost">Button - ghost</dropdown.button>
+</Rose::Dropdown>
+```
diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/_dropdown.scss
index d4fb27f03..58eac5a0a 100644
--- a/addons/rose/addon/styles/rose/components/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/_dropdown.scss
@@ -93,7 +93,7 @@
   }
 
   .rose-dropdown-link,
-  .rose-button-dropdown {
+  .rose-dropdown-button {
     @include type.type(s, normal);
     display: block;
     // Targeting min-width of 200
@@ -109,13 +109,17 @@
     line-height: $lineHeight;
     text-align: left;
     text-decoration: none;
+    box-shadow: none;
+    text-shadow: none;
+    cursor: pointer;
 
     &:hover {
-      background-color: var(--ui-gray-subtler-4);
+      box-shadow: none;
+      text-shadow: none;
     }
   }
 
-  .rose-button-dropdown {
+  .rose-dropdown-button {
     width: 100%;
   }
 }
diff --git a/addons/rose/addon/templates/components/rose/button.hbs b/addons/rose/addon/templates/components/rose/button.hbs
index a8ac2acbd..6f5974289 100644
--- a/addons/rose/addon/templates/components/rose/button.hbs
+++ b/addons/rose/addon/templates/components/rose/button.hbs
@@ -2,7 +2,7 @@
   ...attributes
   type={{if @submit "submit" "button"}}
   disabled={{if @disabled "disabled"}}
-  class="{{if  @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
+  class="{{@class}} {{if  @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
   >
 
   <span class="rose-button-wrapper">
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index 7de02c1b7..8d2b75734 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -25,7 +25,7 @@
   <div class="rose-dropdown-content" {{on-click-inside this.close}}>
     {{yield (hash
       link=(component "link-to" class="rose-dropdown-link")
-      button=(component "rose/button" style="dropdown")
+      button=(component "rose/button" class="rose-dropdown-button" style=this.style)
     )}}
   </div>
 
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index dba08ec08..72f1657d5 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -19,8 +19,21 @@
     >
       <dropdown.link @route="index">Menu item</dropdown.link>
       <dropdown.link @route="about">Menu item</dropdown.link>
-      <dropdown.button>Button menu item</dropdown.button>
+      <dropdown.button>Button - default</dropdown.button>
+      <dropdown.button @style="warning">Button - warning</dropdown.button>
+      <dropdown.button @style="primary">Button - primary</dropdown.button>
+      <dropdown.button @style="secondary">Button - secondary</dropdown.button>
+      <dropdown.button @style="ghost">Button - ghost</dropdown.button>
     </utilities.dropdown>
   </header.utilities>
 </Rose::Header>
 
+<Rose::Dropdown @text="Dropdown" as |dropdown|>
+  <dropdown.link @route="index">Menu item</dropdown.link>
+  <dropdown.link @route="about">Menu item</dropdown.link>
+  <dropdown.button>Button menu item</dropdown.button>
+  <dropdown.button @style="warning">Button - warning</dropdown.button>
+  <dropdown.button @style="primary">Button - primary</dropdown.button>
+  <dropdown.button @style="secondary">Button - secondary</dropdown.button>
+  <dropdown.button @style="ghost">Button - ghost</dropdown.button>
+</Rose::Dropdown>

From 4ea307e5cf2a89197dbecab00d0dba5ecb7b38e1 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Mon, 10 Aug 2020 15:43:22 -0400
Subject: [PATCH 06/18] style: yarn format

---
 addons/rose/addon/styles/rose/components/header/_dropdown.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
index 5ffa927d3..95f1f663f 100644
--- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
@@ -18,7 +18,8 @@
   )
 );
 
-.rose-header-utilities, .rose-header-nav {
+.rose-header-utilities,
+.rose-header-nav {
   margin-right: sizing.rems(s);
 
   .rose-dropdown-trigger {

From 2509b6a270af0670d74868690038bcd8804aa5f5 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Mon, 10 Aug 2020 15:53:47 -0400
Subject: [PATCH 07/18] chore: Add "Manage" button to edit views for IAM
 resources

---
 .../scopes/scope/groups/group/index.hbs       | 20 +++++++++++--------
 .../scopes/scope/roles/role/index.hbs         | 20 +++++++++++--------
 .../scopes/scope/users/user/index.hbs         |  3 ++-
 ui/core/translations/en-us.yaml               |  3 +++
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/ui/core/app/templates/scopes/scope/groups/group/index.hbs b/ui/core/app/templates/scopes/scope/groups/group/index.hbs
index ac8915f59..ffe366e71 100644
--- a/ui/core/app/templates/scopes/scope/groups/group/index.hbs
+++ b/ui/core/app/templates/scopes/scope/groups/group/index.hbs
@@ -16,20 +16,24 @@
     </Rose::Nav::Tabs>
   </page.navigation>
 
+  <page.actions>
+    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @alignRight={{true}} as |dropdown|>
+      <dropdown.button
+        @style="warning"
+        @disabled={{@model.canSave}}
+        {{on "click" (route-action "delete" @model)}}
+      >
+        {{t 'actions.delete-group'}}
+      </dropdown.button>
+    </Rose::Dropdown>
+  </page.actions>
+
   <page.body>
     <Form::Project
       @model={{@model}}
       @submit={{route-action "save" @model}}
       @cancel={{route-action "cancel" @model}}
     />
-    <Rose::Separator />
-    <Rose::Button
-      @style="warning"
-      @disabled={{@model.canSave}}
-      {{on "click" (route-action "delete" @model)}}
-    >
-      {{t 'actions.delete'}}
-    </Rose::Button>
   </page.body>
 
 </Rose::Layout::Page>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/index.hbs b/ui/core/app/templates/scopes/scope/roles/role/index.hbs
index 1b35c1929..c3d9734e0 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/index.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/index.hbs
@@ -8,20 +8,24 @@
     <h2>{{t "resources.role"}}</h2>
   </page.header>
 
+  <page.actions>
+    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @alignRight={{true}} as |dropdown|>
+      <dropdown.button
+        @style="warning"
+        @disabled={{@model.canSave}}
+        {{on "click" (route-action "delete" @model)}}
+      >
+        {{t 'actions.delete-role'}}
+      </dropdown.button>
+    </Rose::Dropdown>
+  </page.actions>
+
   <page.body>
     <Form::Role
       @model={{@model}}
       @submit={{route-action "save" @model}}
       @cancel={{route-action "cancel" @model}}
     />
-    <Rose::Separator />
-    <Rose::Button
-      @style="warning"
-      @disabled={{@model.canSave}}
-      {{on "click" (route-action "delete" @model)}}
-    >
-      {{t 'actions.delete'}}
-    </Rose::Button>
   </page.body>
 
 </Rose::Layout::Page>
diff --git a/ui/core/app/templates/scopes/scope/users/user/index.hbs b/ui/core/app/templates/scopes/scope/users/user/index.hbs
index c50c14754..2261fa30b 100644
--- a/ui/core/app/templates/scopes/scope/users/user/index.hbs
+++ b/ui/core/app/templates/scopes/scope/users/user/index.hbs
@@ -11,10 +11,11 @@
   <page.actions>
     <Rose::Dropdown @text="{{t 'form.label.manage'}}" @alignRight={{true}} as |dropdown|>
       <dropdown.button
+        @style="warning"
         @disabled={{@model.canSave}}
         {{on "click" (route-action "delete" @model)}}
       >
-        {{t 'actions.delete'}}
+        {{t 'actions.delete-user'}}
       </dropdown.button>
     </Rose::Dropdown>
   </page.actions>
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 08a14ff5b..181bcbf12 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -8,6 +8,9 @@ actions:
   deauthenticate: Deauthenticate
   choose-org: Choose Scope
   choose-different-org: Choose a Different Scope
+  delete-user: Delete user
+  delete-group: Delete group
+  delete-role: Delete role
 auth:
   titles:
     no-scopes: No Scopes Available

From 22237958201fd81b46b05d8f005ebe789db0822b Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Mon, 10 Aug 2020 16:00:39 -0400
Subject: [PATCH 08/18] chore: Add data-test tag for deauthenticate dropdown
 button

---
 ui/core/app/templates/application.hbs           | 5 ++++-
 ui/core/tests/acceptance/authentication-test.js | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index 0f0b66871..8a88d8271 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -26,7 +26,10 @@
             @iconOnly={{true}}
             @icon="user-square-fill" as |dropdown|
           >
-            <dropdown.button {{on "click" (route-action "invalidateSession")}}>
+            <dropdown.button
+              data-test-deauthenticate
+              {{on "click" (route-action "invalidateSession")}}
+            >
               {{t 'actions.deauthenticate'}}
             </dropdown.button>
           </utilities.dropdown>
diff --git a/ui/core/tests/acceptance/authentication-test.js b/ui/core/tests/acceptance/authentication-test.js
index 478e2f1dd..ca997453c 100644
--- a/ui/core/tests/acceptance/authentication-test.js
+++ b/ui/core/tests/acceptance/authentication-test.js
@@ -164,7 +164,7 @@ module('Acceptance | authentication', function (hooks) {
     await fillIn('[name="password"]', 'test');
     await click('[type="submit"]');
     assert.ok(currentSession().isAuthenticated);
-    await click('.rose-button-header-dropdown');
+    await click('[data-test-deauthenticate]');
     assert.notOk(currentSession().isAuthenticated);
     assert.equal(currentURL(), authMethodAuthenticateURL);
   });

From 26795b9359f83cc62a09e7c1590183bb6e459350 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Mon, 10 Aug 2020 16:09:27 -0400
Subject: [PATCH 09/18] chore: Add dropdown right alignment tests

---
 addons/rose/addon/styles/rose/components/_dropdown.scss   | 2 +-
 addons/rose/addon/templates/components/rose/dropdown.hbs  | 2 +-
 .../tests/integration/components/rose/dropdown-test.js    | 8 ++++++++
 .../integration/components/rose/header/utilities-test.js  | 7 +++++++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/_dropdown.scss
index 58eac5a0a..13e19785b 100644
--- a/addons/rose/addon/styles/rose/components/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/_dropdown.scss
@@ -86,7 +86,7 @@
     z-index: 99;
   }
 
-  &.dropdown-right {
+  &.rose-dropdown-right {
     .rose-dropdown-content {
       right: 0;
     }
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index 8d2b75734..00ab21e62 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -1,6 +1,6 @@
 <details
   ...attributes
-  class="rose-dropdown {{if @alignRight " dropdown-right"}} {{if  @style (concat "rose-dropdown-" @style)}}"
+  class="rose-dropdown {{if @alignRight " rose-dropdown-right"}} {{if  @style (concat "rose-dropdown-" @style)}}"
   {{on-click-outside this.close}}
 >
 
diff --git a/addons/rose/tests/integration/components/rose/dropdown-test.js b/addons/rose/tests/integration/components/rose/dropdown-test.js
index 3d4597c95..03c1b65e7 100644
--- a/addons/rose/tests/integration/components/rose/dropdown-test.js
+++ b/addons/rose/tests/integration/components/rose/dropdown-test.js
@@ -9,6 +9,7 @@ module('Integration | Component | rose/dropdown', function (hooks) {
   test('it renders', async function (assert) {
     await render(hbs`<Rose::Dropdown />`);
     assert.ok(find('.rose-dropdown'));
+    assert.notOk(find('.rose-dropdown-right'));
   });
 
   test('it renders with html attributes', async function (assert) {
@@ -32,6 +33,13 @@ module('Integration | Component | rose/dropdown', function (hooks) {
     assert.ok(find('.has-icon-only'));
   });
 
+  test('it supports right aligned content', async function (assert) {
+    await render(hbs`
+      <Rose::Dropdown @alignRight={{true}} />
+    `);
+    assert.ok(find('.rose-dropdown-right'));
+  });
+
   test('it renders with content', async function (assert) {
     await render(hbs`<Rose::Dropdown @text="Click me" as |dropdown|>
       <dropdown.link @route="about"/>
diff --git a/addons/rose/tests/integration/components/rose/header/utilities-test.js b/addons/rose/tests/integration/components/rose/header/utilities-test.js
index ba8de3f93..1bb44de8e 100644
--- a/addons/rose/tests/integration/components/rose/header/utilities-test.js
+++ b/addons/rose/tests/integration/components/rose/header/utilities-test.js
@@ -18,4 +18,11 @@ module('Integration | Component | rose/header/utilities', function (hooks) {
     </Rose::Header::Utilities>`);
     assert.equal(findAll('.rose-dropdown').length, 2);
   });
+
+  test('it renders nav dropdown elements as right aligned', async function (assert) {
+    await render(hbs`<Rose::Header::Utilities as |nav| >
+      <nav.dropdown />
+    </Rose::Header::Utilities>`);
+    assert.ok(find('.rose-dropdown.rose-dropdown-right'));
+  });
 });

From 23c97c1f157577898d7f353b92ee39625a49bb00 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Mon, 10 Aug 2020 18:31:54 -0400
Subject: [PATCH 10/18] chore: Update dropdown chevron styles

---
 addons/rose/addon/components/rose/dropdown.js |  2 +-
 .../components/rose/dropdown.stories.mdx      | 13 +++++++--
 .../styles/rose/components/_dropdown.scss     | 29 +++++++++++++++++--
 .../rose/components/header/_dropdown.scss     | 20 +------------
 .../styles/rose/utilities/_dropdown.scss      |  3 +-
 .../templates/components/rose/dropdown.hbs    |  2 +-
 6 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown.js b/addons/rose/addon/components/rose/dropdown.js
index 4e6ffea81..33547b719 100644
--- a/addons/rose/addon/components/rose/dropdown.js
+++ b/addons/rose/addon/components/rose/dropdown.js
@@ -13,7 +13,7 @@ export default Component.extend({
   /**
    * Closes the details element by setting its `open` attribute to `false`.
    * While the details element handles open/close functionality when clicking
-   * directly on the summar elemenet without JavaScript, we include this helper
+   * directly on the summary element without JavaScript, we include this helper
    * action to ensure that when the user clicks _outside_ of the element,
    * or _inside_ the content, it still closes.
    * @param {HTMLElement} element
diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx
index 25a441767..86e1c3048 100644
--- a/addons/rose/addon/components/rose/dropdown.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown.stories.mdx
@@ -12,13 +12,22 @@ A simple dropdown component with support for links and buttons. Dropdown buttons
 <Preview>
   <Story name="Basic Dropdown" height="5rem">{{
     template: hbs`
-      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" as |dropdown|>
+      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" @style={{style}} as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
         <dropdown.button>Button menu item</dropdown.button>
       </Rose::Dropdown>
     `,
-    context: {}
+    context: {
+      style: select(
+        'style',
+        {
+          'light': 'light',
+          'dark': 'dark',
+        },
+        'dark'
+      ),
+    }
   }}</Story>
 </Preview>
 
diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/_dropdown.scss
index 13e19785b..dd69ee8d3 100644
--- a/addons/rose/addon/styles/rose/components/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/_dropdown.scss
@@ -2,6 +2,22 @@
 @use '../utilities/type';
 @use '../utilities/dropdown';
 
+@include dropdown.dropdown-style(
+  'light',
+  (
+    color: var(--white),
+    chevron: 'light',
+  )
+);
+
+@include dropdown.dropdown-style(
+  'dark',
+  (
+    color: var(--black),
+    chevron: 'dark',
+  )
+);
+
 .rose-dropdown {
   position: relative;
   display: inline-block;
@@ -27,9 +43,6 @@
       display: none;
     }
 
-    // color: var(--subtle);
-    background: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>")
-      no-repeat right sizing.rems(s) center;
     background-size: sizing.rems(m);
 
     &:hover {
@@ -121,5 +134,15 @@
 
   .rose-dropdown-button {
     width: 100%;
+
+    &.rose-button-warning {
+      color: unset;
+    }
+
+    // &.rose-button-warning {
+    //   &:hover, &:focus {
+    //     color: unset;
+    //   }
+    // }
   }
 }
diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
index 95f1f663f..0cfdaccdf 100644
--- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
@@ -1,22 +1,5 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
-@use '../../utilities/dropdown';
-
-@include dropdown.dropdown-style(
-  'light',
-  (
-    color: var(--white),
-    chevron: 'light',
-  )
-);
-
-@include dropdown.dropdown-style(
-  'dark',
-  (
-    color: var(--black),
-    chevron: 'dark',
-  )
-);
 
 .rose-header-utilities,
 .rose-header-nav {
@@ -24,7 +7,6 @@
 
   .rose-dropdown-trigger {
     background-size: sizing.rems(m);
-    padding-right: sizing.rems(l) - sizing.rems(xxs);
     $lineHeight: 48 / 16;
     line-height: $lineHeight;
 
@@ -41,7 +23,7 @@
       }
     }
 
-    &:hover {
+    &:hover, &:focus {
       background-color: unset;
     }
   }
diff --git a/addons/rose/addon/styles/rose/utilities/_dropdown.scss b/addons/rose/addon/styles/rose/utilities/_dropdown.scss
index 8368a9366..b7e2a5358 100644
--- a/addons/rose/addon/styles/rose/utilities/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/utilities/_dropdown.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../variables/sizing';
 
 $dropdown-chevron: (
   'light':
@@ -12,7 +13,7 @@ $dropdown-chevron: (
     .rose-dropdown-trigger {
       color: map.get($default, color);
       background: url(map.get($dropdown-chevron, map.get($default, chevron)))
-        no-repeat right center;
+        no-repeat right sizing.rems(s) center;
     }
   }
 }
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index 00ab21e62..8c80b69e4 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -1,6 +1,6 @@
 <details
   ...attributes
-  class="rose-dropdown {{if @alignRight " rose-dropdown-right"}} {{if  @style (concat "rose-dropdown-" @style)}}"
+  class="rose-dropdown {{if @alignRight " rose-dropdown-right"}} {{if  @style (concat "rose-dropdown-" @style)}} {{unless @style (concat "rose-dropdown-dark")}}"
   {{on-click-outside this.close}}
 >
 

From cfe1d316365f44f2ff0b167ce15e474ed0194ea8 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 11 Aug 2020 10:14:45 -0400
Subject: [PATCH 11/18] chore: Update dropdown storybook

Remove commented style
---
 addons/rose/addon/components/rose/dropdown.stories.mdx  | 6 +++---
 addons/rose/addon/styles/rose/components/_dropdown.scss | 6 ------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx
index 86e1c3048..a89813392 100644
--- a/addons/rose/addon/components/rose/dropdown.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown.stories.mdx
@@ -7,7 +7,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 
 # Dropdown
 
-A simple dropdown component with support for links and buttons. Dropdown buttons support pre-defined styles of `Rose::Button`.
+A simple dropdown component with support for links and buttons. Supports `light` and `dark` styles, with latter being a default style.
 
 <Preview>
   <Story name="Basic Dropdown" height="5rem">{{
@@ -53,7 +53,7 @@ A simple dropdown component with support for links and buttons. Dropdown buttons
   </Rose::Dropdown>
 ```
 
-Dropdown content can be aligned to right edge of the component instead of the default left edge. The following example floats the component to right edge of the page inorder to provide enough space to display right aligned dropdown content.
+Dropdown content can be aligned to right edge of the component instead of the default left edge, which is the default setting. The following example floats the component to right edge of the page inorder to provide enough space to display right aligned dropdown content.
 
 ```htmlbars
   <Rose::Dropdown @text="Choose One&hellip;" style="float: right" @alignRight={{true}} as |dropdown|>
@@ -63,7 +63,7 @@ Dropdown content can be aligned to right edge of the component instead of the de
   </Rose::Dropdown>
 ```
 
-Dropdown button styles can be supplied through a `style` attribute.
+Dropdown button styles support all `Rose::Button` styles through a `style` attribute.
 
 ```htmlbars
 <Rose::Dropdown @text="Dropdown" as |dropdown|>
diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/_dropdown.scss
index dd69ee8d3..8d083567d 100644
--- a/addons/rose/addon/styles/rose/components/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/_dropdown.scss
@@ -138,11 +138,5 @@
     &.rose-button-warning {
       color: unset;
     }
-
-    // &.rose-button-warning {
-    //   &:hover, &:focus {
-    //     color: unset;
-    //   }
-    // }
   }
 }

From 518ce7c199e8d3a8c5e12d044b1f9a4ffa59f366 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 11 Aug 2020 18:59:34 -0400
Subject: [PATCH 12/18] chore: Update 'class' to 'classNames' attributes in
 dropdown

---
 addons/rose/addon/templates/components/rose/button.hbs   | 2 +-
 addons/rose/addon/templates/components/rose/dropdown.hbs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/templates/components/rose/button.hbs b/addons/rose/addon/templates/components/rose/button.hbs
index 6f5974289..cd87dd8d8 100644
--- a/addons/rose/addon/templates/components/rose/button.hbs
+++ b/addons/rose/addon/templates/components/rose/button.hbs
@@ -2,7 +2,7 @@
   ...attributes
   type={{if @submit "submit" "button"}}
   disabled={{if @disabled "disabled"}}
-  class="{{@class}} {{if  @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
+  class="{{@classNames}} {{if  @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
   >
 
   <span class="rose-button-wrapper">
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index 8c80b69e4..c2be96f2d 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -25,7 +25,7 @@
   <div class="rose-dropdown-content" {{on-click-inside this.close}}>
     {{yield (hash
       link=(component "link-to" class="rose-dropdown-link")
-      button=(component "rose/button" class="rose-dropdown-button" style=this.style)
+      button=(component "rose/button" classNames="rose-dropdown-button" style=this.style)
     )}}
   </div>
 

From aa783e4d5a8c98690943b487f111ceb18c2ea131 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 11 Aug 2020 19:00:01 -0400
Subject: [PATCH 13/18] test: Update deauthenticate test data-test attribute

---
 ui/core/app/templates/application.hbs           | 13 -------------
 ui/core/tests/acceptance/authentication-test.js |  9 +++++++--
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index 8a88d8271..2422a624e 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -7,18 +7,6 @@
     <Rose::Header as |header|>
       <header.brand @logo="logo-hashi" @text={{app-name}} />
 
-      {{!--
-      <header.nav as |nav|>
-        <nav.dropdown @text={{t 'dev.default-org'}} as |dropdown|>
-          <dropdown.link @route="index">{{t 'dev.menu-item'}}</dropdown.link>
-          <dropdown.link @route="orgs">{{t 'dev.menu-item'}}</dropdown.link>
-          <dropdown.button>{{t 'dev.button-menu-item'}}</dropdown.button>
-        </nav.dropdown>
-        <nav.link @route="index">{{t 'dev.section'}}</nav.link>
-        <nav.link @route="index">{{t 'dev.section'}}</nav.link>
-      </header.nav>
-      --}}
-
       {{#if this.session.isAuthenticated}}
         <header.utilities as |utilities|>
           <utilities.dropdown
@@ -27,7 +15,6 @@
             @icon="user-square-fill" as |dropdown|
           >
             <dropdown.button
-              data-test-deauthenticate
               {{on "click" (route-action "invalidateSession")}}
             >
               {{t 'actions.deauthenticate'}}
diff --git a/ui/core/tests/acceptance/authentication-test.js b/ui/core/tests/acceptance/authentication-test.js
index ca997453c..65d57018f 100644
--- a/ui/core/tests/acceptance/authentication-test.js
+++ b/ui/core/tests/acceptance/authentication-test.js
@@ -1,5 +1,5 @@
 import { module, test } from 'qunit';
-import { visit, currentURL, fillIn, click, find } from '@ember/test-helpers';
+import { visit, currentURL, fillIn, click, find, findAll } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { Response } from 'miragejs';
@@ -158,13 +158,18 @@ module('Acceptance | authentication', function (hooks) {
   });
 
   test('deauthentication redirects to first authenticate method', async function (assert) {
+    // TODO: Identify deauthenticate in menu through data-test attributes in non-production env only
     assert.expect(3);
     await visit(authMethodAuthenticateURL);
     await fillIn('[name="identification"]', 'test');
     await fillIn('[name="password"]', 'test');
     await click('[type="submit"]');
     assert.ok(currentSession().isAuthenticated);
-    await click('[data-test-deauthenticate]');
+    // Open header utilities dropdown
+    await click('.rose-header-utilities .rose-dropdown summary');
+    // Find and click on last element in dropdown - should be deauthenticate button
+    const menu = findAll('.rose-header-utilities .rose-dropdown .rose-dropdown-content button');
+    await click(menu[menu.length - 1]);
     assert.notOk(currentSession().isAuthenticated);
     assert.equal(currentURL(), authMethodAuthenticateURL);
   });

From 919e2f083b7286fb38d894fd79c54fa77604002d Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 11 Aug 2020 19:22:44 -0400
Subject: [PATCH 14/18] chore: Remove dropdown utilities sass file

Move utilities sass file chevron definitions into dropdown styles in
favour of a single dropdown style
---
 .../components/rose/dropdown.stories.mdx      | 17 ++-----------
 .../styles/rose/components/_dropdown.scss     | 25 ++++++-------------
 .../rose/components/header/_dropdown.scss     | 10 +++++++-
 .../styles/rose/utilities/_dropdown.scss      | 19 --------------
 .../templates/components/rose/dropdown.hbs    |  2 +-
 .../components/rose/header/utilities.hbs      |  2 +-
 6 files changed, 21 insertions(+), 54 deletions(-)
 delete mode 100644 addons/rose/addon/styles/rose/utilities/_dropdown.scss

diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx
index a89813392..e77c8a73d 100644
--- a/addons/rose/addon/components/rose/dropdown.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown.stories.mdx
@@ -1,33 +1,21 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose|Dropdown" component="Dropdown" />
 
 # Dropdown
 
-A simple dropdown component with support for links and buttons. Supports `light` and `dark` styles, with latter being a default style.
+A simple dropdown component with support for links and buttons.
 
 <Preview>
   <Story name="Basic Dropdown" height="5rem">{{
     template: hbs`
-      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" @style={{style}} as |dropdown|>
+      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
         <dropdown.button>Button menu item</dropdown.button>
       </Rose::Dropdown>
     `,
-    context: {
-      style: select(
-        'style',
-        {
-          'light': 'light',
-          'dark': 'dark',
-        },
-        'dark'
-      ),
-    }
   }}</Story>
 </Preview>
 
@@ -40,7 +28,6 @@ A simple dropdown component with support for links and buttons. Supports `light`
         <dropdown.button>Button menu item</dropdown.button>
       </Rose::Dropdown>
     `,
-    context: {}
   }}</Story>
 </Preview>
 
diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/_dropdown.scss
index 8d083567d..7a1bf9e53 100644
--- a/addons/rose/addon/styles/rose/components/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/_dropdown.scss
@@ -1,22 +1,7 @@
 @use '../variables/sizing';
 @use '../utilities/type';
-@use '../utilities/dropdown';
 
-@include dropdown.dropdown-style(
-  'light',
-  (
-    color: var(--white),
-    chevron: 'light',
-  )
-);
-
-@include dropdown.dropdown-style(
-  'dark',
-  (
-    color: var(--black),
-    chevron: 'dark',
-  )
-);
+$chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
 
 .rose-dropdown {
   position: relative;
@@ -31,6 +16,8 @@
     padding: 0 sizing.rems(xl) 0 sizing.rems(l);
     $lineHeight: 36 / 13;
     line-height: $lineHeight;
+    color: var(--black);
+    background: url($chevron) no-repeat right sizing.rems(s) center;
 
     // Hide default twistie triangle
     // Webkit / Chromium
@@ -136,7 +123,11 @@
     width: 100%;
 
     &.rose-button-warning {
-      color: unset;
+      color: var(--failure);
+
+      &:hover {
+        color: var(--white);
+      }
     }
   }
 }
diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
index 0cfdaccdf..c30f1371a 100644
--- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
@@ -1,14 +1,18 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
 
+$chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ebeef2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
+
 .rose-header-utilities,
 .rose-header-nav {
   margin-right: sizing.rems(s);
 
   .rose-dropdown-trigger {
-    background-size: sizing.rems(m);
     $lineHeight: 48 / 16;
     line-height: $lineHeight;
+    color: var(--white);
+    background: url($chevron) no-repeat right center;
+    background-size: sizing.rems(m);
 
     .rose-icon {
       --size: #{sizing.rems(l)};
@@ -28,3 +32,7 @@
     }
   }
 }
+
+.rose-header-nav .rose-dropdown-trigger{
+  padding-right: sizing.rems(l);
+}
diff --git a/addons/rose/addon/styles/rose/utilities/_dropdown.scss b/addons/rose/addon/styles/rose/utilities/_dropdown.scss
deleted file mode 100644
index b7e2a5358..000000000
--- a/addons/rose/addon/styles/rose/utilities/_dropdown.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use 'sass:map';
-@use '../variables/sizing';
-
-$dropdown-chevron: (
-  'light':
-    "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ebeef2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>",
-  'dark':
-    "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>",
-);
-
-@mixin dropdown-style($name, $default) {
-  .rose-dropdown-#{$name} {
-    .rose-dropdown-trigger {
-      color: map.get($default, color);
-      background: url(map.get($dropdown-chevron, map.get($default, chevron)))
-        no-repeat right sizing.rems(s) center;
-    }
-  }
-}
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index c2be96f2d..9386431d2 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -1,6 +1,6 @@
 <details
   ...attributes
-  class="rose-dropdown {{if @alignRight " rose-dropdown-right"}} {{if  @style (concat "rose-dropdown-" @style)}} {{unless @style (concat "rose-dropdown-dark")}}"
+  class="rose-dropdown {{if @alignRight " rose-dropdown-right"}}"
   {{on-click-outside this.close}}
 >
 
diff --git a/addons/rose/addon/templates/components/rose/header/utilities.hbs b/addons/rose/addon/templates/components/rose/header/utilities.hbs
index cd0705a52..8c178538c 100644
--- a/addons/rose/addon/templates/components/rose/header/utilities.hbs
+++ b/addons/rose/addon/templates/components/rose/header/utilities.hbs
@@ -1,5 +1,5 @@
 <div class="rose-header-utilities">
   {{yield (hash
-    dropdown=(component 'rose/dropdown' alignRight=true style="light")
+    dropdown=(component 'rose/dropdown' alignRight=true)
   )}}
 </div>

From 95d5b45d413f80c3e3109cc8fe172196c7e4a06f Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 11 Aug 2020 19:32:14 -0400
Subject: [PATCH 15/18] chore: Move role's manage button into updated layout

---
 ui/core/app/templates/scopes/scope/roles/role.hbs | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/ui/core/app/templates/scopes/scope/roles/role.hbs b/ui/core/app/templates/scopes/scope/roles/role.hbs
index 552717330..848ae6a5c 100644
--- a/ui/core/app/templates/scopes/scope/roles/role.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role.hbs
@@ -10,6 +10,18 @@
     <h2>{{t "resources.role"}}</h2>
   </page.header>
 
+  <page.actions>
+    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @alignRight={{true}} as |dropdown|>
+      <dropdown.button
+        @style="warning"
+        @disabled={{@model.canSave}}
+        {{on "click" (route-action "delete" @model)}}
+      >
+        {{t 'actions.delete-role'}}
+      </dropdown.button>
+    </Rose::Dropdown>
+  </page.actions>
+
   <page.navigation>
     <Rose::Nav::Tabs as |nav|>
       <nav.link @route='scopes.scope.roles.role.index'>

From 0f63251ff294c4524be634898617c172f7a3b4e9 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 13 Aug 2020 11:12:31 -0400
Subject: [PATCH 16/18] chore: Rename dropdown alignRight attribute to:
 dropdownRight

Remove unused `light` style dropdown def
---
 addons/rose/addon/components/rose/dropdown.js                  | 3 +++
 addons/rose/addon/components/rose/dropdown.stories.mdx         | 2 +-
 addons/rose/addon/templates/components/rose/dropdown.hbs       | 2 +-
 addons/rose/addon/templates/components/rose/header/nav.hbs     | 2 +-
 .../rose/addon/templates/components/rose/header/utilities.hbs  | 2 +-
 addons/rose/tests/integration/components/rose/dropdown-test.js | 2 +-
 6 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown.js b/addons/rose/addon/components/rose/dropdown.js
index 33547b719..8ae6f56e6 100644
--- a/addons/rose/addon/components/rose/dropdown.js
+++ b/addons/rose/addon/components/rose/dropdown.js
@@ -2,6 +2,9 @@ import Component from '@ember/component';
 import layout from '../../templates/components/rose/dropdown';
 import { action } from '@ember/object';
 
+/**
+ * A dropdown component composed of HTML disclosure elements: details and summary
+ */
 export default Component.extend({
   // =attributes
 
diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx
index e77c8a73d..999b6278f 100644
--- a/addons/rose/addon/components/rose/dropdown.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown.stories.mdx
@@ -43,7 +43,7 @@ A simple dropdown component with support for links and buttons.
 Dropdown content can be aligned to right edge of the component instead of the default left edge, which is the default setting. The following example floats the component to right edge of the page inorder to provide enough space to display right aligned dropdown content.
 
 ```htmlbars
-  <Rose::Dropdown @text="Choose One&hellip;" style="float: right" @alignRight={{true}} as |dropdown|>
+  <Rose::Dropdown @text="Choose One&hellip;" style="float: right" @dropdownRight={{true}} as |dropdown|>
     <dropdown.link @route="index">Menu item</dropdown.link>
     <dropdown.link @route="about">Menu item</dropdown.link>
     <dropdown.button>Button menu item</dropdown.button>
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index 9386431d2..6556bd0bc 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -1,6 +1,6 @@
 <details
   ...attributes
-  class="rose-dropdown {{if @alignRight " rose-dropdown-right"}}"
+  class="rose-dropdown {{if @dropdownRight " rose-dropdown-right"}}"
   {{on-click-outside this.close}}
 >
 
diff --git a/addons/rose/addon/templates/components/rose/header/nav.hbs b/addons/rose/addon/templates/components/rose/header/nav.hbs
index 18458e10c..a0858cc1a 100644
--- a/addons/rose/addon/templates/components/rose/header/nav.hbs
+++ b/addons/rose/addon/templates/components/rose/header/nav.hbs
@@ -1,6 +1,6 @@
 <nav class="rose-header-nav">
   {{yield (hash
     link=(component 'link-to' class="rose-header-nav-link")
-    dropdown=(component 'rose/dropdown' style="light")
+    dropdown=(component 'rose/dropdown')
   )}}
 </nav>
diff --git a/addons/rose/addon/templates/components/rose/header/utilities.hbs b/addons/rose/addon/templates/components/rose/header/utilities.hbs
index 8c178538c..e00d45e75 100644
--- a/addons/rose/addon/templates/components/rose/header/utilities.hbs
+++ b/addons/rose/addon/templates/components/rose/header/utilities.hbs
@@ -1,5 +1,5 @@
 <div class="rose-header-utilities">
   {{yield (hash
-    dropdown=(component 'rose/dropdown' alignRight=true)
+    dropdown=(component 'rose/dropdown' dropdownRight=true)
   )}}
 </div>
diff --git a/addons/rose/tests/integration/components/rose/dropdown-test.js b/addons/rose/tests/integration/components/rose/dropdown-test.js
index 03c1b65e7..0c0c22695 100644
--- a/addons/rose/tests/integration/components/rose/dropdown-test.js
+++ b/addons/rose/tests/integration/components/rose/dropdown-test.js
@@ -35,7 +35,7 @@ module('Integration | Component | rose/dropdown', function (hooks) {
 
   test('it supports right aligned content', async function (assert) {
     await render(hbs`
-      <Rose::Dropdown @alignRight={{true}} />
+      <Rose::Dropdown @dropdownRight={{true}} />
     `);
     assert.ok(find('.rose-dropdown-right'));
   });

From 7df2295058d39ba91ab1d8c70fc8a57e0ed99df8 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Mon, 17 Aug 2020 13:15:58 -0400
Subject: [PATCH 17/18] chore: Update rose/dropdown link and button components

Instead of wrapping dropdown button component in rose/button, create a
new simplified button.
---
 .../components/rose/dropdown.stories.mdx      | 12 ++---
 .../addon/components/rose/dropdown/button.js  | 10 +++++
 .../addon/components/rose/dropdown/link.js    | 10 +++++
 .../rose/components/dropdown/_button.scss     | 34 ++++++++++++++
 .../components/{ => dropdown}/_dropdown.scss  | 45 +++----------------
 .../rose/components/dropdown/_index.scss      |  3 ++
 .../rose/components/dropdown/_link.scss       | 33 ++++++++++++++
 .../templates/components/rose/dropdown.hbs    |  9 ++--
 .../components/rose/dropdown/button.hbs       | 19 ++++++++
 .../components/rose/dropdown/link.hbs         |  8 ++++
 .../app/components/rose/dropdown/button.js    |  1 +
 .../rose/app/components/rose/dropdown/link.js |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  | 21 +++++----
 .../components/rose/dropdown/button-test.js   | 38 ++++++++++++++++
 .../components/rose/dropdown/link-test.js     | 31 +++++++++++++
 .../scopes/scope/groups/group/index.hbs       |  4 +-
 .../host-catalogs/host-catalog/index.hbs      | 20 +++++----
 .../scopes/scope/projects/project/index.hbs   | 20 +++++----
 .../app/templates/scopes/scope/roles/role.hbs |  4 +-
 .../scopes/scope/users/user/index.hbs         |  4 +-
 ui/core/tests/acceptance/groups-test.js       |  4 +-
 .../tests/acceptance/host-catalogs-test.js    |  4 +-
 ui/core/tests/acceptance/projects-test.js     |  4 +-
 ui/core/tests/acceptance/roles-test.js        |  4 +-
 ui/core/tests/acceptance/users-test.js        |  4 +-
 ui/core/translations/en-us.yaml               |  2 +
 26 files changed, 257 insertions(+), 92 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/dropdown/button.js
 create mode 100644 addons/rose/addon/components/rose/dropdown/link.js
 create mode 100644 addons/rose/addon/styles/rose/components/dropdown/_button.scss
 rename addons/rose/addon/styles/rose/components/{ => dropdown}/_dropdown.scss (72%)
 create mode 100644 addons/rose/addon/styles/rose/components/dropdown/_index.scss
 create mode 100644 addons/rose/addon/styles/rose/components/dropdown/_link.scss
 create mode 100644 addons/rose/addon/templates/components/rose/dropdown/button.hbs
 create mode 100644 addons/rose/addon/templates/components/rose/dropdown/link.hbs
 create mode 100644 addons/rose/app/components/rose/dropdown/button.js
 create mode 100644 addons/rose/app/components/rose/dropdown/link.js
 create mode 100644 addons/rose/tests/integration/components/rose/dropdown/button-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/dropdown/link-test.js

diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx
index 999b6278f..c2f71d82f 100644
--- a/addons/rose/addon/components/rose/dropdown.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown.stories.mdx
@@ -13,6 +13,7 @@ A simple dropdown component with support for links and buttons.
       <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
+        <dropdown.separator />
         <dropdown.button>Button menu item</dropdown.button>
       </Rose::Dropdown>
     `,
@@ -25,6 +26,7 @@ A simple dropdown component with support for links and buttons.
       <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" @iconOnly={{true}} as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
+        <dropdown.separator />
         <dropdown.button>Button menu item</dropdown.button>
       </Rose::Dropdown>
     `,
@@ -46,18 +48,16 @@ Dropdown content can be aligned to right edge of the component instead of the de
   <Rose::Dropdown @text="Choose One&hellip;" style="float: right" @dropdownRight={{true}} as |dropdown|>
     <dropdown.link @route="index">Menu item</dropdown.link>
     <dropdown.link @route="about">Menu item</dropdown.link>
+    <dropdown.separator />
     <dropdown.button>Button menu item</dropdown.button>
   </Rose::Dropdown>
 ```
 
-Dropdown button styles support all `Rose::Button` styles through a `style` attribute.
+Dropdown supports `danger` styling through `style` attribute.
 
 ```htmlbars
 <Rose::Dropdown @text="Dropdown" as |dropdown|>
-  <dropdown.button>Button menu item</dropdown.button>
-  <dropdown.button @style="warning">Button - warning</dropdown.button>
-  <dropdown.button @style="primary">Button - primary</dropdown.button>
-  <dropdown.button @style="secondary">Button - secondary</dropdown.button>
-  <dropdown.button @style="ghost">Button - ghost</dropdown.button>
+  <dropdown.link @style="danger">Link - danger</dropdown.link>
+  <dropdown.button @style="danger">Button - danger</dropdown.button>
 </Rose::Dropdown>
 ```
diff --git a/addons/rose/addon/components/rose/dropdown/button.js b/addons/rose/addon/components/rose/dropdown/button.js
new file mode 100644
index 000000000..6f776e15d
--- /dev/null
+++ b/addons/rose/addon/components/rose/dropdown/button.js
@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/dropdown/button';
+
+/**
+ * A dropdown button component based on simplified rose/button
+ */
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/dropdown/link.js b/addons/rose/addon/components/rose/dropdown/link.js
new file mode 100644
index 000000000..c6609fe05
--- /dev/null
+++ b/addons/rose/addon/components/rose/dropdown/link.js
@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/dropdown/link';
+
+/**
+ * A dropdown link wrapper for LinkTo component.
+ */
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_button.scss b/addons/rose/addon/styles/rose/components/dropdown/_button.scss
new file mode 100644
index 000000000..bf6dc12c8
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/dropdown/_button.scss
@@ -0,0 +1,34 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-dropdown-button {
+  @include type.type(s, normal);
+  display: block;
+  // Targeting min-width of 200
+  min-width: (sizing.rems(m) + sizing.rems(xxs)) * 10;
+  border: 0;
+  margin: 0;
+  padding: 0 sizing.rems(s);
+  color: var(--stark);
+  background-color: transparent;
+  // target line height is 36, which is not a standard line height for this
+  // font size
+  $lineHeight: 36 / 16;
+  line-height: $lineHeight;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+
+  &.rose-dropdown-button-danger {
+    --background: var(--white);
+    --color: var(--failure);
+
+    color: var(--color);
+    background-color: var(--background-color);
+
+    &:hover {
+      --color: var(--white);
+      --background-color: var(--failure);
+    }
+  }
+}
\ No newline at end of file
diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
similarity index 72%
rename from addons/rose/addon/styles/rose/components/_dropdown.scss
rename to addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
index 7a1bf9e53..cb3c964eb 100644
--- a/addons/rose/addon/styles/rose/components/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
@@ -1,5 +1,5 @@
-@use '../variables/sizing';
-@use '../utilities/type';
+@use '../../variables/sizing';
+@use '../../utilities/type';
 
 $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
 
@@ -92,42 +92,9 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     }
   }
 
-  .rose-dropdown-link,
-  .rose-dropdown-button {
-    @include type.type(s, normal);
-    display: block;
-    // Targeting min-width of 200
-    min-width: (sizing.rems(m) + sizing.rems(xxs)) * 10;
-    padding: 0 sizing.rems(s);
-    margin: 0;
-    border: 0;
-    color: var(--stark);
-    background-color: transparent;
-    // target line height is 36, which is not a standard line height for this
-    // font size
-    $lineHeight: 36 / 16;
-    line-height: $lineHeight;
-    text-align: left;
-    text-decoration: none;
-    box-shadow: none;
-    text-shadow: none;
-    cursor: pointer;
-
-    &:hover {
-      box-shadow: none;
-      text-shadow: none;
-    }
-  }
-
-  .rose-dropdown-button {
-    width: 100%;
-
-    &.rose-button-warning {
-      color: var(--failure);
-
-      &:hover {
-        color: var(--white);
-      }
-    }
+  .rose-dropdown-separator {
+    background-color: var(--ui-gray-subtler-3);
+    height: sizing.rems(xxxxs);
+    border: none;
   }
 }
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_index.scss b/addons/rose/addon/styles/rose/components/dropdown/_index.scss
new file mode 100644
index 000000000..665c33f0f
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/dropdown/_index.scss
@@ -0,0 +1,3 @@
+@import 'dropdown';
+@import 'button';
+@import 'link';
\ No newline at end of file
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_link.scss b/addons/rose/addon/styles/rose/components/dropdown/_link.scss
new file mode 100644
index 000000000..04a62352d
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/dropdown/_link.scss
@@ -0,0 +1,33 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-dropdown-link {
+  @include type.type(s, normal);
+  display: block;
+  // Targeting min-width of 200
+  min-width: (sizing.rems(s) + sizing.rems(xxs)) * 10;
+  border: 0;
+  padding: 0 sizing.rems(s);
+  color: var(--stark);
+  background-color: transparent;
+  // target line height is 36, which is not a standard line height for this
+  // font size
+  $lineHeight: 36 / 16;
+  line-height: $lineHeight;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+
+  &.rose-dropdown-link-danger {
+    --background: var(--white);
+    --color: var(--failure);
+
+    color: var(--color);
+    background-color: var(--background-color);
+
+    &:hover {
+      --color: var(--white);
+      --background-color: var(--failure);
+    }
+  }
+}
\ No newline at end of file
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index 6556bd0bc..991bdf085 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -1,11 +1,11 @@
 <details
   ...attributes
-  class="rose-dropdown {{if @dropdownRight " rose-dropdown-right"}}"
+  class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}}"
   {{on-click-outside this.close}}
 >
 
   <summary
-    class="rose-dropdown-trigger{{if @iconOnly " has-icon-only"}}"
+    class="rose-dropdown-trigger {{if @iconOnly "has-icon-only"}}"
     title={{@text}}
   >
 
@@ -24,8 +24,9 @@
 
   <div class="rose-dropdown-content" {{on-click-inside this.close}}>
     {{yield (hash
-      link=(component "link-to" class="rose-dropdown-link")
-      button=(component "rose/button" classNames="rose-dropdown-button" style=this.style)
+      link=(component "rose/dropdown/link" style=this.style)
+      button=(component "rose/dropdown/button" style=this.style)
+      separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
     )}}
   </div>
 
diff --git a/addons/rose/addon/templates/components/rose/dropdown/button.hbs b/addons/rose/addon/templates/components/rose/dropdown/button.hbs
new file mode 100644
index 000000000..364a2ef18
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/dropdown/button.hbs
@@ -0,0 +1,19 @@
+<button
+  ...attributes
+  type={{if @submit "submit" "button"}}
+  disabled={{if @disabled "disabled"}}
+  class="rose-dropdown-button {{if  @style (concat "rose-dropdown-button-" @style)}} {{if @iconOnly "has-icon-only"}}"
+  >
+  <span class="rose-dropdown-button-wrapper">
+    <span class="rose-dropdown-button-body">
+      {{yield}}
+    </span>
+
+    {{#if @iconOnly}}
+      <Rose::Icon
+        @name={{@iconOnly}}
+        @size="medium"
+      />
+    {{/if}}
+  </span>
+</button>
diff --git a/addons/rose/addon/templates/components/rose/dropdown/link.hbs b/addons/rose/addon/templates/components/rose/dropdown/link.hbs
new file mode 100644
index 000000000..6b3bd413a
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/dropdown/link.hbs
@@ -0,0 +1,8 @@
+<LinkTo
+  ...attributes
+  @route={{if @route @route "index"}}
+  @model={{@model}}
+  class="rose-dropdown-link {{if  @style (concat "rose-dropdown-link-" @style)}}"
+>
+  {{yield}}
+</LinkTo>
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/dropdown/button.js b/addons/rose/app/components/rose/dropdown/button.js
new file mode 100644
index 000000000..0def7a1c0
--- /dev/null
+++ b/addons/rose/app/components/rose/dropdown/button.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/dropdown/button';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/dropdown/link.js b/addons/rose/app/components/rose/dropdown/link.js
new file mode 100644
index 000000000..99ec355d3
--- /dev/null
+++ b/addons/rose/app/components/rose/dropdown/link.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/dropdown/link';
\ No newline at end of file
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 72f1657d5..ab7081265 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -4,9 +4,11 @@
   <header.nav as |nav|>
     <nav.dropdown @text="org-name" as |dropdown|>
       <dropdown.link @route="index">Menu item</dropdown.link>
-      <dropdown.link @route="about">Menu item</dropdown.link>
+      <dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
+      <dropdown.separator />
       <dropdown.button>Button menu item</dropdown.button>
     </nav.dropdown>
+
     <nav.link @route="index">Section</nav.link>
     <nav.link @route="about">Section</nav.link>
   </header.nav>
@@ -18,22 +20,19 @@
       @icon="user-square-fill" as |dropdown|
     >
       <dropdown.link @route="index">Menu item</dropdown.link>
-      <dropdown.link @route="about">Menu item</dropdown.link>
+      <dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
       <dropdown.button>Button - default</dropdown.button>
-      <dropdown.button @style="warning">Button - warning</dropdown.button>
-      <dropdown.button @style="primary">Button - primary</dropdown.button>
-      <dropdown.button @style="secondary">Button - secondary</dropdown.button>
-      <dropdown.button @style="ghost">Button - ghost</dropdown.button>
+      <dropdown.separator />
+      <dropdown.button @style="danger">Button - danger</dropdown.button>
     </utilities.dropdown>
   </header.utilities>
 </Rose::Header>
 
 <Rose::Dropdown @text="Dropdown" as |dropdown|>
   <dropdown.link @route="index">Menu item</dropdown.link>
-  <dropdown.link @route="about">Menu item</dropdown.link>
+  <dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
+  <dropdown.separator></dropdown.separator>
+
   <dropdown.button>Button menu item</dropdown.button>
-  <dropdown.button @style="warning">Button - warning</dropdown.button>
-  <dropdown.button @style="primary">Button - primary</dropdown.button>
-  <dropdown.button @style="secondary">Button - secondary</dropdown.button>
-  <dropdown.button @style="ghost">Button - ghost</dropdown.button>
+  <dropdown.button @style="danger">Button - danger</dropdown.button>
 </Rose::Dropdown>
diff --git a/addons/rose/tests/integration/components/rose/dropdown/button-test.js b/addons/rose/tests/integration/components/rose/dropdown/button-test.js
new file mode 100644
index 000000000..11fc945a6
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/dropdown/button-test.js
@@ -0,0 +1,38 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/dropdown/button', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Dropdown::Button />`);
+    assert.ok(find('.rose-dropdown-button'));
+  });
+
+  test('it is type="button" by default', async function (assert) {
+    await render(hbs`<Rose::Dropdown::Button />`);
+    assert.equal(find('button').type, 'button');
+  });
+
+  test('it is type="submit" when @submit={{true}}', async function (assert) {
+    await render(hbs`<Rose::Dropdown::Button @submit={{true}} />`);
+    assert.equal(find('button').type, 'submit');
+  });
+
+  test('it is disabled when @disabled={{true}}', async function (assert) {
+    await render(hbs`<Rose::Dropdown::Button @disabled={{true}} />`);
+    assert.equal(find('button').disabled, true);
+  });
+
+  test('it adds a style class', async function (assert) {
+    await render(hbs`<Rose::Dropdown::Button @style="warning" />`);
+    assert.ok(find('.rose-dropdown-button-warning'));
+  });
+
+  test('it supports an icon-only type', async function (assert) {
+    await render(hbs`<Rose::Dropdown::Button @iconOnly="chevron-left" />`);
+    assert.ok(find('.has-icon-only .rose-icon'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/dropdown/link-test.js b/addons/rose/tests/integration/components/rose/dropdown/link-test.js
new file mode 100644
index 000000000..a64b51bf8
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/dropdown/link-test.js
@@ -0,0 +1,31 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/dropdown/link', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Dropdown::Link />`);
+    assert.ok(find('a'));
+    assert.ok(find('.rose-dropdown-link'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Dropdown::Link id="dropdown" />`);
+    assert.ok(find('#dropdown'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Dropdown::Link>
+      content
+    </Rose::Dropdown::Link>`);
+    assert.equal(find('.rose-dropdown-link').textContent.trim(), 'content');
+  });
+
+  test('it supports style', async function (assert) {
+    await render(hbs`<Rose::Dropdown::Link @style='warning' />`);
+    assert.ok('.rose-dropdown-link-warning');
+  });
+});
diff --git a/ui/core/app/templates/scopes/scope/groups/group/index.hbs b/ui/core/app/templates/scopes/scope/groups/group/index.hbs
index ffe366e71..e78a0c548 100644
--- a/ui/core/app/templates/scopes/scope/groups/group/index.hbs
+++ b/ui/core/app/templates/scopes/scope/groups/group/index.hbs
@@ -17,9 +17,9 @@
   </page.navigation>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @alignRight={{true}} as |dropdown|>
+    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
       <dropdown.button
-        @style="warning"
+        @style="danger"
         @disabled={{@model.canSave}}
         {{on "click" (route-action "delete" @model)}}
       >
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs
index cb0a4a0cf..6d7c05659 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs
@@ -16,20 +16,24 @@
     </Rose::Nav::Tabs>
   </page.navigation>
 
+  <page.actions>
+    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+      <dropdown.button
+        @style="danger"
+        @disabled={{@model.canSave}}
+        {{on "click" (route-action "delete" @model)}}
+      >
+        {{t 'actions.delete-host-catalog'}}
+      </dropdown.button>
+    </Rose::Dropdown>
+  </page.actions>
+
   <page.body>
     <Form::HostCatalog
       @model={{@model}}
       @submit={{route-action "save" @model}}
       @cancel={{route-action "cancel" @model}}
     />
-    <Rose::Separator />
-    <Rose::Button
-      @style="warning"
-      @disabled={{@model.canSave}}
-      {{on "click" (route-action "delete" @model)}}
-    >
-      {{t 'actions.delete'}}
-    </Rose::Button>
   </page.body>
 
 </Rose::Layout::Page>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/index.hbs
index 5dccae834..c3bec3790 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/index.hbs
@@ -16,20 +16,24 @@
     </Rose::Nav::Tabs>
   </page.navigation>
 
+  <page.actions>
+    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+      <dropdown.button
+        @style="danger"
+        @disabled={{@model.canSave}}
+        {{on "click" (route-action "delete" @model)}}
+      >
+        {{t 'actions.delete-project'}}
+      </dropdown.button>
+    </Rose::Dropdown>
+  </page.actions>
+
   <page.body>
     <Form::Project
       @model={{@model}}
       @submit={{route-action "save" @model}}
       @cancel={{route-action "cancel" @model}}
     />
-    <Rose::Separator />
-    <Rose::Button
-      @style="warning"
-      @disabled={{@model.canSave}}
-      {{on "click" (route-action "delete" @model)}}
-    >
-      {{t 'actions.delete'}}
-    </Rose::Button>
   </page.body>
 
 </Rose::Layout::Page>
diff --git a/ui/core/app/templates/scopes/scope/roles/role.hbs b/ui/core/app/templates/scopes/scope/roles/role.hbs
index 9df55380b..397e9f504 100644
--- a/ui/core/app/templates/scopes/scope/roles/role.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role.hbs
@@ -11,9 +11,9 @@
   </page.header>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @alignRight={{true}} as |dropdown|>
+    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
       <dropdown.button
-        @style="warning"
+        @style="danger"
         @disabled={{@model.canSave}}
         {{on "click" (route-action "delete" @model)}}
       >
diff --git a/ui/core/app/templates/scopes/scope/users/user/index.hbs b/ui/core/app/templates/scopes/scope/users/user/index.hbs
index 2261fa30b..6392e84f7 100644
--- a/ui/core/app/templates/scopes/scope/users/user/index.hbs
+++ b/ui/core/app/templates/scopes/scope/users/user/index.hbs
@@ -9,9 +9,9 @@
   </page.header>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @alignRight={{true}} as |dropdown|>
+    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
       <dropdown.button
-        @style="warning"
+        @style="danger"
         @disabled={{@model.canSave}}
         {{on "click" (route-action "delete" @model)}}
       >
diff --git a/ui/core/tests/acceptance/groups-test.js b/ui/core/tests/acceptance/groups-test.js
index b619d09ce..0d622f1f0 100644
--- a/ui/core/tests/acceptance/groups-test.js
+++ b/ui/core/tests/acceptance/groups-test.js
@@ -133,7 +133,7 @@ module('Acceptance | groups', function (hooks) {
     assert.expect(1);
     const groupsCount = this.server.db.groups.length;
     await visit(groupURL);
-    await click('.rose-button-warning');
+    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
     assert.equal(this.server.db.groups.length, groupsCount - 1);
   });
 
@@ -210,7 +210,7 @@ module('Acceptance | groups', function (hooks) {
       );
     });
     await visit(groupURL);
-    await click('.rose-button-warning');
+    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
     assert.ok(
       find('[role="alert"]').textContent.trim(),
       'Oops.',
diff --git a/ui/core/tests/acceptance/host-catalogs-test.js b/ui/core/tests/acceptance/host-catalogs-test.js
index 59bc08dcc..fada1730e 100644
--- a/ui/core/tests/acceptance/host-catalogs-test.js
+++ b/ui/core/tests/acceptance/host-catalogs-test.js
@@ -80,7 +80,7 @@ module('Acceptance | host catalogs', function (hooks) {
     authenticateSession({});
     await visit(urls.hostCatalog);
     assert.equal(currentURL(), urls.hostCatalog);
-    await click('.rose-button-warning');
+    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
     assert.equal(this.server.db.hostCatalogs.length, hostCatalogsCount - 1);
   });
 
@@ -162,7 +162,7 @@ module('Acceptance | host catalogs', function (hooks) {
     });
     authenticateSession({});
     await visit(urls.hostCatalog);
-    await click('.rose-button-warning');
+    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
     await a11yAudit();
     assert.ok(
       find('[role="alert"]').textContent.trim(),
diff --git a/ui/core/tests/acceptance/projects-test.js b/ui/core/tests/acceptance/projects-test.js
index ced4a8f13..4af813592 100644
--- a/ui/core/tests/acceptance/projects-test.js
+++ b/ui/core/tests/acceptance/projects-test.js
@@ -135,7 +135,7 @@ module('Acceptance | projects', function (hooks) {
   test('can delete project', async function (assert) {
     assert.expect(1);
     await visit(existingProjectURL);
-    await click('.rose-button-warning');
+    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
     assert.equal(getProjectScopesCount(), initialProjectScopesCount - 1);
   });
 
@@ -212,7 +212,7 @@ module('Acceptance | projects', function (hooks) {
       );
     });
     await visit(existingProjectURL);
-    await click('.rose-button-warning');
+    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
     assert.ok(
       find('[role="alert"]').textContent.trim(),
       'Oops.',
diff --git a/ui/core/tests/acceptance/roles-test.js b/ui/core/tests/acceptance/roles-test.js
index 2aa364f1b..14bd45a24 100644
--- a/ui/core/tests/acceptance/roles-test.js
+++ b/ui/core/tests/acceptance/roles-test.js
@@ -133,7 +133,7 @@ module('Acceptance | roles', function (hooks) {
     assert.expect(1);
     const rolesCount = this.server.db.roles.length;
     await visit(roleURL);
-    await click('.rose-button-warning');
+    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
     assert.equal(this.server.db.roles.length, rolesCount - 1);
   });
 
@@ -210,7 +210,7 @@ module('Acceptance | roles', function (hooks) {
       );
     });
     await visit(roleURL);
-    await click('.rose-button-warning');
+    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
     assert.ok(
       find('[role="alert"]').textContent.trim(),
       'Oops.',
diff --git a/ui/core/tests/acceptance/users-test.js b/ui/core/tests/acceptance/users-test.js
index 31fa5c98e..55e4ac108 100644
--- a/ui/core/tests/acceptance/users-test.js
+++ b/ui/core/tests/acceptance/users-test.js
@@ -133,7 +133,7 @@ module('Acceptance | users', function (hooks) {
     assert.expect(1);
     const usersCount = this.server.db.users.length;
     await visit(userURL);
-    await click('.rose-button-warning');
+    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
     assert.equal(this.server.db.users.length, usersCount - 1);
   });
 
@@ -210,7 +210,7 @@ module('Acceptance | users', function (hooks) {
       );
     });
     await visit(userURL);
-    await click('.rose-button-warning');
+    await click('.rose-layout-page-actions .rose-dropdown-button-danger');
     assert.ok(
       find('[role="alert"]').textContent.trim(),
       'Oops.',
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 6401bf775..41082f65e 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -12,6 +12,8 @@ actions:
   delete-user: Delete user
   delete-group: Delete group
   delete-role: Delete role
+  delete-project: Delete project
+  delete-host-catalog: Delete host catalog
 auth:
   titles:
     no-scopes: No Scopes Available

From abb778996e2af7faa7b9a12f1fda07314ae3de1c Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 19 Aug 2020 13:58:57 -0400
Subject: [PATCH 18/18] style: tweak dropdown styles for line-height,
 proportion, and hover states

---
 .../rose/components/dropdown/_button.scss     | 36 +++++++------
 .../rose/components/dropdown/_dropdown.scss   | 16 +++---
 .../rose/components/dropdown/_link.scss       | 35 ++++++------
 .../rose/components/header/_dropdown.scss     | 54 ++++++++++---------
 .../styles/rose/components/header/_nav.scss   |  1 +
 .../rose/components/header/_utilities.scss    |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  |  2 +-
 7 files changed, 78 insertions(+), 67 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_button.scss b/addons/rose/addon/styles/rose/components/dropdown/_button.scss
index bf6dc12c8..58b78e4a1 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_button.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_button.scss
@@ -2,33 +2,35 @@
 @use '../../utilities/type';
 
 .rose-dropdown-button {
-  @include type.type(s, normal);
+  @include type.type(s);
   display: block;
-  // Targeting min-width of 200
-  min-width: (sizing.rems(m) + sizing.rems(xxs)) * 10;
+  box-sizing: border-box;
+  width: 100%;
+  // Targeting min-width of ~200
+  min-width: (sizing.rems(m) + sizing.rems(xs)) * 10;
   border: 0;
-  margin: 0;
   padding: 0 sizing.rems(s);
-  color: var(--stark);
-  background-color: transparent;
-  // target line height is 36, which is not a standard line height for this
-  // font size
-  $lineHeight: 36 / 16;
-  line-height: $lineHeight;
-  text-align: left;
   text-decoration: none;
-  cursor: pointer;
+  text-align: left;
+  $line-height: 36 / 14;
+  line-height: $line-height;
+
+  --background-color: transparent;
+  --color: var(--stark);
+  color: var(--color);
+  background-color: var(--background-color);
+
+  &:hover {
+    --background-color: var(--ui-gray-subtler-5);
+  }
 
   &.rose-dropdown-button-danger {
-    --background: var(--white);
+    --background-color: var(--white);
     --color: var(--failure);
 
-    color: var(--color);
-    background-color: var(--background-color);
-
     &:hover {
       --color: var(--white);
       --background-color: var(--failure);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
index cb3c964eb..34b2753b0 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
@@ -1,6 +1,8 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
 
+$xs: sizing.rems(xs); // 8
+$xxs: sizing.rems(xxs); // 4
 $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
 
 .rose-dropdown {
@@ -13,11 +15,11 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     overflow: hidden;
     display: flex;
     align-items: center;
-    padding: 0 sizing.rems(xl) 0 sizing.rems(l);
-    $lineHeight: 36 / 13;
-    line-height: $lineHeight;
+    $yPadding: sizing.rems(xxs) + sizing.rems(xxxs);
+    padding: $yPadding sizing.rems(xl) $yPadding sizing.rems(l);
     color: var(--black);
-    background: url($chevron) no-repeat right sizing.rems(s) center;
+    background: url($chevron) no-repeat right sizing.rems(m) center;
+    border-radius: sizing.rems(xxxs);
 
     // Hide default twistie triangle
     // Webkit / Chromium
@@ -33,7 +35,7 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     background-size: sizing.rems(m);
 
     &:hover {
-      background-color: var(--ui-gray-subtler-5);
+      background-color: var(--ui-gray-subtler-4);
     }
 
     &:not(.has-icon-only) .rose-icon:first-child {
@@ -68,14 +70,11 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     }
   }
 
-  .rose-dropdown-trigger:active,
   &[open] > .rose-dropdown-trigger {
     background-color: var(--ui-gray-subtler-4);
   }
 
   .rose-dropdown-content {
-    $xs: sizing.rems(xs); // 8
-    $xxs: sizing.rems(xxs); // 4
     position: absolute;
     padding: $xxs 0;
     border: 1px solid var(--ui-gray-subtler-2);
@@ -96,5 +95,6 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     background-color: var(--ui-gray-subtler-3);
     height: sizing.rems(xxxxs);
     border: none;
+    margin: $xxs 0;
   }
 }
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_link.scss b/addons/rose/addon/styles/rose/components/dropdown/_link.scss
index 04a62352d..38e9d8cb9 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_link.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_link.scss
@@ -2,32 +2,35 @@
 @use '../../utilities/type';
 
 .rose-dropdown-link {
-  @include type.type(s, normal);
+  @include type.type(s);
   display: block;
-  // Targeting min-width of 200
-  min-width: (sizing.rems(s) + sizing.rems(xxs)) * 10;
+  box-sizing: border-box;
+  width: 100%;
+  // Targeting min-width of ~200
+  min-width: (sizing.rems(m) + sizing.rems(xs)) * 10;
   border: 0;
   padding: 0 sizing.rems(s);
-  color: var(--stark);
-  background-color: transparent;
-  // target line height is 36, which is not a standard line height for this
-  // font size
-  $lineHeight: 36 / 16;
-  line-height: $lineHeight;
-  text-align: left;
   text-decoration: none;
-  cursor: pointer;
+  text-align: left;
+  $line-height: 36 / 14;
+  line-height: $line-height;
+
+  --background-color: transparent;
+  --color: var(--stark);
+  color: var(--color);
+  background-color: var(--background-color);
+
+  &:hover {
+    --background-color: var(--ui-gray-subtler-5);
+  }
 
   &.rose-dropdown-link-danger {
-    --background: var(--white);
+    --background-color: var(--white);
     --color: var(--failure);
 
-    color: var(--color);
-    background-color: var(--background-color);
-
     &:hover {
       --color: var(--white);
       --background-color: var(--failure);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
index c30f1371a..8dfe39547 100644
--- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
@@ -3,36 +3,40 @@
 
 $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ebeef2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
 
-.rose-header-utilities,
-.rose-header-nav {
-  margin-right: sizing.rems(s);
+.rose-header  {
+  .rose-dropdown {
+    &,
+    &[open] {
+      .rose-dropdown-trigger {
+        color: var(--white);
+        background: url($chevron) no-repeat right sizing.rems(s) center;
+        background-size: sizing.rems(m);
 
-  .rose-dropdown-trigger {
-    $lineHeight: 48 / 16;
-    line-height: $lineHeight;
-    color: var(--white);
-    background: url($chevron) no-repeat right center;
-    background-size: sizing.rems(m);
+        $yPadding: sizing.rems(xxxs);
+        $rightPadding: sizing.rems(xs) + sizing.rems(l);
+        padding: $yPadding $rightPadding $yPadding sizing.rems(s);
 
-    .rose-icon {
-      --size: #{sizing.rems(l)};
-    }
+        &.has-icon-only {
+          padding-left: sizing.rems(xs);
+        }
 
-    .rose-icon {
-      display: inline-block;
-      height: var(--size);
+        .rose-icon {
+          --size: #{sizing.rems(l)};
+        }
 
-      > svg {
-        vertical-align: top;
+        .rose-icon {
+          display: inline-block;
+          height: var(--size);
+
+          > svg {
+            vertical-align: top;
+          }
+        }
+
+        &:hover, &:focus {
+          background-color: transparent;
+        }
       }
     }
-
-    &:hover, &:focus {
-      background-color: unset;
-    }
   }
 }
-
-.rose-header-nav .rose-dropdown-trigger{
-  padding-right: sizing.rems(l);
-}
diff --git a/addons/rose/addon/styles/rose/components/header/_nav.scss b/addons/rose/addon/styles/rose/components/header/_nav.scss
index 6e50ec714..1eee38086 100644
--- a/addons/rose/addon/styles/rose/components/header/_nav.scss
+++ b/addons/rose/addon/styles/rose/components/header/_nav.scss
@@ -6,6 +6,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  margin-right: sizing.rems(s);
 
   @media (max-width: media.width(small)) {
     padding: 0 20px;
diff --git a/addons/rose/addon/styles/rose/components/header/_utilities.scss b/addons/rose/addon/styles/rose/components/header/_utilities.scss
index ad28137ff..6632a2597 100644
--- a/addons/rose/addon/styles/rose/components/header/_utilities.scss
+++ b/addons/rose/addon/styles/rose/components/header/_utilities.scss
@@ -6,4 +6,5 @@
   flex-wrap: wrap;
   flex-direction: row-reverse;
   align-items: center;
+  margin-right: sizing.rems(s);
 }
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index ab7081265..529b6c7c5 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -2,7 +2,7 @@
   <header.brand @logo="logo" @text="Product Name" />
 
   <header.nav as |nav|>
-    <nav.dropdown @text="org-name" as |dropdown|>
+    <nav.dropdown @text="org-name" @icon="user-organization" as |dropdown|>
       <dropdown.link @route="index">Menu item</dropdown.link>
       <dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
       <dropdown.separator />