From 67df4a3550a3793b88a2be9652fb9545b9798e59 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 1 Apr 2026 16:55:33 +0200 Subject: [PATCH 1/5] re-configure breakpoints for pagination container queries --- src/components/Pagination/pagination.scss | 52 ++++++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/src/components/Pagination/pagination.scss b/src/components/Pagination/pagination.scss index 054e9e103..6f920c64f 100644 --- a/src/components/Pagination/pagination.scss +++ b/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; @@ -15,8 +17,8 @@ $eccgui-size-pagination-height-large: $pt-button-height-large !default; .#{$prefix}--form-item, .#{$prefix}--select-input { - font-size: 100%; text-overflow: clip; + font-size: 100%; } } @@ -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__text { + display: inline-block; + } + .#{$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; + } + } +} + +@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; + } + } +} From ad4607f750124faec99348b5abb7d7e921c5b0a6 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Mon, 13 Apr 2026 17:36:55 +0200 Subject: [PATCH 2/5] update chagelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 04fc8d8f1..3f6a8d798 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ## [Unreleased] +### Fixed + +- `` + - 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 From 716e2e1ce21ab44a897ccc3f0d57812fc1070b7b Mon Sep 17 00:00:00 2001 From: Andreas Schultz Date: Fri, 17 Apr 2026 09:06:52 +0200 Subject: [PATCH 3/5] Add pagination story or debugging --- .../Pagination/Stories/Pagination.stories.tsx | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/src/components/Pagination/Stories/Pagination.stories.tsx b/src/components/Pagination/Stories/Pagination.stories.tsx index 03093508e..cc8d0a710 100644 --- a/src/components/Pagination/Stories/Pagination.stories.tsx +++ b/src/components/Pagination/Stories/Pagination.stories.tsx @@ -28,3 +28,34 @@ ExtendedPagesizeSelection.args = { { text: "Large page with 100 items", value: "100" }, ], }; + +const VisibilityRegressionExample: StoryFn = (args) => ( +
+

+ Both examples below enable hidePageSizeConfiguration and hideNavigationArrows. + The expected behavior is that the page-size selector and navigation arrows stay hidden regardless of width. + If the container-query override is active, the wider example will show them again. +

+
+
+
Narrow container (~24rem)
+
+ +
+
+
+
Wide container (~36rem)
+
+ +
+
+
+
+); + +export const ContainerQueryOverridesHideFlags = VisibilityRegressionExample.bind({}); +ContainerQueryOverridesHideFlags.args = { + ...Default.args, + hidePageSizeConfiguration: true, + hideNavigationArrows: true, +}; From db6c08e5e5eb108659c54a95611e82cf399286a1 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Mon, 20 Apr 2026 10:25:11 +0200 Subject: [PATCH 4/5] force to hide elements regardless of container queries, add storybook items to control it --- .../Pagination/Stories/Pagination.stories.tsx | 55 ++++++++++--------- src/components/Pagination/pagination.scss | 8 +-- 2 files changed, 32 insertions(+), 31 deletions(-) diff --git a/src/components/Pagination/Stories/Pagination.stories.tsx b/src/components/Pagination/Stories/Pagination.stories.tsx index cc8d0a710..fa1ea7ec6 100644 --- a/src/components/Pagination/Stories/Pagination.stories.tsx +++ b/src/components/Pagination/Stories/Pagination.stories.tsx @@ -10,6 +10,14 @@ export default { const PaginationExample = (args) => ; +const ContainerQueriesExample = (args) => ( + <> + + + + +); + export const Default: StoryFn = PaginationExample.bind({}); Default.args = { pageSizes: [10, 20, 50, 100], @@ -29,33 +37,26 @@ ExtendedPagesizeSelection.args = { ], }; -const VisibilityRegressionExample: StoryFn = (args) => ( -
-

- Both examples below enable hidePageSizeConfiguration and hideNavigationArrows. - The expected behavior is that the page-size selector and navigation arrows stay hidden regardless of width. - If the container-query override is active, the wider example will show them again. -

-
-
-
Narrow container (~24rem)
-
- -
-
-
-
Wide container (~36rem)
-
- -
-
-
-
-); - -export const ContainerQueryOverridesHideFlags = VisibilityRegressionExample.bind({}); -ContainerQueryOverridesHideFlags.args = { +/** + * This story demonstrates a minimal pagination and is a check that elements are always hidden. + */ +export const MinimalPagination: StoryFn = PaginationExample.bind({}); +MinimalPagination.args = { ...Default.args, hidePageSizeConfiguration: true, - hideNavigationArrows: 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 = ContainerQueriesExample.bind({}); +ContainerQueries.args = { + ...Default.args, }; diff --git a/src/components/Pagination/pagination.scss b/src/components/Pagination/pagination.scss index 6f920c64f..a86c8a5b1 100644 --- a/src/components/Pagination/pagination.scss +++ b/src/components/Pagination/pagination.scss @@ -40,7 +40,7 @@ span.#{$prefix}--pagination__text { padding-left: 0; & > *:not(:last-child) { - display: none; + display: none !important; } } } @@ -58,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 { @@ -68,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; } } From 6037854a35636affcea4be92e5ea31b760590b49 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Mon, 20 Apr 2026 11:20:47 +0200 Subject: [PATCH 5/5] fix container queries and remove unnecessary margin --- src/components/Pagination/pagination.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Pagination/pagination.scss b/src/components/Pagination/pagination.scss index a86c8a5b1..f62f6520a 100644 --- a/src/components/Pagination/pagination.scss +++ b/src/components/Pagination/pagination.scss @@ -147,9 +147,6 @@ span.#{$prefix}--pagination__text { .#{$prefix}--pagination__control-buttons { display: flex; } - .#{$prefix}--pagination__text { - display: inline-block; - } .#{$prefix}--pagination__left > * { display: inherit; } @@ -169,6 +166,9 @@ span.#{$prefix}--pagination__text { .#{$prefix}--pagination__left > * { display: none; } + .#{$prefix}--pagination__items-count { + margin-left: 0; + } } }