Autocomplete: Add border between items

Change-type: patch
balena-io-modules · Oct 11, 2024 · ecdb632 · ecdb632
1 parent ec77ccb
commit ecdb632
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/src/components/VirtualizedAutocomplete/VirtualizedAutocomplete.stories.tsx b/src/components/VirtualizedAutocomplete/VirtualizedAutocomplete.stories.tsx
@@ -18,11 +18,7 @@ type VirtualizedStory = StoryObj<typeof virtualizedMeta>;
 export const Default: VirtualizedStory = {
 	args: {
 		options: Array.from({ length: 1000 }, () => Math.random().toString()),
-		renderOption: (props, option) => (
-			<Box component="li" {...props}>
-				{option as string}
-			</Box>
-		),
+		renderOption: (_props, option) => option as string,
 		renderInput: (params) => <TextField {...params} />,
 		disableClearable: true,
 		fullWidth: true,

diff --git a/src/components/VirtualizedAutocomplete/index.tsx b/src/components/VirtualizedAutocomplete/index.tsx
@@ -1,10 +1,10 @@
+import { color } from '@balena/design-tokens';
 import {
 	Autocomplete,
 	AutocompleteProps,
 	ChipTypeMap,
 	Box,
 	ListItemButton,
-	ListItemButtonProps,
 } from '@mui/material';
 import throttle from 'lodash/throttle';
 import * as React from 'react';
@@ -70,6 +70,8 @@ const ListboxComponent = ({
 			<VList
 				style={{
 					flex: 1,
+					paddingTop: MUI_LIST_VERTICAL_PADDING,
+					paddingBottom: MUI_LIST_VERTICAL_PADDING,
 				}}
 				onRangeChange={(_, lastItemIndex) => {
 					if (
@@ -82,19 +84,19 @@ const ListboxComponent = ({
 				}}
 			>
 				{itemData.map((item, i) => (
-					<ListItemButton
-						{...(item.props as ListItemButtonProps)}
-						key={Math.random()}
-						sx={{
-							mt: i === 0 ? `${MUI_LIST_VERTICAL_PADDING}px` : 0,
-							mb:
-								i === (itemCount ?? itemData.length) - 1
-									? `${MUI_LIST_VERTICAL_PADDING}px`
-									: 0,
-						}}
+					<Box
+						component={ListItemButton}
+						{...item.props}
+						{...(i < itemData.length - 1
+							? {
+									sx: {
+										borderBottom: `1px solid ${color.border.subtle.value}`,
+									},
+							  }
+							: {})}
 					>
 						{item.option}
-					</ListItemButton>
+					</Box>
 				))}
 			</VList>
 			{isNextPageLoading && (

diff --git a/src/theme.tsx b/src/theme.tsx
@@ -882,6 +882,30 @@ export const theme = createTheme({
 				},
 			},
 		},
+		MuiPaper: {
+			styleOverrides: {
+				root: ({ theme }) => ({
+					// For VirtualizedAutocomplete
+					'.MuiAutocomplete-listbox .MuiAutocomplete-option': {
+						paddingTop: theme.spacing(3),
+						paddingBottom: theme.spacing(3),
+					},
+				}),
+			},
+		},
+		MuiPopper: {
+			styleOverrides: {
+				root: ({ theme }) => ({
+					'.MuiAutocomplete-option': {
+						paddingTop: theme.spacing(3),
+						paddingBottom: theme.spacing(3),
+						'&:not(:last-of-type)': {
+							borderBottom: `1px solid ${color.border.subtle.value}`,
+						},
+					},
+				}),
+			},
+		},
 		MuiToggleButtonGroup: {
 			defaultProps: {
 				color: 'secondary',