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}>
-
+
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}
>
{
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}
>
{
);
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}