diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 029cdff08f7..ec332722988 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -54,7 +54,7 @@ "tslib": "^2.7.0" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-prerelease.7", + "@patternfly/patternfly": "6.0.0-prerelease.13", "case-anything": "^2.1.13", "css": "^3.0.0", "fs-extra": "^11.2.0" diff --git a/packages/react-core/src/components/DataList/DataListAction.tsx b/packages/react-core/src/components/DataList/DataListAction.tsx index 2c3085e859d..9ab2c927d73 100644 --- a/packages/react-core/src/components/DataList/DataListAction.tsx +++ b/packages/react-core/src/components/DataList/DataListAction.tsx @@ -23,8 +23,6 @@ export interface DataListActionProps extends Omit = ({ @@ -35,12 +33,10 @@ export const DataListAction: React.FunctionComponent = ({ id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, - - isPlainButtonAction, ...props }: DataListActionProps) => (
- {isPlainButtonAction ?
{children}
: children} + {children}
); DataListAction.displayName = 'DataListAction'; diff --git a/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx b/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx index 38745263caa..9171561fe3c 100644 --- a/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx +++ b/packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx @@ -1,5 +1,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; + import { DataListAction } from '../DataListAction'; import styles from '@patternfly/react-styles/css/components/DataList/data-list'; @@ -15,38 +17,35 @@ test('Renders to match snapshot', () => { test(`Renders with default class ${styles.dataListItemAction}`, () => { render( - + test ); - expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction, { exact: true }); + expect(screen.getByTestId('actions')).toHaveClass(styles.dataListItemAction, { exact: true }); }); test(`Renders with custom class when className is passed`, () => { render( - + test ); - expect(screen.getByText('test')).toHaveClass('test-class'); + expect(screen.getByTestId('actions')).toHaveClass('test-class'); }); test(`Renders with spread props`, () => { render( - - test - - ); - expect(screen.getByText('test')).toHaveAttribute('dir', 'rtl'); -}); - -test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = true`, () => { - render( - + test ); - expect(screen.getByText('test')).toHaveClass(styles.dataListAction); + expect(screen.getByTestId('actions')).toHaveAttribute('dir', 'rtl'); }); ['hidden', 'visible'].forEach((vis) => { @@ -58,18 +57,19 @@ test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = tru aria-labelledby="check-action-item2 check-action-action2" id="check-action-action2" aria-label="Actions" + data-testid="actions" > test ); if (visMod === 'hidden') { - expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}`]); + expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}`]); } - expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnSm`]); - expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnMd`]); - expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnLg`]); - expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnXl`]); - expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}On_2xl`]); + expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnSm`]); + expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnMd`]); + expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnLg`]); + expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnXl`]); + expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}On_2xl`]); }); }); diff --git a/packages/react-core/src/components/DataList/examples/DataListActions.tsx b/packages/react-core/src/components/DataList/examples/DataListActions.tsx index 68b5d53f1ec..355d8ae33f6 100644 --- a/packages/react-core/src/components/DataList/examples/DataListActions.tsx +++ b/packages/react-core/src/components/DataList/examples/DataListActions.tsx @@ -75,7 +75,6 @@ export const DataListActions: React.FunctionComponent = () => { aria-labelledby="multi-actions-item1 multi-actions-action1" id="multi-actions-action1" aria-label="Actions" - isPlainButtonAction > { aria-labelledby="check-action-item1 check-action-action1" id="check-action-action1" aria-label="Actions" - isPlainButtonAction > { aria-labelledby="check-action-item2 check-action-action2" id="check-action-action2" aria-label="Actions" - isPlainButtonAction > { aria-labelledby="check-action-item3 check-action-action3" id="check-action-action3" aria-label="Actions" - isPlainButtonAction > { aria-labelledby="clickable-action-item1 clickable-action-action1" id="clickable-action-action1" aria-label="Actions" - isPlainButtonAction > { aria-labelledby="clickable-actions-item2 clickable-actions-action2" id="clickable-actions-action2" aria-label="Actions" - isPlainButtonAction > { ]} /> - + { ]} /> - + { ]} /> - + { ]} /> - + { ]} /> - + { ]} /> - + { aria-labelledby="width-ex2-item1 width-ex2-action1" id="width-ex2-action1" aria-label="Actions" - isPlainButtonAction > { aria-labelledby="width-ex3-item1 width-ex3-action1" id="width-ex3-action1" aria-label="Actions" - isPlainButtonAction > ]} /> - + ]} /> - + ]} /> - + { cy.get('#toggle-id-0').then((toggleButton: JQuery) => { cy.clock(); cy.wrap(toggleButton).type('{enter}', { waitForAnimations: true }); - cy.tick(200); + cy.tick(1000); cy.get('.notification-0.pf-v6-c-menu').should('exist'); cy.wrap(toggleButton).type('{esc}', { waitForAnimations: true }); - cy.tick(200); + cy.tick(1000); cy.get('.notification-0.pf-v6-c-menu').should('not.exist'); }); // Verify the group header keyboard interactivity opens/closes the whole group diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx index 888efe428a1..148a36ce629 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx @@ -69,7 +69,6 @@ class DataListDemo extends React.Component { aria-labelledby="selectable-action-item1 selectable-action-action1" id="selectable-action-action1" aria-label="Actions" - isPlainButtonAction >