feat(filters): use chipTitle prop for filter chip category (#633)

* feat(DataViewTextFilter): use chipTitle prop for filter chip category

AssistedBy: Cursor

* feat(DataViewCheckboxFilter): use chipTitle prop for filter chip category

* feat(DataViewTreeFilter): use chipTitle prop for filter chip category

* chore: add chipTitle prop example

Author: raswonders

packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/FiltersExample.tsx

@@ -78,7 +78,7 @@ const MyTable: React.FunctionComponent = () => {
         }
         filters={ 
           <DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
-            <DataViewTextFilter filterId="name" title='Name' placeholder='Filter by name' />
+            <DataViewTextFilter filterId="name" title='Name' chipTitle='Repo' placeholder='Filter by name' />
             <DataViewTextFilter filterId="branch" title='Branch' placeholder='Filter by branch' />
             <DataViewCheckboxFilter filterId="workspace" title='Workspace' placeholder='Filter by workspace' options={filterOptions} />
           </DataViewFilters>

packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx

@@ -1,23 +1,32 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
 import DataViewToolbar from '../DataViewToolbar';
+import '@testing-library/jest-dom';
 
 describe('DataViewCheckboxFilter component', () => {
   const defaultProps: DataViewCheckboxFilterProps = {
     filterId: 'test-checkbox-filter',
     title: 'Test Checkbox Filter',
-    value: [ 'workspace-one' ],
+    value: ['workspace-one'],
     options: [
       { label: 'Workspace one', value: 'workspace-one' },
       { label: 'Workspace two', value: 'workspace-two' },
-      { label: 'Workspace three', value: 'workspace-three' },
-    ],
+      { label: 'Workspace three', value: 'workspace-three' }
+    ]
   };
 
   it('should render correctly', () => {
-    const { container } = render(
-      <DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} />} />
-    );
+    const { container } = render(<DataViewToolbar filters={<DataViewCheckboxFilter {...defaultProps} />} />);
     expect(container).toMatchSnapshot();
   });
+
+  it('should use chipTitle for the filter chip category when provided', () => {
+    render(
+      <DataViewToolbar
+        filters={<DataViewCheckboxFilter {...defaultProps} chipTitle="Short name" />}
+      />
+    );
+    expect(screen.getByText('Short name')).toBeInTheDocument();
+    expect(screen.getByText('Test Checkbox Filter')).toBeInTheDocument();
+  });
 });

packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx

@@ -32,6 +32,8 @@ export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect'
   value?: string[];
   /** Filter title displayed in the toolbar */
   title: string;
+  /** Label for the applied filter chip / category; defaults to title */
+  chipTitle?: string;
   /** Placeholder text of the menu */
   placeholder?: string;
   /** Filter options displayed */
@@ -51,6 +53,7 @@ export interface DataViewCheckboxFilterProps extends Omit<MenuProps, 'onSelect'
 export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
   filterId,
   title,
+  chipTitle,
   value = [],
   onChange,
   placeholder,
@@ -65,6 +68,7 @@ export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
   const toggleRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const categoryName = chipTitle ?? title;
 
   const normalizeOptions = useMemo(
     () =>
@@ -120,7 +124,7 @@ export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
       deleteLabel={(_, label) =>
         onChange?.(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label)))
       }
-      categoryName={title}
+      categoryName={categoryName}
       showToolbarItem={showToolbarItem}
     >
       <Popper

packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter';
 import DataViewToolbar from '../DataViewToolbar';
@@ -22,6 +22,16 @@ describe('DataViewTextFilter component', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should use chipTitle for the filter chip category when provided', () => {
+    render(<DataViewToolbar
+      filters={
+        <DataViewTextFilter {...defaultProps} chipTitle="Short name" />
+      }
+    />);
+    expect(screen.getByText('Short name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Filter by Test Filter')).toBeInTheDocument();
+  });
+
   it('should focus the search input when "/" key is pressed and filter is visible', () => {
     render(<DataViewToolbar
       filters={ 

packages/module/src/DataViewTextFilter/DataViewTextFilter.tsx

@@ -9,6 +9,8 @@ export interface DataViewTextFilterProps extends SearchInputProps {
   value?: string;
   /** Filter title displayed in the toolbar */
   title: string;
+  /** Label for the applied filter chip / category; defaults to title */
+  chipTitle?: string;
   /** Callback for when the input value changes */
   onChange?: (event: React.FormEvent<HTMLInputElement> | undefined, value: string) => void;
   /** Controls visibility of the filter in the toolbar */
@@ -24,6 +26,7 @@ export interface DataViewTextFilterProps extends SearchInputProps {
 export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
   filterId,
   title,
+  chipTitle,
   value = '',
   onChange,
   onClear = () => onChange?.(undefined, ''),
@@ -33,6 +36,8 @@ export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
   enableShortcut = true,
   ...props
 }: DataViewTextFilterProps) => {
+  const categoryName = chipTitle ?? title;
+
   useEffect(() => {
     if (!enableShortcut) {
       return;
@@ -68,9 +73,9 @@ export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
     <ToolbarFilter
       key={ouiaId}
       data-ouia-component-id={ouiaId}
-      labels={value.length > 0 ? [ { key: title, node: value } ] : []}
+      labels={value.length > 0 ? [ { key: categoryName, node: value } ] : []}
       deleteLabel={() => onChange?.(undefined, '')}
-      categoryName={title}
+      categoryName={categoryName}
       showToolbarItem={showToolbarItem}
     >
       <SearchInput

packages/module/src/DataViewTreeFilter/DataViewTreeFilter.test.tsx

@@ -87,6 +87,17 @@ describe('DataViewTreeFilter component', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it('should use chipTitle for the filter chip category when provided', () => {
+    render(
+      <DataViewToolbar
+        filters={<DataViewTreeFilter {...defaultProps} chipTitle="Short name" />}
+      />
+    );
+    expect(screen.getByText('Short name')).toBeInTheDocument();
+    expect(screen.getByText('Test Tree Filter')).toBeInTheDocument();
+  });
+
   describe('defaultExpanded', () => {
     it('should have expanded items by default', async () => {
       render(

packages/module/src/DataViewTreeFilter/DataViewTreeFilter.tsx

@@ -89,6 +89,8 @@ export interface DataViewTreeFilterProps {
   value?: string[];
   /** Filter title displayed in the toolbar */
   title: string;
+  /** Label for the applied filter chip / category; defaults to title */
+  chipTitle?: string;
   /** Callback for when the selection changes */
   onChange?: (event?: React.MouseEvent, values?: string[]) => void;
   /** Controls visibility of the filter in the toolbar */
@@ -108,6 +110,7 @@ export interface DataViewTreeFilterProps {
 export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
   filterId,
   title,
+  chipTitle,
   value = [],
   onChange,
   showToolbarItem,
@@ -117,6 +120,7 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
   onSelect,
   defaultSelected = []
 }: DataViewTreeFilterProps) => {
+  const categoryName = chipTitle ?? title;
   const classes = useStyles();
   const [isOpen, setIsOpen] = useState(false);
   const [treeData, setTreeData] = useState<TreeViewDataItem[]>(items || []);
@@ -351,7 +355,7 @@ export const DataViewTreeFilter: FC<DataViewTreeFilterProps> = ({
         onFilterSelectorClear(labelKey);
       }}
       deleteLabelGroup={uncheckAllItems}
-      categoryName={title}
+      categoryName={categoryName}
       showToolbarItem={showToolbarItem}>
       {dropdown}
     </ToolbarFilter>