fix: hide fixed unknown Pagination story controls (#22008)

adamalston · web-flow · commit 0875c909fd4b · 2026-04-24T10:24:32.000Z
* fix: lock unknown Pagination story controls

* fix: hide unused Pagination story controls

* refactor: use different method to hide controls
diff --git a/packages/react/src/components/Pagination/Pagination.stories.js b/packages/react/src/components/Pagination/Pagination.stories.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -183,17 +183,24 @@ PaginationWithCustomPageSizesLabel.storyName =
   'Pagination with custom page sizes label';
 
 export const PaginationUnknownPages = (args) => {
+  const { pageInputDisabled, pagesUnknown, totalItems, ...rest } = args ?? {};
+
   return (
     <div>
       <Pagination
         {...props()}
-        pagesUnknown={true}
-        totalItems={undefined}
         page={1}
-        {...args}
+        {...rest}
+        pagesUnknown
+        totalItems={undefined}
       />
     </div>
   );
 };
 
 PaginationUnknownPages.storyName = 'Unknown pages and items';
+PaginationUnknownPages.parameters = {
+  controls: {
+    exclude: ['pageInputDisabled', 'pagesUnknown', 'totalItems'],
+  },
+};
diff --git a/packages/web-components/src/components/pagination/pagination.stories.ts b/packages/web-components/src/components/pagination/pagination.stories.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2025
+ * Copyright IBM Corp. 2019, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -211,9 +211,13 @@ export const MultiplePaginationComponents = {
 export const PaginationUnknownPages = {
   name: 'Unknown pages and items',
   args: {
-    pagesUnknown: true,
     totalItems: undefined,
   },
+  parameters: {
+    controls: {
+      exclude: ['pageInputDisabled', 'pagesUnknown', 'totalItems'],
+    },
+  },
   render: (args) => {
     const {
       backwardText,
@@ -222,12 +226,9 @@ export const PaginationUnknownPages = {
       isLastPage,
       itemsPerPageText,
       page,
-      pageInputDisabled,
       pageSize,
       pageSizeInputDisabled,
-      pagesUnknown,
       size,
-      totalItems,
     } = args ?? {};
 
     return html`
@@ -239,11 +240,11 @@ export const PaginationUnknownPages = {
         items-per-page-text=${itemsPerPageText}
         page=${page}
         page-size=${pageSize}
-        ?page-input-disabled=${pageInputDisabled}
+        ?page-input-disabled=${false}
         ?page-size-input-disabled=${pageSizeInputDisabled}
         size=${size}
-        ?pages-unknown=${pagesUnknown}
-        total-items=${totalItems}
+        ?pages-unknown=${true}
+        .totalItems=${undefined}
         @cds-page-sizes-select-changed=${(event: CustomEvent) => {
           action('cds-page-sizes-select-changed')(event.detail);
         }}
