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

package/src/components/Modal/examples/ModalWithDropdown.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { Modal, ModalVariant, Button, Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated
+} from '@patternfly/react-core/deprecated';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export const ModalWithDropdown: React.FunctionComponent = () => {
@@ -35,16 +40,16 @@ export const ModalWithDropdown: 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>
   ];
 
   return (
@@ -75,7 +80,7 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
         </div>
         <br />
         <div>
-          <Dropdown
+          <DropdownDeprecated
             onSelect={onSelect}
             toggle={
               <DropdownToggle

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -1,6 +1,7 @@
 ---
-id: File upload - multiple
+id: Multiple file upload
 section: components
+subsection: file-upload
 cssPrefix: pf-c-multiple-file-upload
 propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
@@ -8,7 +9,7 @@ propComponents:
 
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
-File upload - multiple is able to:
+Multiple file upload is able to:
 
 - Accept one or more files via browse or drag-and-drop
 - Provide their data to you using file objects via the `onFileDrop` callback prop

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -12,10 +12,18 @@ propComponents:
     'NotificationDrawerList',
     'NotificationDrawerListItem',
     'NotificationDrawerListItemBody',
-    'NotificationDrawerListItemHeader',
+    'NotificationDrawerListItemHeader'
   ]
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownPosition,
+DropdownDirection,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples
@@ -23,14 +31,17 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 ### Basic
 
 ```ts file="NotificationDrawerBasic.tsx"
+
 ```
 
 ### Groups
 
 ```ts file="NotificationDrawerGroups.tsx"
+
 ```
 
 ### Lightweight
 
 ```ts file="NotificationDrawerLightweight.tsx"
+
 ```

package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
 import {
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownSeparator,
-  KebabToggle,
   NotificationDrawer,
   NotificationDrawerBody,
   NotificationDrawerHeader,
@@ -14,6 +8,14 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  DropdownDirection,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const [isOpenMap, setIsOpenMap] = React.useState(new Array(7).fill(false));
@@ -34,19 +36,19 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap;
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="disabled link" isDisabled>
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled link
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
   return (
     <NotificationDrawer>
       <NotificationDrawerHeader count={3} onClose={onDrawerClose}>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={<KebabToggle onToggle={onToggle(0)} id="basic-kebab-toggle" />}
           isOpen={isOpen0}
@@ -64,7 +66,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Unread info notification title"
               srTitle="Info notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(1)} id="basic-toggle-id-1" />}
@@ -84,7 +86,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
               srTitle="Danger notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(2)} id="basic-toggle-id-2" />}
@@ -106,7 +108,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line."
               srTitle="Danger notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(3)} id="basic-toggle-id-3" />}
@@ -127,7 +129,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Read warning notification title"
               srTitle="Warning notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(4)} id="basic-toggle-id-4" />}
@@ -147,7 +149,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               title="Read success notification title"
               srTitle="Success notification:"
             >
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 direction={DropdownDirection.up}
                 onSelect={onSelect}
@@ -164,7 +166,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
           </NotificationDrawerListItem>
           <NotificationDrawerListItem isRead>
             <NotificationDrawerListItemHeader title="Read (default) notification title" srTitle="notification:">
-              <Dropdown
+              <DropdownDeprecated
                 position={DropdownPosition.right}
                 onSelect={onSelect}
                 toggle={<KebabToggle onToggle={onToggle(6)} id="basic-toggle-id-6" />}

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -1,16 +1,10 @@
 import React from 'react';
 import {
   Button,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
-  DropdownDirection,
-  DropdownSeparator,
   EmptyState,
   EmptyStateBody,
   EmptyStateHeader,
   EmptyStateFooter,
-  KebabToggle,
   NotificationDrawer,
   NotificationDrawerBody,
   NotificationDrawerHeader,
@@ -24,6 +18,14 @@ import {
   EmptyStateActions,
   EmptyStateIcon
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  DropdownPosition,
+  DropdownDirection,
+  DropdownSeparator,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const NotificationDrawerGroups: React.FunctionComponent = () => {
@@ -59,20 +61,20 @@ export const NotificationDrawerGroups: 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>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="disabled link" isDisabled>
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled link
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   return (
     <NotificationDrawer>
       <NotificationDrawerHeader count={4}>
-        <Dropdown
+        <DropdownDeprecated
           onSelect={onSelect}
           toggle={
             <KebabToggle
@@ -102,7 +104,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread info notification title"
                   srTitle="Info notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -127,7 +129,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                   srTitle="Danger notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -153,7 +155,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read warning notification title"
                   srTitle="Warning notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -178,7 +180,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read success notification title"
                   srTitle="Success notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     direction={DropdownDirection.up}
                     onSelect={onSelect}
@@ -213,7 +215,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread info notification title"
                   srTitle="Info notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -238,7 +240,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
                   srTitle="Danger notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -264,7 +266,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read warning notification title"
                   srTitle="Warning notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     onSelect={onSelect}
                     toggle={
@@ -289,7 +291,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                   title="Read success notification title"
                   srTitle="Success notification:"
                 >
-                  <Dropdown
+                  <DropdownDeprecated
                     position={DropdownPosition.right}
                     direction={DropdownDirection.up}
                     onSelect={onSelect}

package/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropdownItem, DropdownItemProps } from '../../next/components/Dropdown';
+import { DropdownItem, DropdownItemProps } from '../Dropdown';
 import { OverflowMenuContext } from './OverflowMenuContext';
 
 export interface OverflowMenuDropdownItemProps extends Omit<DropdownItemProps, 'ref'> {
@@ -16,7 +16,7 @@ export const OverflowMenuDropdownItem: React.FunctionComponent<OverflowMenuDropd
   ...additionalProps
 }: OverflowMenuDropdownItemProps) => (
   <OverflowMenuContext.Consumer>
-    {value =>
+    {(value) =>
       (!isShared || value.isBelowBreakpoint) && (
         <DropdownItem component="button" itemId={itemId} {...additionalProps}>
           {children}

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -17,7 +17,6 @@ import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-ico
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 
 ## Examples
 
@@ -32,9 +31,10 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   OverflowMenuDropdownItem,
-  MenuToggle
+  MenuToggle,
+  Dropdown,
+  DropdownList
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class SimpleOverflowMenu extends React.Component {
@@ -86,7 +86,7 @@ class SimpleOverflowMenu extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -107,7 +107,7 @@ class SimpleOverflowMenu extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -128,9 +128,10 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Button,
-  ButtonVariant
+  ButtonVariant,
+  Dropdown,
+  DropdownList
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
@@ -223,7 +224,7 @@ class OverflowMenuGroupTypes extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -244,7 +245,7 @@ class OverflowMenuGroupTypes extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -265,9 +266,10 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Button,
-  ButtonVariant
+  ButtonVariant,
+  Dropdown,
+  DropdownList
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
@@ -349,7 +351,7 @@ class OverflowMenuAdditionalOptions extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl hasAdditionalOptions>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -370,7 +372,7 @@ class OverflowMenuAdditionalOptions extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );
@@ -391,9 +393,10 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Button,
-  ButtonVariant
+  ButtonVariant,
+  Dropdown,
+  DropdownList
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 class OverflowMenuPersist extends React.Component {
@@ -443,7 +446,7 @@ class OverflowMenuPersist extends React.Component {
           </OverflowMenuGroup>
         </OverflowMenuContent>
         <OverflowMenuControl hasAdditionalOptions>
-          <DropdownNext
+          <Dropdown
             onSelect={this.onSelect}
             toggle={(toggleRef) => (
               <MenuToggle
@@ -464,7 +467,7 @@ class OverflowMenuPersist extends React.Component {
             }
           >
             <DropdownList>{dropdownItems}</DropdownList>
-          </DropdownNext>
+          </Dropdown>
         </OverflowMenuControl>
       </OverflowMenu>
     );

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

@@ -7,9 +7,10 @@ import {
   OverflowMenuItem,
   OverflowMenuDropdownItem,
   MenuToggle,
-  Slider
+  Slider,
+  Dropdown,
+  DropdownList
 } from '@patternfly/react-core';
-import { Dropdown as DropdownNext, DropdownList } from '@patternfly/react-core/next';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
@@ -84,9 +85,9 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
             </OverflowMenuGroup>
           </OverflowMenuContent>
           <OverflowMenuControl>
-            <DropdownNext
+            <Dropdown
               onSelect={onSelect}
-              toggle={toggleRef => (
+              toggle={(toggleRef) => (
                 <MenuToggle
                   ref={toggleRef}
                   aria-label="Breakpoint on container example overflow menu"
@@ -98,10 +99,10 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
                 </MenuToggle>
               )}
               isOpen={isOpen}
-              onOpenChange={isOpen => setIsOpen(isOpen)}
+              onOpenChange={(isOpen) => setIsOpen(isOpen)}
             >
               <DropdownList>{dropdownItems}</DropdownList>
-            </DropdownNext>
+            </Dropdown>
           </OverflowMenuControl>
         </OverflowMenu>
       </div>

package/src/components/Progress/ProgressContainer.tsx

@@ -103,23 +103,26 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
 
   return (
     <React.Fragment>
-      {tooltip ? (
-        <Tooltip position={tooltipPosition} content={tooltip} isVisible>
-          {Title}
-        </Tooltip>
-      ) : (
-        Title
+      {title &&
+        (tooltip ? (
+          <Tooltip position={tooltipPosition} content={tooltip} isVisible>
+            {Title}
+          </Tooltip>
+        ) : (
+          Title
+        ))}
+      {(measureLocation !== ProgressMeasureLocation.none || StatusIcon) && (
+        <div className={css(progressStyle.progressStatus)} aria-hidden="true">
+          {(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && (
+            <span className={css(progressStyle.progressMeasure)}>{label || `${value}%`}</span>
+          )}
+          {StatusIcon && (
+            <span className={css(progressStyle.progressStatusIcon)}>
+              <StatusIcon />
+            </span>
+          )}
+        </div>
       )}
-      <div className={css(progressStyle.progressStatus)} aria-hidden="true">
-        {(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && (
-          <span className={css(progressStyle.progressMeasure)}>{label || `${value}%`}</span>
-        )}
-        {variantToIcon.hasOwnProperty(variant) && (
-          <span className={css(progressStyle.progressStatusIcon)}>
-            <StatusIcon />
-          </span>
-        )}
-      </div>
       <ProgressBar role="progressbar" progressBarAriaProps={progressBarAriaProps} value={value}>
         {measureLocation === ProgressMeasureLocation.inside && `${value}%`}
       </ProgressBar>