@patternfly/react-core 5.0.0-alpha.87 → 5.0.0-alpha.88

package/src/components/Card/examples/CardLegacySelectable.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  Divider
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardLegacySelectable: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
@@ -32,44 +38,57 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
     setSelected(newSelected);
   };
 
-  const onToggle = (event: any, isOpen: boolean) => {
-    event.stopPropagation();
-    setIsKebabOpen(isOpen);
+  const onToggle = (event: React.MouseEvent) => {
+    event?.stopPropagation();
+    setIsKebabOpen(!isKebabOpen);
   };
 
-  const onSelect = (event: React.SyntheticEvent<HTMLDivElement> | undefined) => {
+  const onSelect = (event: React.MouseEvent | undefined) => {
     event?.stopPropagation();
     setIsKebabOpen(!isKebabOpen);
   };
 
-  const dropdownItems = [
-    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="action" component="button">
-      Action
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled link" isDisabled>
-      Disabled Link
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
-      Disabled Action
-    </DropdownItemDeprecated>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="separated action" component="button">
-      Separated Action
-    </DropdownItemDeprecated>
-  ];
+  const dropdownItems = (
+    <>
+      <DropdownItem key="action">Action</DropdownItem>
+      {/* Prevent default onClick functionality for example purposes */}
+      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Link
+      </DropdownItem>
+      <DropdownItem key="disabled action" isDisabled>
+        Disabled Action
+      </DropdownItem>
+      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
+        Disabled Link
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem key="separated action">Separated Action</DropdownItem>
+      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Separated Link
+      </DropdownItem>
+    </>
+  );
 
   const headerActions = (
     <>
-      <DropdownDeprecated
+      <Dropdown
         onSelect={onSelect}
-        toggle={<KebabToggle onToggle={onToggle} />}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={isKebabOpen}
+            onClick={onToggle}
+            variant="plain"
+            aria-label="Card legacy selectable example kebab toggle"
+          >
+            <EllipsisVIcon aria-hidden="true" />
+          </MenuToggle>
+        )}
         isOpen={isKebabOpen}
-        isPlain
-        dropdownItems={dropdownItems}
-        position={'right'}
-      />
+        onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
     </>
   );
 

package/src/components/Card/examples/CardOnlyActionsInCardHead.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
-import { Checkbox, Card, CardHeader, CardBody } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  Checkbox,
+  Card,
+  CardHeader,
+  CardBody,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  Divider
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -18,34 +24,47 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
     setIsChecked(checked);
   };
 
-  const dropdownItems = [
-    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="action" component="button">
-      Action
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled link" isDisabled>
-      Disabled Link
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
-      Disabled Action
-    </DropdownItemDeprecated>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="separated action" component="button">
-      Separated Action
-    </DropdownItemDeprecated>
-  ];
+  const dropdownItems = (
+    <>
+      <DropdownItem key="action">Action</DropdownItem>
+      {/* Prevent default onClick functionality for example purposes */}
+      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Link
+      </DropdownItem>
+      <DropdownItem key="disabled action" isDisabled>
+        Disabled Action
+      </DropdownItem>
+      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
+        Disabled Link
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem key="separated action">Separated Action</DropdownItem>
+      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Separated Link
+      </DropdownItem>
+    </>
+  );
 
   const headerActions = (
     <>
-      <DropdownDeprecated
+      <Dropdown
         onSelect={onSelect}
-        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={isOpen}
+            onClick={() => setIsOpen(!isOpen)}
+            variant="plain"
+            aria-label="Card header without title example kebab toggle"
+          >
+            <EllipsisVIcon aria-hidden="true" />
+          </MenuToggle>
+        )}
         isOpen={isOpen}
-        isPlain
-        dropdownItems={dropdownItems}
-        position={'right'}
-      />
+        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
       <Checkbox
         isChecked={isChecked}
         onChange={(_event, checked) => onClick(checked)}

package/src/components/Card/examples/CardSelectable.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  Divider
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardSelectable: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
@@ -32,47 +38,57 @@ export const CardSelectable: React.FunctionComponent = () => {
     setSelected(newSelected);
   };
 
-  const onToggle = (
-    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
-    isOpen: boolean
-  ) => {
-    event.stopPropagation();
-    setIsKebabOpen(isOpen);
+  const onToggle = (event: React.MouseEvent | undefined) => {
+    event?.stopPropagation();
+    setIsKebabOpen(!isKebabOpen);
   };
 
-  const onSelect = (event: React.SyntheticEvent<HTMLDivElement> | undefined) => {
+  const onSelect = (event: React.MouseEvent | undefined) => {
     event?.stopPropagation();
     setIsKebabOpen(false);
   };
 
-  const dropdownItems = [
-    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="action" component="button">
-      Action
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled link" isDisabled>
-      Disabled Link
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
-      Disabled Action
-    </DropdownItemDeprecated>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="separated action" component="button">
-      Separated Action
-    </DropdownItemDeprecated>
-  ];
+  const dropdownItems = (
+    <>
+      <DropdownItem key="action">Action</DropdownItem>
+      {/* Prevent default onClick functionality for example purposes */}
+      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Link
+      </DropdownItem>
+      <DropdownItem key="disabled action" isDisabled>
+        Disabled Action
+      </DropdownItem>
+      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
+        Disabled Link
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem key="separated action">Separated Action</DropdownItem>
+      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Separated Link
+      </DropdownItem>
+    </>
+  );
 
   const headerActions = (
     <>
-      <DropdownDeprecated
+      <Dropdown
         onSelect={onSelect}
-        toggle={<KebabToggle onToggle={onToggle} />}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={isKebabOpen}
+            onClick={onToggle}
+            variant="plain"
+            aria-label="Card selectable example kebab toggle"
+          >
+            <EllipsisVIcon aria-hidden="true" />
+          </MenuToggle>
+        )}
         isOpen={isKebabOpen}
-        isPlain
-        dropdownItems={dropdownItems}
-        position={'right'}
-      />
+        onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
     </>
   );
 

package/src/components/Card/examples/CardWithImageAndActions.tsx

@@ -1,11 +1,20 @@
 import React from 'react';
-import { Brand, Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  Brand,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Checkbox,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  Divider
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import pfLogo from './pfLogo.svg';
 
 export const CardWithImageAndActions: React.FunctionComponent = () => {
@@ -23,34 +32,47 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
     setHasNoOffset(checked);
   };
 
-  const dropdownItems = [
-    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="action" component="button">
-      Action
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled link" isDisabled>
-      Disabled Link
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
-      Disabled Action
-    </DropdownItemDeprecated>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="separated action" component="button">
-      Separated Action
-    </DropdownItemDeprecated>
-  ];
+  const dropdownItems = (
+    <>
+      <DropdownItem key="action">Action</DropdownItem>
+      {/* Prevent default onClick functionality for example purposes */}
+      <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Link
+      </DropdownItem>
+      <DropdownItem key="disabled action" isDisabled>
+        Disabled Action
+      </DropdownItem>
+      <DropdownItem key="disabled link" isDisabled to="#" onClick={(event: any) => event.preventDefault()}>
+        Disabled Link
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem key="separated action">Separated Action</DropdownItem>
+      <DropdownItem key="separated link" to="#" onClick={(event: any) => event.preventDefault()}>
+        Separated Link
+      </DropdownItem>
+    </>
+  );
 
   const headerActions = (
     <>
-      <DropdownDeprecated
+      <Dropdown
         onSelect={onSelect}
-        toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={isOpen}
+            onClick={() => setIsOpen(!isOpen)}
+            variant="plain"
+            aria-label="Card header images and actions example kebab toggle"
+          >
+            <EllipsisVIcon aria-hidden="true" />
+          </MenuToggle>
+        )}
         isOpen={isOpen}
-        isPlain
-        dropdownItems={dropdownItems}
-        position={'right'}
-      />
+        onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      >
+        <DropdownList>{dropdownItems}</DropdownList>
+      </Dropdown>
       <Checkbox
         isChecked={isChecked}
         onChange={(_event, checked) => onClick(checked)}

package/src/components/DataList/__tests__/DataList.test.tsx

@@ -12,7 +12,8 @@ import { DataListItemCells } from '../DataListItemCells';
 import { DataListItemRow } from '../DataListItemRow';
 import { DataListContent } from '../DataListContent';
 import { Button } from '../../Button';
-import { DropdownItem, Dropdown, KebabToggle, DropdownPosition } from '../../../deprecated/components/Dropdown';
+import { Dropdown, DropdownList, DropdownItem } from '../../Dropdown';
+import { MenuToggle } from '../../MenuToggle';
 
 describe('DataList', () => {
   test('List default', () => {
@@ -276,19 +277,17 @@ describe('DataList', () => {
   test('DataListAction dropdown', () => {
     const { asFragment } = render(
       <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" isPlainButtonAction>
-        <Dropdown
-          isPlain
-          position={DropdownPosition.right}
-          toggle={<KebabToggle />}
-          dropdownItems={[
-            <DropdownItem component="button" onClick={jest.fn()} key="action-1">
+        <Dropdown toggle={(toggleRef) => <MenuToggle ref={toggleRef} />}>
+          <DropdownList>
+            <DropdownItem onClick={jest.fn()} key="action-1">
               action-1
-            </DropdownItem>,
-            <DropdownItem component="button" onClick={jest.fn()} key="action-2">
+            </DropdownItem>
+            ,
+            <DropdownItem onClick={jest.fn()} key="action-2">
               action-2
             </DropdownItem>
-          ]}
-        />
+          </DropdownList>
+        </Dropdown>
       </DataListAction>
     );
     expect(asFragment()).toMatchSnapshot();

package/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap

@@ -129,32 +129,99 @@ exports[`DataList DataListAction dropdown 1`] = `
     <div
       class="pf-c-data-list__action"
     >
+      <button
+        aria-expanded="false"
+        class="pf-c-menu-toggle"
+        type="button"
+      >
+        <span
+          class="pf-c-menu-toggle__text"
+        />
+        <span
+          class="pf-c-menu-toggle__controls"
+        >
+          <span
+            class="pf-c-menu-toggle__toggle-icon"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 320 512"
+            >
+              <path
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
+          </span>
+        </span>
+      </button>
       <div
-        class="pf-c-dropdown pf-m-align-right"
+        class="pf-c-menu"
         data-ouia-component-id="OUIA-Generated-Dropdown-1"
         data-ouia-component-type="PF4/Dropdown"
         data-ouia-safe="true"
+        style="position: absolute; left: 0px; top: 0px; z-index: 9999;"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="true"
-          aria-label="Actions"
-          class="pf-c-dropdown__toggle pf-m-plain"
-          id="pf-dropdown-toggle-id-0"
-          type="button"
+        <div
+          class="pf-c-menu__content"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 192 512"
+          <ul
+            class="pf-c-menu__list"
+            role="menu"
           >
-            <path
-              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-            />
-          </svg>
-        </button>
+            <li
+              class="pf-c-menu__list-item"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-1"
+              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-safe="true"
+              role="none"
+            >
+              <button
+                class="pf-c-menu__item"
+                role="menuitem"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="pf-c-menu__item-main"
+                >
+                  <span
+                    class="pf-c-menu__item-text"
+                  >
+                    action-1
+                  </span>
+                </span>
+              </button>
+            </li>
+            ,
+            <li
+              class="pf-c-menu__list-item"
+              data-ouia-component-id="OUIA-Generated-DropdownItem-2"
+              data-ouia-component-type="PF4/DropdownItem"
+              data-ouia-safe="true"
+              role="none"
+            >
+              <button
+                class="pf-c-menu__item"
+                role="menuitem"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="pf-c-menu__item-main"
+                >
+                  <span
+                    class="pf-c-menu__item-text"
+                  >
+                    action-2
+                  </span>
+                </span>
+              </button>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>

package/src/components/DataList/examples/DataList.md

@@ -18,15 +18,10 @@ propComponents:
   ]
 ---
 
-import {
-Dropdown as DropdownDeprecated,
-DropdownItem as DropdownItemDeprecated,
-DropdownPosition,
-KebabToggle
-} from '@patternfly/react-core/deprecated';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
 
 ## Examples