style(popover/menu): update menu styles

pedroanuda · pedroanuda · commit c3baec86649c · 2025-03-04T16:16:22.000-03:00
Updated styles to better resemble those seen in Material Design 3.
diff --git a/packages/actify/src/components/ListBox/ListBoxOption.tsx b/packages/actify/src/components/ListBox/ListBoxOption.tsx
@@ -36,10 +36,11 @@ const ListBoxOption = <T extends object>({
       {item.rendered}
       {isFocusVisible && (
         <FocusRing
+          type="inward"
           style={
             {
               color: 'rgb(var(--md-sys-color-primary))',
-              '--md-focus-ring-outward-offset': '-3px'
+              '--md-focus-ring-shape': "8px"
             } as React.CSSProperties
           }
         />
diff --git a/packages/actify/src/components/ListBox/listbox.module.css b/packages/actify/src/components/ListBox/listbox.module.css
@@ -2,9 +2,7 @@
   list-style: none;
   margin: 0;
   display: block;
-  padding-left: 8px;
   padding-block: 8px;
-  padding-right: 8px;
   list-style-type: none;
   outline: none;
   box-sizing: border-box;
diff --git a/packages/actify/src/components/ListBox/option.module.css b/packages/actify/src/components/ListBox/option.module.css
@@ -1,5 +1,6 @@
 .item {
   display: flex;
+  align-items: center;
   cursor: pointer;
   position: relative;
   --md-ripple-hover-color: var(
diff --git a/packages/actify/src/components/Menus/ListBoxItem.tsx b/packages/actify/src/components/Menus/ListBoxItem.tsx
@@ -18,7 +18,7 @@ const ListBoxItem = ({ style, className, ...props }: ListBoxItemProps) => {
       className={clsx(styles['item'], className)}
     >
       <>{props.children}</>
-      <FocusRing className={styles['focus-ring']} />
+      <FocusRing className={styles['focus-ring']} type="inward" />
       <Ripple />
     </AriaListBoxItem>
   )
diff --git a/packages/actify/src/components/Menus/MenuItem.tsx b/packages/actify/src/components/Menus/MenuItem.tsx
@@ -39,10 +39,11 @@ const MenuItem = (props: MenuItemProps) => {
           </Item>
           {isFocusVisible && (
             <FocusRing
+              type="inward"
               style={
                 {
                   color: 'rgb(var(--md-sys-color-primary))',
-                  '--md-focus-ring-outward-offset': '-3px'
+                  '--md-focus-ring-shape': "8px"
                 } as React.CSSProperties
               }
             />
diff --git a/packages/actify/src/components/Menus/listbox.module.css b/packages/actify/src/components/Menus/listbox.module.css
@@ -2,9 +2,7 @@
   list-style: none;
   margin: 0;
   display: block;
-  padding-left: 8px;
   padding-block: 8px;
-  padding-right: 8px;
   list-style-type: none;
   outline: none;
   box-sizing: border-box;
diff --git a/packages/actify/src/components/Menus/menu-popover.module.css b/packages/actify/src/components/Menus/menu-popover.module.css
@@ -1,3 +1,9 @@
+.popover {
+  box-shadow: 0 2px 6px 2px rgb(0, 0, 0, .15);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
 .popover:focus-visible {
   outline: none;
 }
diff --git a/packages/actify/src/components/Menus/menu.module.css b/packages/actify/src/components/Menus/menu.module.css
@@ -53,7 +53,7 @@
   box-sizing: border-box;
   list-style: none;
   margin: 0;
-  padding: 8px;
+  padding-block: 8px;
   --md-ripple-hover-color: var(
     --md-menu-item-hover-state-layer-color,
     rgb(var(--md-sys-color-on-surface))
diff --git a/packages/actify/src/components/Popover/popover.module.css b/packages/actify/src/components/Popover/popover.module.css
@@ -22,6 +22,7 @@
     var(--md-sys-shape-corner-extra-small, 4px)
   );
   scrollbar-width: inherit;
+  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .15);
 }
 
 .popover > ul {

Original file line number	Diff line number	Diff line change
`@@ -36,10 +36,11 @@ const ListBoxOption = <T extends object>({`
`36`	`36`	`{item.rendered}`
`37`	`37`	`{isFocusVisible && (`
`38`	`38`	`<FocusRing`
	`39`	`+ type="inward"`
`39`	`40`	`style={`
`40`	`41`	`{`
`41`	`42`	`color: 'rgb(var(--md-sys-color-primary))',`
`42`		`- '--md-focus-ring-outward-offset': '-3px'`
	`43`	`+ '--md-focus-ring-shape': "8px"`
`43`	`44`	`} as React.CSSProperties`
`44`	`45`	`}`
`45`	`46`	`/>`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ const ListBoxItem = ({ style, className, ...props }: ListBoxItemProps) => {`
`18`	`18`	`className={clsx(styles['item'], className)}`
`19`	`19`	`>`
`20`	`20`	`<>{props.children}</>`
`21`		`- <FocusRing className={styles['focus-ring']} />`
	`21`	`+ <FocusRing className={styles['focus-ring']} type="inward" />`
`22`	`22`	`<Ripple />`
`23`	`23`	`</AriaListBoxItem>`
`24`	`24`	`)`
Original file line number	Diff line number	Diff line change
`@@ -39,10 +39,11 @@ const MenuItem = (props: MenuItemProps) => {`
`39`	`39`	`</Item>`
`40`	`40`	`{isFocusVisible && (`
`41`	`41`	`<FocusRing`
	`42`	`+ type="inward"`
`42`	`43`	`style={`
`43`	`44`	`{`
`44`	`45`	`color: 'rgb(var(--md-sys-color-primary))',`
`45`		`- '--md-focus-ring-outward-offset': '-3px'`
	`46`	`+ '--md-focus-ring-shape': "8px"`
`46`	`47`	`} as React.CSSProperties`
`47`	`48`	`}`
`48`	`49`	`/>`
Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@`
`22`	`22`	`var(--md-sys-shape-corner-extra-small, 4px)`
`23`	`23`	`);`
`24`	`24`	`scrollbar-width: inherit;`
	`25`	`+ box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .15);`
`25`	`26`	`}`
`26`	`27`
`27`	`28`	`.popover > ul {`