From a42a9f7bc0a4bb01bd5fa9b01d330a84785af250 Mon Sep 17 00:00:00 2001 From: Rastislav Hepner Date: Tue, 21 Apr 2026 10:42:27 +0200 Subject: [PATCH 1/4] feat(DataViewTextFilter): use chipTitle prop for filter chip category AssistedBy: Cursor --- .../DataViewTextFilter/DataViewTextFilter.test.tsx | 12 +++++++++++- .../src/DataViewTextFilter/DataViewTextFilter.tsx | 9 +++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx b/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx index 66850084..85c8f193 100644 --- a/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx +++ b/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( + } + />); + 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( | 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 = ({ filterId, title, + chipTitle, value = '', onChange, onClear = () => onChange?.(undefined, ''), @@ -33,6 +36,8 @@ export const DataViewTextFilter: FC = ({ enableShortcut = true, ...props }: DataViewTextFilterProps) => { + const categoryName = chipTitle ?? title; + useEffect(() => { if (!enableShortcut) { return; @@ -68,9 +73,9 @@ export const DataViewTextFilter: FC = ({ 0 ? [ { key: title, node: value } ] : []} + labels={value.length > 0 ? [ { key: categoryName, node: value } ] : []} deleteLabel={() => onChange?.(undefined, '')} - categoryName={title} + categoryName={categoryName} showToolbarItem={showToolbarItem} > Date: Mon, 4 May 2026 14:55:33 +0200 Subject: [PATCH 2/4] feat(DataViewCheckboxFilter): use chipTitle prop for filter chip category --- .../DataViewCheckboxFilter.test.tsx | 23 +++++++++++++------ .../DataViewCheckboxFilter.tsx | 6 ++++- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx index fb2595c9..c4d02c4a 100644 --- a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx +++ b/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( - } /> - ); + const { container } = render(} />); expect(container).toMatchSnapshot(); }); + + it('should use chipTitle for the filter chip category when provided', () => { + render( + } + /> + ); + expect(screen.getByText('Short name')).toBeInTheDocument(); + expect(screen.getByText('Test Checkbox Filter')).toBeInTheDocument(); + }); }); diff --git a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx index dcb8d5b8..0e1eff0f 100644 --- a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx +++ b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx @@ -32,6 +32,8 @@ export interface DataViewCheckboxFilterProps extends Omit = ({ filterId, title, + chipTitle, value = [], onChange, placeholder, @@ -65,6 +68,7 @@ export const DataViewCheckboxFilter: FC = ({ const toggleRef = useRef(null); const menuRef = useRef(null); const containerRef = useRef(null); + const categoryName = chipTitle ?? title; const normalizeOptions = useMemo( () => @@ -120,7 +124,7 @@ export const DataViewCheckboxFilter: FC = ({ deleteLabel={(_, label) => onChange?.(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label))) } - categoryName={title} + categoryName={categoryName} showToolbarItem={showToolbarItem} > Date: Mon, 4 May 2026 16:04:58 +0200 Subject: [PATCH 3/4] feat(DataViewTreeFilter): use chipTitle prop for filter chip category --- .../DataViewTreeFilter/DataViewTreeFilter.test.tsx | 11 +++++++++++ .../src/DataViewTreeFilter/DataViewTreeFilter.tsx | 6 +++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/module/src/DataViewTreeFilter/DataViewTreeFilter.test.tsx b/packages/module/src/DataViewTreeFilter/DataViewTreeFilter.test.tsx index 6d13d9b9..41653d8f 100644 --- a/packages/module/src/DataViewTreeFilter/DataViewTreeFilter.test.tsx +++ b/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( + } + /> + ); + expect(screen.getByText('Short name')).toBeInTheDocument(); + expect(screen.getByText('Test Tree Filter')).toBeInTheDocument(); + }); + describe('defaultExpanded', () => { it('should have expanded items by default', async () => { render( diff --git a/packages/module/src/DataViewTreeFilter/DataViewTreeFilter.tsx b/packages/module/src/DataViewTreeFilter/DataViewTreeFilter.tsx index c8bf4809..ca7fd692 100644 --- a/packages/module/src/DataViewTreeFilter/DataViewTreeFilter.tsx +++ b/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 = ({ filterId, title, + chipTitle, value = [], onChange, showToolbarItem, @@ -117,6 +120,7 @@ export const DataViewTreeFilter: FC = ({ onSelect, defaultSelected = [] }: DataViewTreeFilterProps) => { + const categoryName = chipTitle ?? title; const classes = useStyles(); const [isOpen, setIsOpen] = useState(false); const [treeData, setTreeData] = useState(items || []); @@ -351,7 +355,7 @@ export const DataViewTreeFilter: FC = ({ onFilterSelectorClear(labelKey); }} deleteLabelGroup={uncheckAllItems} - categoryName={title} + categoryName={categoryName} showToolbarItem={showToolbarItem}> {dropdown} From c9ccc78312221257c51419babb7d033c5127625e Mon Sep 17 00:00:00 2001 From: Rastislav Hepner Date: Mon, 4 May 2026 16:31:18 +0200 Subject: [PATCH 4/4] chore: add chipTitle prop example --- .../extensions/data-view/examples/Toolbar/FiltersExample.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/FiltersExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/FiltersExample.tsx index 9be63260..7347dd75 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/FiltersExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/FiltersExample.tsx @@ -78,7 +78,7 @@ const MyTable: React.FunctionComponent = () => { } filters={ onSetFilters(values)} values={filters}> - +