Merge pull request #853 from hashicorp/checkbox-style-updates

Checkbox style updates

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 and checkboxes.  Currently, radio buttons and checkboxes are the only supported
+form fields.
 
 ```html
 <Rose::Form as |form|>
@@ -144,6 +145,67 @@ form field.
 </Rose::Form>
 ```
 
+```html
+<Rose::Form as |form|>
+  <Rose::Dropdown @text="Items" @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="Dropdown with Checkboxes" height="10rem">{{
+  template: hbs`
+  <Rose::Form as |form|>
+   <Rose::Dropdown   @ignoreClickInside={{true}} @text="Items" as |dropdown|>
+    <Rose::Form::Checkbox::Group
+      @name={{name}}
+      @disabled={{disabled}}
+      @items={{items}}
+      @selectedItems={{selectedItems}}
+      @onChange={{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>
+  `,
+  context: {
+    disabled: boolean('disabled', false),
+    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/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,78 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
       }
     }
   }
+
+  .rose-form-checkbox {
+    color: currentColor;
+    margin-bottom: 0;
+    .rose-form-checkbox-label {
+      display: block;
+      margin: -#{$paddingY} -#{$paddingX};
+      padding-top: sizing.rems(xs) + sizing.rems(xxxxs);
+      padding-bottom: sizing.rems(xs) + sizing.rems(xxxxs);
+      padding-left: sizing.rems(s);
+      padding-right: sizing.rems(xl) + sizing.rems(l);
+      font-weight: normal;
+
+      &:hover {
+        background-color: var(--ui-gray-subtler-5);
+      }
+
+      &::after {
+        //top: 0.25rem
+        top: sizing.rems(xxs);
+        right: sizing.rems(xs);
+        left: auto;
+        border: sizing.rems(xxxs) solid var(--ui-gray-subtler-2);
+        border-radius: sizing.rems(xxxs);
+        transform: scale(0.66);
+      }
+
+      &::before {
+        position: absolute;
+        top: sizing.rems(xs);
+        left: 0;
+        display: block;
+        width: sizing.rems(m);
+        height: sizing.rems(m);
+        pointer-events: none;
+        content: ' ';
+        border: none;
+      }
+    }
+
+    .rose-form-checkbox-field {
+      &:hover {
+        ~ .rose-form-checkbox-label {
+          &::after {
+            border-color: var(--ui-gray);
+          }
+        }
+      }
+
+      &:checked {
+        ~ .rose-form-checkbox-label {
+          color: var(--action);
+          background-color: var(--action-subtler-1h);
+          &::after {
+            border-color: var(--action);
+            background-size: sizing.rems(m);
+          }
+        }
+      }
+
+      &:disabled {
+        ~ .rose-form-checkbox-label {
+          opacity: 0.5;
+          &::after {
+            border-color: var(--ui-gray-subtler-2);
+            background-color: var(--ui-gray-subtler-4);
+          }
+          &::before {
+            background: none;
+          }
+        }
+      }
+    }
+  }
 }