From 57f10bf54bd49019e79816a5bef2ff3554602052 Mon Sep 17 00:00:00 2001 From: Natalia Fitzgerald <77348967+natalia-fitzgerald@users.noreply.github.com> Date: Thu, 5 Feb 2026 03:09:30 +0000 Subject: [PATCH 1/6] Update "pagination" page --- docs/pages/pagination.md | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/docs/pages/pagination.md b/docs/pages/pagination.md index a163322aa0..8eb01cb078 100644 --- a/docs/pages/pagination.md +++ b/docs/pages/pagination.md @@ -46,14 +46,13 @@ variation_groups: {% include icons/right.svg %} - variation_description: '' - variation_name: Default pagination - variation_implementation: - To enable the component to jump directly to the + variation_description: "" + variation_name: Jump to page + variation_implementation: To enable the component to jump directly to the paginated content, include an `id` on a wrapper of the paginated content (or an element directly above it), e.g., `id="pagination_content"`. - variation_specs: '' + variation_specs: "" - variation_code_snippet: >- - variation_description: - When on the first or last page of paginated content, be + variation_description: When on the first or last page of paginated content, be sure to disable the appropriate buttons by adding the `a-btn--disabled` modifier and removing their `href` attribute. - variation_jinja_code_snippet: '' + variation_jinja_code_snippet: "" variation_name: First and last pages - variation_group_name: Standard pagination - variation_group_description: - Pagination consists of buttons to navigate through - content, along with an inline form (input field, submit button) to enable - users to navigate to specific pages by number. + variation_group_name: Types + variation_group_description: Pagination is navigation for paginated content. It + is used to break long content or large datasets into multiple pages, to + make it easier for users to consume information. guidelines: >- * Display 25 results per page. @@ -102,11 +99,11 @@ eyebrow: Components title: Pagination description: Pagination is used for splitting up content or data into several pages, so as to make it easier for users to consume information. -use_cases: '' +use_cases: "" behavior: On small screens, the buttons display next to each other, stacked on top of the form (`@bp-xs-max`). -accessibility: '' -related_items: '' +accessibility: "" +related_items: "" last_updated: 2020-01-28T15:55:47.394Z -research: '' +research: "" --- From 2330f15cf65d579662548a5db3b12c2aa4c01411 Mon Sep 17 00:00:00 2001 From: Natalia Fitzgerald <77348967+natalia-fitzgerald@users.noreply.github.com> Date: Thu, 5 Feb 2026 03:09:53 +0000 Subject: [PATCH 2/6] Update "pagination" page --- docs/pages/pagination.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/pages/pagination.md b/docs/pages/pagination.md index 8eb01cb078..171c13e3f8 100644 --- a/docs/pages/pagination.md +++ b/docs/pages/pagination.md @@ -97,8 +97,9 @@ guidelines: >- * Tables with over 20 rows can be paired with pagination. eyebrow: Components title: Pagination -description: Pagination is used for splitting up content or data into several - pages, so as to make it easier for users to consume information. +description: Pagination is navigation for paginated content. It is used to break + long content or large datasets into multiple pages, to make it easier for + users to consume information. use_cases: "" behavior: On small screens, the buttons display next to each other, stacked on top of the form (`@bp-xs-max`). From 0bcd88f6c67a03deda31cbde6fb84ec0811b22b1 Mon Sep 17 00:00:00 2001 From: Natalia Fitzgerald <77348967+natalia-fitzgerald@users.noreply.github.com> Date: Thu, 5 Feb 2026 03:20:45 +0000 Subject: [PATCH 3/6] Update "pagination" page --- docs/pages/pagination.md | 58 +++++++++++++++++++++++++++++++++++----- 1 file changed, 51 insertions(+), 7 deletions(-) diff --git a/docs/pages/pagination.md b/docs/pages/pagination.md index 171c13e3f8..6016f54cea 100644 --- a/docs/pages/pagination.md +++ b/docs/pages/pagination.md @@ -46,13 +46,59 @@ variation_groups: {% include icons/right.svg %} - variation_description: "" + variation_description: The standard pagination component used on cf.gov pages, + this variation includes an inline form (input field, submit button) to + enable users to navigate to specific pages by number. variation_name: Jump to page variation_implementation: To enable the component to jump directly to the paginated content, include an `id` on a wrapper of the paginated content (or an element directly above it), e.g., `id="pagination_content"`. variation_specs: "" + - variation_is_deprecated: false + variation_name: Sequential + variation_code_snippet: |- +
+ + + + - variation_code_snippet: >- - variation_description: When on the first or last page of paginated content, be - sure to disable the appropriate buttons by adding the - `a-btn--disabled` modifier and removing their `href` attribute. + variation_description: This variation of the pagination component only allows + users to navigate pages in sequential order (forward or backward one + step at a time), forcing a linear user flow. variation_jinja_code_snippet: "" variation_name: First and last pages variation_group_name: Types - variation_group_description: Pagination is navigation for paginated content. It - is used to break long content or large datasets into multiple pages, to - make it easier for users to consume information. + variation_group_description: "" guidelines: >- * Display 25 results per page. From f1b08b66ada4f7aefe559f0bea3036927433398e Mon Sep 17 00:00:00 2001 From: Natalia Fitzgerald <77348967+natalia-fitzgerald@users.noreply.github.com> Date: Thu, 5 Feb 2026 03:22:35 +0000 Subject: [PATCH 4/6] Update "pagination" page --- docs/pages/pagination.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/pages/pagination.md b/docs/pages/pagination.md index 6016f54cea..4b1df21b43 100644 --- a/docs/pages/pagination.md +++ b/docs/pages/pagination.md @@ -99,6 +99,9 @@ variation_groups: {% include icons/right.svg %} + variation_description: This variation of the pagination component only allows + users to navigate pages in sequential order (forward or backward one + step at a time), forcing a linear user flow. - variation_code_snippet: >- @@ -67,7 +67,7 @@ variation_groups: m-pagination__btn-prev" href="?page=21#pagination_content"> {% include icons/left.svg %} - Newer + Previous - Older + Next {% include icons/right.svg %} @@ -107,7 +107,7 @@ variation_groups: - {% include icons/left.svg %}Newer + {% include icons/left.svg %}Previous