feat: Update Table to 2.10.0 implementation #1110
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 tests for applied classNames striped and compact, check for enclosing div for scrollable
…omments from code
…e, add logic to exclude compact className on stacked styles
SirenaBorracha
requested review from
ahobson,
brandonlenz,
gidjin,
haworku,
sarboc,
suzubara and
tinyels
as code owners
SirenaBorracha
removed request for
ahobson,
gidjin,
suzubara,
tinyels,
sarboc,
haworku and
brandonlenz
SirenaBorracha
changed the title
… for bordered/borderless and headers/no headers options
…of getByRole for renders without errors, remove superfluous data-testid
SirenaBorracha
changed the title
brandonlenz
reviewed
Apr 21, 2021
There was a problem hiding this comment.
One tiny thing and I'm good to approve. Glad you and @haworku were able to get some clarity into that cell styling. I'm good with not worrying about it too much as well.
brandonlenz
reviewed
Apr 23, 2021
brandonlenz
approved these changes
Apr 27, 2021
Merged
SirenaBorracha
added a commit
that referenced
this pull request
May 5, 2021
## [1.17.0](1.16.0...1.17.0) (2021-05-05) ### Features * Checkbox Tile Variant ([#1104](#1104)) ([9936c4a](9936c4a)) * Implement ProcessListHeading subcomponent ([#1162](#1162)) ([964e34c](964e34c)) * New Component ProcessList MVP ([#1107](#1107)) ([1bc0f93](1bc0f93)) * New Component SiteAlert ([#1099](#1099)) ([c1e88e0](c1e88e0)) * New Component SummaryBox ([#1098](#1098)) ([b2279b4](b2279b4)) * Radio Button Tile Variant ([#1101](#1101)) ([a2f40a0](a2f40a0)) * Update Grid components to render any type of element ([#1166](#1166)) ([07468c8](07468c8)), closes [#1194](#1194) * Update Search component to support i18n ([#1192](#1192)) ([5241d15](5241d15)) * Update Table to 2.10.0 implementation ([#1110](#1110)) ([117a6c7](117a6c7))
brandonlenz
added a commit
that referenced
this pull request
May 12, 2021
* Add logic and Storybook examples for scrollable, compact, and striped; add tests for applied classNames striped and compact, check for enclosing div for scrollable * Add logic, Storybook examples, and tests for stacked styles; remove comments from code * Remove superfluous boolean variable * Add div to stacked styles in Storybook to apply width-mobile className, add logic to exclude compact className on stacked styles * Remove is false default assignments from passed in args to Table * Combine stackedStyles storybook examples by adding Storybook controls for bordered/borderless and headers/no headers options * Add test for borderless stacked table, remove queryByTestId in favor of getByRole for renders without errors, remove superfluous data-testid * Merge branch 'main' into ak-update-table-to-2.10-implementation-991 * Factor out repeated table code * Respond to PR feedback, update data-testid to more accurately reflect what the div represents, remove any assignments true, update scrollable Storybook example to use the same example data as USWDS * Update scrollable storybook example to have a border * Fix scrollable Storybook example data formatting * Continue to fix scrollable Storybook example data formatting * Add footnote p tag in scrollable storybook example, pass argTypes into striped storybook example to enable the storybook control for bordered * Add console warning for compact and stackStyle combination, add argType for striped and add to Storybook controls * Use Storybook viewport addon to default to mobile to show stacked styles rather than an enclosing div with width-mobile classname * Remove incorrect className from scrollableTestContent subheadings * Remove whitespace from package.json * Resolve conflicts in yarn.lock * Resolve conflicts in yarn.lock * Regenerate yarn.lock * Deleting yarn.lock * Regenerate yarn.lock Co-authored-by: Brandon Lenz <brandonalenz@gmail.com>
brandonlenz
pushed a commit
that referenced
this pull request
May 12, 2021
## [1.17.0](1.16.0...1.17.0) (2021-05-05) ### Features * Checkbox Tile Variant ([#1104](#1104)) ([9936c4a](9936c4a)) * Implement ProcessListHeading subcomponent ([#1162](#1162)) ([964e34c](964e34c)) * New Component ProcessList MVP ([#1107](#1107)) ([1bc0f93](1bc0f93)) * New Component SiteAlert ([#1099](#1099)) ([c1e88e0](c1e88e0)) * New Component SummaryBox ([#1098](#1098)) ([b2279b4](b2279b4)) * Radio Button Tile Variant ([#1101](#1101)) ([a2f40a0](a2f40a0)) * Update Grid components to render any type of element ([#1166](#1166)) ([07468c8](07468c8)), closes [#1194](#1194) * Update Search component to support i18n ([#1192](#1192)) ([5241d15](5241d15)) * Update Table to 2.10.0 implementation ([#1110](#1110)) ([117a6c7](117a6c7))
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.
Summary
This PR updates the USWDS Table component with
scrollable,striped,compact,stacked, andstacked-headervariations as added in the USWDS 2.10.0 release.Related Issues or PRs
closes #991
stackedStyle = 'none'in the function signature to assign a default value?This PR does not add the Sortable Table rows variant as that is future work to cover updates made by the USWDS 2.11.0 release.
Reviewers may notice some styling differences between our Storybook versus the USWDS examples, particularly with regards to fonts/text sizing. As Hana has noted further down in this PR, we suspect this is due to the difference in how USWDS applies their CSS to how we apply it, and is less relevant to this work as we are simply rendering those applied styles on children, not the Table component itself.
How To Test
Check out this branch and run
yarn testto execute tests andyarn storybookto see the new component in action.Alternatively, you can scroll to the bottom of this page and click "Show environments" on the right above the comment input box to access this component in Storybook.
Screenshots
Scrollable Table
Striped Table
Compact Table
Logged warning if the user attempts to apply both
compactandstackedStyleFrom the USWDS notes re: compact styling: "Pairs well with scrollable and striped variants, but is not suitable for use with stacked variants."
Stacked Table With Custom Controls
borderedandstackedStyle