fix(datalist): actions wrapper (#10939)

* fix(datalist): actions wrapper * updated snapshot tests * update demo app * bump core versions * remove data list action wrapper * fix failing test
patternfly · Sep 25, 2024 · 833465f · 833465f
1 parent 6e93d43
commit 833465f
Show file tree

Hide file tree

Showing 17 changed files with 47 additions and 105 deletions.
diff --git 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
@@ -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> = ({
@@ -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';
diff --git 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(
-    <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) => {
@@ -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`]);
   });
 });
diff --git 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
             >
               <Dropdown
                 popperProps={{ position: 'right' }}

diff --git a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx b/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
@@ -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' }}
@@ -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' }}
@@ -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' }}

diff --git a/packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx b/packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx
@@ -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' }}
@@ -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' }}

diff --git a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
@@ -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}
@@ -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}
@@ -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}

diff --git a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
@@ -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}
@@ -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}
@@ -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}

diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
@@ -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' }}
@@ -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' }}

diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
@@ -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}
@@ -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}
@@ -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}

diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
@@ -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:^",

diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
@@ -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"
   },

diff --git a/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts b/packages/react-integration/cypress/integration/notificationdrawergroups.spec.ts
@@ -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

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
@@ -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"

diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
@@ -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"
   },

diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
@@ -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"
   }