diff --git a/addons/api/tests/unit/serializers/role-test.js b/addons/api/tests/unit/serializers/role-test.js
index 1e0624d6a..37efeb341 100644
--- a/addons/api/tests/unit/serializers/role-test.js
+++ b/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
});
});
diff --git a/addons/rose/addon/components/rose/dropdown/index.hbs b/addons/rose/addon/components/rose/dropdown/index.hbs
index 7a0ed82db..457f4a5a3 100644
--- a/addons/rose/addon/components/rose/dropdown/index.hbs
+++ b/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")
)}}
diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index 7191f7479..718f5fccd 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
@@ -37,6 +37,28 @@ A simple dropdown component with support for links and buttons.
}}
+
+ {{
+ template: hbs`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ }}
+
+
```html
@@ -73,4 +95,25 @@ Dropdown indicator can be hidden using `showCaret` attribute.
Menu item
Button menu item
-```
\ No newline at end of file
+```
+
+Dropdowns also support radio buttons. Currently, this is the only supported
+form field.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_index.scss b/addons/rose/addon/styles/rose/components/dropdown/_index.scss
index bb5b6e91f..764414ab2 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_index.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_index.scss
@@ -1,3 +1,4 @@
@import 'dropdown';
@import 'button';
@import 'link';
+@import 'item';
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
new file mode 100644
index 000000000..8b3059188
--- /dev/null
+++ b/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)});
+ }
+ }
+ }
+}
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 146a49749..ae646e913 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -41,3 +41,28 @@
Menu item
Button menu item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+