@patternfly/react-core 4.202.36 → 4.203.1

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

@@ -30,6 +30,7 @@ exports[`Pagination component render custom pagination toggle 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-13"
@@ -242,6 +243,7 @@ exports[`Pagination component render custom perPageOptions 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-10"
@@ -454,6 +456,7 @@ exports[`Pagination component render custom start end 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-11"
@@ -835,6 +838,7 @@ exports[`Pagination component render last page 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-9"
@@ -1047,6 +1051,7 @@ exports[`Pagination component render limited number of pages 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
@@ -1250,6 +1255,7 @@ exports[`Pagination component render should render correctly bottom 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-2"
@@ -1450,6 +1456,7 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-5"
@@ -1618,6 +1625,215 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
 </DocumentFragment>
 `;
 
+exports[`Pagination component render should render correctly button variant 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-pagination"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-17"
+    data-ouia-component-type="PF4/Pagination"
+    data-ouia-safe="true"
+    id="pagination-options-menu-18"
+    style="--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;"
+  >
+    <div
+      class="pf-c-pagination__total-items"
+    >
+      <b>
+        -9 - 10
+      </b>
+       of 
+      <b>
+        20
+      </b>
+       
+    </div>
+    <div
+      class="pf-c-options-menu"
+      data-ouia-component-type="PF4/PaginationOptionsMenu"
+      data-ouia-safe="true"
+    >
+      <button
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label=""
+        class="  pf-c-options-menu__toggle pf-m-plain pf-m-text"
+        data-ouia-component-id="OUIA-Generated-DropdownToggle-18"
+        data-ouia-component-type="PF4/DropdownToggle"
+        data-ouia-safe="true"
+        id="pagination-options-menu-toggle-17"
+        type="button"
+      >
+        <span
+          class="pf-c-options-menu__toggle-text"
+        >
+          <b>
+            -9 - 10
+          </b>
+           of 
+          <b>
+            20
+          </b>
+           
+        </span>
+        <span
+          class="pf-c-options-menu__toggle-icon"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 320 512"
+            width="1em"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+    <nav
+      aria-label="Pagination"
+      class="pf-c-pagination__nav"
+    >
+      <div
+        class="pf-c-pagination__nav-control pf-m-first"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to first page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="first"
+          data-ouia-component-id="OUIA-Generated-Button-plain-71"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="true"
+          aria-label="Go to previous page"
+          class="pf-c-button pf-m-plain pf-m-disabled"
+          data-action="previous"
+          data-ouia-component-id="OUIA-Generated-Button-plain-72"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          disabled=""
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-page-select"
+      >
+        <input
+          aria-label="Current page"
+          class="pf-c-form-control"
+          max="2"
+          min="1"
+          type="number"
+          value="1"
+        />
+        <span
+          aria-hidden="true"
+        >
+          of 2
+        </span>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Go to next page"
+          class="pf-c-button pf-m-plain"
+          data-action="next"
+          data-ouia-component-id="OUIA-Generated-Button-plain-73"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="pf-c-pagination__nav-control pf-m-last"
+      >
+        <button
+          aria-disabled="false"
+          aria-label="Go to last page"
+          class="pf-c-button pf-m-plain"
+          data-action="last"
+          data-ouia-component-id="OUIA-Generated-Button-plain-74"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </button>
+      </div>
+    </nav>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Pagination component render should render correctly compact 1`] = `
 <DocumentFragment>
   <div
@@ -1662,6 +1878,7 @@ exports[`Pagination component render should render correctly compact 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-3"
@@ -1800,6 +2017,7 @@ exports[`Pagination component render should render correctly disabled 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
@@ -2016,6 +2234,7 @@ exports[`Pagination component render should render correctly sticky 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-4"
@@ -2228,6 +2447,7 @@ exports[`Pagination component render should render correctly top 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
@@ -2440,6 +2660,7 @@ exports[`Pagination component render titles 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-12"
@@ -2652,6 +2873,7 @@ exports[`Pagination component render up drop direction 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-14"
@@ -2864,6 +3086,7 @@ exports[`Pagination component render zero results 1`] = `
         </span>
         <button
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Items per page"
           class="  pf-c-options-menu__toggle-button"
           data-ouia-component-id="OUIA-Generated-DropdownToggle-8"

package/src/components/Pagination/examples/Pagination.md

@@ -38,6 +38,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -77,6 +78,7 @@ class PaginationBottom extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={333}
         widgetId="pagination-options-menu-bottom"
         perPage={this.state.perPage}
@@ -89,6 +91,7 @@ class PaginationBottom extends React.Component {
   }
 }
 ```
+
 ### Indeterminate
 
 By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
@@ -106,6 +109,7 @@ PaginationIndeterminate = () => {
 
   return (
     <Pagination
+      perPageComponent="button"
       toggleTemplate={({ firstIndex, lastIndex }) => (
         <React.Fragment>
           <b>
@@ -122,7 +126,7 @@ PaginationIndeterminate = () => {
       onPerPageSelect={onPerPageSelect}
     />
   );
-}
+};
 ```
 
 ### Disabled
@@ -155,6 +159,7 @@ class PaginationDisabled extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -198,6 +203,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={0}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -240,6 +246,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={15}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -282,6 +289,7 @@ class PaginationTop extends React.Component {
   render() {
     return (
       <Pagination
+        perPageComponent="button"
         itemCount={523}
         perPage={this.state.perPage}
         page={this.state.page}
@@ -335,6 +343,7 @@ class PaginationSticky extends React.Component {
         {this.state.isTopSticky && (
           <React.Fragment>
             <Pagination
+              perPageComponent="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}
@@ -368,6 +377,7 @@ class PaginationSticky extends React.Component {
               ))}
             </Gallery>
             <Pagination
+              perPageComponent="button"
               itemCount={523}
               perPage={this.state.perPage}
               page={this.state.page}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 

package/src/components/Dropdown/__tests__/Generated/InternalDropdownItem.test.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-
-import { InternalDropdownItem } from '../../InternalDropdownItem';
-import { DropdownContext } from '../../dropdownConstants';
-
-describe('InternalDropdownItem', () => {
-  it('should match snapshot', () => {
-    const view = render(
-      <DropdownContext.Provider value={{}}>
-        {' '}
-        <InternalDropdownItem
-          children={<div>ReactNode</div>}
-          className={"''"}
-          listItemClassName={'string'}
-          component={'a'}
-          role={"'none'"}
-          isDisabled={false}
-          isPlainText={false}
-          isHovered={false}
-          href={'string'}
-          tooltip={<div>ReactNode</div>}
-          tooltipProps={undefined}
-          index={-1}
-          context={{
-            keyHandler: () => {},
-            sendRef: () => {}
-          }}
-          onClick={(event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => undefined as any}
-          id={'string'}
-          componentID={'string'}
-          additionalChild={<div>ReactNode</div>}
-          customChild={<div>ReactNode</div>}
-          enterTriggersArrowDown={false}
-          icon={<div>ReactNode</div>}
-        />
-      </DropdownContext.Provider>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
-});

package/src/components/Dropdown/__tests__/Generated/__snapshots__/InternalDropdownItem.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InternalDropdownItem should match snapshot 1`] = `
-<div>
-   
-  <div>
-    ReactNode
-  </div>
-</div>
-`;

package/src/components/Select/__tests__/Generated/SelectGroup.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-
-import { SelectGroup } from '../../SelectGroup';
-import { SelectContext } from '../..';
-
-describe('SelectGroup', () => {
-  it('should match snapshot', () => {
-    const view = render(
-      <SelectContext.Provider
-        value={{
-          onSelect: jest.fn(),
-          onClose: jest.fn(),
-          onFavorite: jest.fn(),
-          variant: 'default',
-          inputIdPrefix: 'something'
-        }}
-      >
-        <SelectGroup children={[]} className="" label="" titleId="" />
-      </SelectContext.Provider>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
-});

package/src/components/Select/__tests__/Generated/SelectMenu.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-
-import { SelectMenu } from '../../SelectMenu';
-import { SelectContext } from '../..';
-
-describe('SelectMenu', () => {
-  it('should match snapshot', () => {
-    const view = render(
-      <SelectContext.Provider
-        value={{
-          onSelect: jest.fn(),
-          onClose: jest.fn(),
-          onFavorite: jest.fn(),
-          variant: 'default',
-          inputIdPrefix: 'something'
-        }}
-      >
-        <SelectMenu />
-      </SelectContext.Provider>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
-});

package/src/components/Select/__tests__/Generated/__snapshots__/SelectGroup.test.tsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SelectGroup should match snapshot 1`] = `
-<div>
-  <div
-    class="pf-c-select__menu-group"
-  >
-    <div
-      aria-hidden="true"
-      class="pf-c-select__menu-group-title"
-      id=""
-    />
-    <ul
-      role="listbox"
-    />
-  </div>
-</div>
-`;

package/src/components/Select/__tests__/Generated/__snapshots__/SelectMenu.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SelectMenu should match snapshot 1`] = `
-<div>
-  <ul
-    class="pf-c-select__menu"
-    role="listbox"
-  />
-</div>
-`;

package/src/components/Toolbar/__tests__/Generated/ToolbarToggleGroup.test.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { render } from '@testing-library/react';
-
-import { ToolbarContentContext, ToolbarToggleGroup } from '../..';
-import { PageContext } from '../../../Page/Page';
-
-describe('ToolbarToggleGroup', () => {
-  it('should match snapshot', () => {
-    const view = render(
-      <PageContext.Provider
-        value={{ isManagedSidebar: false, onNavToggle: jest.fn(), isNavOpen: true, width: 1, getBreakpoint: jest.fn() }}
-      >
-        <ToolbarContentContext.Provider
-          value={{
-            expandableContentId: 'test',
-            expandableContentRef: { current: ((<></>) as unknown) as HTMLDivElement },
-            chipContainerRef: { current: ((<></>) as unknown) as HTMLDivElement }
-          }}
-        >
-          <ToolbarToggleGroup breakpoint="xl" toggleIcon={<div>ReactNode</div>} />
-        </ToolbarContentContext.Provider>
-      </PageContext.Provider>
-    );
-    expect(view.container).toMatchSnapshot();
-  });
-});

package/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarToggleGroup.test.tsx.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToolbarToggleGroup should match snapshot 1`] = `
-<div>
-  <div
-    class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
-  >
-    <div
-      class="pf-c-toolbar__toggle"
-    >
-      <button
-        aria-controls="test"
-        aria-disabled="false"
-        aria-haspopup="false"
-        aria-label="Show Filters"
-        class="pf-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-1"
-        data-ouia-component-type="PF4/Button"
-        data-ouia-safe="true"
-        type="button"
-      >
-        <div>
-          ReactNode
-        </div>
-      </button>
-    </div>
-  </div>
-</div>
-`;