fix: fix cypress tests failing because of the PF upgrade

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)
 
 ---
 

cypress/component/DataViewFilters.cy.tsx

@@ -37,7 +37,7 @@ describe('DataViewFilters', () => {
   it('renders DataViewFilters with menu and filter items', () => {
     cy.mount(<DataViewToolbarWithState />);
     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,63 +46,65 @@ describe('DataViewFilters', () => {
   it('can select a filter option', () => {
     cy.mount(<DataViewToolbarWithState />);
     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');
   });
 
   it('responds to input and clears the filters', () => {
     cy.mount(<DataViewToolbarWithState />);
-    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(<DataViewToolbarWithState />);
-    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(<DataViewToolbarWithState />);
-    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(<DataViewToolbarWithState />);
-    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');
 

cypress/component/DataViewTableSorting.cy.tsx

@@ -82,11 +82,15 @@ describe('DataViewTable Sorting with Hook', () => {
       </BrowserRouter>
     );
 
-    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', () => {
       </BrowserRouter>
     );
 
-    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');
   });

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(<DataViewToolbarWithState />);
     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', '');
   });
 

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<ExclamationCircleIcon className='pf-v5-u-ml-sm' color="var(--pf-t--temp--dev--tbd)"/* CODEMODS: original v5 color was --pf-v5-global--danger-color--100 *//></> }, 
+  { cell: <>Branches<ExclamationCircleIcon className='pf-v6-u-ml-sm' color="var(--pf-t--global--color--status--danger--default)"/></> }, 
   'Pull requests', 
   { cell: 'Workspaces', props: { info: { tooltip: 'More information' } } }, 
   { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } },

packages/module/patternfly-docs/content/extensions/data-view/examples/EventsContext/EventsExample.tsx

@@ -47,7 +47,7 @@ const RepositoryDetail: React.FunctionComponent<RepositoryDetailProps> = ({ sele
   return (
     <DrawerPanelContent>
       <DrawerHead>
-        <Title className="pf-v5-u-mb-md" headingLevel="h2" ouiaId="detail-drawer-title">
+        <Title className="pf-v6-u-mb-md" headingLevel="h2" ouiaId="detail-drawer-title">
           Detail of {selectedRepo?.name}
         </Title>
         <Content component="p">Branches: {selectedRepo?.branches}</Content>

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. 

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<DataViewCheckboxFilterProps> = ({
         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}

packages/module/src/DataViewToolbar/DataViewToolbar.tsx

@@ -15,11 +15,11 @@ export interface DataViewToolbarProps extends Omit<PropsWithChildren<ToolbarProp
   actions?: React.ReactNode;
   /** React node to display filters */
   filters?: React.ReactNode;
-  /** React node to display custom filter chips */
-  customChipGroupContent?: React.ReactNode;
+  /** React node to display custom filter labels */
+  customLabelGroupContent?: React.ReactNode;
 }
 
-export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customChipGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
+export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, ouiaId = 'DataViewToolbar', bulkSelect, actions, pagination, filters, customLabelGroupContent, clearAllFilters, children, ...props }: DataViewToolbarProps) => {
   const defaultClearFilters = useRef(
     <ToolbarItem>
       <Button ouiaId={`${ouiaId}-clear-all-filters`} variant="link" onClick={clearAllFilters} isInline>
@@ -28,7 +28,7 @@ export const DataViewToolbar: React.FC<DataViewToolbarProps> = ({ className, oui
     </ToolbarItem>
   );
   return (
-    <Toolbar ouiaId={ouiaId} className={className} customLabelGroupContent={customChipGroupContent ?? defaultClearFilters.current} {...props}>
+    <Toolbar ouiaId={ouiaId} className={className} customLabelGroupContent={customLabelGroupContent ?? defaultClearFilters.current} {...props}>
       <ToolbarContent>
         {bulkSelect && (
           <ToolbarItem data-ouia-component-id={`${ouiaId}-bulk-select`}>