dropdown- checkbox styles

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

@@ -1,6 +1,7 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, object } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
 
 <Meta title="Rose|Dropdown" component="Dropdown" />
 
@@ -123,8 +124,8 @@ Dropdown indicator can be hidden using `showCaret` attribute.
 </Rose::Dropdown>
 ```
 
-Dropdowns also support radio buttons.  Currently, this is the only supported
-form field.
+Dropdowns also support radio buttons.  Currently, radio buttons and checkboxes are the supported
+form fields.
 
 ```html
 <Rose::Form as |form|>
@@ -144,6 +145,70 @@ form field.
 </Rose::Form>
 ```
 
+```html
+<Rose::Form as |form|>
+  <Rose::Dropdown @text="Dogs"   @ignoreClickInside={{true}} as |dropdown|>
+<Rose::Form::Checkbox::Group
+  @name='checkbox-group'
+  @items={{this.items}}
+  @selectedItems={{this.selectedItems}}
+  @onChange={{fn this.onChange}}
+  as |group|
+>
+<dropdown.item>
+  <group.checkbox
+    @label={{group.item.name}}
+    value={{group.item.id}} />
+    </dropdown.item>
+</Rose::Form::Checkbox::Group>
+
+ </Rose::Dropdown>
+</Rose::Form>
+```
+
+
+<Preview>
+  <Story name="Basic Sample" height="10rem">{{
+  template: hbs`
+  <Rose::Form as |form|>
+   <Rose::Dropdown   @ignoreClickInside={{true}} @text="Dogs" as |dropdown|>
+    <Rose::Form::Checkbox::Group
+      @name={{name}}
+      @inline={{inline}}
+      @disabled={{disabled}}
+      @items={{items}}
+      @selectedItems={{selectedItems}}
+      @onChange={{onChange}}
+      as |group|
+    >
+    <dropdown.item>
+      <group.checkbox
+        @label={{group.item.name}}
+        value={{group.item.id}} 
+        @outline={{outline}}
+      />
+        </dropdown.item>
+    </Rose::Form::Checkbox::Group>
+     </Rose::Dropdown>
+    </Rose::Form>
+  `,
+  context: {
+    inline: boolean('inline', false),
+    disabled: boolean('disabled', false),
+    outline: boolean('outline', true),
+    items: object('items', [
+      { id: 1, name: 'Foo' },
+      { id: 2, name: 'Bar' },
+      { id: 3, name: 'Baz' },
+    ]),
+    selectedItems: object('selectedItems', []),
+    onChange: action('changed'),
+  }
+  }}</Story>
+</Preview>
+
+
+
 Closing dropdown after clicking inside it's content can be ignored using `ignoreClickInside`. This is useful when dropdown contains keyvalue items that users need to select/copy/interact with.
 
 ```html

addons/rose/addon/components/rose/form/checkbox/index.hbs

@@ -1,4 +1,4 @@
-<div class="rose-form-checkbox{{if @error " error"}} {{if @inline " inline"}}">
+<div class="rose-form-checkbox{{if @error " error"}} {{if @inline " inline"}}  {{if @outline " outline"}} ">
 
   <Input
     ...attributes

addons/rose/addon/components/rose/form/checkbox/index.stories.mdx

@@ -78,6 +78,7 @@ Renders a form input checkbox.
   @error={{false}}
   @disabled={{false}}
   @inline={{false}}
+  @outline={{false}}
   />
 ```
 
@@ -93,6 +94,7 @@ Renders a form input checkbox.
         @error={{error}}
         @disabled={{disabled}}
         @inline={{inline}}
+        @outline={{outline}}
         />
       <Rose::Form::Checkbox
         @name='checkbox-2'
@@ -103,6 +105,7 @@ Renders a form input checkbox.
         @error={{error}}
         @disabled={{disabled}}
         @inline={{inline}}
+        @outline={{outline}}
         />
       <Rose::Form::Checkbox
         @name='checkbox-3'
@@ -113,6 +116,7 @@ Renders a form input checkbox.
         @error={{error}}
         @disabled={{disabled}}
         @inline={{inline}}
+        @outline={{outline}}
         />
     `,
     context: {

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

@@ -17,6 +17,7 @@
   {{yield (hash
     radioGroup=(component 'rose/form/radio/group' disabled=this.disabled)
     checkbox=(component 'rose/form/checkbox' disabled=this.disabled)
+    checkboxGroup=(component 'rose/form/checkbox/group' disabled=this.disabled)
     input=(component 'rose/form/input' disabled=this.disabled)
     select=(component 'rose/form/select' disabled=this.disabled)
     textarea=(component 'rose/form/textarea' disabled=this.disabled)

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

@@ -69,4 +69,68 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
       }
     }
   }
-}
+
+  .rose-form-checkbox {
+    margin-bottom: sizing.rems(xxxs);
+    &.outline {
+      .rose-form-checkbox-label {
+        &::after {
+          border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+          border-radius: sizing.rems(xxxs);
+      }
+    }
+  }
+    .rose-form-checkbox-label{
+      display: block;
+      padding-top: 0.5625rem;
+      padding-bottom: 0.5625rem;
+      padding-left: 0.75rem;
+      padding-right: 2.25rem;
+      font-weight: 400;
+      &::after {
+        right: sizing.rems(xxs);
+        left: auto;
+        top: sizing.rems(xxs);
+        transform: scale(0.9);
+        position: absolute;
+        display: block;
+        width: sizing.rems(l);
+        height: sizing.rems(l);
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+      }
+      &::before {
+        position: absolute;
+        top: 0.5rem;
+        left: 0;
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        pointer-events: none;
+        content: " ";
+        border: none;
+      }
+    }
+    .rose-form-checkbox-field {
+      &:not(:checked) {
+        ~ .rose-form-checkbox-label {
+          &::after {
+            opacity: 0.25;
+          }
+        }
+      }
+      &:checked {
+        ~ .rose-form-checkbox-label {
+          color: var(--action);
+        }
+      }
+
+      &:disabled {
+        ~ .rose-form-checkbox-label {
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}

addons/rose/addon/styles/rose/components/form/_checkbox.scss

@@ -44,8 +44,6 @@
       height: sizing.rems(m);
       pointer-events: none;
       content: ' ';
-      border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
-      border-radius: sizing.rems(xxxs);
     }
 
     &::after {