From ba686ccc4e865bd2d88f2250a32b5f3b6c3960bb Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Mon, 2 Nov 2020 17:40:37 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20dropdown=20support?=
 =?UTF-8?q?=20for=20radio=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/tests/unit/serializers/role-test.js   |  1 +
 .../addon/components/rose/dropdown/index.hbs  |  1 +
 .../rose/dropdown/index.stories.mdx           | 45 ++++++++++++++++++-
 .../rose/components/dropdown/_index.scss      |  1 +
 .../rose/components/dropdown/_item.scss       | 43 ++++++++++++++++++
 .../rose/tests/dummy/app/templates/index.hbs  | 25 +++++++++++
 6 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 addons/rose/addon/styles/rose/components/dropdown/_item.scss

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")
     )}}
   </div>
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.
   }}</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>
-```
\ No newline at end of file
+```
+
+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>
+```
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 @@
   <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>