refactor(menu): update border stylin

opengovsg · Feb 14, 2023 · 0fd01f1 · 0fd01f1
1 parent 1d9804d
commit 0fd01f1
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/react/src/theme/components/Menu.ts b/react/src/theme/components/Menu.ts
@@ -4,6 +4,11 @@ import { StyleFunctionProps } from '@chakra-ui/theme-tools'
 
 const parts = menuAnatomy.extend('chevron')
 
+const MENU_ITEM_BORDER_STYLES = {
+  mt: '2px',
+  outlineOffset: '-2px',
+}
+
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys)
 
@@ -46,7 +51,6 @@ const baseStyle = definePartsStyle((props) => {
       boxShadow: $shadow.reference,
     },
     item: {
-      mt: '0.125rem',
       bg: $bg.reference,
       textStyle: 'body-1',
       fontWeight: '400',
@@ -109,6 +113,7 @@ const getClearButtonColors = ({ colorScheme: c }: StyleFunctionProps) => {
 const variantClear = definePartsStyle((props) => {
   const { color, hoverColor, activeColor } = getClearButtonColors(props)
   return {
+    item: MENU_ITEM_BORDER_STYLES,
     button: {
       bg: 'transparent',
       color,
@@ -124,7 +129,7 @@ const variantClear = definePartsStyle((props) => {
 
 const variants = {
   clear: variantClear,
-  outline: {},
+  outline: { item: MENU_ITEM_BORDER_STYLES },
 }
 
 const sizes = {