changed background colors and subtle spacing

powerhome · Sep 30, 2024 · d228add · d228add
1 parent 864e1e1
commit d228add
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss b/playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss
@@ -69,11 +69,11 @@
         padding-bottom: $space_xs;
         cursor: pointer;
         &:hover {
-          background-color: $border_light;
+          background-color: $bg_light;
         }
 
         &[class*="_focused"] {
-          background-color: $border_light;
+          background-color: $bg_light;
         }
 
         &[class*="_list"] {
@@ -196,18 +196,22 @@
       .pb_dropdown_container {
 
         [class*="pb_dropdown_option"]:first-child {
-          padding-top: $space_xs;
+          margin-top: $space_xs;
         }
 
         [class*="pb_dropdown_option"]:last-child {
-          padding-bottom: $space_xs;
+          margin-bottom: $space_xs;
         }
 
         [class*="pb_dropdown_option"] {
           padding-left: $space_xs;
           padding-right: $space_xs;
-          padding-top: 2px;
-          padding-bottom: 2px;
+          padding-top: $space_xxs;
+          padding-bottom: $space_xxs;
+          margin-left: $space_xs;
+          margin-right: $space_xs;
+          margin-top: $space_xxs;
+          margin-bottom: $space_xxs;
           border: none;
         }
       }

diff --git a/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml b/playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml
@@ -1,6 +1,7 @@
 examples:
   rails:
   - dropdown_default: Default
+  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
@@ -10,10 +11,10 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
-  - dropdown_subtle_variant: Subtle Variant
 
   react:
   - dropdown_default: Default
+  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
@@ -23,7 +24,6 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
-  - dropdown_subtle_variant: Subtle Variant
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook