@patternfly/react-core 5.1.1-prerelease.8 → 6.0.0-alpha.1

package/src/components/Label/examples/LabelOutline.tsx

@@ -2,229 +2,283 @@ import React from 'react';
 import { Label } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
-export const LabelOutline: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Label variant="outline">Grey</Label>{' '}
-    <Label variant="outline" icon={<InfoCircleIcon />}>
-      Grey icon
-    </Label>{' '}
-    <Label variant="outline" onClose={() => Function.prototype}>
-      Grey removable
-    </Label>{' '}
-    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Grey icon removable
-    </Label>{' '}
-    <Label variant="outline" href="#outline">
-      Grey link
-    </Label>{' '}
-    <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
-      Grey link removable
-    </Label>
-    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-      Grey label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="blue">
-      Blue
-    </Label>{' '}
-    <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
-      Blue icon
-    </Label>{' '}
-    <Label variant="outline" color="blue" onClose={() => Function.prototype}>
-      Blue removable
-    </Label>{' '}
-    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Blue icon removable
-    </Label>{' '}
-    <Label variant="outline" color="blue" href="#outline">
-      Blue link
-    </Label>{' '}
-    <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
-      Blue link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="blue"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Blue label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="green">
-      Green
-    </Label>{' '}
-    <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
-      Green icon
-    </Label>{' '}
-    <Label variant="outline" color="green" onClose={() => Function.prototype}>
-      Green removable
-    </Label>{' '}
-    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Green icon removable
-    </Label>{' '}
-    <Label variant="outline" color="green" href="#outline">
-      Green link
-    </Label>{' '}
-    <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
-      Green link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="green"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Green label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="orange">
-      Orange
-    </Label>{' '}
-    <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
-      Orange icon
-    </Label>{' '}
-    <Label variant="outline" color="orange" onClose={() => Function.prototype}>
-      Orange removable
-    </Label>{' '}
-    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Orange icon removable
-    </Label>{' '}
-    <Label variant="outline" color="orange" href="#outline">
-      Orange link
-    </Label>{' '}
-    <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
-      Orange link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="orange"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Orange label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="red">
-      Red
-    </Label>{' '}
-    <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
-      Red icon
-    </Label>{' '}
-    <Label variant="outline" color="red" onClose={() => Function.prototype}>
-      Red removable
-    </Label>{' '}
-    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Red icon removable
-    </Label>{' '}
-    <Label variant="outline" color="red" href="#outline">
-      Red link
-    </Label>{' '}
-    <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
-      Red link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="red"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Red label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="purple">
-      Purple
-    </Label>{' '}
-    <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
-      Purple icon
-    </Label>{' '}
-    <Label variant="outline" color="purple" onClose={() => Function.prototype}>
-      Purple removable
-    </Label>{' '}
-    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Purple icon removable
-    </Label>{' '}
-    <Label variant="outline" color="purple" href="#outline">
-      Purple link
-    </Label>{' '}
-    <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
-      Purple link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="purple"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Purple label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="cyan">
-      Cyan
-    </Label>{' '}
-    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
-      Cyan icon
-    </Label>{' '}
-    <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
-      Cyan removable
-    </Label>{' '}
-    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Cyan icon removable
-    </Label>{' '}
-    <Label variant="outline" color="cyan" href="#outline">
-      Cyan link
-    </Label>{' '}
-    <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
-      Cyan link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="cyan"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Cyan label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="gold">
-      Gold
-    </Label>{' '}
-    <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
-      Gold icon
-    </Label>{' '}
-    <Label variant="outline" color="gold" onClose={() => Function.prototype}>
-      Gold removable
-    </Label>{' '}
-    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Gold icon removable
-    </Label>{' '}
-    <Label variant="outline" color="gold" href="#outline">
-      Gold link
-    </Label>{' '}
-    <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
-      Gold link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="gold"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Gold label with icon that overflows
-    </Label>
-  </React.Fragment>
-);
+export const LabelOutline: React.FunctionComponent = () => {
+  const logColor = (color: string) => {
+    // eslint-disable-next-line no-console
+    console.log(color, 'label clicked');
+  };
+  return (
+    <React.Fragment>
+      <Label variant="outline">Grey</Label>{' '}
+      <Label variant="outline" icon={<InfoCircleIcon />}>
+        Grey icon
+      </Label>{' '}
+      <Label variant="outline" onClose={() => Function.prototype}>
+        Grey removable
+      </Label>{' '}
+      <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Grey icon removable
+      </Label>{' '}
+      <Label variant="outline" href="#outline">
+        Grey link
+      </Label>{' '}
+      <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
+        Grey link removable
+      </Label>
+      <Label variant="outline" onClick={() => logColor('grey')}>
+        Grey clickable
+      </Label>{' '}
+      <Label variant="outline" onClick={() => logColor('grey')} onClose={() => Function.prototype}>
+        Grey clickable removable
+      </Label>
+      <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Grey label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="blue">
+        Blue
+      </Label>{' '}
+      <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
+        Blue icon
+      </Label>{' '}
+      <Label variant="outline" color="blue" onClose={() => Function.prototype}>
+        Blue removable
+      </Label>{' '}
+      <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Blue icon removable
+      </Label>{' '}
+      <Label variant="outline" color="blue" href="#outline">
+        Blue link
+      </Label>{' '}
+      <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
+        Blue link removable
+      </Label>
+      <Label variant="outline" color="blue" onClick={() => logColor('blue')}>
+        Blue clickable
+      </Label>{' '}
+      <Label variant="outline" color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
+        Blue clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="blue"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Blue label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="green">
+        Green
+      </Label>{' '}
+      <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
+        Green icon
+      </Label>{' '}
+      <Label variant="outline" color="green" onClose={() => Function.prototype}>
+        Green removable
+      </Label>{' '}
+      <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Green icon removable
+      </Label>{' '}
+      <Label variant="outline" color="green" href="#outline">
+        Green link
+      </Label>{' '}
+      <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
+        Green link removable
+      </Label>
+      <Label variant="outline" color="green" onClick={() => logColor('green')}>
+        Green clickable
+      </Label>{' '}
+      <Label variant="outline" color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
+        Green clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="green"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Green label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="orange">
+        Orange
+      </Label>{' '}
+      <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
+        Orange icon
+      </Label>{' '}
+      <Label variant="outline" color="orange" onClose={() => Function.prototype}>
+        Orange removable
+      </Label>{' '}
+      <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Orange icon removable
+      </Label>{' '}
+      <Label variant="outline" color="orange" href="#outline">
+        Orange link
+      </Label>{' '}
+      <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
+        Orange link removable
+      </Label>
+      <Label variant="outline" color="orange" onClick={() => logColor('orange')}>
+        Orange clickable
+      </Label>{' '}
+      <Label variant="outline" color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
+        Orange clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="orange"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Orange label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="red">
+        Red
+      </Label>{' '}
+      <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
+        Red icon
+      </Label>{' '}
+      <Label variant="outline" color="red" onClose={() => Function.prototype}>
+        Red removable
+      </Label>{' '}
+      <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Red icon removable
+      </Label>{' '}
+      <Label variant="outline" color="red" href="#outline">
+        Red link
+      </Label>{' '}
+      <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
+        Red link removable
+      </Label>
+      <Label variant="outline" color="red" onClick={() => logColor('red')}>
+        Red clickable
+      </Label>{' '}
+      <Label variant="outline" color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
+        Red clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="red"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Red label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="purple">
+        Purple
+      </Label>{' '}
+      <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
+        Purple icon
+      </Label>{' '}
+      <Label variant="outline" color="purple" onClose={() => Function.prototype}>
+        Purple removable
+      </Label>{' '}
+      <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Purple icon removable
+      </Label>{' '}
+      <Label variant="outline" color="purple" href="#outline">
+        Purple link
+      </Label>{' '}
+      <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
+        Purple link removable
+      </Label>
+      <Label variant="outline" color="purple" onClick={() => logColor('purple')}>
+        Purple clickable
+      </Label>{' '}
+      <Label variant="outline" color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
+        Purple clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="purple"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Purple label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="cyan">
+        Cyan
+      </Label>{' '}
+      <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
+        Cyan icon
+      </Label>{' '}
+      <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
+        Cyan removable
+      </Label>{' '}
+      <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Cyan icon removable
+      </Label>{' '}
+      <Label variant="outline" color="cyan" href="#outline">
+        Cyan link
+      </Label>{' '}
+      <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
+        Cyan link removable
+      </Label>
+      <Label variant="outline" color="cyan" onClick={() => logColor('cyan')}>
+        Cyan clickable
+      </Label>{' '}
+      <Label variant="outline" color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
+        Cyan clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="cyan"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Cyan label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="gold">
+        Gold
+      </Label>{' '}
+      <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
+        Gold icon
+      </Label>{' '}
+      <Label variant="outline" color="gold" onClose={() => Function.prototype}>
+        Gold removable
+      </Label>{' '}
+      <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Gold icon removable
+      </Label>{' '}
+      <Label variant="outline" color="gold" href="#outline">
+        Gold link
+      </Label>{' '}
+      <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
+        Gold link removable
+      </Label>
+      <Label variant="outline" color="gold" onClick={() => logColor('gold')}>
+        Gold clickable
+      </Label>{' '}
+      <Label variant="outline" color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
+        Gold clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="gold"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Gold label with icon that overflows
+      </Label>
+    </React.Fragment>
+  );
+};

package/src/components/Menu/MenuContainer.tsx

@@ -5,7 +5,7 @@ export interface MenuPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
   direction?: 'up' | 'down';
   /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center';
+  position?: 'right' | 'left' | 'center' | 'start' | 'end';
   /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
   width?: string | 'trigger';
   /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -1,22 +1,23 @@
 import React from 'react';
 import {
-  Menu,
-  MenuContent,
-  MenuList,
-  MenuItem,
-  Divider,
-  DrilldownMenu,
+  Badge,
   Breadcrumb,
-  BreadcrumbItem,
   BreadcrumbHeading,
-  MenuBreadcrumb,
+  BreadcrumbItem,
   Checkbox,
+  Divider,
+  DrilldownMenu,
   Dropdown,
-  DropdownList,
   DropdownItem,
+  DropdownList,
+  Icon,
+  Menu,
+  MenuBreadcrumb,
+  MenuContent,
+  MenuItem,
+  MenuList,
   MenuToggle,
-  MenuToggleElement,
-  Badge
+  MenuToggleElement
 } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
@@ -129,7 +130,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           <DropdownList>
             <DropdownItem
               key="dropdown-start"
-              icon={<AngleLeftIcon />}
+              icon={
+                <Icon shouldMirrorRTL>
+                  <AngleLeftIcon />
+                </Icon>
+              }
               onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
               }
@@ -169,7 +174,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           <DropdownList>
             <DropdownItem
               key="dropdown-start"
-              icon={<AngleLeftIcon />}
+              icon={
+                <Icon shouldMirrorRTL>
+                  <AngleLeftIcon />
+                </Icon>
+              }
               onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)
               }
@@ -221,7 +230,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           <DropdownList>
             <DropdownItem
               key="dropdown-pause"
-              icon={<AngleLeftIcon />}
+              icon={
+                <Icon shouldMirrorRTL>
+                  <AngleLeftIcon />
+                </Icon>
+              }
               onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)
               }
@@ -266,7 +279,11 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
           <DropdownList>
             <DropdownItem
               key="dropdown-pause"
-              icon={<AngleLeftIcon />}
+              icon={
+                <Icon shouldMirrorRTL>
+                  <AngleLeftIcon />
+                </Icon>
+              }
               onClick={(event: any) =>
                 drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)
               }

package/src/components/Modal/ModalContent.tsx

@@ -148,15 +148,13 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
 
   const defaultModalBodyAriaRole = bodyAriaLabel ? 'region' : undefined;
 
+  const hasNoDescription = !description && !ariaDescribedby;
+  const id = hasNoDescription ? descriptorId : undefined;
+
   const modalBody = hasNoBodyWrapper ? (
     children
   ) : (
-    <ModalBoxBody
-      aria-label={bodyAriaLabel}
-      role={bodyAriaRole || defaultModalBodyAriaRole}
-      {...props}
-      {...(!description && !ariaDescribedby && { id: descriptorId })}
-    >
+    <ModalBoxBody aria-label={bodyAriaLabel} role={bodyAriaRole || defaultModalBodyAriaRole} {...props} id={id}>
       {children}
     </ModalBoxBody>
   );

package/src/components/Nav/NavItem.tsx

@@ -27,7 +27,7 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   /** Callback for item click */
   onClick?: NavSelectClickHandler;
   /** Component used to render NavItems if  React.isValidElement(children) is false */
-  component?: React.ReactNode;
+  component?: React.ElementType<any> | React.ComponentType<any>;
   /** Flyout of a nav item. This should be a Menu component. Should not be used if the to prop is defined. */
   flyout?: React.ReactElement;
   /** Callback when flyout is opened or closed */