update item focusring size

actifyjs · Nov 22, 2024 · 1e91f7c · 1e91f7c
1 parent 1a70f0f
commit 1e91f7c
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 15 deletions.
diff --git a/packages/actify/src/components/FocusRing/focusring.module.css b/packages/actify/src/components/FocusRing/focusring.module.css
@@ -31,7 +31,10 @@
     calc(var(--md-focus-ring-duration, 600ms) * 0.75);
   animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
   box-sizing: border-box;
-  color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));
+  color: var(
+    --md-focus-ring-color,
+    rgb(var(--md-sys-color-secondary, 98 91 113))
+  );
   pointer-events: none;
   position: absolute;
   &:not([inward]) {

diff --git a/packages/actify/src/components/ListBox/ListBoxOption.tsx b/packages/actify/src/components/ListBox/ListBoxOption.tsx
@@ -36,9 +36,12 @@ const ListBoxOption = <T extends object>({
       {item.rendered}
       {isFocusVisible && (
         <FocusRing
-          style={{
-            color: 'rgb(var(--md-sys-color-primary))'
-          }}
+          style={
+            {
+              color: 'rgb(var(--md-sys-color-primary))',
+              '--md-focus-ring-outward-offset': '-3px'
+            } as React.CSSProperties
+          }
         />
       )}
       <Ripple />

diff --git a/packages/actify/src/components/Menus/MenuItem.tsx b/packages/actify/src/components/Menus/MenuItem.tsx
@@ -39,9 +39,12 @@ const MenuItem = (props: MenuItemProps) => {
           </Item>
           {isFocusVisible && (
             <FocusRing
-              style={{
-                color: 'rgb(var(--md-sys-color-primary))'
-              }}
+              style={
+                {
+                  color: 'rgb(var(--md-sys-color-primary))',
+                  '--md-focus-ring-outward-offset': '-3px'
+                } as React.CSSProperties
+              }
             />
           )}
         </>

diff --git a/packages/actify/src/components/Menus/MenuPopover.tsx b/packages/actify/src/components/Menus/MenuPopover.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react-aria-components'
 
 import React from 'react'
+import { motion } from 'framer-motion'
 import styles from './menu-popover.module.css'
 
 export interface PopoverProps extends Omit<AriaPopoverProps, 'children'> {
@@ -17,15 +18,32 @@ export interface PopoverProps extends Omit<AriaPopoverProps, 'children'> {
 
 const MenuPopover = ({ children, ...props }: PopoverProps) => {
   // make the width of the popover the same as the reference element
-  props.style = {
-    ...props.style,
-    '--reference-width': props.referenceWidth + 'px'
-  } as React.CSSProperties
+  if (props.referenceWidth) {
+    props.style = {
+      ...props.style,
+      '--reference-width': props.referenceWidth + 'px'
+    } as React.CSSProperties
+  }
 
   return (
-    <AriaPopover {...props} className={styles['popover']}>
-      <OverlayArrow className={styles['underlay']} />
-      <Dialog className={styles['dialog']}>{children}</Dialog>
+    <AriaPopover {...props} style={props.style} className={styles['popover']}>
+      <motion.div
+        initial={{
+          height: 0,
+          overflow: 'hidden'
+        }}
+        animate={{
+          height: 'auto'
+        }}
+        transition={{
+          duration: 0.3
+        }}
+      >
+        <OverlayArrow className={styles['underlay']} />
+        <Dialog aria-label="dialog" className={styles['dialog']}>
+          {children}
+        </Dialog>
+      </motion.div>
     </AriaPopover>
   )
 }

diff --git a/packages/actify/src/components/Menus/menu-popover.module.css b/packages/actify/src/components/Menus/menu-popover.module.css
@@ -19,7 +19,7 @@
   );
   height: inherit;
   max-height: inherit;
-  overflow: auto;
+  overflow: hidden;
   min-width: inherit;
   max-width: inherit;
   border-radius: var(