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

package/src/components/Dropdown/examples/DropdownBasic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 
 export const DropdownBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -18,8 +18,8 @@ export const DropdownBasic: React.FunctionComponent = () => {
     <Dropdown
       isOpen={isOpen}
       onSelect={onSelect}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
-      toggle={(toggleRef) => (
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
           Dropdown
         </MenuToggle>
@@ -27,24 +27,30 @@ export const DropdownBasic: React.FunctionComponent = () => {
       ouiaId="BasicDropdown"
     >
       <DropdownList>
-        <DropdownItem itemId={0} key="link">
-          Link
-        </DropdownItem>
-        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={(ev) => ev.preventDefault()}>
+        <DropdownItem itemId={0} key="action">
           Action
         </DropdownItem>
-        <DropdownItem itemId={2} isDisabled key="disabled link">
-          Disabled link
+        <DropdownItem
+          itemId={1}
+          key="link"
+          to="#default-link2"
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev: any) => ev.preventDefault()}
+        >
+          Link
+        </DropdownItem>
+        <DropdownItem itemId={2} isDisabled key="disabled action">
+          Disabled Action
         </DropdownItem>
-        <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
-          Disabled action
+        <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+          Disabled Link
         </DropdownItem>
-        <Divider key="separator" />
-        <DropdownItem itemId={4} key="separated link">
-          Separated link
+        <Divider component="li" key="separator" />
+        <DropdownItem itemId={4} key="separated action">
+          Separated Action
         </DropdownItem>
-        <DropdownItem itemId={5} key="separated action">
-          Separated action
+        <DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+          Separated Link
         </DropdownItem>
       </DropdownList>
     </Dropdown>

package/src/components/Dropdown/examples/DropdownWithDescriptions.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 
 export const DropdownWithDescriptions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -18,38 +18,33 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
     <Dropdown
       isOpen={isOpen}
       onSelect={onSelect}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
-      toggle={(toggleRef) => (
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle ref={toggleRef} isFullWidth onClick={onToggleClick} isExpanded={isOpen}>
           Dropdown
         </MenuToggle>
       )}
     >
       <DropdownList>
-        <DropdownItem itemId={0} key="link" description="This is a description">
-          Link
+        <DropdownItem itemId={0} key="action" description="This is a description">
+          Action
         </DropdownItem>
         <DropdownItem
           itemId={1}
-          key="action"
+          key="link"
           description="This is a very long description that describes the menu item"
           to="#default-link2"
-          onClick={(ev) => ev.preventDefault()}
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev: any) => ev.preventDefault()}
         >
-          Action
-        </DropdownItem>
-        <DropdownItem itemId={2} isDisabled description="Disabled link description" key="disabled link">
-          Disabled link
+          Link
         </DropdownItem>
-        <DropdownItem
-          itemId={3}
-          isDisabled
-          description="This is a description"
-          key="disabled action"
-          to="#default-link4"
-        >
+        <DropdownItem itemId={2} isDisabled description="Disabled link description" key="disabled action">
           Disabled action
         </DropdownItem>
+        <DropdownItem itemId={3} isDisabled description="This is a description" key="disabled link" to="#default-link4">
+          Disabled link
+        </DropdownItem>
       </DropdownList>
     </Dropdown>
   );

package/src/components/Dropdown/examples/DropdownWithGroups.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { Dropdown, DropdownGroup, DropdownItem, DropdownList, MenuToggle, Divider } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  Divider
+} from '@patternfly/react-core';
 
 export const DropdownWithGroups: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -18,8 +26,8 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
     <Dropdown
       isOpen={isOpen}
       onSelect={onSelect}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
-      toggle={(toggleRef) => (
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
           Dropdown
         </MenuToggle>
@@ -27,34 +35,40 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
     >
       <DropdownGroup>
         <DropdownList>
-          <DropdownItem itemId={0} key="link">
-            Link
-          </DropdownItem>
-          <DropdownItem itemId={1} key="action" to="#default-link2" onClick={(ev) => ev.preventDefault()}>
+          <DropdownItem itemId={0} key="action">
             Action
           </DropdownItem>
+          <DropdownItem
+            itemId={1}
+            key="link"
+            to="#default-link2"
+            // Prevent the default onClick functionality for example purposes
+            onClick={(ev: any) => ev.preventDefault()}
+          >
+            Link
+          </DropdownItem>
         </DropdownList>
       </DropdownGroup>
-      <Divider />
+      <Divider component="li" />
       <DropdownGroup label="Group 2" labelHeadingLevel="h3">
         <DropdownList>
-          <DropdownItem itemId={2} key="group2 link">
-            Group 2 link
+          <DropdownItem itemId={2} key="group2 action">
+            Group 2 action
           </DropdownItem>
-          <DropdownItem itemId={3} key="group2 action" to="#default-link4">
-            group 2 action
+          <DropdownItem itemId={3} key="group2 link" to="#default-link4" onClick={(ev: any) => ev.preventDefault()}>
+            Group 2 link
           </DropdownItem>
         </DropdownList>
       </DropdownGroup>
       <Divider />
       <DropdownGroup label="Group 3" labelHeadingLevel="h3">
         <DropdownList>
-          <DropdownItem itemId={4} key="group3 link">
-            Group 3 link
-          </DropdownItem>
-          <DropdownItem itemId={5} key="group3 action">
+          <DropdownItem itemId={4} key="group3 action">
             Group 3 action
           </DropdownItem>
+          <DropdownItem itemId={5} key="group3 link" to="#default-link6" onClick={(ev: any) => ev.preventDefault()}>
+            Group 3 link
+          </DropdownItem>
         </DropdownList>
       </DropdownGroup>
     </Dropdown>

package/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DropdownWithKebab: React.FunctionComponent = () => {
@@ -19,8 +19,8 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
     <Dropdown
       isOpen={isOpen}
       onSelect={onSelect}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
-      toggle={(toggleRef) => (
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
         <MenuToggle
           ref={toggleRef}
           aria-label="kebab dropdown toggle"
@@ -33,24 +33,30 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
       )}
     >
       <DropdownList>
-        <DropdownItem itemId={0} key="link">
-          Link
-        </DropdownItem>
-        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={(ev) => ev.preventDefault()}>
+        <DropdownItem itemId={0} key="action">
           Action
         </DropdownItem>
-        <DropdownItem itemId={2} isDisabled key="disabled link">
-          Disabled link
+        <DropdownItem
+          itemId={1}
+          key="link"
+          to="#default-link2"
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev: any) => ev.preventDefault()}
+        >
+          Link
+        </DropdownItem>
+        <DropdownItem itemId={2} isDisabled key="disabled action">
+          Disabled Action
         </DropdownItem>
-        <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
-          Disabled action
+        <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+          Disabled Link
         </DropdownItem>
-        <Divider key="separator" />
-        <DropdownItem itemId={4} key="separated link">
-          Separated link
+        <Divider component="li" key="separator" />
+        <DropdownItem itemId={4} key="separated action">
+          Separated Action
         </DropdownItem>
-        <DropdownItem itemId={5} key="separated action">
-          Separated action
+        <DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+          Separated Link
         </DropdownItem>
       </DropdownList>
     </Dropdown>

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -15,17 +15,13 @@ propComponents:
   ]
 ---
 
-import {
-Dropdown as DropdownDeprecated,
-DropdownItem as DropdownItemDeprecated,
-KebabToggle
-} from '@patternfly/react-core/deprecated';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
 

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
-import { Button, ButtonVariant, Checkbox, DualListSelector } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  Button,
+  ButtonVariant,
+  Checkbox,
+  DualListSelector,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DualListSelectorComplexOptionsActions: React.FunctionComponent = () => {
   const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
@@ -43,27 +49,17 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
     }
   };
 
-  const onToggle = (isOpen: boolean, pane: string) => {
+  const onToggle = (pane: string) => {
     if (pane === 'available') {
-      setIsAvailableKebabOpen(isOpen);
+      setIsAvailableKebabOpen(!isAvailableKebabOpen);
     } else {
-      setIsChosenKebabOpen(isOpen);
+      setIsChosenKebabOpen(!isChosenKebabOpen);
     }
   };
 
   const filterOption = (option: React.ReactNode, input: string) =>
     (option as React.ReactElement).props.children.includes(input);
 
-  const dropdownItems = [
-    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="action" component="button">
-      Action
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="secondAction" component="button">
-      Second Action
-    </DropdownItemDeprecated>
-  ];
-
   const availableOptionsActions = [
     <Button
       variant={ButtonVariant.plain}
@@ -74,19 +70,33 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
     >
       <PficonSortCommonAscIcon />
     </Button>,
-    <DropdownDeprecated
-      toggle={
-        <KebabToggle
+    <Dropdown
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
           isDisabled={isDisabled}
-          onToggle={(_event: any, isOpen: boolean) => onToggle(isOpen, 'available')}
+          isExpanded={isAvailableKebabOpen}
+          onClick={() => onToggle('available')}
+          variant="plain"
           id="complex-available-toggle"
-        />
-      }
+          aria-label="Complex actions example available kebab toggle"
+        >
+          <EllipsisVIcon aria-hidden="true" />
+        </MenuToggle>
+      )}
       isOpen={isAvailableKebabOpen}
-      isPlain
-      dropdownItems={dropdownItems}
+      onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}
+      onSelect={() => setIsAvailableKebabOpen(false)}
       key="availableDropdown"
-    />
+    >
+      <DropdownList>
+        <DropdownItem key="available action">Action</DropdownItem>
+        {/* Prevent default onClick functionality for example purposes */}
+        <DropdownItem key="available link" to="#" onClick={(event: any) => event.preventDefault()}>
+          Link
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
   ];
 
   const chosenOptionsActions = [
@@ -99,19 +109,33 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
     >
       <PficonSortCommonAscIcon />
     </Button>,
-    <DropdownDeprecated
-      toggle={
-        <KebabToggle
+    <Dropdown
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
           isDisabled={isDisabled}
-          onToggle={(_event: any, isOpen: boolean) => onToggle(isOpen, 'chosen')}
+          isExpanded={isChosenKebabOpen}
+          variant="plain"
+          onClick={() => onToggle('chosen')}
           id="complex-chosen-toggle"
-        />
-      }
+          aria-label="Complex actions example chosen kebab toggle"
+        >
+          <EllipsisVIcon aria-hidden="true" />
+        </MenuToggle>
+      )}
       isOpen={isChosenKebabOpen}
-      isPlain
-      dropdownItems={dropdownItems}
+      onOpenChange={(isOpen) => setIsChosenKebabOpen(isOpen)}
+      onSelect={() => setIsChosenKebabOpen(false)}
       key="chosenDropdown"
-    />
+    >
+      <DropdownList>
+        <DropdownItem key="chosen action">Action</DropdownItem>
+        {/* Prevent default onClick functionality for example purposes */}
+        <DropdownItem key="chosen link" to="#" onClick={(event: any) => event.preventDefault()}>
+          Link
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
   ];
 
   return (

package/src/components/Hint/examples/Hint.md

@@ -5,12 +5,7 @@ cssPrefix: null
 propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
 ---
 
-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/Hint/examples/HintBasicWithTitle.tsx

@@ -1,49 +1,75 @@
 import React from 'react';
-import { Hint, HintTitle, HintBody, HintFooter, Button } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  Hint,
+  HintTitle,
+  HintBody,
+  HintFooter,
+  Button,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  Divider,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const HintBasicWithTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
   };
 
   const onSelect = () => {
     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 actions = (
-    <DropdownDeprecated
-      onSelect={onSelect}
-      toggle={<KebabToggle onToggle={onToggle} id="hint-kebab-toggle" />}
+    <Dropdown
       isOpen={isOpen}
-      dropdownItems={dropdownItems}
-      position="right"
-      isPlain
-    />
+      onSelect={onSelect}
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          aria-label="With title example kebab toggle"
+          variant="plain"
+          onClick={onToggle}
+          isExpanded={isOpen}
+        >
+          <EllipsisVIcon />
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        <DropdownItem itemId={0} key="action">
+          Action
+        </DropdownItem>
+        <DropdownItem
+          itemId={1}
+          key="link"
+          to="#default-link2"
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev: any) => ev.preventDefault()}
+        >
+          Link
+        </DropdownItem>
+        <DropdownItem itemId={2} isDisabled key="disabled action">
+          Disabled Action
+        </DropdownItem>
+        <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+          Disabled Link
+        </DropdownItem>
+        <Divider component="li" key="separator" />
+        <DropdownItem itemId={4} key="separated action">
+          Separated Action
+        </DropdownItem>
+        <DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+          Separated Link
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
   );
   return (
     <Hint actions={actions}>

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx

@@ -1,49 +1,74 @@
 import React from 'react';
-import { Hint, HintBody, HintFooter, Button } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownSeparator,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
+  Hint,
+  HintBody,
+  HintFooter,
+  Button,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  Divider,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const HintBasicWithoutTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
   };
 
   const onSelect = () => {
     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 actions = (
-    <DropdownDeprecated
-      onSelect={onSelect}
-      toggle={<KebabToggle onToggle={onToggle} id="hint-notitle-kebab-toggle" />}
+    <Dropdown
       isOpen={isOpen}
-      dropdownItems={dropdownItems}
-      position="right"
-      isPlain
-    />
+      onSelect={onSelect}
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          aria-label="Without title example kebab toggle"
+          variant="plain"
+          onClick={onToggle}
+          isExpanded={isOpen}
+        >
+          <EllipsisVIcon />
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        <DropdownItem itemId={0} key="action">
+          Action
+        </DropdownItem>
+        <DropdownItem
+          itemId={1}
+          key="link"
+          to="#default-link2"
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev: any) => ev.preventDefault()}
+        >
+          Link
+        </DropdownItem>
+        <DropdownItem itemId={2} isDisabled key="disabled action">
+          Disabled Action
+        </DropdownItem>
+        <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+          Disabled Link
+        </DropdownItem>
+        <Divider component="li" key="separator" />
+        <DropdownItem itemId={4} key="separated action">
+          Separated Action
+        </DropdownItem>
+        <DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+          Separated Link
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
   );
   return (
     <React.Fragment>

package/src/components/InputGroup/examples/InputGroup.md

@@ -5,11 +5,6 @@ cssPrefix: null
 propComponents: ['InputGroup', 'InputGroupText']
 ---
 
-import {
-Dropdown as DropdownDeprecated,
-DropdownToggle,
-DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
 import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';