diff --git a/README.md b/README.md index 013f955..da2fdd3 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ export interface MyComponentProps { const useStyles = createUseStyles({ myText: { fontFamily: 'monospace', - fontSize: 'var(--pf-v5-global--icon--FontSize--md)', + fontSize: 'var(--pf-v6-global--icon--FontSize--md)', }, }) @@ -126,7 +126,7 @@ When adding/making changes to a component, always make sure your code is tested: ### Styling: - for styling always use JSS - new classNames should be named in camelCase starting with the name of a given component and following with more details clarifying its purpose/component's subsection to which the class is applied (`actionMenu`, `actionMenuDropdown`, `actionMenuDropdownToggle`, etc.) -- do not use `pf-v5-u-XXX` classes, use CSS variables in a custom class instead (styles for the utility classes are not bundled with the standard patternfly.css - it would require the consumer to import also addons.css) +- do not use `pf-v6-u-XXX` classes, use CSS variables in a custom class instead (styles for the utility classes are not bundled with the standard patternfly.css - it would require the consumer to import also addons.css) --- diff --git a/cypress/component/DataViewFilters.cy.tsx b/cypress/component/DataViewFilters.cy.tsx index cd6d058..b0cdea1 100644 --- a/cypress/component/DataViewFilters.cy.tsx +++ b/cypress/component/DataViewFilters.cy.tsx @@ -37,7 +37,7 @@ describe('DataViewFilters', () => { it('renders DataViewFilters with menu and filter items', () => { cy.mount(); cy.get('[data-ouia-component-id="DataViewFilters"]').should('exist'); - cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click(); + cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click(); cy.contains('Name').should('exist'); cy.contains('Branch').should('exist'); @@ -46,7 +46,7 @@ describe('DataViewFilters', () => { it('can select a filter option', () => { cy.mount(); cy.get('[data-ouia-component-id="DataViewFilters"]').should('contain.text', 'Name'); - cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click(); + cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click(); cy.contains('Branch').click(); cy.get('[data-ouia-component-id="DataViewFilters"]').should('contain.text', 'Branch'); @@ -54,55 +54,57 @@ describe('DataViewFilters', () => { it('responds to input and clears the filters', () => { cy.mount(); - cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click(); + cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click(); cy.contains('Name').click(); cy.get('input[placeholder="Filter by name"]').type('Repository one'); - cy.get('.pf-v5-c-chip__text').should('have.length', 1); + cy.get('.pf-v6-c-label__text').should('have.length', 1); cy.get('input[placeholder="Filter by name"]').clear(); - cy.get('.pf-v5-c-chip__text').should('have.length', 0); + cy.get('.pf-v6-c-label__text').should('have.length', 0); }); - it('displays chips for selected filters', () => { + it('displays labels for selected filters', () => { cy.mount(); - cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click(); + cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click(); cy.contains('Name').click(); cy.get('input[placeholder="Filter by name"]').type('Repository one'); - cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click(); + cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click(); cy.contains('Branch').click(); cy.get('input[placeholder="Filter by branch"]').type('Main branch'); - cy.get('.pf-v5-c-chip__text').should('have.length', 2); - cy.get('.pf-v5-c-chip__text').eq(0).should('contain.text', 'Repository one'); - cy.get('.pf-v5-c-chip__text').eq(1).should('contain.text', 'Main branch'); + cy.get('.pf-v6-c-label__text').should('have.length', 2); + cy.get('.pf-v6-c-label__text').eq(0).should('contain.text', 'Repository one'); + cy.get('.pf-v6-c-label__text').eq(1).should('contain.text', 'Main branch'); }); - it('removes filters by clicking individual chips', () => { + it('removes filters by clicking individual labels', () => { cy.mount(); - cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click(); + cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click(); cy.contains('Name').click(); cy.get('input[placeholder="Filter by name"]').type('Repository one'); - cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click(); + cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click(); cy.contains('Branch').click(); cy.get('input[placeholder="Filter by branch"]').type('Main branch'); - cy.get('[data-ouia-component-id="close"]').should('have.length', 2); + cy.get('[aria-label="Close Repository one"]').should('have.length', 1); + cy.get('[aria-label="Close Main branch"]').should('have.length', 1); - cy.get('[data-ouia-component-id="close"]').first().click(); - cy.get('[data-ouia-component-id="close"]').last().click(); + cy.get('[aria-label="Close Repository one"]').click(); + cy.get('[aria-label="Close Repository one"]').should('have.length', 0); - cy.get('[data-ouia-component-id="close"]').should('have.length', 0); + cy.get('[aria-label="Close Main branch"]').click(); + cy.get('[aria-label="Close Main branch"]').should('have.length', 0); }); it('clears all filters using the clear-all button', () => { cy.mount(); - cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click(); + cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click(); cy.contains('Name').click(); cy.get('input[placeholder="Filter by name"]').type('Repository one'); - cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v5-c-menu-toggle').click(); + cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click(); cy.contains('Branch').click(); cy.get('input[placeholder="Filter by branch"]').type('Main branch'); diff --git a/cypress/component/DataViewTableSorting.cy.tsx b/cypress/component/DataViewTableSorting.cy.tsx index 79cae0f..6800055 100644 --- a/cypress/component/DataViewTableSorting.cy.tsx +++ b/cypress/component/DataViewTableSorting.cy.tsx @@ -82,11 +82,15 @@ describe('DataViewTable Sorting with Hook', () => { ); - cy.get('[data-ouia-component-id="test-table-th-0"]').click(); + cy.get('[data-ouia-component-id="test-table-th-0"]') + .find('button') + .click(); cy.get('[data-ouia-component-id="test-table-td-0-0"]').should('contain', 'Repository five'); cy.get('[data-ouia-component-id="test-table-td-5-0"]').should('contain', 'Repository two'); - cy.get('[data-ouia-component-id="test-table-th-0"]').click(); + cy.get('[data-ouia-component-id="test-table-th-0"]') + .find('button') + .click(); cy.get('[data-ouia-component-id="test-table-td-0-0"]').should('contain', 'Repository two'); cy.get('[data-ouia-component-id="test-table-td-5-0"]').should('contain', 'Repository five'); }); @@ -98,11 +102,15 @@ describe('DataViewTable Sorting with Hook', () => { ); - cy.get('[data-ouia-component-id="test-table-th-4"]').click(); + cy.get('[data-ouia-component-id="test-table-th-4"]') + .find('button') + .click(); cy.get('[data-ouia-component-id="test-table-td-0-4"]').should('contain', '2023-11-01'); cy.get('[data-ouia-component-id="test-table-td-5-4"]').should('contain', '2023-11-06'); - cy.get('[data-ouia-component-id="test-table-th-4"]').click(); + cy.get('[data-ouia-component-id="test-table-th-4"]') + .find('button') + .click(); cy.get('[data-ouia-component-id="test-table-td-0-4"]').should('contain', '2023-11-06'); cy.get('[data-ouia-component-id="test-table-td-5-4"]').should('contain', '2023-11-01'); }); diff --git a/cypress/component/DataViewTextFilter.cy.tsx b/cypress/component/DataViewTextFilter.cy.tsx index 8d67ca4..c8c7215 100644 --- a/cypress/component/DataViewTextFilter.cy.tsx +++ b/cypress/component/DataViewTextFilter.cy.tsx @@ -37,14 +37,14 @@ describe('DataViewTextFilter', () => { .should('have.value', 'Repository one'); }); - it('displays a chip when value is present and removes it on delete', () => { + it('displays a label when value is present and removes it on delete', () => { cy.mount(); cy.get('[data-ouia-component-id="DataViewTextFilter-input"] input').should('have.value', 'Repository one'); - cy.get('.pf-v5-c-chip__text').contains('Repository one'); - cy.get('.pf-m-chip-group button.pf-v5-c-button.pf-m-plain').click(); + cy.get('.pf-v6-c-label__text').contains('Repository one'); + cy.get('.pf-m-label-group button.pf-v6-c-button.pf-m-plain').click(); - cy.get('.pf-v5-c-chip__text').should('not.exist'); + cy.get('.pf-v6-c-label__text').should('not.exist'); cy.get('[data-ouia-component-id="DataViewTextFilter-input"] input').should('have.value', ''); }); diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableExample.tsx index 8805ba9..b9cda39 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Components/DataViewTableExample.tsx @@ -54,7 +54,7 @@ const rows: DataViewTr[] = repositories.map(({ id, name, branches, prs, workspac const columns: DataViewTh[] = [ null, 'Repositories', - { cell: <>Branches }, + { cell: <>Branches }, 'Pull requests', { cell: 'Workspaces', props: { info: { tooltip: 'More information' } } }, { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } }, diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx b/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx index 2afd6fb..1447e00 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx @@ -47,7 +47,7 @@ const RepositoryDetail: React.FunctionComponent = ({ sele return ( - + <Title className="pf-v6-u-mb-md" headingLevel="h2" ouiaId="detail-drawer-title"> Detail of {selectedRepo?.name} Branches: {selectedRepo?.branches} diff --git a/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md b/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md index 066c0e1..3e263c5 100644 --- a/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md +++ b/packages/module/patternfly-docs/content/extensions/data-view/examples/Functionality/Functionality.md @@ -88,7 +88,7 @@ The `useDataViewSelection` hook manages the selection state of the data view. ``` # Filters -Enables filtering of data records in the data view and displays the applied filter chips. +Enables filtering of data records in the data view and displays the applied filter labels. ### Toolbar usage The data view toolbar can include a set of filters by passing a React node to the `filters` property. You can use predefined components `DataViewFilters`, `DataViewTextFilter` and `DataViewCheckboxFilter` to customize and handle filtering directly in the toolbar. The `DataViewFilters` is a wrapper allowing conditional filtering using multiple attributes. If you need just a single filter, you can use `DataViewTextFilter`, `DataViewCheckboxFilter` or a different filter component alone. Props of these filter components are listed at the bottom of this page. diff --git a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx index 86a68ad..e52ff7e 100644 --- a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx +++ b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx @@ -14,8 +14,8 @@ import { import { FilterIcon } from '@patternfly/react-icons'; import { DataViewFilterOption } from '../DataViewFilters'; -const isToolbarChip = (chip: string | ToolbarLabel): chip is ToolbarLabel => - typeof chip === 'object' && 'key' in chip; +const isToolbarLabel = (label: string | ToolbarLabel): label is ToolbarLabel => + typeof label === 'object' && 'key' in label; export const isDataViewFilterOption = (obj: unknown): obj is DataViewFilterOption => !!obj && @@ -117,8 +117,8 @@ export const DataViewCheckboxFilter: React.FC = ({ const activeOption = normalizeOptions.find(option => option.value === item); return ({ key: activeOption?.value as string, node: activeOption?.label }) })} - deleteLabel={(_, chip) => - onChange?.(undefined, value.filter(item => item !== (isToolbarChip(chip) ? chip.key : chip))) + deleteLabel={(_, label) => + onChange?.(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label))) } categoryName={title} showToolbarItem={showToolbarItem} diff --git a/packages/module/src/DataViewToolbar/DataViewToolbar.tsx b/packages/module/src/DataViewToolbar/DataViewToolbar.tsx index b614aae..1258528 100644 --- a/packages/module/src/DataViewToolbar/DataViewToolbar.tsx +++ b/packages/module/src/DataViewToolbar/DataViewToolbar.tsx @@ -15,11 +15,11 @@ export interface DataViewToolbarProps extends Omit = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customChipGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => { +export const DataViewToolbar: React.FC = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => { const defaultClearFilters = useRef(