feat: add compact variant to pagination

pages/pagination/permutations.page.tsx

@@ -17,6 +17,13 @@ const paginationLabels: PaginationProps.Labels = {
   jumpToPageButton: 'Go to page',
 };
 
+const i18nStrings: PaginationProps.I18nStrings = {
+  jumpToPageInputLabel: 'Page number',
+  jumpToPageError: 'Enter a valid page number',
+  jumpToPageLoadingText: 'Loading page',
+  compactPageCounterText: (currentPageIndex, pagesCount) => `${currentPageIndex} / ${pagesCount}`,
+};
+
 const permutations = createPermutations<PaginationProps>([
   {
     currentPageIndex: [7],
@@ -32,6 +39,15 @@ const permutations = createPermutations<PaginationProps>([
     ariaLabels: [paginationLabels],
     jumpToPage: [undefined, { loading: false }, { loading: true }],
   },
+  {
+    variant: ['compact'],
+    currentPageIndex: [1, 6, 15],
+    pagesCount: [15],
+    disabled: [true, false],
+    ariaLabels: [paginationLabels],
+    i18nStrings: [undefined, i18nStrings],
+    jumpToPage: [undefined, { loading: false }],
+  },
 ]);
 
 export default function PaginationPermutations() {

pages/pagination/simple-compact.page.tsx

@@ -0,0 +1,51 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import I18nProvider from '~components/i18n';
+import messages from '~components/i18n/messages/all.en';
+import Pagination, { PaginationProps } from '~components/pagination';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+const paginationLabelsWithout: PaginationProps.Labels = {
+  nextPageLabel: 'Next page',
+  previousPageLabel: 'Previous page',
+  pageLabel: pageNumber => `Page ${pageNumber} of all pages`,
+  jumpToPageButton: 'Go to page',
+};
+
+const paginationLabels: PaginationProps.Labels = {
+  paginationLabel: 'Pagination',
+  ...paginationLabelsWithout,
+};
+
+export default function PaginationSimplePage() {
+  const [compactPageIndex, setCompactPageIndex] = useState(1);
+  const [compactJumpPageIndex, setCompactJumpPageIndex] = useState(1);
+
+  return (
+    <I18nProvider messages={[messages]} locale="en">
+      <ScreenshotArea>
+        <h1>Pagination simple compact</h1>
+        <h2>Compact pagination with 20 pages (default &quot;# of #&quot; format)</h2>
+        <Pagination
+          variant="compact"
+          currentPageIndex={compactPageIndex}
+          pagesCount={20}
+          ariaLabels={paginationLabels}
+          onChange={event => setCompactPageIndex(event.detail.currentPageIndex)}
+        />
+
+        <h2>Compact pagination with 20 pages without the paginationLabel</h2>
+        <Pagination
+          variant="compact"
+          currentPageIndex={compactJumpPageIndex}
+          pagesCount={20}
+          ariaLabels={paginationLabelsWithout}
+          onChange={event => setCompactJumpPageIndex(event.detail.currentPageIndex)}
+        />
+      </ScreenshotArea>
+    </I18nProvider>
+  );
+}

pages/pagination/simple.page.tsx

@@ -19,11 +19,14 @@ const i18nStrings: PaginationProps.I18nStrings = {
   jumpToPageInputLabel: 'Page number',
   jumpToPageError: 'Enter a valid page number',
   jumpToPageLoadingText: 'Loading page',
+  compactPageCounterText: (currentPageIndex, pagesCount) => `${currentPageIndex} / ${pagesCount}`,
 };
 
 export default function PaginationSimplePage() {
   const [basicPageIndex, setBasicPageIndex] = useState(1);
   const [jumpPageIndex, setJumpPageIndex] = useState(1);
+  const [compactPageIndex, setCompactPageIndex] = useState(1);
+  const [compactJumpPageIndex, setCompactJumpPageIndex] = useState(1);
 
   return (
     <I18nProvider messages={[messages]} locale="en">
@@ -46,6 +49,26 @@ export default function PaginationSimplePage() {
           jumpToPage={{}}
           onChange={event => setJumpPageIndex(event.detail.currentPageIndex)}
         />
+
+        <h2>Compact pagination with 20 pages (default &quot;# of #&quot; format)</h2>
+        <Pagination
+          variant="compact"
+          currentPageIndex={compactPageIndex}
+          pagesCount={20}
+          ariaLabels={paginationLabels}
+          onChange={event => setCompactPageIndex(event.detail.currentPageIndex)}
+        />
+
+        <h2>Compact pagination with jump to page (custom &quot;# / #&quot; format)</h2>
+        <Pagination
+          variant="compact"
+          currentPageIndex={compactJumpPageIndex}
+          pagesCount={20}
+          ariaLabels={paginationLabels}
+          i18nStrings={i18nStrings}
+          jumpToPage={{}}
+          onChange={event => setCompactJumpPageIndex(event.detail.currentPageIndex)}
+        />
       </ScreenshotArea>
     </I18nProvider>
   );

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

@@ -20036,10 +20036,35 @@ 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.
+* \`compactPageCounterText\` ((currentPageIndex: number, pagesCount: number) => string) - Visible text of the page counter in the \`compact\` variant, for example \`3 of 12\`.",
       "i18nTag": true,
       "inlineType": {
         "name": "PaginationProps.I18nStrings",
         "properties": [
+          {
+            "inlineType": {
+              "name": "(currentPageIndex: number, pagesCount: number) => string",
+              "parameters": [
+                {
+                  "name": "currentPageIndex",
+                  "type": "number",
+                },
+                {
+                  "name": "pagesCount",
+                  "type": "number",
+                },
+              ],
+              "returnType": "string",
+              "type": "function",
+            },
+            "name": "compactPageCounterText",
+            "optional": true,
+            "type": "((currentPageIndex: number, pagesCount: number) => string)",
+          },
           {
             "name": "jumpToPageError",
             "optional": true,
@@ -20095,6 +20120,23 @@ never disabled. When the user clicks on it but there are no more items to show,
       "optional": false,
       "type": "number",
     },
+    {
+      "description": "Specifies the visual variant of the pagination:
+* \`default\` - Displays a button for each page.
+* \`compact\` - Displays the current page and total page count between the previous and next arrows
+  (for example, \`3 of 12\`). When \`jumpToPage\` is set, the jump-to-page control is displayed next to it.",
+      "inlineType": {
+        "name": "PaginationProps.Variant",
+        "type": "union",
+        "values": [
+          "default",
+          "compact",
+        ],
+      },
+      "name": "variant",
+      "optional": true,
+      "type": "string",
+    },
   ],
   "regions": [],
   "releaseStatus": "stable",
@@ -37653,6 +37695,26 @@ Returns the current value of the input.",
     {
       "methods": [
         {
+          "description": "Returns the visible text element of the compact page counter (for example, \`3 of 12\`),
+or \`null\` when the component is not rendered with \`variant="compact"\`.
+
+The returned element excludes the visually hidden screen reader name, so
+\`getElement().textContent\` reflects only the on-screen counter text.",
+          "name": "findCompactPageCounter",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
+        {
+          "description": "Returns the current page button. Only the \`default\` variant renders this;
+in the \`compact\` variant, use \`findCompactPageCounter\` instead.",
           "name": "findCurrentPage",
           "parameters": [],
           "returnType": {
@@ -37714,6 +37776,8 @@ Returns the current value of the input.",
           },
         },
         {
+          "description": "Returns the page number buttons. Only the \`default\` variant renders these;
+in the \`compact\` variant this returns an empty array.",
           "name": "findPageNumbers",
           "parameters": [],
           "returnType": {
@@ -48810,6 +48874,21 @@ To find a specific item use the \`findBreadcrumbLink(n)\` function as chaining \
     {
       "methods": [
         {
+          "description": "Returns the visible text element of the compact page counter (for example, \`3 of 12\`),
+or \`null\` when the component is not rendered with \`variant="compact"\`.
+
+The returned element excludes the visually hidden screen reader name, so
+\`getElement().textContent\` reflects only the on-screen counter text.",
+          "name": "findCompactPageCounter",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
+        {
+          "description": "Returns the current page button. Only the \`default\` variant renders this;
+in the \`compact\` variant, use \`findCompactPageCounter\` instead.",
           "name": "findCurrentPage",
           "parameters": [],
           "returnType": {
@@ -48871,6 +48950,8 @@ To find a specific item use the \`findBreadcrumbLink(n)\` function as chaining \
           },
         },
         {
+          "description": "Returns the page number buttons. Only the \`default\` variant renders these;
+in the \`compact\` variant this returns an empty array.",
           "name": "findPageNumbers",
           "parameters": [],
           "returnType": {

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

@@ -495,6 +495,7 @@ exports[`test-utils selectors 1`] = `
   "pagination": [
     "awsui_button-current_fvjdu",
     "awsui_button_fvjdu",
+    "awsui_compact-page-counter-text_lmd86",
     "awsui_jump-to-page-input_fvjdu",
     "awsui_jump-to-page_fvjdu",
     "awsui_page-number_fvjdu",

src/i18n/messages-types.ts

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

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.compactPageCounterText": "{currentPageIndex} of {pagesCount}"
   },
   "panel-resize-handle": {
     "i18nStrings.resizeHandleAriaLabel": "Panel resize handle",