From a4dca84e62ddc04710d0f18ccbec08d80e62590b Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 10 Nov 2021 21:36:42 -0800
Subject: [PATCH 01/11] dropdown- checkbox styles

---
 .../rose/dropdown/index.stories.mdx           | 71 ++++++++++++++++++-
 .../components/rose/form/checkbox/index.hbs   |  2 +-
 .../rose/form/checkbox/index.stories.mdx      |  4 ++
 .../rose/addon/components/rose/form/index.hbs |  1 +
 .../rose/components/dropdown/_item.scss       | 66 ++++++++++++++++-
 .../rose/components/form/_checkbox.scss       |  2 -
 6 files changed, 139 insertions(+), 7 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index 1f3545707..87d7059cc 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/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
diff --git a/addons/rose/addon/components/rose/form/checkbox/index.hbs b/addons/rose/addon/components/rose/form/checkbox/index.hbs
index c8f759924..02b7987d7 100644
--- a/addons/rose/addon/components/rose/form/checkbox/index.hbs
+++ b/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
diff --git a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
index 39925964b..42634d7f0 100644
--- a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
+++ b/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: {
diff --git a/addons/rose/addon/components/rose/form/index.hbs b/addons/rose/addon/components/rose/form/index.hbs
index e23e52c0b..18f637ea3 100644
--- a/addons/rose/addon/components/rose/form/index.hbs
+++ b/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)
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 2d9634e42..78c963c1f 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/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;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/addons/rose/addon/styles/rose/components/form/_checkbox.scss b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
index 6dd2c6802..b173d3131 100644
--- a/addons/rose/addon/styles/rose/components/form/_checkbox.scss
+++ b/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 {

From 1ff91f57579862f4d6aaefc0c6b64fa120f707c5 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 11 Nov 2021 09:51:41 -0800
Subject: [PATCH 02/11] =?UTF-8?q?style:=20=F0=9F=92=84=20right=20align=20c?=
 =?UTF-8?q?heckbox=20and=20toggle=20outline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/components/rose/dropdown/index.stories.mdx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index 87d7059cc..2076d8160 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
@@ -147,7 +147,7 @@ form fields.
 
 ```html
 <Rose::Form as |form|>
-  <Rose::Dropdown @text="Dogs"   @ignoreClickInside={{true}} as |dropdown|>
+  <Rose::Dropdown @text="Items" @ignoreClickInside={{true}} as |dropdown|>
 <Rose::Form::Checkbox::Group
   @name='checkbox-group'
   @items={{this.items}}
@@ -168,10 +168,10 @@ form fields.
 
 
 <Preview>
-  <Story name="Basic Sample" height="10rem">{{
+  <Story name="Dropdown with Checkboxes" height="10rem">{{
   template: hbs`
   <Rose::Form as |form|>
-   <Rose::Dropdown   @ignoreClickInside={{true}} @text="Dogs" as |dropdown|>
+   <Rose::Dropdown   @ignoreClickInside={{true}} @text="Items" as |dropdown|>
     <Rose::Form::Checkbox::Group
       @name={{name}}
       @inline={{inline}}

From 2cbde35248496b0d87b573d3aa4c30a6992d1cf5 Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Thu, 11 Nov 2021 10:32:46 -0800
Subject: [PATCH 03/11] Update index.stories.mdx

---
 addons/rose/addon/components/rose/dropdown/index.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index 2076d8160..7c36fd265 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
@@ -124,7 +124,7 @@ Dropdown indicator can be hidden using `showCaret` attribute.
 </Rose::Dropdown>
 ```
 
-Dropdowns also support radio buttons.  Currently, radio buttons and checkboxes are the supported
+Dropdowns also support radio buttons and checkboxes.  Currently, radio buttons and checkboxes are the only supported
 form fields.
 
 ```html

From 8714627d6f760dceba74570fdc29ced602332c28 Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Thu, 11 Nov 2021 10:47:37 -0800
Subject: [PATCH 04/11] Update _item.scss

---
 addons/rose/addon/styles/rose/components/dropdown/_item.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 78c963c1f..461ec0882 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -133,4 +133,4 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
       }
     }
   }
-}
\ No newline at end of file
+}

From 6b2286a66c1e16b8d98523dda6f37a344c18ad84 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 11 Nov 2021 10:52:10 -0800
Subject: [PATCH 05/11] lint

---
 .../rose/addon/components/rose/dropdown/index.stories.mdx   | 4 +++-
 .../rose/addon/styles/rose/components/dropdown/_item.scss   | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index 2076d8160..86c5c76e3 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
@@ -158,7 +158,9 @@ form fields.
 <dropdown.item>
   <group.checkbox
     @label={{group.item.name}}
-    value={{group.item.id}} />
+    value={{group.item.id}} 
+    @outline={{outline}}
+    />
     </dropdown.item>
 </Rose::Form::Checkbox::Group>
 
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 78c963c1f..527a55395 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -102,11 +102,11 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
       }
       &::before {
         position: absolute;
-        top: 0.5rem;
+        top: sizing.rems(xs);
         left: 0;
         display: block;
-        width: 1rem;
-        height: 1rem;
+        width: sizing.rems(m);
+        height: sizing.rems(m);
         pointer-events: none;
         content: " ";
         border: none;

From c3c5282a04572470f382055bafeea29d8dbef5c0 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 11 Nov 2021 16:41:08 -0800
Subject: [PATCH 06/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20checkbox=20filter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--
---
 .../rose/dropdown/index.stories.mdx           |  5 +-
 .../rose/form/checkbox/index.stories.mdx      |  4 -
 .../rose/components/dropdown/_item.scss       | 78 ++++++++++++-------
 3 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index 8e3ed3424..f500a672e 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
@@ -159,7 +159,6 @@ form fields.
   <group.checkbox
     @label={{group.item.name}}
     value={{group.item.id}} 
-    @outline={{outline}}
     />
     </dropdown.item>
 </Rose::Form::Checkbox::Group>
@@ -186,8 +185,7 @@ form fields.
     <dropdown.item>
       <group.checkbox
         @label={{group.item.name}}
-        value={{group.item.id}} 
-        @outline={{outline}}
+        value={{group.item.id}}
       />
         </dropdown.item>
     </Rose::Form::Checkbox::Group>
@@ -197,7 +195,6 @@ form fields.
   context: {
     inline: boolean('inline', false),
     disabled: boolean('disabled', false),
-    outline: boolean('outline', true),
     items: object('items', [
       { id: 1, name: 'Foo' },
       { id: 2, name: 'Bar' },
diff --git a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
index 42634d7f0..39925964b 100644
--- a/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
@@ -78,7 +78,6 @@ Renders a form input checkbox.
   @error={{false}}
   @disabled={{false}}
   @inline={{false}}
-  @outline={{false}}
   />
 ```
 
@@ -94,7 +93,6 @@ Renders a form input checkbox.
         @error={{error}}
         @disabled={{disabled}}
         @inline={{inline}}
-        @outline={{outline}}
         />
       <Rose::Form::Checkbox
         @name='checkbox-2'
@@ -105,7 +103,6 @@ Renders a form input checkbox.
         @error={{error}}
         @disabled={{disabled}}
         @inline={{inline}}
-        @outline={{outline}}
         />
       <Rose::Form::Checkbox
         @name='checkbox-3'
@@ -116,7 +113,6 @@ Renders a form input checkbox.
         @error={{error}}
         @disabled={{disabled}}
         @inline={{inline}}
-        @outline={{outline}}
         />
     `,
     context: {
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index a3dbf7b9a..6ecf6ff4e 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -71,35 +71,29 @@ $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);
-      }
-    }
-  }
+    color: currentColor;
+    margin-bottom: 0;
     .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;
+      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);
+      font-weight: normal;
+
+      &:hover {
+        background-color: var(--ui-gray-subtler-5);
       }
+
+      &::after {
+        top: sizing.rems(xxs) + sizing.rems(xxxs);
+        right: sizing.rems(xs);
+        left: auto;
+        border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+        border-radius: sizing.rems(xxxs);
+      }
+
       &::before {
         position: absolute;
         top: sizing.rems(xs);
@@ -113,21 +107,47 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
       }
     }
     .rose-form-checkbox-field {
-      &:not(:checked) {
+      &:not(:disabled) {
+        &:hover {
+          ~ .rose-form-checkbox-label {
+            &::after {
+              border-color:  var(--ui-gray);
+            }
+          }
+        }
+      }
+      &:disabled {
         ~ .rose-form-checkbox-label {
+          &::after {
+            border-color: var(--ui-gray-subtler-2);
+            background-color: var(--ui-gray-subtler-4);
+          }
+        }
+  
+        &:checked {
+          ~ .rose-form-checkbox-label {
+            &::after {
+              background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8'><path fill='%23bac1cc' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
+            }
+          }
+        }
+      }
+      &:not(:checked) {
+        ~ .rose-form-radio-label {
           &::after {
             opacity: 0.25;
           }
         }
       }
       &:checked {
-        ~ .rose-form-checkbox-label {
+        ~ .rose-form-radio-label {
           color: var(--action);
+          background-color: var(--action-subtler-1h);
         }
       }
 
       &:disabled {
-        ~ .rose-form-checkbox-label {
+        ~ .rose-form-radio-label {
           opacity: 0.5;
         }
       }

From a71c31b685c9db63dac1550107011658562874c1 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Fri, 12 Nov 2021 11:32:50 -0800
Subject: [PATCH 07/11] =?UTF-8?q?style:=20=F0=9F=92=84=20make=20style=20co?=
 =?UTF-8?q?nsistent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/components/dropdown/_item.scss       | 46 ++++++-------------
 .../rose/components/form/_checkbox.scss       |  2 +
 2 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 6ecf6ff4e..022c3b683 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -73,7 +73,7 @@ $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{
+    .rose-form-checkbox-label {
       display: block;
       margin: -#{$paddingY} -#{$paddingX};
       padding-top: sizing.rems(xs) + sizing.rems(xxxxs);
@@ -102,53 +102,37 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
         width: sizing.rems(m);
         height: sizing.rems(m);
         pointer-events: none;
-        content: " ";
+        content: ' ';
         border: none;
       }
     }
+
     .rose-form-checkbox-field {
-      &:not(:disabled) {
-        &:hover {
-          ~ .rose-form-checkbox-label {
-            &::after {
-              border-color:  var(--ui-gray);
-            }
-          }
-        }
-      }
-      &:disabled {
+      &:hover {
         ~ .rose-form-checkbox-label {
           &::after {
-            border-color: var(--ui-gray-subtler-2);
-            background-color: var(--ui-gray-subtler-4);
-          }
-        }
-  
-        &:checked {
-          ~ .rose-form-checkbox-label {
-            &::after {
-              background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8'><path fill='%23bac1cc' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
-            }
-          }
-        }
-      }
-      &:not(:checked) {
-        ~ .rose-form-radio-label {
-          &::after {
-            opacity: 0.25;
+            border-color: var(--ui-gray);
           }
         }
       }
+
       &:checked {
-        ~ .rose-form-radio-label {
+        ~ .rose-form-checkbox-label {
           color: var(--action);
           background-color: var(--action-subtler-1h);
         }
       }
 
       &:disabled {
-        ~ .rose-form-radio-label {
+        ~ .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;
+          }
         }
       }
     }
diff --git a/addons/rose/addon/styles/rose/components/form/_checkbox.scss b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
index b173d3131..6dd2c6802 100644
--- a/addons/rose/addon/styles/rose/components/form/_checkbox.scss
+++ b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
@@ -44,6 +44,8 @@
       height: sizing.rems(m);
       pointer-events: none;
       content: ' ';
+      border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+      border-radius: sizing.rems(xxxs);
     }
 
     &::after {

From 79d193675505238c641e8232753f9d9b07624b79 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Fri, 12 Nov 2021 11:37:08 -0800
Subject: [PATCH 08/11] undo outline changes

---
 addons/rose/addon/components/rose/form/checkbox/index.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/components/rose/form/checkbox/index.hbs b/addons/rose/addon/components/rose/form/checkbox/index.hbs
index 02b7987d7..c8f759924 100644
--- a/addons/rose/addon/components/rose/form/checkbox/index.hbs
+++ b/addons/rose/addon/components/rose/form/checkbox/index.hbs
@@ -1,4 +1,4 @@
-<div class="rose-form-checkbox{{if @error " error"}} {{if @inline " inline"}}  {{if @outline " outline"}} ">
+<div class="rose-form-checkbox{{if @error " error"}} {{if @inline " inline"}}">
 
   <Input
     ...attributes

From 5bb4cfc853e93cd41eb973ca835fd5082d12c2e9 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Fri, 12 Nov 2021 13:43:44 -0800
Subject: [PATCH 09/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20updates=20to=20chec?=
 =?UTF-8?q?kbox-=20border=20color,=20size?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/components/rose/dropdown/index.stories.mdx  | 2 --
 .../rose/addon/styles/rose/components/dropdown/_item.scss  | 7 ++++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index f500a672e..1ee5d754a 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
@@ -175,7 +175,6 @@ form fields.
    <Rose::Dropdown   @ignoreClickInside={{true}} @text="Items" as |dropdown|>
     <Rose::Form::Checkbox::Group
       @name={{name}}
-      @inline={{inline}}
       @disabled={{disabled}}
       @items={{items}}
       @selectedItems={{selectedItems}}
@@ -193,7 +192,6 @@ form fields.
     </Rose::Form>
   `,
   context: {
-    inline: boolean('inline', false),
     disabled: boolean('disabled', false),
     items: object('items', [
       { id: 1, name: 'Foo' },
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 022c3b683..162350165 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -90,8 +90,9 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
         top: sizing.rems(xxs) + sizing.rems(xxxs);
         right: sizing.rems(xs);
         left: auto;
-        border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+        border: sizing.rems(xxxs) solid var(--ui-gray-subtler-2);
         border-radius: sizing.rems(xxxs);
+        transform: scale(0.66);
       }
 
       &::before {
@@ -120,6 +121,10 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
         ~ .rose-form-checkbox-label {
           color: var(--action);
           background-color: var(--action-subtler-1h);
+          &::after {
+            border-color: var(--action);
+            background-size: sizing.rems(m);
+          }
         }
       }
 

From ece0a09872884fbe7fbe4df8e7b20ddd821506d7 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Fri, 12 Nov 2021 14:16:38 -0800
Subject: [PATCH 10/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20add=20padding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/rose/components/dropdown/_item.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index 162350165..b9fbb79fd 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -79,7 +79,7 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
       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);
+      padding-right: sizing.rems(xl) + sizing.rems(l);
       font-weight: normal;
 
       &:hover {

From 743b281c721f307002dfbe86c0627aa5d5df4b2a Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Fri, 12 Nov 2021 15:15:52 -0800
Subject: [PATCH 11/11] =?UTF-8?q?fix:=20=F0=9F=90=9B=20vertically=20align?=
 =?UTF-8?q?=20checkbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/rose/components/dropdown/_item.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/dropdown/_item.scss b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
index b9fbb79fd..96e29dd5a 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_item.scss
+++ b/addons/rose/addon/styles/rose/components/dropdown/_item.scss
@@ -87,7 +87,8 @@ $checkmark: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231563
       }
 
       &::after {
-        top: sizing.rems(xxs) + sizing.rems(xxxs);
+        //top: 0.25rem
+        top: sizing.rems(xxs);
         right: sizing.rems(xs);
         left: auto;
         border: sizing.rems(xxxs) solid var(--ui-gray-subtler-2);