@patternfly/react-core 5.4.0-prerelease.15 → 5.4.0-prerelease.16

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

@@ -26,6 +26,9 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-45"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -232,6 +235,9 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-43"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -438,6 +444,9 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-42"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -644,6 +653,9 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-40"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -850,6 +862,9 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-41"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -1056,6 +1071,9 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-44"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -1255,6 +1273,9 @@ exports[`Pagination component render custom pagination toggle 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-13"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -1458,6 +1479,9 @@ exports[`Pagination component render custom perPageOptions 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-10"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -1668,6 +1692,9 @@ exports[`Pagination component render custom start end 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-11"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -2045,6 +2072,9 @@ exports[`Pagination component render last page 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-9"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -2255,6 +2285,9 @@ exports[`Pagination component render limited number of pages 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-7"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -2456,6 +2489,9 @@ exports[`Pagination component render should render correctly bottom 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-2"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-bottom-toggle"
       type="button"
     >
@@ -2654,6 +2690,9 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-5"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-bottom-toggle"
       type="button"
     >
@@ -2864,6 +2903,9 @@ exports[`Pagination component render should render correctly compact 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-3"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -2993,6 +3035,9 @@ exports[`Pagination component render should render correctly disabled 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-6"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       disabled=""
       id="options-menu-top-toggle"
       type="button"
@@ -3207,6 +3252,9 @@ exports[`Pagination component render should render correctly sticky 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-4"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -3417,6 +3465,9 @@ exports[`Pagination component render should render correctly top 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -3627,6 +3678,9 @@ exports[`Pagination component render titles 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-12"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -3837,6 +3891,9 @@ exports[`Pagination component render up drop direction 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-14"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -4047,6 +4104,9 @@ exports[`Pagination component render zero results 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-8"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >

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

@@ -134,7 +134,7 @@ exports[`SearchInput advanced search 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     />
   </div>
 </DocumentFragment>
@@ -590,7 +590,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     />
   </div>
 </DocumentFragment>

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

@@ -14,13 +14,13 @@ const items = [
 ];
 
 const anchors = [
-  <SimpleListItem key="i1" component="a">
+  <SimpleListItem key="i1" component="a" href="#foo">
     Item 1
   </SimpleListItem>,
-  <SimpleListItem key="i2" component="a">
+  <SimpleListItem key="i2" component="a" href="#bar">
     Item 2
   </SimpleListItem>,
-  <SimpleListItem key="i3" component="a">
+  <SimpleListItem key="i3" component="a" href="#baz">
     Item 3
   </SimpleListItem>
 ];

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

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import { TextInput, TextInputBase } from '../TextInput';
 import { ValidatedOptions } from '../../../helpers/constants';
-import * as ReactCoreUtils from '@patternfly/react-core/src/helpers/util';
+import * as ReactCoreUtils from '../../../helpers/util';
 
 const props = {
   onChange: jest.fn(),

package/src/demos/DescriptionList/DescriptionList.md

@@ -0,0 +1,14 @@
+---
+id: Description list
+section: components
+---
+
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+## Demos
+
+### Basic
+
+```js file='./examples/DescriptionListBasic.tsx' isFullscreen
+```

package/src/demos/DescriptionList/examples/DescriptionListBasic.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListTerm,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  PageSection,
+  PageSectionVariants,
+  Card,
+  CardBody,
+  CardHeader,
+  TextContent,
+  Text,
+  Title,
+  Divider,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const DescriptionListBasic: React.FunctionComponent = () => (
+  <DashboardWrapper>
+    <PageSection variant={PageSectionVariants.light}>
+      <TextContent>
+        <Title headingLevel="h1">Projects</Title>
+        <Text component="p">This is a full page demo</Text>
+      </TextContent>
+    </PageSection>
+    <PageSection>
+      <Card>
+        <CardHeader>
+          <Title headingLevel="h2" size="lg">
+            Details
+          </Title>
+        </CardHeader>
+        <Divider />
+        <CardBody>
+          <DescriptionList isAutoFit>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Name</DescriptionListTerm>
+              <DescriptionListDescription>mary-test</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Status</DescriptionListTerm>
+              <DescriptionListDescription>
+                <Flex>
+                  <FlexItem spacer={{ lg: 'spacerSm' }}>
+                    <CheckCircleIcon color="green" />
+                  </FlexItem>
+                  <FlexItem>Active</FlexItem>
+                </Flex>
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Default pull secret</DescriptionListTerm>
+              <DescriptionListDescription>Not configured</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Tolerations</DescriptionListTerm>
+              <DescriptionListDescription>6 Tolerations</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Network Policies</DescriptionListTerm>
+              <DescriptionListDescription>
+                <a href="#">Network Policies</a>
+              </DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Display name</DescriptionListTerm>
+              <DescriptionListDescription>mary</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Requester</DescriptionListTerm>
+              <DescriptionListDescription>kube:admin</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>Created at:</DescriptionListTerm>
+              <DescriptionListDescription>3 minutes ago</DescriptionListDescription>
+            </DescriptionListGroup>
+          </DescriptionList>
+        </CardBody>
+      </Card>
+    </PageSection>
+  </DashboardWrapper>
+);

package/src/demos/Masthead.md

@@ -3,24 +3,24 @@ id: Masthead
 section: components
 ---
 
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfIcon from './assets/pf-logo-small.svg';
 import pfLogo from './assets/pf-logo.svg';
-import { Link } from '@reach/router';
 
 ## Demos
 
-### Masthead with utilities and user dropdown menu
+### Utilities and user dropdown menu
 
 Many mastheads contain utilities which collapse into a dropdown at smaller viewport widths. These utilities could include a notification badge to open and close a notification drawer, a link to app or user settings, a help icon which could launch quick starts or link to other resources, and many other utilities. In this demo, the notification badge does not collapse down into the mobile menu so that it is always visible even at narrower viewport widths.
 
 ```ts file='./examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx' isFullscreen
 
 ```
+### Horizontal nav
+```ts file='./examples/Masthead/MastheadWithHorizontalNav.tsx' isFullscreen
+
+```