feat: 🎸 add dropdown support for radio buttons

addons/api/tests/unit/serializers/role-test.js

@@ -21,6 +21,7 @@ module('Unit | Serializer | role', function (hooks) {
       name: 'User',
       description: 'Description',
       version: 1,
+      grant_scope_id: null
     });
   });
 

addons/rose/addon/components/rose/dropdown/index.hbs

@@ -26,6 +26,7 @@
     {{yield (hash
       link=(component "rose/dropdown/link" style=this.style)
       button=(component "rose/dropdown/button" style=this.style)
+      item=(component "rose/anonymous" class="rose-dropdown-item")
       separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
     )}}
   </div>

addons/rose/addon/components/rose/dropdown/index.stories.mdx

@@ -37,6 +37,28 @@ A simple dropdown component with support for links and buttons.
   }}</Story>
 </Preview>
 
+<Preview>
+  <Story name="Dropdown with Radio Buttons" height="13rem">{{
+    template: hbs`
+      <Rose::Form as |form|>
+        <form.radioGroup @name="color" @selectedValue="red" as |radioGroup|>
+          <Rose::Dropdown @text="Color" as |dropdown|>
+            <dropdown.item>
+              <radioGroup.radio @label="Red" @value="red" />
+            </dropdown.item>
+            <dropdown.item>
+              <radioGroup.radio @label="Green" @value="green" />
+            </dropdown.item>
+            <dropdown.item>
+              <radioGroup.radio @label="Blue" @value="blue" />
+            </dropdown.item>
+          </Rose::Dropdown>
+        </form.radioGroup>
+      </Rose::Form>
+    `,
+  }}</Story>
+</Preview>
+
 
 ```html
   <Rose::Dropdown @text="Choose One&hellip;" as |dropdown|>
@@ -73,4 +95,25 @@ Dropdown indicator can be hidden using `showCaret` attribute.
     <dropdown.link @route="index">Menu item</dropdown.link>
     <dropdown.button>Button menu item</dropdown.button>
 </Rose::Dropdown>
-```
+```
+
+Dropdowns also support radio buttons.  Currently, this is the only supported
+form field.
+
+```html
+<Rose::Form as |form|>
+  <form.radioGroup @name="color" @selectedValue="red" as |radioGroup|>
+    <Rose::Dropdown @text="Color" as |dropdown|>
+      <dropdown.item>
+        <radioGroup.radio @label="Red" @value="red" />
+      </dropdown.item>
+      <dropdown.item>
+        <radioGroup.radio @label="Green" @value="green" />
+      </dropdown.item>
+      <dropdown.item>
+        <radioGroup.radio @label="Blue" @value="blue" />
+      </dropdown.item>
+    </Rose::Dropdown>
+  </form.radioGroup>
+</Rose::Form>
+```

addons/rose/addon/styles/rose/components/dropdown/_index.scss

@@ -1,3 +1,4 @@
 @import 'dropdown';
 @import 'button';
 @import 'link';
+@import 'item';

addons/rose/addon/styles/rose/components/dropdown/_item.scss

@@ -0,0 +1,43 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-dropdown-item {
+  @include type.type(s);
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: (sizing.rems(m)) * 20;
+  border: 0;
+  padding: 0 sizing.rems(s);
+  text-decoration: none;
+  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-form-radio {
+    color: currentColor;
+    margin-bottom: 0;
+
+    .rose-form-radio-label {
+      display: block;
+      padding-top: sizing.rems(xs) + sizing.rems(xxxxs);
+      padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs);
+      font-weight: normal;
+
+      // Now that the target height is 36, the radio image needs to be
+      // repositioned
+      &::after {
+        top: calc(50% - #{sizing.rems(s)});
+      }
+    }
+  }
+}

addons/rose/tests/dummy/app/templates/index.hbs

@@ -41,3 +41,28 @@
   <dropdown.link @route="index">Menu item</dropdown.link>
   <dropdown.button>Button menu item</dropdown.button>
 </Rose::Dropdown>
+
+<Rose::Form as |form|>
+  <form.radioGroup @name="color" @selectedValue="red" as |radioGroup|>
+    <Rose::Dropdown @text="Color" as |dropdown|>
+      <dropdown.item>
+        <radioGroup.radio
+          @label="Red"
+          @value="red"
+        />
+      </dropdown.item>
+      <dropdown.item>
+        <radioGroup.radio
+          @label="Green"
+          @value="green"
+        />
+      </dropdown.item>
+      <dropdown.item>
+        <radioGroup.radio
+          @label="Blue"
+          @value="blue"
+        />
+      </dropdown.item>
+    </Rose::Dropdown>
+  </form.radioGroup>
+</Rose::Form>