fix(kpagination): detect and fix overflow [KHCP-10930]

docs/components/pagination.md

@@ -73,10 +73,18 @@ const visibleLetters = ref<string>(['a', 'b', 'c'])
 
 A number that sets the neighboring pages visible to the left and right of the center page when ellipsis are visible on both sides. By default, 1 neighbor is shown. For bigger sets of data we want user to see more pages to go through the pagination faster.
 
-<KPagination :total-count="1000" :neighbors="2" />
+<KPagination :neighbors="2" :total-count="1000" />
 
 ```html
-<KPagination :total-count="1000" :neighbors="2" />
+<KPagination :neighbors="2" :total-count="1000" />
+```
+
+If KPagination detects horizontal overflow it will automatically reduce number of displayed neighbors down to a number at which it fits into the parent container without overflowing, ignoring the value provided through `neighbors` prop. It will always display at least 1 neighbor. See the example below where value passed through the `neighbors` prop is unreasonably high but KPagination only displays as many items as it can without overflowing.
+
+<KPagination :neighbors="20" :total-count="1000" />
+
+```html
+<KPagination :neighbors="20" :total-count="1000" />
 ```
 
 ### disablePageJump

docs/components/table.md

@@ -427,7 +427,7 @@ Set this to `true` to hide pagination when using a fetcher.
 
 ### hidePaginationWhenOptional
 
-Set this to `true` to hide pagination when the table record count is less than or equal to the `pageSize`.
+Set this to `true` to hide pagination when the table record count is less than or equal to the `paginationPageSizes`.
 
 ## States
 
@@ -1099,4 +1099,4 @@ const onCellClick = (event, cell) => {
   flex-direction: column;
   gap: $kui-space-50;
 }
-</style>
+</style>

package.json

@@ -79,7 +79,7 @@
     "@cypress/vite-dev-server": "^5.1.1",
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.6.18",
-    "@kong-ui-public/sandbox-layout": "^2.1.13",
+    "@kong-ui-public/sandbox-layout": "^2.1.14",
     "@kong/design-tokens": "^1.15.1",
     "@kong/eslint-config-kong-ui": "^1.1.1",
     "@semantic-release/changelog": "^6.0.3",

sandbox/index.html

@@ -18,6 +18,7 @@
       font-family: 'Inter', sans-serif;
       margin: 0;
       padding: 0;
+      overflow-x: hidden;
     }
   </style>
 </head>
@@ -28,4 +29,4 @@
   <script type="module" src="./index.ts"></script>
 </body>
 
-</html>
+</html>

sandbox/pages/SandboxPagination.vue

@@ -35,12 +35,17 @@
           @page-size-change="handlePageSizeChange"
         />
       </SandboxSectionComponent>
-      <SandboxSectionComponent title="neighbors">
-        <KPagination
-          :neighbors="3"
-          :page-size="15"
-          :total-count="1000"
-        />
+      <SandboxSectionComponent
+        description="Setting a way too high number of visible neighbors here (20) but KPagination detects overflow and reduces the number of visible neighbors down to acceptable number (minimum of 1)."
+        title="neighbors"
+      >
+        <div class="neighbors-wrapper">
+          <KPagination
+            :neighbors="20"
+            :page-size="15"
+            :total-count="1000"
+          />
+        </div>
       </SandboxSectionComponent>
       <SandboxSectionComponent title="disablePageJump">
         <KPagination
@@ -81,3 +86,18 @@ const handlePageSizeChange = (obj: any) => {
   console.log(obj)
 }
 </script>
+
+<style lang="scss" scoped>
+.kpagination-sandbox {
+  .neighbors-wrapper {
+    border: $kui-border-width-10 solid $kui-color-border;
+    display: flex;
+    flex-direction: column;
+    gap: $kui-space-40;
+    max-width: 100%;
+    overflow-x: auto;
+    padding: $kui-space-70;
+    resize: horizontal;
+  }
+}
+</style>