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] =?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;
         }
       }