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

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
+- Added first and last page arrow buttons to `EuiPagination` when `compressed=true` ([#5362](https://github.com/elastic/eui/pull/5362))
+- Added support for indeterminate `EuiPagination` when `pageCount=0` ([#5362](https://github.com/elastic/eui/pull/5362))
+- Moved mobile behavior to a customizable `responsive` prop to `EuiPagination` that renders the `compressed` display ([#5362](https://github.com/elastic/eui/pull/5362))
+- Added `doubleArrowLeft`, `doubleArrowRight`, `arrowStart`, `arrowEnd` icons ([#5362](https://github.com/elastic/eui/pull/5362))
+
 **Bug fixes**
 
 - Fixed scrollbars in `EuiRange` tick labels in Safari ([#5427](https://github.com/elastic/eui/pull/5427))

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

@@ -22,6 +22,8 @@ export const iconTypes = [
   'arrowLeft',
   'arrowRight',
   'arrowUp',
+  'arrowStart',
+  'arrowEnd',
   'asterisk',
   'beaker',
   'bell',
@@ -60,10 +62,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,14 @@ 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
+      aria-label="Compressed example"
       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,15 +21,15 @@ 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';
   };
 
   const button = (
     <EuiButtonEmpty
-      size="s"
+      size="xs"
       color="text"
       iconType="arrowDown"
       iconSide="right"
@@ -70,20 +70,15 @@ export default () => {
     >
       50 rows
     </EuiContextMenuItem>,
-    <EuiContextMenuItem
-      key="100 rows"
-      icon={getIconType(100)}
-      onClick={() => {
-        closePopover();
-        setRowSize(100);
-      }}
-    >
-      100 rows
-    </EuiContextMenuItem>,
   ];
 
   return (
-    <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+    <EuiFlexGroup
+      justifyContent="spaceBetween"
+      alignItems="center"
+      responsive={false}
+      wrap
+    >
       <EuiFlexItem grow={false}>
         <EuiPopover
           button={button}

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,16 @@
+import React, { useState } from 'react';
+
+import { EuiPagination } from '../../../../src/components';
+
+export default function () {
+  const [activePage, setActivePage] = useState(0);
+
+  return (
+    <EuiPagination
+      aria-label="Indeterminate example"
+      pageCount={0}
+      activePage={activePage}
+      onPageClick={(activePage) => setActivePage(activePage)}
+    />
+  );
+}

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';
@@ -46,34 +45,33 @@ const centeredPaginationSnippet = `<EuiFlexGroup justifyContent="spaceAround">
 
 import CustomizablePagination from './customizable_pagination';
 const customizablePaginationSource = require('!!raw-loader!./customizable_pagination');
-const customizablePaginationSnippet = `<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-  <EuiFlexItem grow={false}>
-    <EuiPopover
-      button={button}
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}>
-      <EuiContextMenuPanel items={items} />
-    </EuiPopover>
-  </EuiFlexItem>
-
-  <EuiFlexItem grow={false}>
-    <EuiPagination
-      aria-label={paginationLabel}
-      pageCount={pageCount}
-      activePage={activePage}
-      onPageClick={(activePage) => goToPage(activePage)}
-    />
-  </EuiFlexItem>
-</EuiFlexGroup>`;
 
 import Compressed from './compressed';
 const compressedSource = require('!!raw-loader!./compressed');
-const compressedSnippet = `<EuiPagination
+const compressedSnippet = [
+  `<EuiPagination
   aria-label={paginationLabel}
   pageCount={pageCount}
   activePage={activePage}
   onPageClick={(activePage) => goToPage(activePage)}
   compressed
+/>`,
+  `<EuiPagination
+  aria-label={paginationLabel}
+  pageCount={pageCount}
+  activePage={activePage}
+  onPageClick={(activePage) => goToPage(activePage)}
+  responsive={['xs']}
+/>`,
+];
+
+import Indeterminate from './indeterminate';
+const indeterminateSource = require('!!raw-loader!./indeterminate');
+const indeterminateSnippet = `<EuiPagination
+  aria-label={paginationLabel}
+  pageCount={0}
+  activePage={activePage}
+  onPageClick={(activePage) => goToPage(activePage)}
 />`;
 
 export const PaginationExample = {
@@ -122,7 +120,7 @@ export const PaginationExample = {
           />
         </>
       ),
-      props: { EuiPagination, EuiPaginationButton },
+      props: { EuiPagination },
       snippet: manyPagesSnippet,
       demo: <ManyPages />,
       playground: paginationConfig,
@@ -143,6 +141,7 @@ export const PaginationExample = {
       ),
       snippet: fewPagesSnippet,
       demo: <FewPages />,
+      props: { EuiPagination },
     },
     {
       title: 'Centered pagination',
@@ -158,34 +157,70 @@ export const PaginationExample = {
           <Link to="/layout/flex">
             <strong>EuiFlexGroup</strong>
           </Link>{' '}
-          to set up this pagination layout.
+          to center the pagination in a layout.
         </p>
       ),
       snippet: centeredPaginationSnippet,
       demo: <CenteredPagination />,
     },
     {
-      title: 'Compressed display',
+      title: 'Compressed and responsive',
       source: [
         {
           type: GuideSectionTypes.JS,
           code: compressedSource,
         },
       ],
       text: (
-        <p>
-          Use the <EuiCode>compressed</EuiCode> prop to minimize the horizontal
-          footprint.
-        </p>
+        <>
+          <p>
+            Use the <EuiCode>compressed</EuiCode> prop to minimize the
+            horizontal footprint. This will replace the numbered buttons with
+            static numbers and rely on the first, last, next and previous icon
+            buttons to navigate.
+          </p>
+          <p>
+            This is also the same display that will occur when{' '}
+            <EuiCode>responsive</EuiCode> is <strong>not</strong>{' '}
+            <EuiCode>false</EuiCode>. You can adjust the responsiveness by
+            supplying an array of{' '}
+            <Link to="/theming/breakpoints">named breakpoints</Link> to{' '}
+            <EuiCode>responsive</EuiCode>. The default is{' '}
+            <EuiCode>{"['xs', 's']"}</EuiCode>.
+          </p>
+        </>
       ),
       snippet: compressedSnippet,
       demo: <Compressed />,
+      props: { EuiPagination },
     },
     {
-      title: 'Customizable pagination',
+      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 />,
+      props: { EuiPagination },
+    },
+    {
+      title: 'Customizable pagination',
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
           code: customizablePaginationSource,
         },
       ],
@@ -203,8 +238,8 @@ export const PaginationExample = {
           <Link to="/tabular-content/tables">tables</Link>.
         </p>
       ),
-      snippet: customizablePaginationSnippet,
       demo: <CustomizablePagination />,
+      props: { EuiPagination },
     },
   ],
 };

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>
     );