Merge pull request #385 from eccenca/bugfix/paginationBreakpoints-CMEM-7458

Re-configure breakpoints for pagination container queries (CMEM-7458)

Author: andreas-schultz

CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Fixed
+
+-   `<Pagination />`
+    -   improve breakpoints to display widgets for page size and page number inside smaller containers
+    -   male the breakpoints configurable via SCSS
+
 ## [25.1.0] - 2026-04-13
 
 ### Added

src/components/Pagination/Stories/Pagination.stories.tsx

@@ -10,6 +10,14 @@ export default {
 
 const PaginationExample = (args) => <Pagination {...args} />;
 
+const ContainerQueriesExample = (args) => (
+    <>
+        <Pagination {...args} style={{ maxWidth: "100%" }} />
+        <Pagination {...args} style={{ maxWidth: "32rem" }} />
+        <Pagination {...args} style={{ maxWidth: "26rem" }} />
+    </>
+);
+
 export const Default: StoryFn<typeof Pagination> = PaginationExample.bind({});
 Default.args = {
     pageSizes: [10, 20, 50, 100],
@@ -28,3 +36,27 @@ ExtendedPagesizeSelection.args = {
         { text: "Large page with 100 items", value: "100" },
     ],
 };
+
+/**
+ * This story demonstrates a minimal pagination and is a check that elements are always hidden.
+ */
+export const MinimalPagination: StoryFn<typeof Pagination> = PaginationExample.bind({});
+MinimalPagination.args = {
+    ...Default.args,
+    hidePageSizeConfiguration: true,
+    hidePageSelect: true,
+    hideInfoText: true,
+    hideNavigationArrows: false,
+    hideBorders: false,
+};
+
+/**
+ * Demonstrates the breakpoints of the container queries.
+ * If the container gets too small, some elements are removed automatically.
+ * First, page selector disappears, then the page size selector.
+ * Info text and navigation arrow are never hidden automatically.
+ */
+export const ContainerQueries: StoryFn<typeof Pagination> = ContainerQueriesExample.bind({});
+ContainerQueries.args = {
+    ...Default.args,
+};

src/components/Pagination/pagination.scss

@@ -7,6 +7,8 @@ $eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
 $eccgui-size-pagination-height-medium: $pt-button-height !default;
 $eccgui-size-pagination-height-small: $pt-button-height-small !default;
 $eccgui-size-pagination-height-large: $pt-button-height-large !default;
+$eccgui-size-pagination-breakpoint-wide: 32rem !default;
+$eccgui-size-pagination-breakpoint-small: 26rem !default;
 
 .#{$prefix}--pagination {
     min-block-size: $eccgui-size-pagination-height-medium;
@@ -38,7 +40,7 @@ span.#{$prefix}--pagination__text {
         padding-left: 0;
 
         & > *:not(:last-child) {
-            display: none;
+            display: none !important;
         }
     }
 }
@@ -56,7 +58,7 @@ span.#{$prefix}--pagination__text {
 
 .#{$eccgui}-pagination--hideinfotext {
     .#{$prefix}--pagination__left > .#{$prefix}--pagination__text:last-child {
-        display: none;
+        display: none !important;
     }
 
     & .#{$prefix}--select__item-count .#{$prefix}--select-input {
@@ -66,13 +68,13 @@ span.#{$prefix}--pagination__text {
 
 .#{$eccgui}-pagination--hidepageselect {
     .#{$prefix}--pagination__right > *:not(.#{$prefix}--pagination__control-buttons) {
-        display: none;
+        display: none !important;
     }
 }
 
 .#{$eccgui}-pagination--hidenavigation {
     .#{$prefix}--pagination__right > .#{$prefix}--pagination__control-buttons {
-        display: none;
+        display: none !important;
     }
 }
 
@@ -137,3 +139,51 @@ span.#{$prefix}--pagination__text {
         line-height: $eccgui-size-pagination-height-large;
     }
 }
+
+// fix breakpoints for container queries
+// Carbon does not provide the option to configure that breakpoint
+@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-small}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__control-buttons {
+            display: flex;
+        }
+        .#{$prefix}--pagination__left > * {
+            display: inherit;
+        }
+    }
+}
+
+@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-wide}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__right > * {
+            display: inherit;
+        }
+    }
+}
+
+@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-small}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__left > * {
+            display: none;
+        }
+        .#{$prefix}--pagination__items-count {
+            margin-left: 0;
+        }
+    }
+}
+
+@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-wide}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__right > * {
+            display: none;
+        }
+
+        .#{$prefix}--pagination__items-count {
+            display: initial;
+        }
+
+        .#{$prefix}--pagination__control-buttons {
+            display: flex;
+        }
+    }
+}