[PBNTR-389](Dropdown work - States & Variant Prop [ 1 of 5])

playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -78,6 +78,12 @@
 
         &[class*="_list"] {
           border-bottom: 1px solid $border_light;
+
+          &:hover, &:focus {
+            .pb_body_kit {
+              color: $primary;
+            }
+          }
         }
         &[class*="selected"] {
           background-color: $primary;
@@ -87,7 +93,7 @@
             color: $white !important;
           }
           &:hover {
-            background-color: $primary !important;
+            background-color: $product_1_background !important;
           }
         }
       }
@@ -184,4 +190,27 @@
       }
     }
   }
-}
+
+  &.subtle {
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+
+        [class*="pb_dropdown_option"]:first-child {
+          padding-top: $space_xs;
+        }
+
+        [class*="pb_dropdown_option"]:last-child {
+          padding-bottom: $space_xs;
+        }
+
+        [class*="pb_dropdown_option"] {
+          padding-left: $space_xs;
+          padding-right: $space_xs;
+          padding-top: 2px;
+          padding-bottom: 2px;
+          border: none;
+        }
+      }
+    }
+  }
+}

playbook/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -36,6 +36,7 @@ type DropdownProps = {
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
     triggerRef?: any;
+    variant?: "primary" | "subtle";
 };
 
 const Dropdown = (props: DropdownProps) => {
@@ -55,7 +56,8 @@ const Dropdown = (props: DropdownProps) => {
         label,
         onSelect,
         options,
-        triggerRef
+        triggerRef,
+        variant = "primary"
     } = props;
 
     const ariaProps = buildAriaProps(aria);
@@ -64,6 +66,7 @@ const Dropdown = (props: DropdownProps) => {
     const classes = classnames(
         buildCss("pb_dropdown"),
         globalProps(props),
+        variant,
         className
     );
 

playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options, variant: "subtle"}) %>

playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+
+const DropdownSubtleVariant = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+
+  return (
+    <>
+      <Dropdown
+          options={options}
+          variant="subtle"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default DropdownSubtleVariant

playbook/app/pb_kits/playbook/pb_dropdown/docs/example.yml

@@ -10,6 +10,7 @@ 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
@@ -22,6 +23,7 @@ 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

playbook/app/pb_kits/playbook/pb_dropdown/docs/index.js

@@ -12,3 +12,4 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
+export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'

playbook/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -13,13 +13,16 @@ class Dropdown < Playbook::KitBase
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[primary subtle],
+                     default: "primary"
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
       end
 
       def classname
-        generate_classname("pb_dropdown")
+        generate_classname("pb_dropdown", variant, separator: " ")
       end
 
     private