@coveord/plasma-mantine 59.4.0 → 59.4.1

package/src/components/Facet/Facet.tsx

@@ -1,11 +1,13 @@
-import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';
+import {IconSearch} from '@coveord/plasma-react-icons';
 import {
     Box,
     BoxProps,
+    CloseButton,
     Combobox,
     Divider,
     factory,
     Factory,
+    Group,
     StylesApiProps,
     Text,
     TextInput,
@@ -17,7 +19,6 @@ import {useUncontrolled} from '@mantine/hooks';
 import {clsx} from 'clsx';
 import {FunctionComponent, ReactElement, ReactNode, useEffect} from 'react';
 import {groupOptions} from '../../utils/groupOptions.js';
-import {ActionIcon} from '../ActionIcon/ActionIcon.js';
 import {DefaultFacetItem} from './DefaultFacetItem.js';
 import classes from './Facet.module.css';
 import {FacetScrollArea} from './FacetScrollArea.js';
@@ -31,7 +32,9 @@ export type FacetStylesNames =
     | 'searchInput'
     | 'hiddenSearch'
     | 'facetBody'
+    | 'facetTitleRow'
     | 'facetTitle'
+    | 'facetRemoveButton'
     | 'facetSearch'
     | 'facetControl'
     | 'separator'
@@ -49,12 +52,22 @@ export interface FacetProps extends BoxProps, StylesApiProps<FacetFactory> {
      * @param values the selected items
      */
     onChange?: (values: string[]) => void;
+    /**
+     * Function called when the remove icon is clicked.
+     */
+    onRemove?: () => void;
     /**
      * Initial items selection
      *
      * @default []
      */
     initialSelection?: string[];
+    /**
+     * Determines if the facet is removable
+     *
+     * @default false
+     */
+    removable?: boolean;
     /**
      * Determined items selection
      *
@@ -158,6 +171,7 @@ const defaultProps: Partial<FacetProps> = {
     limit: Infinity,
     itemComponent: DefaultFacetItem,
     listComponent: FacetScrollArea,
+    removable: false,
 };
 
 export const Facet: FunctionComponent<FacetProps> = factory<FacetFactory>((_props, ref) => {
@@ -166,7 +180,9 @@ export const Facet: FunctionComponent<FacetProps> = factory<FacetFactory>((_prop
         className,
         data,
         onChange,
+        onRemove,
         initialSelection = [],
+        removable,
         selection,
         itemComponent: ItemComponent,
         listComponent: ListComponent,
@@ -260,7 +276,20 @@ export const Facet: FunctionComponent<FacetProps> = factory<FacetFactory>((_prop
             <Combobox store={combobox} onOptionSubmit={handleValueSelect}>
                 <Combobox.EventsTarget>
                     <Box className={classes.facetHeader}>
-                        {title ? <Title order={5}>{title}</Title> : null}
+                        <Group wrap="nowrap" justify="space-between" className={classes.facetTitleRow}>
+                            {title ? (
+                                <Title order={5} className={classes.facetTitle}>
+                                    {title}
+                                </Title>
+                            ) : null}
+                            {removable ? (
+                                <CloseButton
+                                    onClick={onRemove}
+                                    className={classes.facetRemoveButton}
+                                    aria-label="remove facet"
+                                />
+                            ) : null}
+                        </Group>
 
                         <TextInput
                             unstyled={unstyled}
@@ -275,17 +304,14 @@ export const Facet: FunctionComponent<FacetProps> = factory<FacetFactory>((_prop
                             className={clsx(classes.facetSearch, {[classes.hiddenSearch]: hideSearch})}
                             rightSection={
                                 search ? (
-                                    <ActionIcon.Quaternary
+                                    <CloseButton
                                         aria-label="clear search"
-                                        color="gray"
                                         onClick={() => {
                                             handleSearch('');
                                         }}
-                                    >
-                                        <CrossSize16Px height={16} />
-                                    </ActionIcon.Quaternary>
+                                    />
                                 ) : (
-                                    <FilterSize16Px height={16} />
+                                    <IconSearch height={16} />
                                 )
                             }
                         />

package/src/components/Facet/__tests__/Facet.component.spec.tsx

@@ -237,5 +237,25 @@ describe('Facet', () => {
             await user.click(screen.getByRole('button', {name: /clear search/i}));
             expect(onSearch).toHaveBeenCalledWith('');
         });
+
+        it('does not render the remove button by default', () => {
+            render(<Facet data={[]} title="My little title" />);
+            expect(screen.queryByRole('button', {name: /remove facet/i})).not.toBeInTheDocument();
+        });
+
+        it('renders the remove button when the removable prop is true', () => {
+            render(<Facet data={[]} title="My little title" removable />);
+            expect(screen.getByRole('button', {name: /remove facet/i})).toBeVisible();
+        });
+
+        it('calls onRemove when clicking the remove button', async () => {
+            const user = userEvent.setup();
+            const onRemove = vi.fn();
+            render(<Facet data={[]} title="My little title" onRemove={onRemove} removable />);
+
+            await user.click(screen.getByRole('button', {name: /remove facet/i}));
+
+            expect(onRemove).toHaveBeenCalledTimes(1);
+        });
     });
 });