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

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

@@ -69,15 +69,21 @@
         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"] {
           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;
           }
         }
       }
@@ -125,6 +131,50 @@
     }
   }
 
+  &.separators_hidden {
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+
+        [class*="pb_dropdown_option"] {
+          border: none;
+        }
+      }
+    }
+  }
+
+  &.subtle {
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+        [class*="pb_dropdown_option"] {
+          &[class*="selected"] {
+            background-color: $white;
+            border-bottom: 1px solid $border_light;
+
+            &:hover {
+              background-color: $bg_light !important;
+            }
+
+            [class^="pb_body"] {
+              color: $primary !important;
+            }
+          }
+        }
+      }
+    }
+
+    &.separators_hidden {
+      .dropdown_wrapper {
+        .pb_dropdown_container {
+          [class*="pb_dropdown_option"] {
+            &[class*="selected"] {
+              border-bottom: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
   &.dark {
     .dropdown_wrapper {
       [class*="dropdown_trigger_wrapper"] {

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

@@ -35,7 +35,9 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
+    separators?: boolean;
     triggerRef?: any;
+    variant?: "default" | "subtle";
 };
 
 const Dropdown = (props: DropdownProps) => {
@@ -55,15 +57,20 @@ const Dropdown = (props: DropdownProps) => {
         label,
         onSelect,
         options,
-        triggerRef
+        separators = true,
+        triggerRef,
+        variant = "default",
     } = props;
 
     const ariaProps = buildAriaProps(aria);
     const dataProps = buildDataProps(data);
     const htmlProps = buildHtmlProps(htmlOptions);
+    const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
         buildCss("pb_dropdown"),
         globalProps(props),
+        variant,
+        separatorsClass,
         className
     );
 

playbook/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.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, separators: false}) %>

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

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

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

@@ -0,0 +1,17 @@
+<% 
+  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", separators: false}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger") %>
+    <%= pb_rails("dropdown/dropdown_container") do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option, margin_y: "xxs", margin_x: "xs", padding_y: "xxs", padding_x: "xs", border_radius: "md"}) %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,49 @@
+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}
+        separators={false}
+        variant="subtle"
+        {...props}
+    >
+      <Dropdown.Trigger/>
+      <Dropdown.Container>
+        {options.map((option) => (
+          <Dropdown.Option 
+              borderRadius="md"
+              key={option.id} 
+              marginX="xs"
+              marginY="xxs"
+              option={option}
+              paddingX="xs"
+              paddingY="xxs"
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </>
+  )
+}
+
+export default DropdownSubtleVariant

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

@@ -0,0 +1 @@
+The `subtle` variant adjusts the text and background colors to appear less bold. You can use our global props to control the spacing and border radius of the dropdown options when utilizing our subcomponent structure. Set the `Separators` prop to `false` to remove the separator lines between the options.

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,9 +11,11 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_separators_hidden: Separators Hidden
 
   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
@@ -22,6 +25,7 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_separators_hidden: Separators Hidden
   # - 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,5 @@ 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'
+export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'

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

@@ -13,13 +13,18 @@ class Dropdown < Playbook::KitBase
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default subtle],
+                     default: "default"
+      prop :separators, type: Playbook::Props::Boolean,
+                        default: true
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
       end
 
       def classname
-        generate_classname("pb_dropdown")
+        generate_classname("pb_dropdown", variant, separators_class, separator: " ")
       end
 
     private
@@ -28,6 +33,10 @@ def error_class
         error.present? ? " error" : ""
       end
 
+      def separators_class
+        separators ? "" : "separators_hidden"
+      end
+
       def input_default_value
         default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
       end