Ad UI 9632 combobox style (#3641)

* fix(combobox): add style for comboboxsearch * feat(combobox): +focus primary border * feat(combobox): fix import style order
coveo · Mar 19, 2024 · 67d466c · 67d466c
1 parent ec5bfb3
commit 67d466c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/packages/mantine/src/styles/Combobox.module.css 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
@@ -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
@@ -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';