Apply same styling as Autocomplete has to Selects

Change-type: patch
balena-io-modules · Oct 22, 2024 · 8d94bad · 8d94bad
1 parent 18e19ce
commit 8d94bad
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/src/components/DropDownButton/index.tsx b/src/components/DropDownButton/index.tsx
@@ -192,7 +192,11 @@ export const MenuItemWithTracking: React.FC<MenuItemWithTrackingProps> = ({
 
 	return (
 		<Tooltip {...tooltipProps}>
-			<MenuItem {...menuItem} onClick={handleClick}>
+			<MenuItem
+				{...menuItem}
+				onClick={handleClick}
+				data-custom-class="balena_DropDownButton_MenuItem"
+			>
 				{children}
 			</MenuItem>
 		</Tooltip>

diff --git a/src/theme.tsx b/src/theme.tsx
@@ -909,6 +909,25 @@ export const theme = createTheme({
 				}),
 			},
 		},
+		MuiPopover: {
+			styleOverrides: {
+				root: ({ theme }) => ({
+					'.MuiMenu-list': {
+						paddingTop: 0,
+						paddingBottom: 0,
+
+						'> .MuiMenuItem-root:not([data-custom-class="balena_DropDownButton_MenuItem"])':
+							{
+								paddingTop: theme.spacing(3),
+								paddingBottom: theme.spacing(3),
+								'&:not(:last-of-type)': {
+									borderBottom: `1px solid ${color.border.subtle.value}`,
+								},
+							},
+					},
+				}),
+			},
+		},
 		MuiToggleButtonGroup: {
 			defaultProps: {
 				color: 'secondary',