Improve Table component API #960
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
added 8 commits
June 1, 2021 15:21
nextDirection is now optional (instad of null) and therefore moved to the third argument
This commit also fixes a TS error where sortLabel was not declared on the Cell type. It does not differentiate between header and body cells (same as before), which means that users might think that sorting-related props like sortLabel are available on body cells, where they are not. Unfortunately, making the types stricter here will require a larger refactoring around the table utils which are currently shared by the header and body cells alike.
This commit also includes a refactoring around how the sort options are handled, because we want to prevent the column from sorting if a sortLabel is not set. The main change is a new getSortParams util that is called in TableHead before the params are passed to the Table Header.
We should only export the main Table component and relevant types
This reverts commit a94f6a3. The testids are still set as defaults used in other Table components for testing, so it makes seense to keep it in the TableCell as well.
🦋 Changeset detectedLatest commit: 719818d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/sumup/oss-circuit-ui/24GvtW5xYoSx5vth3PwUVyfyqtnQ |
|
Hey @robinmetral, Thanks! |
Codecov Report
@@ Coverage Diff @@
## next #960 +/- ##
==========================================
- Coverage 91.55% 91.52% -0.04%
==========================================
Files 163 162 -1
Lines 2984 2973 -11
Branches 759 757 -2
==========================================
- Hits 2732 2721 -11
Misses 223 223
Partials 29 29
|
connor-baer
reviewed
Jun 7, 2021
packages/circuit-ui/components/Table/components/TableCell/TableCell.ts
Outdated
Show resolved
Hide resolved
packages/circuit-ui/components/Table/components/TableHeader/TableHeader.tsx
Outdated
Show resolved
Hide resolved
connor-baer
approved these changes
Jun 9, 2021
packages/circuit-ui/components/Table/components/TableHeader/TableHeader.tsx
Show resolved
Hide resolved
Merged
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.
Purpose
As a follow-up to #852 there were a few things we wanted to address around the Table component, as breaking changes for v3:
nextDirectionargument moved to the third position (index, nextDirection, rows👉index, rows, nextDirection) and can now beundefined(instead ofnullin the previous implementation). This improves the implementation with TypeScript since it becomes an optional parameter.sortableprop), the previously optionalsortLabelprop is now enforced. This is an accessibility requirement. If asortLabelis not provided, the column will not be sortable.sortableandsortLabelprops are missing, we should not apply the sorting event handlers, styles, etc.TableHeader,TableRowandTableCellcomponents are no longer exported from Circuit. They are only used internally by the Table component and should not be used directly.test-ids are no longer built into the component. They can still be passed manually. We could also recommend querying by role in testsBONUS (non-breaking): fixed a table header height bug on mobile when words would wrap and rows would become misaligned.
Approach and changes
☝️
Definition of done