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: , + }, }), 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';