@patternfly/react-core 5.0.0-prerelease.2 → 5.0.0-prerelease.20

package/src/components/Pagination/Navigation.tsx

@@ -6,6 +6,7 @@ import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-do
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
 import { Button, ButtonVariant } from '../Button';
+import { TextInput } from '../TextInput';
 import { OnSetPage } from './Pagination';
 import { pluralize, PickOptional } from '../../helpers';
 import { KeyTypes } from '../../helpers/constants';
@@ -28,7 +29,7 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Label for the English word "of". */
   ofWord?: string;
   /** The number of the current page. */
-  page: React.ReactText;
+  page: string | number;
   /** The title of a page displayed beside the page number. */
   pagesTitle?: string;
   /** The title of a page displayed beside the page number (the plural form). */
@@ -102,9 +103,9 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     return inputPage;
   }
 
-  private onChange(event: React.ChangeEvent<HTMLInputElement>, lastPage: number): void {
-    const inputPage = Navigation.parseInteger(event.target.value, lastPage);
-    this.setState({ userInputPage: Number.isNaN(inputPage as number) ? event.target.value : inputPage });
+  private onChange(event: React.FormEvent<HTMLInputElement>, lastPage: number): void {
+    const inputPage = Navigation.parseInteger(event.currentTarget.value, lastPage);
+    this.setState({ userInputPage: Number.isNaN(inputPage as number) ? event.currentTarget.value : inputPage });
   }
 
   private onKeyDown(
@@ -217,11 +218,10 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
         </div>
         {!isCompact && (
           <div className={styles.paginationNavPageSelect}>
-            <input
-              className={css(styles.formControl)}
+            <TextInput
               aria-label={currPageAriaLabel}
               type="number"
-              disabled={
+              isDisabled={
                 isDisabled || (itemCount && page === firstPage && page === lastPage && itemCount >= 0) || page === 0
               }
               min={lastPage <= 0 && firstPage <= 0 ? 0 : 1}

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

@@ -21,7 +21,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         class="pf-v5-c-button pf-m-plain"
         data-action="first"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"
       >
@@ -29,8 +29,10 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           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"
@@ -47,7 +49,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         class="pf-v5-c-button pf-m-plain"
         data-action="previous"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"
       >
@@ -55,8 +57,10 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           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"
@@ -67,14 +71,21 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
     <div
       class="pf-v5-c-pagination__nav-page-select"
     >
-      <input
-        aria-label="Current page"
+      <span
         class="pf-v5-c-form-control"
-        max="0"
-        min="0"
-        type="number"
-        value="42"
-      />
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Current page"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF5/TextInput"
+          data-ouia-safe="true"
+          max="0"
+          min="0"
+          type="number"
+          value="42"
+        />
+      </span>
     </div>
     <div
       class="pf-v5-c-pagination__nav-control"
@@ -85,7 +96,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         class="pf-v5-c-button pf-m-plain"
         data-action="next"
         data-ouia-component-id="OUIA-Generated-Button-plain-3"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"
       >
@@ -93,8 +104,10 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           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"
@@ -111,7 +124,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         class="pf-v5-c-button pf-m-plain"
         data-action="last"
         data-ouia-component-id="OUIA-Generated-Button-plain-4"
-        data-ouia-component-type="PF4/Button"
+        data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
         type="button"
       >
@@ -119,8 +132,10 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
           aria-hidden="true"
           class="pf-v5-svg"
           fill="currentColor"
+          height="1em"
           role="img"
           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"

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

@@ -32,8 +32,10 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
             aria-hidden="true"
             class="pf-v5-svg"
             fill="currentColor"
+            height="1em"
             role="img"
             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"