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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.87",
+  "version": "5.0.0-alpha.89",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "696a96df36af68e169c0f4900b467e624114b9b2"
+  "gitHead": "c59e3d3977ad2737446477d391eab7c0daf25406"
 }

package/src/components/ActionList/examples/ActionList.md

@@ -7,12 +7,7 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
-import {
-Dropdown as DropdownDeprecated,
-DropdownItem as DropdownItemDeprecated,
-DropdownSeparator,
-KebabToggle
-} from '@patternfly/react-core/deprecated';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
 

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -1,46 +1,48 @@
 import React from 'react';
-import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  ActionList,
+  ActionListItem,
+  Button,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  Divider
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ActionListSingleGroup: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (
-    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>,
-    isOpen: boolean
-  ) => {
-    event.stopPropagation();
-    setIsOpen(isOpen);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
   };
 
-  const onSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
-    event.stopPropagation();
+  const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined) => {
+    event?.stopPropagation();
     setIsOpen(!isOpen);
   };
 
-  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 to="#" key="link">
+        Link
+      </DropdownItem>
+      <DropdownItem key="action">Action</DropdownItem>
+      <DropdownItem to="#" key="disabled link" isDisabled>
+        Disabled Link
+      </DropdownItem>
+      <DropdownItem key="disabled action" isDisabled>
+        Disabled Action
+      </DropdownItem>
+      <Divider component="li" key="separator" />
+      <DropdownItem to="#" key="separated link">
+        Separated Link
+      </DropdownItem>
+      <DropdownItem key="separated action">Separated Action</DropdownItem>
+    </>
+  );
   return (
     <React.Fragment>
       <ActionList>
@@ -69,14 +71,24 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <DropdownDeprecated
+          <Dropdown
             onSelect={onSelect}
-            toggle={<KebabToggle onToggle={onToggle} />}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onToggle}
+                variant="plain"
+                isExpanded={isOpen}
+                aria-label="Action list single group kebab"
+              >
+                <EllipsisVIcon />
+              </MenuToggle>
+            )}
             isOpen={isOpen}
-            isPlain
-            dropdownItems={dropdownItems}
-            position="right"
-          />
+            onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </Dropdown>
         </ActionListItem>
       </ActionList>
     </React.Fragment>

package/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -6,12 +6,8 @@ propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading']
 ouia: true
 ---
 
-import {
-Dropdown as DropdownDeprecated,
-BadgeToggle,
-DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 ## Examples
 

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -1,29 +1,35 @@
 import React from 'react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  BadgeToggle,
-  DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbHeading,
+  Badge,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
-const dropdownItems: JSX.Element[] = [
-  <DropdownItemDeprecated key="edit" component="button" icon={<AngleLeftIcon />}>
+const dropdownItems = [
+  <DropdownItem icon={<AngleLeftIcon />} key="edit">
     Edit
-  </DropdownItemDeprecated>,
-  <DropdownItemDeprecated key="action" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItem>,
+  <DropdownItem icon={<AngleLeftIcon />} key="action">
     Deployment
-  </DropdownItemDeprecated>,
-  <DropdownItemDeprecated key="apps" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItem>,
+  <DropdownItem icon={<AngleLeftIcon />} key="apps">
     Applications
-  </DropdownItemDeprecated>
+  </DropdownItem>
 ];
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const badgeToggleRef = React.useRef<HTMLButtonElement>();
 
-  const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = () => setIsOpen(!isOpen);
 
   const onSelect = () => {
     setIsOpen((prevIsOpen: boolean) => !prevIsOpen);
@@ -34,16 +40,23 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem component="button">Section home</BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <DropdownDeprecated
+        <Dropdown
           onSelect={onSelect}
-          toggle={
-            <BadgeToggle ref={badgeToggleRef} onToggle={onToggle}>
-              {dropdownItems.length}
-            </BadgeToggle>
-          }
+          onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen} variant="plain">
+              <Badge isRead screenReaderText="additional items">
+                {dropdownItems.length}{' '}
+                <span>
+                  <CaretDownIcon />
+                </span>
+              </Badge>
+            </MenuToggle>
+          )}
           isOpen={isOpen}
-          dropdownItems={dropdownItems}
-        />
+        >
+          <DropdownList>{dropdownItems.map((dropdownItem) => dropdownItem)}</DropdownList>
+        </Dropdown>
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Section title</BreadcrumbHeading>
     </Breadcrumb>

package/src/components/Card/examples/Card.md

@@ -7,14 +7,9 @@ propComponents:
 ouia: true
 ---
 
-import {
-Dropdown as DropdownDeprecated,
-DropdownItem as DropdownItemDeprecated,
-DropdownSeparator,
-KebabToggle
-} from '@patternfly/react-core/deprecated';
 import pfLogo from './pfLogo.svg';
 import pfLogoSmall from './pf-logo-small.svg';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
 
@@ -36,14 +31,14 @@ Most modifiers can be used in combination with each other, except for `isCompact
 
 ```
 
-| Modifier     | Description                                                                          |
-| ------------ | ------------------------------------------------------------------------------------ |
-| isCompact    | Modifies the card to include compact styling. Should not be used with isLarge.       |
-| isFlat       | Modifies the card to include flat styling.                                           |
-| isRounded    | Modifies the card to include rounded border styling.                                 |
-| isLarge      | Modifies the card to be large. Should not be used with isCompact.                    |
-| isFullHeight | Modifies the card so that it fills the total available height of its container.      |
-| isPlain      | Modifies the card to include plain styling, which removes the border and background. |
+| Modifier | Description |
+| --- | --- |
+| isCompact | Modifies the card to include compact styling. Should not be used with isLarge. |
+| isFlat | Modifies the card to include flat styling. |
+| isRounded | Modifies the card to include rounded border styling. |
+| isLarge | Modifies the card to be large. Should not be used with isCompact. |
+| isFullHeight | Modifies the card so that it fills the total available height of its container. |
+| isPlain | Modifies the card to include plain styling, which removes the border and background. |
 
 ### Header images and actions
 

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

@@ -6,14 +6,15 @@ import {
   CardBody,
   CardFooter,
   CardExpandableContent,
-  Checkbox
+  Checkbox,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  Divider,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardExpandable: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -39,34 +40,46 @@ export const CardExpandable: React.FunctionComponent = () => {
     setIsToggleRightAligned(!isToggleRightAligned);
   };
 
-  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 expandable 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/CardExpandableWithIcon.tsx

@@ -1,12 +1,20 @@
 import React from 'react';
-import { Card, CardHeader, CardBody, CardFooter, CardExpandableContent, Checkbox } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  CardExpandableContent,
+  Checkbox,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  Divider,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
 import pfLogoSmall from './pf-logo-small.svg';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardExpandableWithIcon: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -27,34 +35,47 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
     setIsExpanded(!isExpanded);
   };
 
-  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 expandable with icon 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/CardHeaderInCardHead.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
-import { Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  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';
 
 export const CardTitleInHeader: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -18,34 +26,47 @@ export const CardTitleInHeader: 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 title inline with 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)}