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 diff --git a/src/components/Pagination/Stories/Pagination.stories.tsx b/src/components/Pagination/Stories/Pagination.stories.tsx index 03093508e..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], @@ -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 = 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 = ContainerQueriesExample.bind({}); +ContainerQueries.args = { + ...Default.args, +}; diff --git a/src/components/Pagination/pagination.scss b/src/components/Pagination/pagination.scss index 2617dd4ca..f62f6520a 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; @@ -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; + } + } +}