@patternfly/react-core 4.222.2 → 4.222.5

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/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`OptionsMenuItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
     id="''"
-    role="menuitem"
+    role="none"
   >
     <button
       aria-disabled="true"
@@ -12,6 +12,7 @@ exports[`OptionsMenuItem should match snapshot 1`] = `
       data-ouia-component-id="OUIA-Generated-DropdownItem-1"
       data-ouia-component-type="PF4/DropdownItem"
       data-ouia-safe="true"
+      role="menuitem"
       tabindex="-1"
       type="button"
     >

package/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap

@@ -61,7 +61,7 @@ exports[`optionsMenu expanded 1`] = `
         >
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -69,6 +69,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-1"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -77,7 +78,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -85,6 +86,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-2"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -93,7 +95,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="true"
@@ -101,6 +103,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-3"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -109,7 +112,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -117,6 +120,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-4"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -145,7 +149,7 @@ exports[`optionsMenu expanded 1`] = `
         >
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -153,6 +157,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-5"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >
@@ -161,7 +166,7 @@ exports[`optionsMenu expanded 1`] = `
           </li>
           <li
             id=""
-            role="menuitem"
+            role="none"
           >
             <button
               aria-disabled="false"
@@ -169,6 +174,7 @@ exports[`optionsMenu expanded 1`] = `
               data-ouia-component-id="OUIA-Generated-DropdownItem-6"
               data-ouia-component-type="PF4/DropdownItem"
               data-ouia-safe="true"
+              role="menuitem"
               tabindex="-1"
               type="button"
             >

package/src/components/OverflowMenu/__tests__/Generated/__snapshots__/OverflowMenuDropdownItem.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
-    role="menuitem"
+    role="none"
   >
     <button
       aria-disabled="false"
@@ -11,6 +11,7 @@ exports[`OverflowMenuDropdownItem should match snapshot 1`] = `
       data-ouia-component-id="OUIA-Generated-DropdownItem-1"
       data-ouia-component-type="PF4/DropdownItem"
       data-ouia-safe="true"
+      role="menuitem"
       tabindex="-1"
       type="button"
     >

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>
                   );

package/src/demos/Wizard/WizardDemo.md

@@ -3,30 +3,9 @@ id: Wizard
 section: components
 ---
 
-import {
-Brand,
-Breadcrumb,
-BreadcrumbItem,
-Modal,
-ModalVariant,
-Nav,
-NavItem,
-NavList,
-Page,
-PageToggleButton,
-PageSection,
-PageSectionTypes,
-PageSectionVariants,
-PageSidebar,
-Progress,
-SkipToContent,
-Text,
-TextContent,
-Title,
-Wizard
-} from '@patternfly/react-core';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import DashboardWrapper from '../examples/DashboardWrapper';
 
 ## Demos
 
@@ -34,10 +13,36 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 ```js isFullscreen
 import React from 'react';
-import { Modal, ModalVariant, Wizard } from '@patternfly/react-core';
+import {
+  Card,
+  CardBody,
+  Gallery,
+  GalleryItem,
+  Nav,
+  NavItem,
+  NavList,
+  PageSection,
+  Wizard,
+  Modal,
+  ModalVariant
+} from '@patternfly/react-core';
+import DashboardWrapper from '../examples/DashboardWrapper';
 
 class BasicWizardDemo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeItem: 0
+    };
+    this.onNavSelect = result => {
+      this.setState({
+        activeItem: result.itemId
+      });
+    };
+  }
   render() {
+    const { activeItem } = this.state;
+
     const steps = [
       { id: 0, name: 'Information', component: <p>Step 1 content</p> },
       {
@@ -62,25 +67,40 @@ class BasicWizardDemo extends React.Component {
     ];
     const title = 'Basic wizard';
     return (
-      <Modal
-        isOpen
-        variant={ModalVariant.large}
-        showClose={false}
-        hasNoBodyWrapper
-        aria-describedby="wiz-modal-demo-description"
-        aria-labelledby="wiz-modal-demo-title"
-      >
-        <Wizard
-          navAriaLabel={`${title} steps`}
-          mainAriaLabel={`${title} content`}
-          titleId="wiz-modal-demo-title"
-          descriptionId="wiz-modal-demo-description"
-          title="Simple wizard in modal"
-          description="Simple wizard description"
-          steps={steps}
-          height={400}
-        />
-      </Modal>
+      <React.Fragment>
+        <DashboardWrapper hasPageTemplateTitle>
+          <PageSection isWidthLimited>
+            <Gallery hasGutter>
+              {Array.apply(0, Array(10)).map((x, i) => (
+                <GalleryItem key={i}>
+                  <Card>
+                    <CardBody>This is a card</CardBody>
+                  </Card>
+                </GalleryItem>
+              ))}
+            </Gallery>
+          </PageSection>
+        </DashboardWrapper>
+        <Modal
+          isOpen
+          variant={ModalVariant.large}
+          showClose={false}
+          hasNoBodyWrapper
+          aria-describedby="wiz-modal-demo-description"
+          aria-labelledby="wiz-modal-demo-title"
+        >
+          <Wizard
+            navAriaLabel={`${title} steps`}
+            mainAriaLabel={`${title} content`}
+            titleId="wiz-modal-demo-title"
+            descriptionId="wiz-modal-demo-description"
+            title="Simple wizard in modal"
+            description="Simple wizard description"
+            steps={steps}
+            height={400}
+          />
+        </Modal>
+      </React.Fragment>
     );
   }
 }
@@ -91,31 +111,17 @@ class BasicWizardDemo extends React.Component {
 ```js isFullscreen
 import React from 'react';
 import {
-  Brand,
-  Breadcrumb,
-  BreadcrumbItem,
   Nav,
   NavItem,
   NavList,
-  Page,
   PageSection,
   PageSectionTypes,
   PageSectionVariants,
-  PageSidebar,
-  Progress,
-  SkipToContent,
-  Text,
-  TextContent,
-  Title,
-  Wizard,
-  Masthead,
-  PageToggleButton,
-  MastheadToggle,
-  MastheadMain,
-  MastheadBrand
+  Wizard
 } from '@patternfly/react-core';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import DashboardWrapper from '../examples/DashboardWrapper';
 
 class FullPageWizard extends React.Component {
   constructor(props) {
@@ -131,54 +137,6 @@ class FullPageWizard extends React.Component {
   }
   render() {
     const { activeItem } = this.state;
-    const PageNav = (
-      <Nav onSelect={this.onNavSelect} aria-label="Nav">
-        <NavList>
-          <NavItem itemId={0} isActive={activeItem === 0}>
-            System Panel
-          </NavItem>
-          <NavItem itemId={1} isActive={activeItem === 1}>
-            Policy
-          </NavItem>
-          <NavItem itemId={2} isActive={activeItem === 2}>
-            Authentication
-          </NavItem>
-          <NavItem itemId={3} isActive={activeItem === 3}>
-            Network Services
-          </NavItem>
-          <NavItem itemId={4} isActive={activeItem === 4}>
-            Server
-          </NavItem>
-        </NavList>
-      </Nav>
-    );
-    const Header = (
-      <Masthead id="basic">
-        <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
-        <MastheadMain>
-          <MastheadBrand>
-            <Brand src={imgBrand} alt="Patternfly logo" />
-          </MastheadBrand>
-        </MastheadMain>
-      </Masthead>
-    );
-    const Sidebar = <PageSidebar nav={PageNav} />;
-    const pageId = 'main-content-page-layout-default-nav';
-    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
-    const PageBreadcrumb = (
-      <Breadcrumb>
-        <BreadcrumbItem>Section home</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#" isActive>
-          Section landing
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
 
     const steps = [
       { id: 0, name: 'Information', component: <p>Step 1 content</p> },
@@ -206,24 +164,11 @@ class FullPageWizard extends React.Component {
 
     return (
       <React.Fragment>
-        <Page
-          header={Header}
-          sidebar={Sidebar}
-          isManagedSidebar
-          skipToContent={PageSkipToContent}
-          breadcrumb={PageBreadcrumb}
-          mainContainerId={pageId}
-        >
-          <PageSection variant={PageSectionVariants.light}>
-            <TextContent>
-              <Text component="h1">Main title</Text>
-              <Text component="p">A demo of a wizard in a page.</Text>
-            </TextContent>
-          </PageSection>
+        <DashboardWrapper hasPageTemplateTitle>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
             <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} />
           </PageSection>
-        </Page>
+        </DashboardWrapper>
       </React.Fragment>
     );
   }