fix(PF4: Pagination): When 0 or negative number is passed to Pagintion show 0 pages

packages/patternfly-4/react-core/src/components/Pagination/Navigation.tsx

@@ -11,6 +11,8 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   className?: string;
   /** The number of the last page */
   lastPage?: number;
+  /** The number of first page where pagination starts */
+  firstPage?: number;
   /** The title of a page displayed beside the page number */
   pagesTitle?: string;
   /** Accessible label for the button which moves to the last page */
@@ -54,6 +56,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
   static defaultProps = {
     className: '',
     lastPage: 0,
+    firstPage: 0,
     pagesTitle: '',
     toLastPage: 'Go to last page',
     toNextPage: 'Go to next page',
@@ -94,6 +97,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     const {
       page,
       lastPage,
+      firstPage,
       pagesTitle,
       toLastPage,
       toNextPage,
@@ -115,7 +119,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
       <nav className={css(styles.paginationNav, className)} aria-label={paginationTitle} {...props}>
         <Button
           variant={ButtonVariant.plain}
-          isDisabled={page === 1}
+          isDisabled={page === firstPage}
           aria-label={toFirstPage}
           data-action="first"
           onClick={event => {
@@ -128,7 +132,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
         </Button>
         <Button
           variant={ButtonVariant.plain}
-          isDisabled={page === 1}
+          isDisabled={page === firstPage}
           data-action="previous"
           onClick={event => {
             const newPage = page as number - 1 >= 1 ? page as number - 1 : 1;
@@ -145,7 +149,8 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
             className={css(styles.formControl)}
             aria-label={currPage}
             type="number"
-            min="1"
+            disabled={page === firstPage && page === lastPage}
+            min={lastPage <= 0 && firstPage <=0 ? 0 : 1}
             max={lastPage}
             value={userInputPage}
             onKeyDown={event => this.onKeyDown(event, page, lastPage, onPageInput, onSetPage)}

packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.tsx

@@ -50,6 +50,7 @@ export const OptionsToggle: React.FunctionComponent<OptionsToggleProps> = ({
         <DropdownToggle
           aria-label={optionsToggle}
           onToggle={onToggle}
+          isDisabled={itemCount <= 0}
           isOpen={isOpen}
           id={`${widgetId}-toggle`}
           className={styles.optionsMenuToggleButton}

packages/patternfly-4/react-core/src/components/Pagination/Pagination.md

@@ -86,3 +86,85 @@ class PaginationBottom extends React.Component {
   }
 }
 ```
+
+## No items
+```js
+import React from 'react';
+import { Pagination, PaginationVariant } from '@patternfly/react-core';
+
+class PaginationTop extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      perPage: 20
+    };
+
+    this.onSetPage = (_event, pageNumber) => {
+      this.setState({
+        page: pageNumber
+      });
+    };
+
+    this.onPerPageSelect = (_event, perPage) => {
+      this.setState({
+        perPage
+      });
+    };
+  }
+
+  render() {
+    return (
+      <Pagination
+        itemCount={0}
+        perPage={this.state.perPage}
+        page={this.state.page}
+        onSetPage={this.onSetPage}
+        widgetId="pagination-options-menu-top"
+        onPerPageSelect={this.onPerPageSelect}
+      />
+    );
+  }
+}
+```
+
+## One page
+```js
+import React from 'react';
+import { Pagination, PaginationVariant } from '@patternfly/react-core';
+
+class PaginationTop extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      perPage: 20
+    };
+
+    this.onSetPage = (_event, pageNumber) => {
+      this.setState({
+        page: pageNumber
+      });
+    };
+
+    this.onPerPageSelect = (_event, perPage) => {
+      this.setState({
+        perPage
+      });
+    };
+  }
+
+  render() {
+    return (
+      <Pagination
+        itemCount={15}
+        perPage={this.state.perPage}
+        page={this.state.page}
+        onSetPage={this.onSetPage}
+        widgetId="pagination-options-menu-top"
+        onPerPageSelect={this.onPerPageSelect}
+      />
+    );
+  }
+}
+```

packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js

@@ -18,6 +18,11 @@ describe('component render', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  test('zero results', () => {
+    const wrapper = mount(<Pagination itemCount={0} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
   test('last page', () => {
     const wrapper = mount(<Pagination itemCount={20} perPage={10} page={2} />);
     expect(wrapper).toMatchSnapshot();

packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx

@@ -130,9 +130,9 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   ...props
 }: PaginationProps) => {
   const lastPage = Math.ceil(itemCount / perPage);
-  const firstIndex = itemCount === 0 ? 0 : (page - 1) * perPage + 1;
+  const firstIndex = itemCount <= 0 ? 0 : (page - 1) * perPage + 1;
   let lastIndex;
-  if (itemCount === 0) {
+  if (itemCount <= 0) {
     lastIndex = 0;
   } else {
     lastIndex = page === lastPage ? itemCount : page * perPage;
@@ -170,7 +170,8 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
         toFirstPage={titles.toFirstPage}
         currPage={titles.currPage}
         paginationTitle={titles.paginationTitle}
-        page={page}
+        page={itemCount <= 0 ? 0 : page}
+        firstPage={itemsStart !== null ? itemsStart : firstIndex}
         lastPage={lastPage}
         onSetPage={onSetPage}
         onFirstClick={onFirstClick}