[EuiPagination] Added first/last buttons for compressed and allowing for indeterminate pageCount

src-docs/src/views/icon/icons.js

@@ -60,10 +60,12 @@ export const iconTypes = [
   'cut',
   'database',
   'document',
-  'documentation',
-  'documentEdit',
   'documents',
+  'documentEdit',
+  'documentation',
   'dot',
+  'doubleArrowLeft',
+  'doubleArrowRight',
   'download',
   'email',
   'empty',

src-docs/src/views/pagination/centered_pagination.js → src-docs/src/views/pagination/centered_pagination.tsx

@@ -8,11 +8,7 @@ import {
 
 export default function () {
   const [activePage, setActivePage] = useState(0);
-  const PAGE_COUNT = 10;
-
-  const goToPage = (pageNumber) => {
-    setActivePage(pageNumber);
-  };
+  const PAGE_COUNT = 15;
 
   return (
     <EuiFlexGroup justifyContent="spaceAround">
@@ -21,7 +17,7 @@ export default function () {
           aria-label="Centered pagination example"
           pageCount={PAGE_COUNT}
           activePage={activePage}
-          onPageClick={(activePage) => goToPage(activePage)}
+          onPageClick={(activePage) => setActivePage(activePage)}
         />
       </EuiFlexItem>
     </EuiFlexGroup>

src-docs/src/views/pagination/compressed.js → src-docs/src/views/pagination/compressed.tsx

@@ -4,17 +4,13 @@ import { EuiPagination } from '../../../../src/components';
 
 export default function () {
   const [activePage, setActivePage] = useState(0);
-  const PAGE_COUNT = 4;
-
-  const goToPage = (pageNumber) => {
-    setActivePage(pageNumber);
-  };
+  const PAGE_COUNT = 24;
 
   return (
     <EuiPagination
       pageCount={PAGE_COUNT}
       activePage={activePage}
-      onPageClick={(activePage) => goToPage(activePage)}
+      onPageClick={(activePage) => setActivePage(activePage)}
       compressed
     />
   );

src-docs/src/views/pagination/customizable_pagination.js → src-docs/src/views/pagination/customizable_pagination.tsx

@@ -21,9 +21,9 @@ export default () => {
     setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
   const closePopover = () => setIsPopoverOpen(false);
 
-  const goToPage = (pageNumber) => setActivePage(pageNumber);
+  const goToPage = (pageNumber: number) => setActivePage(pageNumber);
 
-  const getIconType = (size) => {
+  const getIconType = (size: number) => {
     return size === rowSize ? 'check' : 'empty';
   };
 

src-docs/src/views/pagination/few_pages.js → src-docs/src/views/pagination/few_pages.tsx

@@ -1,21 +1,17 @@
 import React, { useState } from 'react';
 
-import { EuiPagination } from '../../../../src/components';
+import { EuiPagination } from '../../../../src';
 
 export default function () {
   const [activePage, setActivePage] = useState(0);
   const PAGE_COUNT = 4;
 
-  const goToPage = (pageNumber) => {
-    setActivePage(pageNumber);
-  };
-
   return (
     <EuiPagination
       aria-label="Few pages example"
       pageCount={PAGE_COUNT}
       activePage={activePage}
-      onPageClick={(activePage) => goToPage(activePage)}
+      onPageClick={(activePage) => setActivePage(activePage)}
     />
   );
 }

src-docs/src/views/pagination/indeterminate.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+
+import { EuiPagination } from '../../../../src/components';
+
+export default function () {
+  const [activePage, setActivePage] = useState(0);
+  const PAGE_COUNT = 0;
+
+  return (
+    <EuiPagination
+      pageCount={PAGE_COUNT}
+      activePage={activePage}
+      onPageClick={(activePage) => setActivePage(activePage)}
+      compressed
+    />
+  );
+}

src-docs/src/views/pagination/many_pages.js → src-docs/src/views/pagination/many_pages.tsx

@@ -6,16 +6,12 @@ export default function () {
   const [activePage, setActivePage] = useState(0);
   const PAGE_COUNT = 22;
 
-  const goToPage = (pageNumber) => {
-    setActivePage(pageNumber);
-  };
-
   return (
     <EuiPagination
       aria-label="Many pages example"
       pageCount={PAGE_COUNT}
       activePage={activePage}
-      onPageClick={(activePage) => goToPage(activePage)}
+      onPageClick={(activePage) => setActivePage(activePage)}
     />
   );
 }

src-docs/src/views/pagination/pagination_example.js

@@ -6,7 +6,6 @@ import { GuideSectionTypes } from '../../components';
 import {
   EuiCode,
   EuiPagination,
-  EuiPaginationButton,
   EuiText,
   EuiCallOut,
 } from '../../../../src/components';
@@ -76,6 +75,16 @@ const compressedSnippet = `<EuiPagination
   compressed
 />`;
 
+import Indeterminate from './indeterminate';
+const indeterminateSource = require('!!raw-loader!./indeterminate');
+const indeterminateSnippet = `<EuiPagination
+  aria-label={paginationLabel}
+  pageCount={pageCount}
+  activePage={activePage}
+  onPageClick={(activePage) => goToPage(activePage)}
+  compressed
+/>`;
+
 export const PaginationExample = {
   title: 'Pagination',
   intro: (
@@ -122,7 +131,7 @@ export const PaginationExample = {
           />
         </>
       ),
-      props: { EuiPagination, EuiPaginationButton },
+      props: { EuiPagination },
       snippet: manyPagesSnippet,
       demo: <ManyPages />,
       playground: paginationConfig,
@@ -175,12 +184,35 @@ export const PaginationExample = {
       text: (
         <p>
           Use the <EuiCode>compressed</EuiCode> prop to minimize the horizontal
-          footprint.
+          footprint. This will replace the numbered buttons with static numbers
+          and rely on the first, last, next and previous icon buttons to
+          navigate.
         </p>
       ),
       snippet: compressedSnippet,
       demo: <Compressed />,
     },
+    {
+      title: 'Indeterminate page count',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: indeterminateSource,
+        },
+      ],
+      text: (
+        <p>
+          If the total number of pages cannot be accurately determined, you can
+          pass <EuiCode>0</EuiCode> as the <EuiCode>pageCount</EuiCode>. This
+          will remove the button numbers and rely solely on the arrow icon
+          buttons for navigation. Without a total page count, the last page
+          button will pass back <EuiCode>-1</EuiCode> for the{' '}
+          <EuiCode>activePage</EuiCode>.
+        </p>
+      ),
+      snippet: indeterminateSnippet,
+      demo: <Indeterminate />,
+    },
     {
       title: 'Customizable pagination',
       source: [

src-docs/src/views/tables/custom/custom.js

@@ -756,14 +756,15 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiTablePagination
-          tableCaption="Custom EuiTable demo"
+          aria-label="Custom EuiTable demo"
           aria-controls={exampleId}
           activePage={this.pager.getCurrentPageIndex()}
           itemsPerPage={this.state.itemsPerPage}
           itemsPerPageOptions={[5, 10, 20]}
           pageCount={this.pager.getTotalPages()}
           onChangeItemsPerPage={this.onChangeItemsPerPage}
           onChangePage={this.onChangePage}
+          compressed
         />
       </div>
     );

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -485,56 +485,52 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                           aria-label="Pagination for table: "
                           className="euiPagination"
                         >
-                          <EuiI18n
-                            default="Previous page, {page}"
-                            token="euiPagination.previousPage"
-                            values={
-                              Object {
-                                "page": 1,
-                              }
-                            }
+                          <EuiPaginationButtonArrow
+                            activePage={1}
+                            ariaControls="__table_generated-id"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="previous"
                           >
-                            <EuiI18n
-                              default="Previous page"
-                              token="euiPagination.disabledPreviousPage"
+                            <EuiButtonIcon
+                              aria-controls="__table_generated-id"
+                              aria-label="Previous page, 1"
+                              color="text"
+                              data-test-subj="pagination-button-previous"
+                              href="#__table_generated-id"
+                              iconType="arrowLeft"
+                              isDisabled={false}
+                              onClick={[Function]}
+                              title="Previous page, 1"
                             >
-                              <EuiButtonIcon
+                              <a
                                 aria-controls="__table_generated-id"
                                 aria-label="Previous page, 1"
-                                color="text"
+                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                                 data-test-subj="pagination-button-previous"
                                 href="#__table_generated-id"
-                                iconType="arrowLeft"
                                 onClick={[Function]}
+                                rel="noreferrer"
+                                title="Previous page, 1"
                               >
-                                <a
-                                  aria-controls="__table_generated-id"
-                                  aria-label="Previous page, 1"
-                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                                  data-test-subj="pagination-button-previous"
-                                  href="#__table_generated-id"
-                                  onClick={[Function]}
-                                  rel="noreferrer"
+                                <EuiIcon
+                                  aria-hidden="true"
+                                  className="euiButtonIcon__icon"
+                                  color="inherit"
+                                  size="m"
+                                  type="arrowLeft"
                                 >
-                                  <EuiIcon
+                                  <span
                                     aria-hidden="true"
                                     className="euiButtonIcon__icon"
                                     color="inherit"
+                                    data-euiicon-type="arrowLeft"
                                     size="m"
-                                    type="arrowLeft"
-                                  >
-                                    <span
-                                      aria-hidden="true"
-                                      className="euiButtonIcon__icon"
-                                      color="inherit"
-                                      data-euiicon-type="arrowLeft"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                </a>
-                              </EuiButtonIcon>
-                            </EuiI18n>
-                          </EuiI18n>
+                                  />
+                                </EuiIcon>
+                              </a>
+                            </EuiButtonIcon>
+                          </EuiPaginationButtonArrow>
                           <ul
                             aria-label="Pagination for table: "
                             className="euiPagination__list"
@@ -712,54 +708,47 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                               </li>
                             </PaginationButtonWrapper>
                           </ul>
-                          <EuiI18n
-                            default="Next page, {page}"
-                            token="euiPagination.nextPage"
-                            values={
-                              Object {
-                                "page": 3,
-                              }
-                            }
+                          <EuiPaginationButtonArrow
+                            activePage={1}
+                            ariaControls="__table_generated-id"
+                            disabled={true}
+                            onClick={[Function]}
+                            type="next"
                           >
-                            <EuiI18n
-                              default="Next page"
-                              token="euiPagination.disabledNextPage"
+                            <EuiButtonIcon
+                              aria-label="Next page, 3"
+                              color="text"
+                              data-test-subj="pagination-button-next"
+                              iconType="arrowRight"
+                              isDisabled={true}
+                              onClick={[Function]}
                             >
-                              <EuiButtonIcon
-                                aria-label="Next page"
-                                color="text"
+                              <button
+                                aria-label="Next page, 3"
+                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                                 data-test-subj="pagination-button-next"
                                 disabled={true}
-                                iconType="arrowRight"
                                 onClick={[Function]}
+                                type="button"
                               >
-                                <button
-                                  aria-label="Next page"
-                                  className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                                  data-test-subj="pagination-button-next"
-                                  disabled={true}
-                                  onClick={[Function]}
-                                  type="button"
+                                <EuiIcon
+                                  aria-hidden="true"
+                                  className="euiButtonIcon__icon"
+                                  color="inherit"
+                                  size="m"
+                                  type="arrowRight"
                                 >
-                                  <EuiIcon
+                                  <span
                                     aria-hidden="true"
                                     className="euiButtonIcon__icon"
                                     color="inherit"
+                                    data-euiicon-type="arrowRight"
                                     size="m"
-                                    type="arrowRight"
-                                  >
-                                    <span
-                                      aria-hidden="true"
-                                      className="euiButtonIcon__icon"
-                                      color="inherit"
-                                      data-euiicon-type="arrowRight"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                </button>
-                              </EuiButtonIcon>
-                            </EuiI18n>
-                          </EuiI18n>
+                                  />
+                                </EuiIcon>
+                              </button>
+                            </EuiButtonIcon>
+                          </EuiPaginationButtonArrow>
                         </nav>
                       </EuiPagination>
                     </div>