Skip to content

feat(FilterBar): support clearing all filters at once #7512

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

Merged
merged 11 commits into from
Jul 7, 2025
Merged

feat(FilterBar): support clearing all filters at once #7512

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
305f1de
update deps
Lukas742 Jul 4, 2025
c4fbac8
run wrapper script (main)
Lukas742 Jul 4, 2025
9826342
add new wc to root index file
Lukas742 Jul 4, 2025
8d59de2
run wrapper script (compat)
Lukas742 Jul 4, 2025
ce578cc
Update ThemingParameters.ts
Lukas742 Jul 4, 2025
5e87a8a
MenuItemGroup example
Lukas742 Jul 4, 2025
85a7814
add ShellBarBranding example
Lukas742 Jul 4, 2025
79b9b20
add UserMenuItemGroup subcomp
Lukas742 Jul 4, 2025
f484afc
VariantManagement: add `nativeDetail` again & fix tests
Lukas742 Jul 4, 2025
3fc702f
feat(FilterBar): support clearing all filters at once
Lukas742 Jul 7, 2025
d9689f2
Merge branch 'main' into feat/fb-clear-all
Lukas742 Jul 7, 2025
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
78 changes: 35 additions & 43 deletions packages/main/src/components/FilterBar/FilterBar.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ describe('FilterBar.cy.tsx', () => {

it('Selection: FilterGroupItems in Dialog + events', () => {
const TestComp = (props: Omit<FilterBarPropTypes, 'children'>) => {
const [selectedFilters, setSelectedFilters] = useState('');
const [selectedFilters, setSelectedFilters] = useState('0 1 2');
const [closeTrigger, setCloseTrigger] = useState('');
const [savedVisibleFilters, setSavedVisibleFilters] = useState('');
const {
Expand Down Expand Up @@ -217,24 +217,17 @@ describe('FilterBar.cy.tsx', () => {
}

const checkboxes = cy.get('[ui5-checkbox]');
checkboxes.should('have.length', 4);
checkboxes.should('have.length', 3);

let selected = '2';
checkboxes.each((item, index, arr) => {
let selected = '0 1 2';
checkboxes.each((item, cbIndex, arr) => {
const wrappedItem = cy.wrap(item);
wrappedItem.should('be.visible');
wrappedItem.realClick();

wrappedItem.click();

if (index === 0) {
// select-all: deselect all - only required is checked
wrappedItem.should('not.have.attr', 'checked');
cy.findByTestId('selected').should('have.text', selected);
const requiredItem = cy.wrap(arr[arr.length - 1]);
requiredItem.should('have.attr', 'checked');
} else if (index !== arr.length - 1) {
wrappedItem.should('have.attr', 'checked');
selected += ` ${index - 1}`;
if (cbIndex !== arr.length - 1) {
wrappedItem.find('[role="checkbox"]').should('have.attr', 'aria-checked', 'false');
selected = selected.split(' ').slice(1).join(' ');
cy.findByTestId('selected').should('have.text', selected);
} else {
// is sometimes not selected, seems to be related to the click target and cypress
Expand All @@ -243,7 +236,7 @@ describe('FilterBar.cy.tsx', () => {
}
});

cy.get('@selectSpy').should('have.callCount', 3 * (index + 1));
cy.get('@selectSpy').should('have.callCount', 2 * (index + 1));

cy.findAllByText('INPUT').should('have.length', 2);
cy.findAllByText('SWITCH').should('have.length', 2);
Expand All @@ -261,7 +254,7 @@ describe('FilterBar.cy.tsx', () => {
cy.get('@saveSpy').should('have.callCount', saveCallCount);
saveCallCount++;
cy.findByTestId('close-trigger').should('have.text', 'okButtonPressed');
cy.findByTestId('saved-filters').should('have.text', '0 1 2');
cy.findByTestId('saved-filters').should('have.text', '2');
} else {
if (action === 'Reset') {
cy.get('[data-component-name="FilterBarDialogResetMessageBox"]').contains('Cancel').click();
Expand Down Expand Up @@ -298,10 +291,10 @@ describe('FilterBar.cy.tsx', () => {
});
});

it('select-all without required', () => {
it('select/clear-all', () => {
const TestComp = (props) => {
const [selectedFilters, setSelectedFilters] = useState('');
const [savedVisibleFilters, setSavedVisibleFilters] = useState('');
const [selectedFilters, setSelectedFilters] = useState('0 1 2 3');
const [savedVisibleFilters, setSavedVisibleFilters] = useState('0 1 2 3');

const handleSelectionChange: FilterBarPropTypes['onFiltersDialogSelectionChange'] = (e) => {
setSelectedFilters(Array.from(e.selectedFilterKeys).join(' '));
Expand All @@ -312,20 +305,28 @@ describe('FilterBar.cy.tsx', () => {
return (
<>
<FilterBar {...props} onFiltersDialogSelectionChange={handleSelectionChange} onFiltersDialogSave={handleSave}>
<FilterGroupItem label="INPUT" filterKey="0">
<FilterGroupItem label="INPUT" filterKey="0" hiddenInFilterBar={!savedVisibleFilters.includes('0')}>
<Input placeholder="Placeholder" value="123123" data-testid="INPUT" />
</FilterGroupItem>
<FilterGroupItem label="SWITCH" filterKey="1">
<FilterGroupItem label="SWITCH" filterKey="1" hiddenInFilterBar={!savedVisibleFilters.includes('1')}>
<Switch checked={true} data-testid="SWITCH" />
</FilterGroupItem>
<FilterGroupItem label="SELECT" filterKey="2">
<FilterGroupItem label="SELECT" filterKey="2" hiddenInFilterBar={!savedVisibleFilters.includes('2')}>
<Select data-testid="SELECT">
<Option selected={true}>Option 1</Option>
<Option>Option 2</Option>
<Option>Option 3</Option>
<Option>Option 4</Option>
</Select>
</FilterGroupItem>
<FilterGroupItem
label="Required"
filterKey="3"
hiddenInFilterBar={!savedVisibleFilters.includes('3')}
required
>
<Input placeholder="Placeholder" value="123123" data-testid="INPUT" />
</FilterGroupItem>
</FilterBar>
<hr />
<span>Selected: </span>
Expand All @@ -339,22 +340,28 @@ describe('FilterBar.cy.tsx', () => {

cy.mount(<TestComp />);

cy.findByTestId('selected', '0 1 2');
cy.findByTestId('selected').should('have.text', '0 1 2 3');
cy.get('[text="Filters"]').click({ force: true });
cy.get('[ui5-checkbox]').first().click();
cy.findByTestId('selected', '');
cy.findByTestId('selected').should('have.text', '1 2 3');
cy.get('[ui5-checkbox]').eq(1).click();
cy.findByTestId('selected', '0');
cy.findByTestId('selected').should('have.text', '2 3');
cy.get('[ui5-checkbox]').first().click();
cy.get('[ui5-checkbox]').first().click();

cy.findByText('OK').click();
cy.findByTestId('saved', '');
cy.findByTestId('saved').should('have.text', '2 3');

cy.get('[text="Filters"]').click({ force: true });
cy.get('[ui5-checkbox]').first().click();
cy.findByText('OK').click();
cy.findByTestId('saved', '0 1 2');
cy.findByTestId('saved').should('have.text', '2 3 0');

cy.get('[text="Filters"]').click({ force: true });
cy.get('[name="clear-all"]').click();
cy.findByTestId('selected').should('have.text', '3');
cy.findByText('OK').click();
cy.findByTestId('saved').should('have.text', '3');
});

// todo selection, group + list view
Expand Down Expand Up @@ -473,25 +480,10 @@ describe('FilterBar.cy.tsx', () => {
cy.get('[text="Filters"]').click({ force: true });
cy.get('[accessible-name="Group View"]').click();

cy.get('[data-component-name="FilterBarDialogGroupTableHeaderRow"]')
.shadow()
.find('[ui5-table-header-cell]')
.should('have.css', 'visibility', 'hidden');

cy.get('[data-component-name="FilterBarDialogTable"][data-is-grouped]')
.shadow()
.find('#no-data-row')
.should('have.css', 'display', 'none');

cy.get('[data-component-name="FilterBarDialogTable"]')
.shadow()
.find('#table')
.should('have.css', 'grid-template-columns', '44px 436px 160px');

cy.get('[data-component-name="FilterBarDialogPanelTable"]')
.shadow()
.find('#table')
.should('have.css', 'grid-template-columns', '44px 436px 160px');
});

it('fire FilterBar events', () => {
Expand Down
2 changes: 2 additions & 0 deletions packages/main/src/components/FilterBar/FilterBar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
import { useId, useReducer, useRef, useState } from 'react';
import { FlexBoxDirection } from '../../enums/index.js';
Expand Down Expand Up @@ -42,6 +43,7 @@ const meta = {
</Title>
),
filterContainerWidth: '13.125rem',
onFiltersDialogOpen: fn(),
},
argTypes: {
activeFiltersCount: { control: 'number' },
Expand Down
4 changes: 4 additions & 0 deletions packages/main/src/components/FilterBar/FilterBarDialog.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,3 +97,7 @@
.inactiveTable {
pointer-events: none;
}

.checkBoxSpacer {
width: calc(var(--_ui5wcr-CheckBoxWidthHeight) - 11px);
}
26 changes: 7 additions & 19 deletions packages/main/src/components/FilterBar/FilterDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,25 +73,12 @@ interface ForceRequiredObject {
addCustomCSSWithScoping(
'ui5-table',
`
:host([data-component-name="FilterBarDialogTable"][data-with-value="false"]) #table,
:host([data-component-name="FilterBarDialogPanelTable"][data-with-value="false"]) #table {
grid-template-columns: var(--_ui5wcr-CheckBoxWidthHeight) minmax(3rem, auto) minmax(3rem, 25%) !important;
}
:host([data-component-name="FilterBarDialogTable"][data-is-grouped]) #no-data-row {
:host([data-component-name="FilterBarDialogTable"][data-is-grouped="true"]) #no-data-row {
display: none;
}
`,
);

addCustomCSSWithScoping(
'ui5-table-header-row',
`
:host([data-component-name="FilterBarDialogGroupTableHeaderRow"]) :first-child {
visibility: hidden;
}
`,
);

type ActiveFilterAttributes = 'all' | 'visible' | 'active' | 'visibleAndActive' | 'mandatory';
const getActiveFilters = (
activeFilterAttribute: ActiveFilterAttributes,
Expand Down Expand Up @@ -609,20 +596,21 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
ref={tableRef}
className={!isListView && classNames.inactiveTable}
data-component-name="FilterBarDialogTable"
data-is-grouped={!isListView}
data-is-grouped={!isListView ? 'true' : 'false'}
data-with-value={`${showValues}`}
noData={!isListView ? <span /> : undefined}
tabIndex={!isListView ? -1 : undefined}
features={
<>
<TableSelectionMulti onChange={handleCheckBoxChange} selected={selected} />
</>
<TableSelectionMulti onChange={handleCheckBoxChange} selected={selected} headerSelector="ClearAll" />
}
headerRow={
<TableHeaderRow
data-component-name={!isListView ? 'FilterBarDialogGroupTableHeaderRow' : 'FilterBarDialogTableHeaderRow'}
>
<TableHeaderCell>{filterText}</TableHeaderCell>
<TableHeaderCell>
{!isListView && <div className={classNames.checkBoxSpacer} />}
{filterText}
</TableHeaderCell>
{!showValues && <TableHeaderCell className={classNames.tHactive}>{activeText}</TableHeaderCell>}
</TableHeaderRow>
}
Expand Down
Loading