From 52103194068cade850d7a2c7034626a72cc60ecc Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Fri, 4 Mar 2022 00:35:37 +0000
Subject: [PATCH] fix: dropdown focus issues

---
 src/components/Dropdown/Dropdown.stories.tsx |  5 +++--
 src/components/Dropdown/Dropdown.tsx         |  6 ++----
 src/lib/theme/defaultTheme.ts                | 11 +++++++++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
index 97ab4f8f..d1f825a5 100644
--- a/src/components/Dropdown/Dropdown.stories.tsx
+++ b/src/components/Dropdown/Dropdown.stories.tsx
@@ -6,6 +6,7 @@ import {
   IconLogOut,
   IconChevronDown,
   IconChevronRight,
+  IconHardDrive,
 } from './../../index'
 import Typography from '../Typography'
 
@@ -104,7 +105,7 @@ export const DefaultFull = (args: any) => {
               </Dropdown.Item>,
             ]}
           >
-            <Dropdown.TriggerItem>
+            <Dropdown.TriggerItem icon={<IconHardDrive />}>
               Open sub menu{' '}
               <Dropdown.RightSlot>
                 <IconChevronRight size={14} />
@@ -117,7 +118,7 @@ export const DefaultFull = (args: any) => {
           </Dropdown.Item>,
         ]}
       >
-        <Button as="span" type="secondary" iconRight={<IconChevronDown />}>
+        <Button as="span" type="default" iconRight={<IconChevronDown />}>
           Click for dropdown
         </Button>
       </Dropdown>
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index efc08cc6..e95977bc 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -50,9 +50,7 @@ function Dropdown({
   return (
     <RadixDropdown.Root onOpenChange={onOpenChange} open={open}>
       {isNested ? (
-        <RadixDropdown.TriggerItem
-          className={[__styles.item, __styles.item_nested].join(' ')}
-        >
+        <RadixDropdown.TriggerItem className={[__styles.item_nested].join(' ')}>
           {children}
         </RadixDropdown.TriggerItem>
       ) : (
@@ -118,7 +116,7 @@ export function Item({
 export function TriggerItem({ children, icon, disabled }: ItemProps) {
   let __styles = styleHandler('dropdown')
   return (
-    <div className={__styles.trigger}>
+    <div className={__styles.item}>
       {icon && icon}
       <span>{children}</span>
     </div>
diff --git a/src/lib/theme/defaultTheme.ts b/src/lib/theme/defaultTheme.ts
index c269d7b6..dd39d45e 100644
--- a/src/lib/theme/defaultTheme.ts
+++ b/src/lib/theme/defaultTheme.ts
@@ -1166,16 +1166,23 @@ export default {
   dropdown: {
     // root:
     trigger: `
+      flex
       border-none 
       rounded
       bg-transparent p-0
-      data-open:ring-2
-      data-open:ring-scale-900
+      
+      outline-none
+      outline-offset-1
+      transition-all
+      focus:outline-4
+      focus:outline-brand-700
     `,
     item_nested: `
       border-none
       data-open:bg-scale-300 dark:data-open:bg-scale-500
       data-open:text-scale-1200
+      focus:outline-none
+      focus:text-scale-1200
     `,
     content: `
       bg-scale-100 dark:bg-scale-300