diff --git a/cypress/component/DataView.cy.tsx b/cypress/component/DataView.cy.tsx index 962f6daa..806a7489 100644 --- a/cypress/component/DataView.cy.tsx +++ b/cypress/component/DataView.cy.tsx @@ -57,7 +57,7 @@ describe('DataView', () => { } /> - } /> + } /> ); cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist'); diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx index 58f239d9..095f4f69 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/PredefinedLayoutFullExample.tsx @@ -244,7 +244,8 @@ const RepositoriesTable: FunctionComponent = ({ selected ouiaId='LayoutExampleFooter' pagination={ { ouiaId='LayoutExampleFooter' pagination={ { } /> - } /> + } /> ); }; diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/TreeFilterExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/TreeFilterExample.tsx index 1dfa41fe..6cd33e59 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/TreeFilterExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/TreeFilterExample.tsx @@ -234,7 +234,7 @@ const MyTable: React.FunctionComponent = () => { + } /> diff --git a/packages/module/src/DataViewToolbar/DataViewToolbar.tsx b/packages/module/src/DataViewToolbar/DataViewToolbar.tsx index 3677f79d..6c1c5e92 100644 --- a/packages/module/src/DataViewToolbar/DataViewToolbar.tsx +++ b/packages/module/src/DataViewToolbar/DataViewToolbar.tsx @@ -1,5 +1,6 @@ import { FC, PropsWithChildren, useRef } from 'react'; import { Button, Toolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant, ToolbarProps } from '@patternfly/react-core'; +import { createUseStyles } from 'react-jss'; /** extends ToolbarProps */ export interface DataViewToolbarProps extends Omit, 'ref'> { @@ -21,7 +22,19 @@ export interface DataViewToolbarProps extends Omit = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, toggleGroup, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => { + const classes = useStyles(); const defaultClearFilters = useRef( @@ -53,8 +66,10 @@ export const DataViewToolbar: FC = ({ className, ouiaId = )} {pagination && ( - - {pagination} + + + {pagination} + )} {children} diff --git a/packages/module/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap b/packages/module/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap index ad2980eb..72c0b58f 100644 --- a/packages/module/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap +++ b/packages/module/src/DataViewToolbar/__snapshots__/DataViewToolbar.test.tsx.snap @@ -19,8 +19,295 @@ exports[`DataViewToolbar component should render correctly 1`] = ` class="pf-v6-c-toolbar__content-section" > + + + + + 1 + - + 10 + + + of + + + 0 + + + + + + + + 1 + - + 10 + + + of + + + 0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Clear filters + + + + + + + +