Skip to content

feat(DataViewFilters): add category group clear button to checkbox an… #688

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aloktomarr wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(DataViewFilters): add category group clear button to checkbox an… #688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { render, screen } from '@testing-library/react';
import { render, screen, fireEvent } from '@testing-library/react';
import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
import DataViewToolbar from '../DataViewToolbar';
import '@testing-library/jest-dom';
Expand Down Expand Up @@ -29,4 +29,17 @@ describe('DataViewCheckboxFilter component', () => {
expect(screen.getByText('Short name')).toBeInTheDocument();
expect(screen.getByText('Test Checkbox Filter')).toBeInTheDocument();
});

it('clears all selected chips via the category group delete button (#646)', () => {
const onChange = jest.fn();
const { container } = render(
<DataViewToolbar
filters={<DataViewCheckboxFilter {...defaultProps} value={[ 'workspace-one', 'workspace-two' ]} onChange={onChange} />}
/>
);
const groupClose = container.querySelector('.pf-v6-c-label-group__close button');
expect(groupClose).toBeInTheDocument();
fireEvent.click(groupClose as HTMLElement);
expect(onChange).toHaveBeenCalledWith(undefined, []);
});
});
1 change: 1 addition & 0 deletions packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ export const DataViewCheckboxFilter: FC<DataViewCheckboxFilterProps> = ({
deleteLabel={(_, label) =>
onChange?.(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label)))
}
deleteLabelGroup={() => onChange?.(undefined, [])}
categoryName={categoryName}
showToolbarItem={showToolbarItem}
>
Expand Down
32 changes: 32 additions & 0 deletions ...ages/module/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,38 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
</li>
</ul>
</div>
<div
class="pf-v6-c-label-group__close"
>
<button
aria-label="Close label group"
aria-labelledby="remove_group_pf-random-id-1 pf-random-id-1"
class="pf-v6-c-button pf-m-plain pf-m-small"
data-ouia-component-id="OUIA-Generated-Button-plain-2"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
id="remove_group_pf-random-id-1"
type="button"
>
<span
class="pf-v6-c-button__icon"
>
<svg
aria-hidden="true"
class="pf-v6-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 352 512"
width="1em"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
Expand Down
15 changes: 14 additions & 1 deletion packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { render, screen } from '@testing-library/react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter';
import DataViewToolbar from '../DataViewToolbar';
Expand Down Expand Up @@ -32,6 +32,19 @@ describe('DataViewTextFilter component', () => {
expect(screen.getByPlaceholderText('Filter by Test Filter')).toBeInTheDocument();
});

it('clears the value via the category group delete button (#646)', () => {
const onChange = jest.fn();
const { container } = render(<DataViewToolbar
filters={
<DataViewTextFilter {...defaultProps} value="abc" onChange={onChange} />
}
/>);
const groupClose = container.querySelector('.pf-v6-c-label-group__close button');
expect(groupClose).toBeInTheDocument();
fireEvent.click(groupClose as HTMLElement);
expect(onChange).toHaveBeenCalledWith(undefined, '');
});

it('should focus the search input when "/" key is pressed and filter is visible', () => {
render(<DataViewToolbar
filters={
Expand Down
1 change: 1 addition & 0 deletions packages/module/src/DataViewTextFilter/DataViewTextFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ export const DataViewTextFilter: FC<DataViewTextFilterProps> = ({
data-ouia-component-id={ouiaId}
labels={value.length > 0 ? [ { key: categoryName, node: value } ] : []}
deleteLabel={() => onChange?.(undefined, '')}
deleteLabelGroup={() => onChange?.(undefined, '')}
categoryName={categoryName}
showToolbarItem={showToolbarItem}
>
Expand Down
32 changes: 32 additions & 0 deletions packages/module/src/DataViewTextFilter/__snapshots__/DataViewTextFilter.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,38 @@ exports[`DataViewTextFilter component should render correctly 1`] = `
</li>
</ul>
</div>
<div
class="pf-v6-c-label-group__close"
>
<button
aria-label="Close label group"
aria-labelledby="remove_group_pf-random-id-1 pf-random-id-1"
class="pf-v6-c-button pf-m-plain pf-m-small"
data-ouia-component-id="OUIA-Generated-Button-plain-4"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
id="remove_group_pf-random-id-1"
type="button"
>
<span
class="pf-v6-c-button__icon"
>
<svg
aria-hidden="true"
class="pf-v6-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 352 512"
width="1em"
>
<path
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
Expand Down