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

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

@@ -1,16 +1,11 @@
 import React from 'react';
+import { Card, CardHeader, CardBody, CardFooter, CardExpandableContent, Checkbox } from '@patternfly/react-core';
 import {
-  Card,
-  CardHeader,
-  CardBody,
-  CardFooter,
-  CardExpandableContent,
-  Checkbox,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import pfLogoSmall from './pf-logo-small.svg';
 
 export const CardExpandableWithIcon: React.FunctionComponent = () => {
@@ -33,26 +28,26 @@ export const CardExpandableWithIcon: 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}
@@ -73,7 +68,7 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
   return (
     <Card id="expandable-card-icon" isExpanded={isExpanded}>
       <CardHeader
-        actions={{actions: headerActions}}
+        actions={{ actions: headerActions }}
         onExpand={onExpand}
         toggleButtonProps={{
           id: 'toggle-button2',

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

@@ -1,16 +1,11 @@
 import React from 'react';
+import { Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  CardFooter,
-  Checkbox,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const CardTitleInHeader: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -24,26 +19,26 @@ export const CardTitleInHeader: 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}
@@ -63,7 +58,7 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
 
   return (
     <Card>
-      <CardHeader actions={{actions: headerActions}}>
+      <CardHeader actions={{ actions: headerActions }}>
         <CardTitle>
           This is a really really really really really really really really really really long header
         </CardTitle>

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

@@ -1,14 +1,11 @@
 import React from 'react';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const CardLegacySelectable: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
@@ -46,26 +43,26 @@ export const CardLegacySelectable: 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={onToggle} />}
         isOpen={isKebabOpen}
@@ -87,7 +84,7 @@ export const CardLegacySelectable: React.FunctionComponent = () => {
         isSelected={selected === 'legacy-first-card'}
         hasSelectableInput
       >
-        <CardHeader actions={{actions: headerActions}}/>
+        <CardHeader actions={{ actions: headerActions }} />
         <CardTitle>First legacy selectable card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>

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

@@ -1,14 +1,11 @@
 import React from 'react';
+import { Checkbox, Card, CardHeader, CardBody } from '@patternfly/react-core';
 import {
-  Checkbox,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
-  KebabToggle,
-  Card,
-  CardHeader,
-  CardBody
-} from '@patternfly/react-core';
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -22,26 +19,26 @@ export const CardOnlyActionsInCardHead: 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}
@@ -61,7 +58,7 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
 
   return (
     <Card>
-      <CardHeader actions={{actions: headerActions}}/>
+      <CardHeader actions={{ actions: headerActions }} />
       <CardBody>This is the card body. There are only actions in the card head.</CardBody>
     </Card>
   );

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

@@ -1,14 +1,11 @@
 import React from 'react';
+import { Card, CardHeader, CardTitle, CardBody } from '@patternfly/react-core';
 import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const CardSelectable: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
@@ -49,26 +46,26 @@ export const CardSelectable: 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={onToggle} />}
         isOpen={isKebabOpen}
@@ -90,7 +87,7 @@ export const CardSelectable: React.FunctionComponent = () => {
         isSelectableRaised
         isSelected={selected === 'selectable-first-card'}
       >
-        <CardHeader actions={{actions: headerActions}}/>
+        <CardHeader actions={{ actions: headerActions }} />
         <CardTitle>First card</CardTitle>
         <CardBody>This is a selectable card. Click me to select me. Click again to deselect me.</CardBody>
       </Card>

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

@@ -1,17 +1,11 @@
 import React from 'react';
+import { Brand, Card, CardHeader, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 import {
-  Brand,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardBody,
-  CardFooter,
-  Checkbox,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import pfLogo from './pfLogo.svg';
 
 export const CardWithImageAndActions: React.FunctionComponent = () => {
@@ -30,26 +24,26 @@ export const CardWithImageAndActions: 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}
@@ -70,7 +64,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
   return (
     <>
       <Card>
-        <CardHeader actions={{actions: headerActions, hasNoOffset}}>
+        <CardHeader actions={{ actions: headerActions, hasNoOffset }}>
           <Brand src={pfLogo} alt="PatternFly logo" style={{ width: '300px' }} />
         </CardHeader>
         <CardTitle>Title</CardTitle>

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

@@ -12,7 +12,7 @@ import { DataListItemCells } from '../DataListItemCells';
 import { DataListItemRow } from '../DataListItemRow';
 import { DataListContent } from '../DataListContent';
 import { Button } from '../../Button';
-import { DropdownItem, Dropdown, KebabToggle, DropdownPosition } from '../../Dropdown';
+import { DropdownItem, Dropdown, KebabToggle, DropdownPosition } from '../../../deprecated/components/Dropdown';
 
 describe('DataList', () => {
   test('List default', () => {
@@ -26,7 +26,7 @@ describe('DataList', () => {
   });
 
   describe('DataList variants', () => {
-    ['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach(oneBreakpoint => {
+    ['none', 'always', 'sm', 'md', 'lg', 'xl', '2xl'].forEach((oneBreakpoint) => {
       test(`Breakpoint - ${oneBreakpoint}`, () => {
         const { asFragment } = render(
           <DataList aria-label="this is a simple list" gridBreakpoint={oneBreakpoint as any} />
@@ -50,7 +50,7 @@ describe('DataList', () => {
 
   test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
         <DataListItem>
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -85,8 +85,8 @@ describe('DataList', () => {
     const user = userEvent.setup();
 
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={ mock } selectedDataListItemId=''>
-        <DataListItem id='item-test-id'>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
+        <DataListItem id="item-test-id">
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
           </DataListItemRow>
@@ -104,8 +104,8 @@ describe('DataList', () => {
     const mock = jest.fn();
 
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={ mock } selectedDataListItemId=''>
-        <DataListItem id='item-test-id'>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={mock} selectedDataListItemId="">
+        <DataListItem id="item-test-id">
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
           </DataListItemRow>
@@ -118,7 +118,7 @@ describe('DataList', () => {
 
   test('Item applies selectableInputAriaLabel to the hidden input', () => {
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={ () => {} }>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
         <DataListItem selectableInputAriaLabel="Data list item label test">
           <DataListItemRow aria-labelledby="test-id">
             <p id="test-id">Test</p>
@@ -134,7 +134,7 @@ describe('DataList', () => {
 
   test('Item defaults to labelling its input using its aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
         <DataListItem aria-labelledby="test-id">
           <p id="test-id">Test cell content</p>
         </DataListItem>
@@ -148,7 +148,7 @@ describe('DataList', () => {
 
   test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
     render(
-      <DataList aria-label="this is a simple list" onSelectableRowChange={  () => {} }>
+      <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>
         <DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
           <p id="test-id">Test cell content</p>
         </DataListItem>

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

@@ -14,10 +14,16 @@ propComponents:
     'DataListToggle',
     'DataListContent',
     'DataListDragButton',
-    'DataListControl',
+    'DataListControl'
   ]
 ---
 
+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';
@@ -28,46 +34,55 @@ import { css } from '@patternfly/react-styles';
 ### Basic
 
 ```ts file="./DataListBasic.tsx"
+
 ```
 
 ### Compact
 
 ```ts file="./DataListCompact.tsx"
+
 ```
 
 ### Checkboxes, actions and additional cells
 
 ```ts file="./DataListCheckboxes.tsx"
+
 ```
 
 ### Actions: single and multiple
 
 ```ts file="./DataListActions.tsx"
+
 ```
 
 ### Expandable
 
 ```ts file="./DataListExpandable.tsx"
+
 ```
 
 ### Mixed expandable
 
 ```ts file="./DataListMixedExpandable.tsx"
+
 ```
 
 ### Width modifiers
 
 ```ts file="./DataListWidthModifiers.tsx"
+
 ```
 
 ### Selectable rows
 
 ```ts file="./DataListSelectableRows.tsx"
+
 ```
 
 ### Controlling text
 
 ```ts file="./DataListControllingText.tsx"
+
 ```
 
 ### Draggable
@@ -77,9 +92,11 @@ Draggable data lists used to have their own HTML5-based API for drag and drop, w
 Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
 
 ```ts isBeta file="./DataListDraggable.tsx"
+
 ```
 
 ### Small grid breakpoint
 
 ```ts file="./DataListSmGridBreakpoint.tsx"
+
 ```

package/src/components/DataList/examples/DataListActions.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 import {
   Button,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  KebabToggle,
   DataList,
   DataListItem,
   DataListCell,
@@ -12,6 +8,12 @@ import {
   DataListItemCells,
   DataListAction
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 export const DataListActions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -75,20 +77,20 @@ export const DataListActions: React.FunctionComponent = () => {
               aria-label="Actions"
               isPlainButtonAction
             >
-              <Dropdown
+              <DropdownDeprecated
                 isPlain
                 position={DropdownPosition.right}
                 isOpen={isOpen}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle} />}
                 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>
+                  </DropdownItemDeprecated>
                 ]}
               />
             </DataListAction>