feat: add compact variant to pagination

pages/pagination/permutations.page.tsx

@@ -19,13 +19,15 @@ const paginationLabels: PaginationProps.Labels = {
 
 const permutations = createPermutations<PaginationProps>([
   {
+    pagesVariant: ['compact'],
     currentPageIndex: [7],
     pagesCount: [15],
     disabled: [true],
     ariaLabels: [paginationLabels],
     jumpToPage: [undefined, { loading: false }],
   },
   {
+    pagesVariant: ['compact', 'normal'],
     currentPageIndex: [1, 6, 15],
     pagesCount: [15],
     openEnd: [true, false],

pages/pagination/simple.page.tsx

@@ -24,6 +24,8 @@ const i18nStrings: PaginationProps.I18nStrings = {
 export default function PaginationSimplePage() {
   const [basicPageIndex, setBasicPageIndex] = useState(1);
   const [jumpPageIndex, setJumpPageIndex] = useState(1);
+  const [compactPageIndex, setCompactPageIndex] = useState(1);
+  const [compactOpenEndPageIndex, setCompactOpenEndPageIndex] = useState(1);
 
   return (
     <I18nProvider messages={[messages]} locale="en">
@@ -46,6 +48,25 @@ export default function PaginationSimplePage() {
           jumpToPage={{}}
           onChange={event => setJumpPageIndex(event.detail.currentPageIndex)}
         />
+
+        <h2>Compact pages</h2>
+        <Pagination
+          pagesVariant="compact"
+          currentPageIndex={compactPageIndex}
+          pagesCount={20}
+          ariaLabels={paginationLabels}
+          onChange={event => setCompactPageIndex(event.detail.currentPageIndex)}
+        />
+
+        <h2>Compact pages with open end</h2>
+        <Pagination
+          pagesVariant="compact"
+          currentPageIndex={compactOpenEndPageIndex}
+          pagesCount={20}
+          openEnd={true}
+          ariaLabels={paginationLabels}
+          onChange={event => setCompactOpenEndPageIndex(event.detail.currentPageIndex)}
+        />
       </ScreenshotArea>
     </I18nProvider>
   );

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -20420,6 +20420,13 @@ from changing page before items are loaded.",
       "type": "boolean",
     },
     {
+      "description": "An object containing all the necessary localized strings required by the component:
+* \`jumpToPageInputLabel\` (string) - Accessible label for the jump-to-page number input.
+* \`jumpToPageError\` (string) - Error message displayed when the entered page number is invalid.
+* \`jumpToPageLoadingText\` (string) - Loading text displayed while the jump-to-page action is in progress.
+* \`pagesCompactText\` ((options: { currentPage: number; pagesCount: number; openEnd: boolean }) => string) -
+  Provides the visible text for compact pages, for example \`3 of 12\`, or \`3 of 12+\` when \`openEnd\` is \`true\`.
+  Receives the current page, page count, and whether pagination is open-ended.",
       "i18nTag": true,
       "inlineType": {
         "name": "PaginationProps.I18nStrings",
@@ -20439,6 +20446,22 @@ from changing page before items are loaded.",
             "optional": true,
             "type": "string",
           },
+          {
+            "inlineType": {
+              "name": "(options: { currentPage: number; pagesCount: number; openEnd: boolean; }) => string",
+              "parameters": [
+                {
+                  "name": "options",
+                  "type": "{ currentPage: number; pagesCount: number; openEnd: boolean; }",
+                },
+              ],
+              "returnType": "string",
+              "type": "function",
+            },
+            "name": "pagesCompactText",
+            "optional": true,
+            "type": "((options: { currentPage: number; pagesCount: number; openEnd: boolean; }) => string)",
+          },
         ],
         "type": "object",
       },
@@ -20474,11 +20497,29 @@ never disabled. When the user clicks on it but there are no more items to show,
       "type": "boolean",
     },
     {
-      "description": "Sets the total number of pages. Only positive integers are allowed.",
+      "description": "Sets the total number of pages. When \`openEnd\` is \`true\`, this is the number of pages currently available.
+Only positive integers are allowed.",
       "name": "pagesCount",
       "optional": false,
       "type": "number",
     },
+    {
+      "defaultValue": "'normal'",
+      "description": "Specifies how pages are displayed:
+* \`normal\` - Displays page number buttons. For larger page ranges, the displayed range is truncated with ellipses.
+* \`compact\` - Displays the current page and page count between the previous and next buttons. When \`openEnd\` is \`true\`, a plus sign after the page count indicates that more pages are available.",
+      "inlineType": {
+        "name": "PaginationProps.PagesVariant",
+        "type": "union",
+        "values": [
+          "normal",
+          "compact",
+        ],
+      },
+      "name": "pagesVariant",
+      "optional": true,
+      "type": "string",
+    },
   ],
   "regions": [],
   "releaseStatus": "stable",
@@ -38369,6 +38410,20 @@ To find a specific item use the \`findBreadcrumbLink(n)\` function as chaining \
             ],
           },
         },
+        {
+          "description": "Returns the visible text for compact pages (for example, \`3 of 12\` or \`3 of 12+\`).",
+          "name": "findPagesCompactText",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
         {
           "name": "findPreviousPageButton",
           "parameters": [],
@@ -50063,6 +50118,15 @@ To find a specific item use the \`findBreadcrumbLink(n)\` function as chaining \
             ],
           },
         },
+        {
+          "description": "Returns the visible text for compact pages (for example, \`3 of 12\` or \`3 of 12+\`).",
+          "name": "findPagesCompactText",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
         {
           "name": "findPreviousPageButton",
           "parameters": [],

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -499,6 +499,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_jump-to-page-input_fvjdu",
     "awsui_jump-to-page_fvjdu",
     "awsui_page-number_fvjdu",
+    "awsui_pages-compact-text_lmd86",
     "awsui_root_fvjdu",
   ],
   "panel-layout": [

src/i18n/messages-types.ts

@@ -335,6 +335,11 @@ export interface I18nFormatArgTypes {
     'i18nStrings.jumpToPageInputLabel': never;
     'i18nStrings.jumpToPageError': never;
     'i18nStrings.jumpToPageLoadingText': never;
+    'i18nStrings.pagesCompactText': {
+      openEnd: string;
+      currentPage: string | number;
+      pagesCount: string | number;
+    };
   };
   'panel-resize-handle': {
     'i18nStrings.resizeHandleAriaLabel': never;

src/i18n/messages/all.ar.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "الانتقال إلى الصفحة",
     "i18nStrings.jumpToPageInputLabel": "صفحة",
     "i18nStrings.jumpToPageError": "الصفحة خارج نطاق الوصول. جارٍ عرض آخر صفحة متاحة.",
-    "i18nStrings.jumpToPageLoadingText": "جار التحميل"
+    "i18nStrings.jumpToPageLoadingText": "جار التحميل",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage} من {pagesCount} +} false {{currentPage} من {pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "مقبض تغيير حجم اللوحة",

src/i18n/messages/all.de.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "Zur Seite springen",
     "i18nStrings.jumpToPageInputLabel": "Seite",
     "i18nStrings.jumpToPageError": "Seite ist außerhalb des Bereichs. Zeigt die letzte verfügbare Seite an.",
-    "i18nStrings.jumpToPageLoadingText": "Wird geladen"
+    "i18nStrings.jumpToPageLoadingText": "Wird geladen",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage} von {pagesCount}+} false {{currentPage} von {pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "Größe des Panels ändern",

src/i18n/messages/all.en-GB.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "Jump to page",
     "i18nStrings.jumpToPageInputLabel": "Page",
     "i18nStrings.jumpToPageError": "Page out of range. Showing the last available page.",
-    "i18nStrings.jumpToPageLoadingText": "Loading"
+    "i18nStrings.jumpToPageLoadingText": "Loading",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage} of {pagesCount}+} false {{currentPage} of {pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "Panel resize handle",

src/i18n/messages/all.en.json

@@ -257,7 +257,8 @@
     "ariaLabels.jumpToPageButtonLabel": "Jump to page",
     "i18nStrings.jumpToPageInputLabel": "Page",
     "i18nStrings.jumpToPageError": "Page out of range. Showing last available page.",
-    "i18nStrings.jumpToPageLoadingText": "Loading"
+    "i18nStrings.jumpToPageLoadingText": "Loading",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage} of {pagesCount}+} false {{currentPage} of {pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "Panel resize handle",

src/i18n/messages/all.es.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "Ir a la página",
     "i18nStrings.jumpToPageInputLabel": "Página",
     "i18nStrings.jumpToPageError": "Página fuera de rango. Se muestra la última página disponible.",
-    "i18nStrings.jumpToPageLoadingText": "Cargando"
+    "i18nStrings.jumpToPageLoadingText": "Cargando",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage} de {pagesCount}+} false {{currentPage} de {pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "Controlador de cambio del tamaño del panel",

src/i18n/messages/all.fr.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "Aller à la page",
     "i18nStrings.jumpToPageInputLabel": "Page",
     "i18nStrings.jumpToPageError": "Page hors de portée. Affichage de la dernière page disponible.",
-    "i18nStrings.jumpToPageLoadingText": "Chargement en cours"
+    "i18nStrings.jumpToPageLoadingText": "Chargement en cours",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage} sur plus de {pagesCount}} false {{currentPage} sur {pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "Poignée de redimensionnement du panneau",

src/i18n/messages/all.id.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "Langsung ke halaman",
     "i18nStrings.jumpToPageInputLabel": "Halaman",
     "i18nStrings.jumpToPageError": "Halaman di luar rentang. Menampilkan halaman terakhir yang tersedia.",
-    "i18nStrings.jumpToPageLoadingText": "Memuat"
+    "i18nStrings.jumpToPageLoadingText": "Memuat",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage} dari {pagesCount}+} false {{currentPage} dari {pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "Handel pengubahan ukuran panel",

src/i18n/messages/all.it.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "Vai alla pagina",
     "i18nStrings.jumpToPageInputLabel": "Pagina",
     "i18nStrings.jumpToPageError": "Pagina fuori intervallo. Mostra l'ultima pagina disponibile.",
-    "i18nStrings.jumpToPageLoadingText": "Caricamento in corso"
+    "i18nStrings.jumpToPageLoadingText": "Caricamento in corso",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage} di {pagesCount}+} false {{currentPage} di {pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "Maniglia di ridimensionamento del pannello",

src/i18n/messages/all.ja.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "ページに移動",
     "i18nStrings.jumpToPageInputLabel": "ページ",
     "i18nStrings.jumpToPageError": "ページが範囲外です。最後に利用可能なページを表示しています。",
-    "i18nStrings.jumpToPageLoadingText": "ロード中"
+    "i18nStrings.jumpToPageLoadingText": "ロード中",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage}/{pagesCount}+} false {{currentPage}/{pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "パネルのサイズ変更ハンドル",

src/i18n/messages/all.ko.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "페이지로 이동",
     "i18nStrings.jumpToPageInputLabel": "페이지",
     "i18nStrings.jumpToPageError": "페이지가 범위를 벗어났습니다. 마지막으로 사용 가능한 페이지를 표시합니다.",
-    "i18nStrings.jumpToPageLoadingText": "로드 중"
+    "i18nStrings.jumpToPageLoadingText": "로드 중",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage}/{pagesCount}+} false {{currentPage}/{pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "패널 크기 조정 핸들",

src/i18n/messages/all.pt-BR.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "Ir para a página",
     "i18nStrings.jumpToPageInputLabel": "Página",
     "i18nStrings.jumpToPageError": "Página fora do alcance. Mostrando a última página disponível.",
-    "i18nStrings.jumpToPageLoadingText": "Carregando"
+    "i18nStrings.jumpToPageLoadingText": "Carregando",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {mais {currentPage} de {pagesCount}} false {{currentPage} de {pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "Alça de redimensionamento do painel",

src/i18n/messages/all.tr.json

@@ -255,8 +255,9 @@
     "ariaLabels.previousPageLabel": "Önceki sayfa",
     "ariaLabels.jumpToPageButtonLabel": "Sayfaya atla",
     "i18nStrings.jumpToPageInputLabel": "Sayfa",
-    "i18nStrings.jumpToPageError": "Aralık dışı sayfa. Mevcut son sayfa gösteriliyor.",
-    "i18nStrings.jumpToPageLoadingText": "Yükleniyor"
+    "i18nStrings.jumpToPageError": "Sayfa aralık dışında. Mevcut son sayfa gösteriliyor.",
+    "i18nStrings.jumpToPageLoadingText": "Yükleniyor",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage}/{pagesCount}+} false {{currentPage}/{pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "Panel yeniden boyutlandırma tutamacı",

src/i18n/messages/all.zh-CN.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "跳转到页面",
     "i18nStrings.jumpToPageInputLabel": "页面",
     "i18nStrings.jumpToPageError": "页面超出范围。显示最后一个可用页面。",
-    "i18nStrings.jumpToPageLoadingText": "正在加载"
+    "i18nStrings.jumpToPageLoadingText": "正在加载",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage} / {pagesCount}+} false {{currentPage}/{pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "面板大小调整手柄",

src/i18n/messages/all.zh-TW.json

@@ -256,7 +256,8 @@
     "ariaLabels.jumpToPageButtonLabel": "跳到頁面",
     "i18nStrings.jumpToPageInputLabel": "頁面",
     "i18nStrings.jumpToPageError": "頁面超出範圍。顯示最後一個可用頁面。",
-    "i18nStrings.jumpToPageLoadingText": "正在載入"
+    "i18nStrings.jumpToPageLoadingText": "正在載入",
+    "i18nStrings.pagesCompactText": "{openEnd, select, true {{currentPage}/{pagesCount}+} false {{currentPage}/{pagesCount}} other {}}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "面板調整大小控點",

src/pagination/__tests__/pagination-compact.test.tsx

@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+import I18nProvider from '../../../lib/components/i18n';
+import messages from '../../../lib/components/i18n/messages/all.en';
+import Pagination from '../../../lib/components/pagination';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
+function renderPagination(jsx: React.ReactElement) {
+  const { container, rerender } = render(jsx);
+  const wrapper = createWrapper(container).findPagination()!;
+  return { wrapper, rerender };
+}
+
+function renderWithI18n(jsx: React.ReactElement) {
+  const { container, rerender } = render(
+    <I18nProvider messages={[messages]} locale="en">
+      {jsx}
+    </I18nProvider>
+  );
+  const wrapper = createWrapper(container).findPagination()!;
+  return { wrapper, rerender };
+}
+
+describe('compact variant', () => {
+  describe('visible counter text', () => {
+    test('uses i18n catalog "# of #" format when i18n provider is present', () => {
+      const { wrapper } = renderWithI18n(<Pagination pagesVariant="compact" currentPageIndex={3} pagesCount={12} />);
+      expect(wrapper.findPagesCompactText()!.getElement().textContent).toBe('3 of 12');
+    });
+
+    test('appends "+" to the localized text when openEnd is true', () => {
+      const { wrapper } = renderWithI18n(
+        <Pagination pagesVariant="compact" currentPageIndex={3} pagesCount={12} openEnd={true} />
+      );
+      expect(wrapper.findPagesCompactText()!.getElement().textContent).toBe('3 of 12+');
+    });
+
+    test('calls the consumer override with the page state and uses its result (no i18n provider)', () => {
+      const pagesCompactText = jest.fn(
+        ({ currentPage, pagesCount, openEnd }: { currentPage: number; pagesCount: number; openEnd: boolean }) =>
+          `${currentPage} / ${pagesCount}${openEnd ? '+' : ''}`
+      );
+      const { wrapper } = renderPagination(
+        <Pagination
+          pagesVariant="compact"
+          currentPageIndex={3}
+          pagesCount={12}
+          openEnd={true}
+          i18nStrings={{ pagesCompactText }}
+        />
+      );
+
+      expect(pagesCompactText).toHaveBeenCalledWith({ currentPage: 3, pagesCount: 12, openEnd: true });
+      expect(wrapper.findPagesCompactText()!.getElement().textContent).toBe('3 / 12+');
+    });
+
+    test('visible text updates when currentPageIndex changes', () => {
+      const { wrapper, rerender } = renderWithI18n(
+        <Pagination pagesVariant="compact" currentPageIndex={1} pagesCount={10} />
+      );
+      expect(wrapper.findPagesCompactText()!.getElement().textContent).toBe('1 of 10');
+
+      rerender(
+        <I18nProvider messages={[messages]} locale="en">
+          <Pagination pagesVariant="compact" currentPageIndex={7} pagesCount={10} />
+        </I18nProvider>
+      );
+      expect(wrapper.findPagesCompactText()!.getElement().textContent).toBe('7 of 10');
+    });
+  });
+});