@patternfly/react-core 5.0.0-alpha.47 → 5.0.0-alpha.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.47",
+  "version": "5.0.0-alpha.48",
   "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",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "41381939a0352b1b212b237604b2d6461f7b4c06"
+  "gitHead": "febfd27ce11f0858e9f6f333fb8703c31ae52e3f"
 }

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

@@ -7,25 +7,35 @@ 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';
 
 ## Examples
 
 ### Action list single group
 
 ```ts file="ActionListSingleGroup.tsx"
+
 ```
 
 ### Action list with icons
 
 ```ts file="./ActionListWithIcons.tsx"
+
 ```
 
 ### Action list multiple groups
 
 ```ts file="./ActionListMultipleGroups.tsx"
+
 ```
 
 ### Action list with cancel button
 
 ```ts file="./ActionListWithCancelButton.tsx"
+
 ```

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

@@ -1,13 +1,11 @@
 import React from 'react';
+import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
 import {
-  ActionList,
-  ActionListItem,
-  Button,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const ActionListSingleGroup: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -26,21 +24,21 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   return (
@@ -71,7 +69,7 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={onSelect}
             toggle={<KebabToggle onToggle={onToggle} />}
             isOpen={isOpen}

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -2,8 +2,13 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import { DropdownDirection, DropdownPosition, DropdownToggle, DropdownContext } from '../Dropdown';
-import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
+import {
+  DropdownDirection,
+  DropdownPosition,
+  DropdownToggle,
+  DropdownContext
+} from '../../deprecated/components/Dropdown';
+import { DropdownWithContext } from '../../deprecated/components/Dropdown/DropdownWithContext';
 import { ApplicationLauncherGroup } from './ApplicationLauncherGroup';
 import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator';
 import { ApplicationLauncherItem } from './ApplicationLauncherItem';
@@ -94,13 +99,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
     return (
       <div key="search" className={css(styles.appLauncherMenuSearch)}>
         <ApplicationLauncherItem
-          customChild={
-            <SearchInput
-              placeholder={searchPlaceholderText}
-              onChange={onSearch}
-              {...searchProps}
-            />
-          }
+          customChild={<SearchInput placeholder={searchPlaceholderText} onChange={onSearch} {...searchProps} />}
         ></ApplicationLauncherItem>
       </div>
     );

package/src/components/ApplicationLauncher/ApplicationLauncherGroup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownGroup, DropdownGroupProps } from '../Dropdown';
+import { DropdownGroup, DropdownGroupProps } from '../../deprecated/components/Dropdown';
 
 export const ApplicationLauncherGroup: React.FunctionComponent<DropdownGroupProps> = ({
   children,

package/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
-import { DropdownItem, DropdownItemProps } from '../Dropdown';
+import { DropdownItem, DropdownItemProps } from '../../deprecated/components/Dropdown';
 import { ApplicationLauncherContent } from './ApplicationLauncherContent';
 import { ApplicationLauncherContext } from './ApplicationLauncherContext';
 import { ApplicationLauncherItemContext } from './ApplicationLauncherItemContext';

package/src/components/ApplicationLauncher/ApplicationLauncherSeparator.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownSeparator, SeparatorProps } from '../Dropdown/DropdownSeparator';
+import { DropdownSeparator, SeparatorProps } from '../../deprecated/components/Dropdown/DropdownSeparator';
 
 export const ApplicationLauncherSeparator: React.FunctionComponent<SeparatorProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

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

@@ -4,7 +4,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import { ApplicationLauncher } from '../ApplicationLauncher';
 import { ApplicationLauncherItem } from '../ApplicationLauncherItem';
 
-import { DropdownPosition, DropdownDirection } from '../../Dropdown/dropdownConstants';
+import { DropdownPosition, DropdownDirection } from '../../../deprecated/components/Dropdown/dropdownConstants';
 import { ApplicationLauncherSeparator } from '../ApplicationLauncherSeparator';
 
 const dropdownItems = [

package/src/components/ApplicationLauncher/__tests__/Generated/ApplicationLauncherSeparator.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { ApplicationLauncherSeparator } from '../../ApplicationLauncherSeparator';
-import { DropdownArrowContext } from '../../../Dropdown/dropdownConstants';
+import { DropdownArrowContext } from '../../../../deprecated/components/Dropdown/dropdownConstants';
 
 describe('ApplicationLauncherSeparator', () => {
   it('should match snapshot', () => {

package/src/components/ApplicationLauncher/examples/ApplicationLauncher.md

@@ -6,6 +6,7 @@ propComponents: ['ApplicationLauncher', 'ApplicationLauncherItem', 'ApplicationL
 ouia: true
 ---
 
+import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/deprecated';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import { Link } from '@reach/router';
 import pfLogoSm from './pf-logo-small.svg';
@@ -18,49 +19,59 @@ To add a tooltip, use the `tooltip` prop and optionally add more tooltip props b
 ### Basic
 
 ```ts file="./ApplicationLauncherBasic.tsx"
+
 ```
 
 ### Router link
 
 ```ts file="./ApplicationLauncherRouterLink.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./ApplicationLauncherDisabled.tsx"
+
 ```
 
 ### Aligned right
 
 ```ts file="./ApplicationLauncherAlignRight.tsx"
+
 ```
 
 ### Aligned top
 
 ```ts file="./ApplicationLauncherAlignTop.tsx"
+
 ```
 
 ### With tooltip
 
 ```ts file="./ApplicationLauncherTooltip.tsx"
+
 ```
 
 ### With sections and icons
 
 ```ts file="./ApplicationLauncherSectionsAndIcons.tsx"
+
 ```
 
 ### With favorites and search
 
 ```ts file="./ApplicationLauncherFavoritesAndSearch.tsx"
+
 ```
 
 ### With custom icon
 
 ```ts file="./ApplicationLauncherCustomIcon.tsx"
+
 ```
 
 ### Basic with menu appended to document body
 
 ```ts file="./ApplicationLauncherDocumentBody.tsx"
+
 ```

package/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem, DropdownPosition } from '@patternfly/react-core';
+import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
+import { DropdownPosition } from '@patternfly/react-core/deprecated';
 
 const appLauncherItems: React.ReactElement[] = [
   <ApplicationLauncherItem key="application_1a" href="#">
@@ -17,7 +18,7 @@ export const ApplicationLauncherAlignRight: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
 
   return (
     <ApplicationLauncher

package/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem, DropdownDirection } from '@patternfly/react-core';
+import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
+import { DropdownDirection } from '@patternfly/react-core/deprecated';
 
 const appLauncherItems: React.ReactElement[] = [
   <ApplicationLauncherItem key="application_1a" href="#">
@@ -17,7 +18,7 @@ export const ApplicationLauncherAlignTop: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onToggle = (_event: any, isOpen: boolean) => setIsOpen(isOpen);
-  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+  const onSelect = (_event: any) => setIsOpen((prevIsOpen) => !prevIsOpen);
 
   return (
     <ApplicationLauncher

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

@@ -6,6 +6,11 @@ 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';
 
 ## Examples
@@ -13,19 +18,23 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 ### Basic
 
 ```ts file="./BreadcrumbBasic.tsx"
+
 ```
 
 ### Without home link
 
 ```ts file="./BreadcrumbWithoutHomeLink.tsx"
+
 ```
 
 ### With heading
 
 ```ts file="./BreadcrumbWithHeading.tsx"
+
 ```
 
 ### With dropdown
 
 ```ts file="./BreadcrumbDropdown.tsx"
+
 ```

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

@@ -1,24 +1,22 @@
 import React from 'react';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';
 import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbHeading,
-  Dropdown,
+  Dropdown as DropdownDeprecated,
   BadgeToggle,
-  DropdownItem
-} from '@patternfly/react-core';
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 
 const dropdownItems: JSX.Element[] = [
-  <DropdownItem key="edit" component="button" icon={<AngleLeftIcon />}>
+  <DropdownItemDeprecated key="edit" component="button" icon={<AngleLeftIcon />}>
     Edit
-  </DropdownItem>,
-  <DropdownItem key="action" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItemDeprecated>,
+  <DropdownItemDeprecated key="action" component="button" icon={<AngleLeftIcon />}>
     Deployment
-  </DropdownItem>,
-  <DropdownItem key="apps" component="button" icon={<AngleLeftIcon />}>
+  </DropdownItemDeprecated>,
+  <DropdownItemDeprecated key="apps" component="button" icon={<AngleLeftIcon />}>
     Applications
-  </DropdownItem>
+  </DropdownItemDeprecated>
 ];
 
 export const BreadcrumbDropdown: React.FunctionComponent = () => {
@@ -36,7 +34,7 @@ export const BreadcrumbDropdown: React.FunctionComponent = () => {
     <Breadcrumb>
       <BreadcrumbItem component="button">Section home</BreadcrumbItem>
       <BreadcrumbItem isDropdown>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={
             <BadgeToggle ref={badgeToggleRef} onToggle={onToggle}>

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

@@ -2,21 +2,28 @@
 id: Card
 section: components
 cssPrefix: pf-c-card
-propComponents: ['Card', 'CardHeader', 'CardHeaderActionsObject', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
+propComponents:
+  ['Card', 'CardHeader', 'CardHeaderActionsObject', 'CardTitle', 'CardBody', 'CardFooter', 'CardExpandableContent']
 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';
 
-
-## Examples 
+## Examples
 
 ### Basic cards
 
 Basic cards typically have a `<CardTitle>`, `<CardBody>` and `<CardFooter>`. You may omit these components as needed, but it is recommended to at least include a `<CardBody>` to provide details about the card item.
 
 ```ts file='./CardBasic.tsx'
+
 ```
 
 ### Modifiers
@@ -26,29 +33,30 @@ You can further modify the styling of the card's content by using the properties
 Most modifiers can be used in combination with each other, except for `isCompact` and `isLarge`, since they are contradictory.
 
 ```ts file='./CardWithModifiers.tsx'
-```
 
-| 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
 
 You can include header actions with the `actions` property of `<CardHeader>` . The following example includes an image using the [Brand](/components/brand) component, and also includes a kebab dropdown and a checkbox in `<CardHeader>` actions.
 
-The `actions` property for `<CardHeader>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with card actions. 
+The `actions` property for `<CardHeader>` includes the `hasNoOffset` property, which is `false` by default. When `hasNoOffset` is `false`, a negative margin is applied to help align default-sized card titles with card actions.
 
-You may use `hasNoOffset` to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example. 
+You may use `hasNoOffset` to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example.
 
 Select the "actions hasNoOffset" checkbox in the example below to illustrate this behavior.
 
 ```ts file='./CardWithImageAndActions.tsx'
+
 ```
 
 ### Title inline with images and actions
@@ -56,6 +64,7 @@ Select the "actions hasNoOffset" checkbox in the example below to illustrate thi
 Moving `<CardTitle>` within the `<CardHeader>` will style it inline with any images or actions.
 
 ```ts file='./CardHeaderInCardHead.tsx'
+
 ```
 
 ### Card header without title
@@ -65,6 +74,7 @@ Card actions can be placed in the card header even without a `<CardTitle>`.
 Images can also be placed in the card header without a `<CardTitle>`.
 
 ```ts file='./CardOnlyActionsInCardHead.tsx'
+
 ```
 
 ### With HTML heading element
@@ -72,6 +82,7 @@ Images can also be placed in the card header without a `<CardTitle>`.
 You may use the `component` property to place the card's title within an HTML heading element.
 
 ```ts file='./CardWithHeadingElement.tsx'
+
 ```
 
 ### With multiple body sections
@@ -79,15 +90,17 @@ You may use the `component` property to place the card's title within an HTML he
 You may use multiple body sections to visually separate blocks of content.
 
 ```ts file='./CardWithMultipleBodySections.tsx'
+
 ```
 
 ### With a primary body section that fills
 
 `<CardBody>` sections will fill the available height of the card when `isFilled` equals `{true}`, which is the default value. Set `isFilled` to `{false}` to disable this behavior for one or more body sections. The remaining available height of the card will be split between any `<CardBody>` section that does not set `isFilled` to `{false}`.
 
-A common use case of this is to set all but one body section to `isFilled={false}` so that a primary body section fills the available space of the card as seen in the example below. This example has 3 `<CardBody>` sections, two of which set `isFilled` to `{false}`. The third `<CardBody>` fills the remaining height of the card. 
+A common use case of this is to set all but one body section to `isFilled={false}` so that a primary body section fills the available space of the card as seen in the example below. This example has 3 `<CardBody>` sections, two of which set `isFilled` to `{false}`. The third `<CardBody>` fills the remaining height of the card.
 
 ```ts file='./CardWithBodySectionFills.tsx'
+
 ```
 
 ### Selectable cards
@@ -95,6 +108,7 @@ A common use case of this is to set all but one body section to `isFilled={false
 Selectable cards can only be selected one at a time, and are intended for use with [primary-detail layout](/demos/primary-detail).
 
 ```ts file='./CardSelectable.tsx'
+
 ```
 
 ### Legacy selectable cards
@@ -102,6 +116,7 @@ Selectable cards can only be selected one at a time, and are intended for use wi
 The following example shows a legacy implementation of selectable cards. This example uses the `isSelectable` property instead of `isSelectableRaised`, which is the current recommendation for implementation. `isSelectable` applies selectable styling, but does not apply raised styling on hover and selection as `isSelectableRaised` does.
 
 ```ts file='./CardLegacySelectable.tsx'
+
 ```
 
 ### Selectable card accessibility features
@@ -114,20 +129,22 @@ By default, this input will have an aria-label that corresponds to the `<CardTit
 
 The first card passes an onChange callback to `onSelectableInputChange` to enable the selection/deselection of the associated card via checkbox input.
 
-The second card does not set `hasSelectableInput` to true, so neither the input nor the selection state is communicated to users of assistive technologies. 
+The second card does not set `hasSelectableInput` to true, so neither the input nor the selection state is communicated to users of assistive technologies.
 
 We recommend navigating this example using a screen reader to best understand both cards.
 
 ```ts file='./CardSelectableA11yHighlight.tsx'
+
 ```
 
 ### Expandable cards
 
-A card can be made expandable using the `isExpanded` property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content. 
+A card can be made expandable using the `isExpanded` property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content.
 
 Place any content that you want to be hidden within the `<CardExpandableContent>` component.
 
 ```ts file='./CardExpandable.tsx'
+
 ```
 
 ### Expandable with icon
@@ -135,4 +152,5 @@ Place any content that you want to be hidden within the `<CardExpandableContent>
 An image can be placed in the card header to show users an icon beside the expansion caret.
 
 ```ts file='./CardExpandableWithIcon.tsx'
+
 ```

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

@@ -6,12 +6,14 @@ import {
   CardBody,
   CardFooter,
   CardExpandableContent,
-  Checkbox,
-  Dropdown,
-  DropdownItem,
+  Checkbox
+} from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const CardExpandable: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -38,26 +40,26 @@ export const CardExpandable: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const headerActions = (
     <>
-      <Dropdown
+      <DropdownDeprecated
         onSelect={onSelect}
         toggle={<KebabToggle onToggle={(_event: any, isOpen: boolean) => setIsOpen(isOpen)} />}
         isOpen={isOpen}
@@ -88,7 +90,7 @@ export const CardExpandable: React.FunctionComponent = () => {
       </div>
       <Card id="expandable-card" isExpanded={isExpanded}>
         <CardHeader
-          actions={{actions: headerActions}}
+          actions={{ actions: headerActions }}
           onExpand={onExpand}
           isToggleRightAligned={isToggleRightAligned}
           toggleButtonProps={{