Skip to content

fix(datalist): actions wrapper #10939

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
thatblindgeye merged 6 commits into from
Sep 25, 2024
Merged

fix(datalist): actions wrapper #10939

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f4e141a
fix(datalist): actions wrapper
tlabaj Sep 5, 2024
8a10376
updated snapshot tests
tlabaj Sep 6, 2024
a9e76f4
update demo app
tlabaj Sep 6, 2024
0eff6a3
bump core versions
tlabaj Sep 24, 2024
5a32cdd
remove data list action wrapper
tlabaj Sep 24, 2024
7fa793e
fix failing test
tlabaj Sep 25, 2024
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
2 changes: 1 addition & 1 deletion packages/react-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
6 changes: 1 addition & 5 deletions packages/react-core/src/components/DataList/DataListAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ export interface DataListActionProps extends Omit<React.HTMLProps<HTMLDivElement
xl?: 'hidden' | 'visible';
'2xl'?: 'hidden' | 'visible';
};
/** Flag to indicate that the action is a plain button (e.g. kebab dropdown toggle) so that styling is applied to align the button */
isPlainButtonAction?: boolean;
}

export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
Expand All @@ -35,12 +33,10 @@ export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
id,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,

isPlainButtonAction,
...props
}: DataListActionProps) => (
<div className={css(styles.dataListItemAction, formatBreakpointMods(visibility, styles), className)} {...props}>
{isPlainButtonAction ? <div className={css(styles.dataListAction)}>{children}</div> : children}
{children}
</div>
);
DataListAction.displayName = 'DataListAction';
42 changes: 21 additions & 21 deletions packages/react-core/src/components/DataList/__tests__/DataListAction.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -15,38 +17,35 @@ test('Renders to match snapshot', () => {

test(`Renders with default class ${styles.dataListItemAction}`, () => {
render(
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
<DataListAction aria-label="Actions" data-testid="actions" aria-labelledby="ex-action" id="ex-action">
test
</DataListAction>
);
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(
<DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
<DataListAction
aria-label="Actions"
data-testid="actions"
aria-labelledby="ex-action"
id="ex-action"
className="test-class"
>
test
</DataListAction>
);
expect(screen.getByText('test')).toHaveClass('test-class');
expect(screen.getByTestId('actions')).toHaveClass('test-class');
});

test(`Renders with spread props`, () => {
render(
<DataListAction dir="rtl" aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
test
</DataListAction>
);
expect(screen.getByText('test')).toHaveAttribute('dir', 'rtl');
});

test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = true`, () => {
render(
<DataListAction id="id" aria-label="Actions" aria-labelledby="ex-action" isPlainButtonAction>
<DataListAction dir="rtl" data-testid="actions" aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
test
</DataListAction>
);
expect(screen.getByText('test')).toHaveClass(styles.dataListAction);
expect(screen.getByTestId('actions')).toHaveAttribute('dir', 'rtl');
});

['hidden', 'visible'].forEach((vis) => {
Expand All @@ -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
</DataListAction>
);

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`]);
});
});
Copy link
Collaborator

@wise-king-sullyman wise-king-sullyman Sep 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a test which asserts that the children of the DataListAction now have the dataListAction class?

1 change: 0 additions & 1 deletion packages/react-core/src/components/DataList/examples/DataListActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
>
<Dropdown
popperProps={{ position: 'right' }}
Expand Down
3 changes: 0 additions & 3 deletions packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
aria-labelledby="check-action-item1 check-action-action1"
id="check-action-action1"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
popperProps={{ position: 'right' }}
Expand Down Expand Up @@ -129,7 +128,6 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
aria-labelledby="check-action-item2 check-action-action2"
id="check-action-action2"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
popperProps={{ position: 'right' }}
Expand Down Expand Up @@ -194,7 +192,6 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
aria-labelledby="check-action-item3 check-action-action3"
id="check-action-action3"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
popperProps={{ position: 'right' }}
Expand Down
2 changes: 0 additions & 2 deletions packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ export const DataListClickableRows: React.FunctionComponent = () => {
aria-labelledby="clickable-action-item1 clickable-action-action1"
id="clickable-action-action1"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
popperProps={{ position: 'right' }}
Expand Down Expand Up @@ -116,7 +115,6 @@ export const DataListClickableRows: React.FunctionComponent = () => {
aria-labelledby="clickable-actions-item2 clickable-actions-action2"
id="clickable-actions-action2"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
popperProps={{ position: 'right' }}
Expand Down
21 changes: 3 additions & 18 deletions packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,12 +81,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="ex-item1 ex-action1"
id="ex-action1"
aria-label="Actions"
isPlainButtonAction
>
<DataListAction aria-labelledby="ex-item1 ex-action1" id="ex-action1" aria-label="Actions">
<Dropdown
popperProps={{ position: 'right' }}
onSelect={onSelect1}
Expand Down Expand Up @@ -157,12 +152,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="ex-item2 ex-action2"
id="ex-action2"
aria-label="Actions"
isPlainButtonAction
>
<DataListAction aria-labelledby="ex-item2 ex-action2" id="ex-action2" aria-label="Actions">
<Dropdown
popperProps={{ position: 'right' }}
onSelect={onSelect2}
Expand Down Expand Up @@ -233,12 +223,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="ex-item3 ex-action3"
id="ex-action3"
aria-label="Actions"
isPlainButtonAction
>
<DataListAction aria-labelledby="ex-item3 ex-action3" id="ex-action3" aria-label="Actions">
<Dropdown
popperProps={{ position: 'right' }}
onSelect={onSelect3}
Expand Down
21 changes: 3 additions & 18 deletions packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="m-ex-item1 m-ex-action1"
id="m-ex-action1"
aria-label="Actions"
isPlainButtonAction
>
<DataListAction aria-labelledby="m-ex-item1 m-ex-action1" id="m-ex-action1" aria-label="Actions">
<Dropdown
popperProps={{ position: 'right' }}
onSelect={onSelect1}
Expand Down Expand Up @@ -161,12 +156,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="m-ex-item2 m-ex-action2"
id="m-ex-action2"
aria-label="Actions"
isPlainButtonAction
>
<DataListAction aria-labelledby="m-ex-item2 m-ex-action2" id="m-ex-action2" aria-label="Actions">
<Dropdown
popperProps={{ position: 'right' }}
onSelect={onSelect2}
Expand Down Expand Up @@ -227,12 +217,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="m-ex-item3 m-ex-action3"
id="m-ex-action3"
aria-label="Actions"
isPlainButtonAction
>
<DataListAction aria-labelledby="m-ex-item3 m-ex-action3" id="m-ex-action3" aria-label="Actions">
<Dropdown
popperProps={{ position: 'right' }}
onSelect={onSelect3}
Expand Down
2 changes: 0 additions & 2 deletions packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
aria-labelledby="width-ex2-item1 width-ex2-action1"
id="width-ex2-action1"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
popperProps={{ position: 'right' }}
Expand Down Expand Up @@ -167,7 +166,6 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
aria-labelledby="width-ex3-item1 width-ex3-action1"
id="width-ex3-action1"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
popperProps={{ position: 'right' }}
Expand Down
21 changes: 3 additions & 18 deletions packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,12 +169,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="ex-item1 ex-action1"
id="ex-action1"
aria-label="Actions"
isPlainButtonAction
>
<DataListAction aria-labelledby="ex-item1 ex-action1" id="ex-action1" aria-label="Actions">
<Dropdown
isOpen={isOpen1}
onSelect={onSelect1}
Expand Down Expand Up @@ -251,12 +246,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="ex-item2 ex-action2"
id="ex-action2"
aria-label="Actions"
isPlainButtonAction
>
<DataListAction aria-labelledby="ex-item2 ex-action2" id="ex-action2" aria-label="Actions">
<Dropdown
isOpen={isOpen2}
onSelect={onSelect2}
Expand Down Expand Up @@ -333,12 +323,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="ex-item3 ex-action3"
id="ex-action3"
aria-label="Actions"
isPlainButtonAction
>
<DataListAction aria-labelledby="ex-item3 ex-action3" id="ex-action3" aria-label="Actions">
<Dropdown
isOpen={isOpen3}
onSelect={onSelect3}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"test:a11y": "patternfly-a11y --config patternfly-a11y.config"
},
"dependencies": {
"@patternfly/patternfly": "6.0.0-prerelease.7",
"@patternfly/patternfly": "6.0.0-prerelease.13",
"@patternfly/react-charts": "workspace:^",
"@patternfly/react-code-editor": "workspace:^",
"@patternfly/react-core": "workspace:^",
Expand Down
2 changes: 1 addition & 1 deletion packages/react-icons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@patternfly/patternfly": "6.0.0-prerelease.7",
"@patternfly/patternfly": "6.0.0-prerelease.13",
"fs-extra": "^11.2.0",
"tslib": "^2.7.0"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@ describe('Notification Drawer Groups Demo Test', () => {
cy.get('#toggle-id-0').then((toggleButton: JQuery<HTMLButtonElement>) => {
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
Expand Down
1 change: 0 additions & 1 deletion packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ class DataListDemo extends React.Component<DataListProps, DataListState> {
aria-labelledby="selectable-action-item1 selectable-action-action1"
id="selectable-action-action1"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
id="dropdown"
Expand Down
2 changes: 1 addition & 1 deletion packages/react-styles/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"clean": "rimraf dist css"
},
"devDependencies": {
"@patternfly/patternfly": "6.0.0-prerelease.7",
"@patternfly/patternfly": "6.0.0-prerelease.13",
"change-case": "^5.4.4",
"fs-extra": "^11.2.0"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-tokens/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"clean": "rimraf dist"
},
"devDependencies": {
"@patternfly/patternfly": "6.0.0-prerelease.7",
"@patternfly/patternfly": "6.0.0-prerelease.13",
"css": "^3.0.0",
"fs-extra": "^11.2.0"
}
Expand Down
Loading