From 477858979d422d902731fd1af0bc64eb1d17d91d Mon Sep 17 00:00:00 2001
From: "kasia.oczkowska" <katarzyna.oczkowska@theworkingroup.net>
Date: Thu, 27 Feb 2025 09:28:17 +0000
Subject: [PATCH] feat: align the style of ControlledAutocomplete with
 ControlledCustomAutocomplete

---
 .../ControlledAutocomplete/index.jsx          | 19 ++++++++++++++-----
 .../ControlledAutocomplete/style.js           | 12 ++++++++++++
 2 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 packages/web/src/components/ControlledAutocomplete/style.js

diff --git a/packages/web/src/components/ControlledAutocomplete/index.jsx b/packages/web/src/components/ControlledAutocomplete/index.jsx
index 31a14b55..b48a45e8 100644
--- a/packages/web/src/components/ControlledAutocomplete/index.jsx
+++ b/packages/web/src/components/ControlledAutocomplete/index.jsx
@@ -4,6 +4,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import FormHelperText from '@mui/material/FormHelperText';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Typography from '@mui/material/Typography';
+import { Option } from './style';
 
 const getOption = (options, value) =>
   options.find((option) => option.value === value) || null;
@@ -95,19 +96,27 @@ function ControlledAutocomplete(props) {
             ref={ref}
             data-test={`${name}-autocomplete`}
             renderOption={(optionProps, option) => (
-              <li
+              <Option
                 {...optionProps}
                 key={option.value?.toString()}
-                style={{ flexDirection: 'column', alignItems: 'start' }}
+                showOptionValue={showOptionValue}
               >
-                <Typography>{option.label}</Typography>
+                <Typography
+                  variant={showOptionValue ? 'subtitle1' : 'body1'}
+                  {...(showOptionValue && { sx: { fontWeight: 700 } })}
+                >
+                  {option.label}
+                </Typography>
 
                 {showOptionValue && typeof option.value === 'string' && (
-                  <Typography variant="caption">{option.value}</Typography>
+                  <Typography variant="subtitle2" color="text.secondary">
+                    {option.value}
+                  </Typography>
                 )}
-              </li>
+              </Option>
             )}
             renderInput={(params) => renderInput(params, fieldState)}
+            {...(showOptionValue && { ListboxProps: { sx: { p: 0 } } })}
           />
           {showHelperText && (
             <FormHelperText
diff --git a/packages/web/src/components/ControlledAutocomplete/style.js b/packages/web/src/components/ControlledAutocomplete/style.js
new file mode 100644
index 00000000..9cd274a5
--- /dev/null
+++ b/packages/web/src/components/ControlledAutocomplete/style.js
@@ -0,0 +1,12 @@
+import { styled } from '@mui/material/styles';
+
+export const Option = styled('li', {
+  shouldForwardProp: (prop) => prop !== 'showOptionValue',
+})(({ theme, showOptionValue }) => ({
+  ...(showOptionValue && {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    flexDirection: 'column',
+    alignItems: 'start !important',
+    padding: `${theme.spacing(2)} !important`,
+  }),
+}));