chore: Add button styles to dropdown button

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>
+```

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%;
   }
 }

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">

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>
 

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>