From 67d466c46966d7209c8f91204f06c459952fef33 Mon Sep 17 00:00:00 2001
From: FelixBlaisThon <52010042+FelixBlaisThon@users.noreply.github.com>
Date: Tue, 19 Mar 2024 11:43:30 -0400
Subject: [PATCH] Ad UI 9632 combobox style (#3641)

* fix(combobox): add style for comboboxsearch

* feat(combobox): +focus primary border

* feat(combobox): fix import style order
---
 packages/mantine/src/styles/Combobox.module.css | 10 ++++++++++
 packages/mantine/src/theme/Theme.tsx            | 12 ++++++++++--
 packages/website/src/App.tsx                    |  2 +-
 3 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 packages/mantine/src/styles/Combobox.module.css

diff --git a/packages/mantine/src/styles/Combobox.module.css b/packages/mantine/src/styles/Combobox.module.css
new file mode 100644
index 0000000000..904fb00871
--- /dev/null
+++ b/packages/mantine/src/styles/Combobox.module.css
@@ -0,0 +1,10 @@
+.search {
+    margin: 0;
+    border-radius: 8px;
+    border: 1px solid;
+    width: 100%;
+    border-color: var(--mantine-color-gray-4);
+    &:focus {
+        border-color: var(--mantine-primary-color-filled);
+    }
+}
diff --git a/packages/mantine/src/theme/Theme.tsx b/packages/mantine/src/theme/Theme.tsx
index 1a1336ce67..3bf52d3c8d 100644
--- a/packages/mantine/src/theme/Theme.tsx
+++ b/packages/mantine/src/theme/Theme.tsx
@@ -1,4 +1,4 @@
-import {CheckSize16Px, InfoSize24Px} from '@coveord/plasma-react-icons';
+import {CheckSize16Px, FilterSize16Px, InfoSize24Px} from '@coveord/plasma-react-icons';
 import {color} from '@coveord/plasma-tokens';
 import {
     ActionIcon,
@@ -10,6 +10,7 @@ import {
     Checkbox,
     ColorSwatch,
     Combobox,
+    ComboboxSearch,
     Divider,
     InputWrapper,
     List,
@@ -43,6 +44,7 @@ import AppShellNavBarClasses from '../styles/AppShellNavBar.module.css';
 import BadgeClasses from '../styles/Badge.module.css';
 import ButtonClasses from '../styles/Button.module.css';
 import CheckboxClasses from '../styles/Checkbox.module.css';
+import ComboboxClasses from '../styles/Combobox.module.css';
 import DatePickerClasses from '../styles/DatePicker.module.css';
 import InputWrapperClasses from '../styles/InputWrapper.module.css';
 import ListClasses from '../styles/List.module.css';
@@ -245,7 +247,13 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             classNames: {input: SelectClasses.input, option: SelectClasses.option},
         }),
         Combobox: Combobox.extend({
-            classNames: {option: SelectClasses.option},
+            classNames: {option: SelectClasses.option, search: ComboboxClasses.search},
+        }),
+        ComboboxSearch: ComboboxSearch.extend({
+            defaultProps: {
+                placeholder: 'Search...',
+                rightSection: <FilterSize16Px height={16} color="gray.5" />,
+            },
         }),
         NavLink: NavLink.extend({classNames: NavLinkClasses}),
         AppShellNavbar: AppShellNavbar.extend({
diff --git a/packages/website/src/App.tsx b/packages/website/src/App.tsx
index 381d94ab6d..2ef8c2fb32 100644
--- a/packages/website/src/App.tsx
+++ b/packages/website/src/App.tsx
@@ -1,7 +1,7 @@
-import {AppShell, Notifications, Plasmantine} from '@coveord/plasma-mantine';
 import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
+import {AppShell, Notifications, Plasmantine} from '@coveord/plasma-mantine';
 import {Provider} from 'react-redux';
 import {Outlet} from 'react-router-dom';
 import {Navigation} from './Navigation';