fix: dropdown focus issues

supabase · Mar 4, 2022 · 5210319 · 5210319
1 parent 899ccf8
commit 5210319
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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