@patternfly/react-core 4.222.1 → 4.222.4

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

@@ -0,0 +1,167 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelFilled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Label>Grey</Label> <Label icon={<InfoCircleIcon />}>Grey icon</Label>{' '}
+    <Label onClose={() => Function.prototype}>Grey removable</Label>{' '}
+    <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Grey icon removable
+    </Label>{' '}
+    <Label href="#filled">Grey link</Label>{' '}
+    <Label href="#filled" onClose={() => Function.prototype}>
+      Grey link removable
+    </Label>
+    <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Grey label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="blue">Blue</Label>{' '}
+    <Label color="blue" icon={<InfoCircleIcon />}>
+      Blue icon
+    </Label>{' '}
+    <Label color="blue" onClose={() => Function.prototype}>
+      Blue removable
+    </Label>{' '}
+    <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Blue icon removable
+    </Label>{' '}
+    <Label color="blue" href="#filled">
+      Blue link
+    </Label>{' '}
+    <Label color="blue" href="#filled" onClose={() => Function.prototype}>
+      Blue link removable
+    </Label>
+    <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Blue label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="green">Green</Label>{' '}
+    <Label color="green" icon={<InfoCircleIcon />}>
+      Green icon
+    </Label>{' '}
+    <Label color="green" onClose={() => Function.prototype}>
+      Green removable
+    </Label>{' '}
+    <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Green icon removable
+    </Label>{' '}
+    <Label color="green" href="#filled">
+      Green link
+    </Label>{' '}
+    <Label color="green" href="#filled" onClose={() => Function.prototype}>
+      Green link removable
+    </Label>
+    <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Green label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="orange">Orange</Label>{' '}
+    <Label color="orange" icon={<InfoCircleIcon />}>
+      Orange icon
+    </Label>{' '}
+    <Label color="orange" onClose={() => Function.prototype}>
+      Orange removable
+    </Label>{' '}
+    <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Orange icon removable
+    </Label>{' '}
+    <Label color="orange" href="#filled">
+      Orange link
+    </Label>{' '}
+    <Label color="orange" href="#filled" onClose={() => Function.prototype}>
+      Orange link removable
+    </Label>
+    <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Orange label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="red">Red</Label>{' '}
+    <Label color="red" icon={<InfoCircleIcon />}>
+      Red icon
+    </Label>{' '}
+    <Label color="red" onClose={() => Function.prototype}>
+      Red removable
+    </Label>{' '}
+    <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Red icon removable
+    </Label>{' '}
+    <Label color="red" href="#filled">
+      Red link
+    </Label>{' '}
+    <Label color="red" href="#filled" onClose={() => Function.prototype}>
+      Red link removable
+    </Label>
+    <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Red label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="purple">Purple</Label>{' '}
+    <Label color="purple" icon={<InfoCircleIcon />}>
+      Purple icon
+    </Label>{' '}
+    <Label color="purple" onClose={() => Function.prototype}>
+      Purple removable
+    </Label>{' '}
+    <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Purple icon removable
+    </Label>{' '}
+    <Label color="purple" href="#filled">
+      Purple link
+    </Label>{' '}
+    <Label color="purple" href="#filled" onClose={() => Function.prototype}>
+      Purple link removable
+    </Label>
+    <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Purple label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="cyan">Cyan</Label>{' '}
+    <Label color="cyan" icon={<InfoCircleIcon />}>
+      Cyan icon
+    </Label>{' '}
+    <Label color="cyan" onClose={() => Function.prototype}>
+      Cyan removable
+    </Label>{' '}
+    <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Cyan icon removable
+    </Label>{' '}
+    <Label color="cyan" href="#filled">
+      Cyan link
+    </Label>{' '}
+    <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
+      Cyan link removable
+    </Label>
+    <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Cyan label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="gold">Gold</Label>{' '}
+    <Label color="gold" icon={<InfoCircleIcon />}>
+      Gold icon
+    </Label>{' '}
+    <Label color="gold" onClose={() => Function.prototype}>
+      Gold removable
+    </Label>{' '}
+    <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Gold icon removable
+    </Label>{' '}
+    <Label color="gold" href="#filled">
+      Gold link
+    </Label>{' '}
+    <Label color="gold" href="#filled" onClose={() => Function.prototype}>
+      Gold link removable
+    </Label>
+    <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Gold label with icon that overflows
+    </Label>
+  </React.Fragment>
+);

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

@@ -0,0 +1,188 @@
+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} isTruncated>
+      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} isTruncated>
+      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} isTruncated>
+      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} isTruncated>
+      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} isTruncated>
+      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} isTruncated>
+      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} isTruncated>
+      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} isTruncated>
+      Gold label with icon that overflows
+    </Label>
+  </React.Fragment>
+);

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import { Link } from '@reach/router';
+
+export const LabelRouterLink: React.FunctionComponent = () => (
+  <Label
+    color="blue"
+    icon={<InfoCircleIcon />}
+    onClose={() => Function.prototype}
+    isTruncated
+    render={({ className, content, componentRef }) => (
+      <Link to="/" className={className} innerRef={componentRef}>
+        {content}
+      </Link>
+    )}
+  >
+    Blue label router link with icon that overflows
+  </Label>
+);

package/src/components/Menu/MenuItem.tsx

@@ -224,7 +224,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
         onDrillIn(
           menuId,
           typeof drilldownMenu === 'function'
-            ? drilldownMenu().props.id
+            ? (drilldownMenu() as any).props.id
             : (drilldownMenu as React.ReactElement).props.id,
           itemId
         );

package/src/components/MenuToggle/MenuToggle.tsx

@@ -61,7 +61,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
       <React.Fragment>
         {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
         <span className="pf-c-menu-toggle__text">{children}</span>
-        {badge && <span className={css(styles.menuToggleCount)}>{badge}</span>}
+        {badge && <span className={css(styles.menuToggleCount)}>{badge as React.ReactNode}</span>}
         <span className={css(styles.menuToggleControls)}>
           <span className={css(styles.menuToggleToggleIcon)}>
             <CaretDownIcon aria-hidden />

package/src/components/Modal/Modal.tsx

@@ -243,6 +243,6 @@ export class Modal extends React.Component<ModalProps, ModalState> {
         ouiaSafe={ouiaSafe}
       />,
       container
-    );
+    ) as React.ReactElement;
   }
 }

package/src/components/Select/Select.tsx

@@ -447,7 +447,10 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
         typeaheadFilteredChildren =
           typeaheadInputValue.toString() !== ''
             ? React.Children.map(children, group => {
-                if (React.isValidElement(group) && group.type === SelectGroup) {
+                if (
+                  React.isValidElement<React.ComponentProps<typeof SelectGroup>>(group) &&
+                  group.type === SelectGroup
+                ) {
                   const filteredGroupChildren = (React.Children.toArray(group.props.children) as React.ReactElement<
                     SelectGroupProps
                   >[]).filter(childFilter);
@@ -635,8 +638,8 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
     optionContainerRef: React.ReactNode,
     index: number
   ) => {
-    this.refCollection[index] = [optionRef as HTMLElement, favoriteRef as HTMLElement];
-    this.optionContainerRefCollection[index] = optionContainerRef as HTMLElement;
+    this.refCollection[index] = [(optionRef as unknown) as HTMLElement, (favoriteRef as unknown) as HTMLElement];
+    this.optionContainerRefCollection[index] = (optionContainerRef as unknown) as HTMLElement;
   };
 
   handleMenuKeys = (index: number, innerIndex: number, position: string) => {

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -144,7 +144,10 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
                         </Button>
                       </div>
                       {isExpanded
-                        ? ReactDOM.createPortal(children, expandableContentRef.current.firstElementChild)
+                        ? (ReactDOM.createPortal(
+                            children,
+                            expandableContentRef.current.firstElementChild
+                          ) as React.ReactElement)
                         : children}
                     </div>
                   );