USWDS - Pagination: Update pagination on develop. #4175
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add config file - Add template with sample markup - Start basic theming
- Create a pagination link macro to set markup based on current item - Add pagination config for total # of items and to set active item
Checks for the following cases: - Few items w/ varying items selected - Lots of items w/ varying items selected - White background (default) - Gray background (usa-section--light) - Dark background (usa-section--dark)
Pagination items are now in a switch case statement with 3 checks, rather than a bunch of `if` statements. We now check for 3 simple conditions: - Few items (less than 4) - One of last four selected (last four) - Default current selected + sibling and last two total pages
2 new settings: 1. `$theme-pagination-pager-color` — Pagination item link color 1. `$theme-pagination-min-width` — Minimum width of pagination item - Use tabular numbers to get more consistent spacing - Force link color so it works on dark backgrounds - Remove text selection from ellipsis
- Update number of items shown by default - Always show first - Always show last - If less than 4 show all 4 - If greater than or equal to last 4 show all - By default (if more than 4) show current, current - 1, and current + 1 - Add more ellipsis between items - Remove label - Move prev/next arrows to end of template - Set pagination current as a link so it's focusable
- Added margin-x setting - Increased margin-y - Moved pager button styles to and extend `%pagination-button-styles` - Removed button styles from ellipsis - Moved chevrons out of pager nav - Added `!important` shim to `set-text-and-bg` mixin
thisisdano
approved these changes
Jun 16, 2021
|
Good to merge after you split out the demo. Nice work! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Preview links
Settings
$theme-pagination-pager-colorTwo new variables:
Additional information
prettier:templatestask to cleanup rendered templates on USWDS-Site._pagination-arrow.njk_pagination-button.njk_pagination-numbers--default_pagination-numbers--infiniteusa-section-darkAlso closes #4158.
06/04/21
Updated logic for bounded sets. See commit c9eb3f5 for more details.
Related PRs
Part of uswds/uswds-site/pull/1218.
Guidance PR→
PR for adding this to library beta.
Before you hit Submit, make sure you’ve done whichever of these applies to you:
npm testand make sure the tests for the files you have changed have passed.