Skip to content

Conversation

amyleadem
Copy link
Contributor

@amyleadem amyleadem commented Aug 4, 2023

Summary

PR #5420 introduced sticky table headers as a new variant for USWDS tables. This PR adds documentation for the new variant.

Important

This branch will have build failures until uswds is updated to include the changes in 3.8.0 (particularly, uswds/uswds#5420).

New variant

Variant name Description
.usa-table--sticky-header Allows the table header element to stick to the top of the page as the user scrolls. Preferred for long tables with many rows. This variant is not compatible with the scrollable and stacked table variants.

New settings

Setting name Description
$theme-table-background-color Defines the table background color. A value of default uses the body background color.
$theme-table-sticky-top-offset Defines the top offset for sticky headers.

Preview link

Testing and review

  • Confirm the changelog entries make sense and are added to the appropriate pages
  • Confirm the settings and variant updates make sense and are added to the appropriate pages
  • Confirm grammar, spelling, and plain language for all copy updates
  • Confirm that there are no visual regressions in any of the table variants affected by USWDS - Table: Add sticky headers uswds#5420
  • Confirm the sticky table header works as expected in the component preview

@amyleadem amyleadem changed the title USWDS-Site: Documentation updates for sticky table headers USWDS-Site - Changelog: add entry and doc updates for sticky table headers [USWDS#5420] Aug 9, 2023
package.json Outdated
@@ -101,6 +101,6 @@
"snyk": true,
"dependencies": {
"@uswds/compile": "^1.0.0-beta.3",
"@uswds/uswds": "^3.5.0"
"@uswds/uswds": "github:uswds/uswds#al-sticky-table-header"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning
We should revert this branch before merge

Amy Leadem added 2 commits August 14, 2023 09:06
- Accidentally pulled in to this PR
@amyleadem amyleadem marked this pull request as ready for review August 14, 2023 17:55
@amyleadem amyleadem requested review from mejiaj and mahoneycm August 14, 2023 17:55
Copy link
Contributor

@mahoneycm mahoneycm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Amy! I noticed a visual bug when looking at the component preview. More detail in comments below.

I think we should also add usage guidance about not using it with the stacked or scrollable variants to the usability section. We have similar guidance on when not to use sortable tables

Let me know what you think!

amyleadem added 2 commits January 10, 2024 15:56
- This accommodates the height of the sticky header
@amyleadem amyleadem changed the base branch from main to release-3.8.0 February 20, 2024 19:29
@mahoneycm mahoneycm self-requested a review March 4, 2024 17:35
Copy link
Contributor

@mahoneycm mahoneycm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm!

@amyleadem amyleadem merged commit a813c13 into release-3.8.0 Mar 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants