Skip to content

feat(Toolbar): support customizing text in ToolbarChipGroupContent #6694

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
nicolethoen merged 3 commits into from
Dec 22, 2021
Merged

feat(Toolbar): support customizing text in ToolbarChipGroupContent #6694

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c25d9a7
feat(Toolbar): support customizing text in ToolbarChipGroupContent
boaz0 Dec 12, 2021
ae97c32
fixup! feat(Toolbar): support customizing text in ToolbarChipGroupCon…
boaz0 Dec 12, 2021
0af46b9
Add test spec for number of filters text
boaz0 Dec 20, 2021
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
4 changes: 4 additions & 0 deletions packages/react-core/src/components/Toolbar/Toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
'2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
};
/** Text to display in the total number of applied filters ToolbarFilter */
numberOfFiltersText?: (numberOfFilters: number) => string;
}

export interface ToolbarState {
Expand Down Expand Up @@ -125,6 +127,7 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
usePageInsets,
isSticky,
ouiaId,
numberOfFiltersText,
...props
} = this.props;

Expand Down Expand Up @@ -171,6 +174,7 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
showClearFiltersButton={showClearFiltersButton}
clearFiltersButtonText={clearFiltersButtonText}
numberOfFilters={numberOfFilters}
numberOfFiltersText={numberOfFiltersText}
collapseListedFiltersBreakpoint={collapseListedFiltersBreakpoint}
/>
</ToolbarContext.Provider>
Expand Down
8 changes: 6 additions & 2 deletions packages/react-core/src/components/Toolbar/ToolbarChipGroupContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ export interface ToolbarChipGroupContentProps extends React.HTMLProps<HTMLDivEle
clearFiltersButtonText?: string;
/** Total number of filters currently being applied across all ToolbarFilter components */
numberOfFilters: number;
/** Text to display in the total number of applied filters ToolbarFilter */
numberOfFiltersText?: (numberOfFilters: number) => string;
/** The breakpoint at which the listed filters in chip groups are collapsed down to a summary */
collapseListedFiltersBreakpoint?: 'all' | 'md' | 'lg' | 'xl' | '2xl';
}
Expand All @@ -33,7 +35,8 @@ export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupCon
static displayName = 'ToolbarChipGroupContent';
static defaultProps: PickOptional<ToolbarChipGroupContentProps> = {
clearFiltersButtonText: 'Clear all filters',
collapseListedFiltersBreakpoint: 'lg'
collapseListedFiltersBreakpoint: 'lg',
numberOfFiltersText: (numberOfFilters: number) => `${numberOfFilters} filters applied`
};

render() {
Expand All @@ -46,6 +49,7 @@ export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupCon
clearFiltersButtonText,
collapseListedFiltersBreakpoint,
numberOfFilters,
numberOfFiltersText,
...props
} = this.props;

Expand Down Expand Up @@ -79,7 +83,7 @@ export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupCon
/>
{collapseListedFilters && numberOfFilters > 0 && !isExpanded && (
<ToolbarGroup>
<ToolbarItem>{numberOfFilters} filters applied</ToolbarItem>
<ToolbarItem>{numberOfFiltersText(numberOfFilters)}</ToolbarItem>
</ToolbarGroup>
)}
{showClearFiltersButton && !isExpanded && (
Expand Down
1 change: 1 addition & 0 deletions ...react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/Toolbar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ exports[`Toolbar should match snapshot (auto-generated) 1`] = `
collapseListedFiltersBreakpoint="md"
isExpanded={true}
numberOfFilters={0}
numberOfFiltersText={[Function]}
showClearFiltersButton={false}
/>
</ContextProvider>
Expand Down
2 changes: 2 additions & 0 deletions ...eact-core/src/components/Toolbar/__tests__/__snapshots__/ToolbarToggleGroup.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ exports[`Toolbar should render inset 1`] = `
collapseListedFiltersBreakpoint="lg"
isExpanded={false}
numberOfFilters={0}
numberOfFiltersText={[Function]}
showClearFiltersButton={false}
>
<div
Expand Down Expand Up @@ -255,6 +256,7 @@ exports[`Toolbar should render with page inset flag 1`] = `
collapseListedFiltersBreakpoint="lg"
isExpanded={false}
numberOfFilters={0}
numberOfFiltersText={[Function]}
showClearFiltersButton={false}
>
<div
Expand Down
1 change: 1 addition & 0 deletions packages/react-integration/cypress/integration/toolbar.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ describe('Data Toolbar Demo Test', () => {
it('displays X filters applied message', () => {
cy.get('.pf-m-chip-container .pf-m-chip-group').should('not.exist');
cy.get('.pf-c-toolbar__item').should('contain.text', 'filters applied');
cy.get('.pf-c-toolbar__item').should('contain.text', 'Applied filters: ');
cy.get('.pf-c-toolbar__item .pf-c-button').should('be.visible');
cy.get('.pf-c-toolbar__item .pf-c-chip-group__close').should('not.be.visible');
cy.get('.pf-c-toolbar__item .pf-c-button').contains('Clear filters');
Expand Down
9 changes: 9 additions & 0 deletions packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,6 +416,15 @@ export class ToolbarDemo extends React.Component<ToolbarProps, ToolbarState> {
>
<ToolbarContent>{toolbarItems}</ToolbarContent>
</Toolbar>
<Toolbar
id="toolbar-number-of-filters-text"
clearAllFilters={this.onDelete}
className="pf-m-toggle-group-container"
clearFiltersButtonText="Clear filters"
numberOfFiltersText={numOfFilters => `Applied filters: ${numOfFilters}`}
>
<ToolbarContent>{toolbarItems}</ToolbarContent>
</Toolbar>
</React.Fragment>
);
}
Expand Down
2 changes: 2 additions & 0 deletions ...topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -619,6 +619,7 @@ exports[`TopologyControlBar should accept button options correctly 1`] = `
collapseListedFiltersBreakpoint="lg"
isExpanded={false}
numberOfFilters={0}
numberOfFiltersText={[Function]}
showClearFiltersButton={false}
>
<div
Expand Down Expand Up @@ -1497,6 +1498,7 @@ exports[`TopologyControlBar should display the default controls correctly 1`] =
collapseListedFiltersBreakpoint="lg"
isExpanded={false}
numberOfFilters={0}
numberOfFiltersText={[Function]}
showClearFiltersButton={false}
>
<div
Expand Down
5 changes: 5 additions & 0 deletions packages/react-topology/src/components/TopologyView/__snapshots__/TopologyView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,7 @@ exports[`TopologyView should display resizable topology sidebar correctly 1`] =
collapseListedFiltersBreakpoint="lg"
isExpanded={false}
numberOfFilters={0}
numberOfFiltersText={[Function]}
showClearFiltersButton={false}
>
<div
Expand Down Expand Up @@ -558,6 +559,7 @@ exports[`TopologyView should display topology correctly 1`] = `
collapseListedFiltersBreakpoint="lg"
isExpanded={false}
numberOfFilters={0}
numberOfFiltersText={[Function]}
showClearFiltersButton={false}
>
<div
Expand Down Expand Up @@ -820,6 +822,7 @@ exports[`TopologyView should display topology sidebar correctly 1`] = `
collapseListedFiltersBreakpoint="lg"
isExpanded={false}
numberOfFilters={0}
numberOfFiltersText={[Function]}
showClearFiltersButton={false}
>
<div
Expand Down Expand Up @@ -1086,6 +1089,7 @@ exports[`TopologyView should display topology w/ open resizable sidebar correctl
collapseListedFiltersBreakpoint="lg"
isExpanded={false}
numberOfFilters={0}
numberOfFiltersText={[Function]}
showClearFiltersButton={false}
>
<div
Expand Down Expand Up @@ -1434,6 +1438,7 @@ exports[`TopologyView should display topology w/ open sidebar correctly 1`] = `
collapseListedFiltersBreakpoint="lg"
isExpanded={false}
numberOfFilters={0}
numberOfFiltersText={[Function]}
showClearFiltersButton={false}
>
<div
Expand Down