diff --git a/packages/actify/src/components/ListBox/Option.tsx b/packages/actify/src/components/ListBox/Option.tsx index c57701d..2cb72df 100644 --- a/packages/actify/src/components/ListBox/Option.tsx +++ b/packages/actify/src/components/ListBox/Option.tsx @@ -1,27 +1,46 @@ -import { AriaOptionProps, useOption } from 'react-aria' +import { + AriaFocusRingProps, + AriaOptionProps, + mergeProps, + useFocusRing, + useOption +} from 'react-aria' import { ListState, Node } from 'react-stately' +import { FocusRing } from '../FocusRing' import React from 'react' import { Ripple } from './../Ripple' import clsx from 'clsx' import styles from './option.module.css' -interface OptionProps extends AriaOptionProps { +interface OptionProps extends AriaOptionProps, AriaFocusRingProps { item: Node state: ListState } -const Option = ({ item, state }: OptionProps) => { +const Option = ({ + item, + state, + ...props +}: OptionProps) => { const ref = React.useRef(null) + const { focusProps, isFocusVisible } = useFocusRing(props) const { optionProps, isSelected } = useOption({ key: item.key }, state, ref) return (
  • {item.rendered} + {isFocusVisible && ( + + )}
  • ) diff --git a/packages/actify/src/components/ListBox/listbox.module.css b/packages/actify/src/components/ListBox/listbox.module.css index 360db0c..4492122 100644 --- a/packages/actify/src/components/ListBox/listbox.module.css +++ b/packages/actify/src/components/ListBox/listbox.module.css @@ -1,11 +1,11 @@ .items { list-style: none; margin: 0; - padding: 0; display: block; + padding-left: 8px; padding-block: 8px; + padding-right: 8px; list-style-type: none; - margin: 0; outline: none; box-sizing: border-box; background-color: var( diff --git a/packages/actify/src/components/ListBox/option.module.css b/packages/actify/src/components/ListBox/option.module.css index d9bf015..54441ae 100644 --- a/packages/actify/src/components/ListBox/option.module.css +++ b/packages/actify/src/components/ListBox/option.module.css @@ -53,6 +53,9 @@ padding-inline-start: var(--md-menu-item-leading-space, 16px); padding-inline-end: var(--md-menu-item-trailing-space, 16px); } +.item:focus-visible { + outline: none; +} .item.selected { background-color: var( --md-menu-item-selected-container-color, diff --git a/packages/actify/src/components/Menus/MenuItem.tsx b/packages/actify/src/components/Menus/MenuItem.tsx index 10ff6b9..a0f0577 100644 --- a/packages/actify/src/components/Menus/MenuItem.tsx +++ b/packages/actify/src/components/Menus/MenuItem.tsx @@ -49,7 +49,13 @@ export function MenuItem({ {...mergeProps(menuItemProps, focusProps)} > }>{item.rendered} - {isFocusVisible && } + {isFocusVisible && ( + + )} ) } diff --git a/packages/actify/src/components/Menus/menu.module.css b/packages/actify/src/components/Menus/menu.module.css index 8e1ed1a..2e658fb 100644 --- a/packages/actify/src/components/Menus/menu.module.css +++ b/packages/actify/src/components/Menus/menu.module.css @@ -1,8 +1,4 @@ .menu { - border-radius: var( - --md-menu-container-shape, - var(--md-sys-shape-corner-extra-small, 4px) - ); display: none; inset: auto; border: none; @@ -82,7 +78,10 @@ position: relative; /* for focus ring */ list-style: none; background-color: var(--md-menu-item-container-color, transparent); - border-radius: inherit; + border-radius: var( + --md-menu-container-shape, + var(--md-sys-shape-corner-extra-small, 4px) + ); display: flex; flex: 1; max-width: inherit;